front_end_dev | Technologies

Telegram-канал front_end_dev - FrontEndDev

29771

🚀 Статьи, новости, туториалы по frontend разработке. http://jem-space.ru Admin: @jem_jem Пишу в @five_a_m Хорошие серваки от DigitalOcean: https://m.do.co/c/1351d64475ee Реклама: http://bit.ly/2NxmVDu № 4850240725

Subscribe to a channel

FrontEndDev

📕Открытый урок по API и JavaScript для начинающих разработчиков JavaScript, Fullstack и тем, кто знаком с основами HTML и CSS

На открытом уроке 11 марта в 20:00 мск мы узнаем всё о том, как быстро и эффективно войти в Fullstack-разработку.

📗В результате вы:
- Узнаете, как быстро создать веб-приложение, работающее с реальными данными;
- Изучите основные методы использования JavaScript для обновления интерфейса без перезагрузки страницы;
- Освоете практические навыки для подключания к API, получения и отображения данных, а также научитесь превращать базовую HTML-страницу в полноценное интерактивное веб-приложение.

👉 Регистрируйтесь прямо сейчас, чтобы не пропустить мероприятие: https://otus.pw/jEYE/

📙 Все участники открытого урока получат скидку на курс "Fullstack Developer"

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

Читать полностью…

FrontEndDev

CSS Grid или Flexbox

Когда применять CSS Grid, а когда Flexbox для создания адаптивных веб-дизайнов. Среди кейсов сложные макеты, точное расположение элементов и одно-двумерные сетки.

https://unicornclub.dev/articles/2025-02-25-css-grid-or-flexbox-know-when-to-use-each-for-better-layouts/

Читать полностью…

FrontEndDev

Функции в CSS

Уже сейчас вы можете попробовать работу с CSS функциями в Chrome Canary под экспериментальным флагом. Чуть подробнее об аргументах, проверке типов и возвращаемых значениях — в статье.

https://css-tricks.com/functions-in-css/

Читать полностью…

FrontEndDev

🚀Приглашаем на бесплатный урок «Bun – быстрый альтернативный рантайм для Node.js»от онлайн-курса Node.js Developer 05 марта 20:00 (мск).

Что будет на вебинаре?
1️⃣Разбор возможностей Bun: быстрый сервер, менеджер пакетов и тестирование.
2️⃣Сравнение Bun с Node.js: плюсы, минусы, производительность.
3️⃣Практическое применение Bun в реальных проектах.

Кому вебинар будет полезен?
- Фронтент,
- Фуллстэк,
- Бэкенд разработчикам на Node.js
- И других языках для web'а.

Что узнают участники вебинара?
✅ Как использовать Bun для запуска серверов и выполнения JavaScript-приложений.
✅ Как переходить с Node.js на Bun и какие сценарии использования подходят лучше всего.

⏰ Успейте зарегистрироваться на бесплатный вебинар 05 марта 20:00 (мск). Запись ограничена: https://otus.pw/VP09/

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

Читать полностью…

FrontEndDev

Реклама Typescript

Аксель Раушмайер рассказывает о преимуществах использования TypeScript для разработчиков и компаний и как он помогает в долгосрочной поддержке и масштабировании проектов.

https://2ality.com/2025/03/typescript-sales-pitch.html

Читать полностью…

FrontEndDev

Компонент звездного рейтинга на чистом CSS

Пример реализации компонента, а также его модификаций с использованием псевдоэлементов.

https://css-tricks.com/a-css-only-star-rating-component-and-more-part-1/

Читать полностью…

FrontEndDev

Конкуренция за пропускную способность сети

Как одновременная загрузка множества ресурсов может замедлять отображение страницы и какие существуют стратегии для оптимизации этого процесса

https://www.debugbear.com/blog/bandwidth-competition-page-speed

Читать полностью…

FrontEndDev

Интерактивная игра для изучения CSS anchor positioning

40 уроков для изучения основ и продвинутых техник при работе с anchor positioning.

https://anchoreum.com/#ru

Читать полностью…

FrontEndDev

SVG в React и зачем вам BFF: подъехали доклады с «Я💛Фронтенд»

На прошлых выходных прошла конференция Яндекса для фронтенд-сообщества. Посмотреть все выступления можно в записи трансляции.

О чём говорили:
— «Антология полезностей в TypeScript»: рассказали, как повысить типобезопасность вашего кода
— «Нативные поповеры с Popover API»: как работать с вебом без JS и что там с поддержкой Popover API
—«Логируем МНОГО!»: посмотрели на разные инструменты дебага и логирования

Перед ивентом Сергей Бережной и другие участники записали подкаст о том, как переписать отдельные части кода так, чтобы он был «красивым», производительным, коротким или, наоборот, витиеватым.

Читать полностью…

FrontEndDev

Задержки в Event Loop

Как возникают задержки в Event Loop и как они влияют на производительность NodeJs приложений. А также способы их мониторинга и устранения.

https://trigger.dev/blog/event-loop-lag

Читать полностью…

FrontEndDev

WebSocket и Socket.IO: в чем разница?

Основные различия между WebSocket и библиотекой Socket.IO: функциональность, удобство использования и идеальные сценарии применения. Из преимуществ Socket.IO: поддержка автоматического переподключения и возможность работы с несколькими протоколами.

https://jsdev.space/websocket-socketio/

Читать полностью…

FrontEndDev

Работа с Context API в React

Обзорная статья о том, как Context API помогает управлять состоянием приложения и шарить данные между компонентами без необходимости передавать их через props. Примеры использования Context API.

https://blog.logrocket.com/react-context-tutorial/

Читать полностью…

FrontEndDev

TTFB и его значимость для производительности

Cтратегии для улучшения TTFB и общей скорости загрузки страниц с учетом различных факторов.

https://smashingmagazine.com/2025/02/time-to-first-byte-beyond-server-response-time/

Читать полностью…

FrontEndDev

Пишем более чистый и понятный код с eslint-plugin-de-morgan

Плагин предлагает правила для преобразования логических выражений, чтобы избежать избыточных операторов и улучшить читаемость

https://github.com/azat-io/eslint-plugin-de-morgan

Читать полностью…

FrontEndDev

Оптимизируем Critical Rendering Path

О том, что такое Critical Rendering Path и о методах ускорения загрузки и отображения контента: минимизация CSS, JavaScript и оптимизация порядка загрузки ресурсов.

https://www.debugbear.com/blog/optimizing-the-critical-rendering-path

Читать полностью…

FrontEndDev

Объединения и пересечения объектных типов в TypeScript

Улучшаем типизацию и упрощаем работу с объектами в TS

https://2ality.com/2025/03/object-type-union-intersection.html

Читать полностью…

FrontEndDev

Продвинутая обработка ошибок в JavaScript

Способы создания кастомных ошибок в JavaScript для улучшения обработки исключений и рекомендации по их эффективному использованию. А также общие подходы к обработке ошибок и их логированию.

https://feeds.dzone.com/link/23564/16977198/advanced-error-handling-in-javascript-custom-error

Читать полностью…

FrontEndDev

Оцениваем размер пакета с pkg-size

Информация о размере пакета, его зависимостях и экспортируемых функциях. Удобно, чтобы глянуть перед установкой.

https://pkg-size.dev/

Читать полностью…

FrontEndDev

Введение в View Transitions API

Использование относительно нового API для создания плавных переходов между разными состояниями элементов на странице

https://css-tricks.com/toe-dipping-into-view-transitions/

Читать полностью…

FrontEndDev

Умельцы запустили DOOM на типах TypeScript

На самом деле один умелец. И чтобы это сделать ему понадобилось собрать отдельный мощнейший комп 🤯

https://www.youtube.com/watch?v=0mCsluv5FXA

Читать полностью…

FrontEndDev

Yandex B2B Tech запустила тестирование SourceCraft — новой платформы для разработки

Она включает в себя AI-ассистента, который помогает автодополнять код, а также CI/CD-инструменты, эластичный Git (на базе S3) и удобную навигацию. В будущем также появится нативная интеграция с сервисами Yandex Cloud. По сути SourceCraft – пространство, где можно писать, тестировать, хранить и развёртывать код без лишних сложностей.

Платформа уже доступна в Technical Preview. Оставьте заявку и протестируйте новый уровень разработки.

sourcecraft.dev

Читать полностью…

FrontEndDev

ESLint теперь официально поддерживает линтинг CSS

https://eslint.org/blog/2025/02/eslint-css-support/

Читать полностью…

FrontEndDev

CSS Multi-Column Layout

Возможности CSS для создания макетов с колонками, как в газетах или журналах. Основные свойства, преимущества, ограничения и практические примеры применения Multi-Column Layout.

https://css-tricks.com/revisiting-css-multi-column-layout/

Читать полностью…

FrontEndDev

F.I.R.S.T принципы в тестировании

Улучшаем качество и эффективность тестов с применением принципов F.I.R.S.T. — вводная статья с примерами.

https://jsdev.space/first-principles-testing/

Читать полностью…

FrontEndDev

Interop 2025

Очередной год новшеств и улучшений веб платформы. На что будет основной упор в 2025?

https://web.dev/blog/interop-2025

Читать полностью…

FrontEndDev

🍳 — Чем ты занимаешься?
💻 — Айтишник.
🍳 — А в свободное время?
💻 — Делаю лучший скрэмбл в мире.

В 5-ти новых сериях «Люди Битрикс» разработчики рассказали, как находят баланс между кодом и любимыми хобби. Кто-то варит идеальный кофе, кто-то тренируется в бассейне, а кто-то знает, какой связать милую игрушку 😍

Заходите смотреть!

Читать полностью…

FrontEndDev

Условные типы в TypeScript

Как использовать условные типы для упрощения кода и повышения его гибкости + примеры использования условных типов в различных сценариях

https://2ality.com/2025/02/conditional-types-typescript.html

Читать полностью…

FrontEndDev

🚀Приглашаем на бесплатный урок «React и графические библиотеки: визуализация данных» от онлайн-курса React.js Developer 20 февраля 19:00 (мск).

Что будет на вебинаре?
- Обзор популярных графических библиотек для React.
- Установка и настройка необходимых зависимостей в проект React.
- Примеры визуализации данных.

Кому вебинар будет полезен?
- React разработчикам, работающим с аналитикой и данными.
- Разработчикам, желающим улучшить UI своих приложений.
- Командам, внедряющим инструменты для анализа и представления данных.

Что узнают участники вебинара?
✅Как визуализировать данные в React.
✅Как интегрировать визуализации в существующие приложения.
✅Как создавать интуитивно понятные и привлекательные визуализации для пользователей.

⏰ Успейте зарегистрироваться на бесплатный вебинар 20 февраля 19:00 (мск). Запись ограничена: https://otus.pw/0MOJ/

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

Читать полностью…

FrontEndDev

Flexbox Labs

Удобный генератор лейаутов с grid и flexbox элементами. Можно выбрать готовый вариант или тыкать и смотреть как применяются свойства для контейнера и вложенных элементов.

https://flexboxlabs.netlify.app/

Github: https://github.com/prazzon/flexbox-labs

Читать полностью…

FrontEndDev

Архитектура фронтенда на основе вертикальных слайсов

Как вертикальные слайсы могут помочь в масштабировании проекта и управлении сложностью приложения. Еще один взгляд на архитектуру фронтенд приложений.

https://amorgunov.com/posts/2023-05-28-vertical-sliced-architecture-in-frontend/

Читать полностью…
Subscribe to a channel