front_end_dev | Technologies

Telegram-канал front_end_dev - FrontEndDev

29695

🚀 Статьи, новости, туториалы по 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

Введение в TanStack Router

Посмотрим на что способен TanStack Router и его основные фичи. Простые примеры: объявление роутов, работа с параметрами url, вложенные лейауты.

https://frontendmasters.com/blog/introducing-tanstack-router/

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

FrontEndDev

Ищем перфоманс проблемы в React приложениях

Еще один инструмент для поиска слабых мест, не требующий внесения изменений в код проекта.

https://github.com/aidenybai/react-scan#readme

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

FrontEndDev

Генерируем моковые запросы/ответы

Mocky — онлайн сервис для создания моков. Настраиваете параметры ответа, в том числе и заголовки и получаете url по которому можно делать запросы. Удобно, если не настроены локальные моки и нужно быстро что-то проверить.

https://designer.mocky.io/

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

FrontEndDev

Анимация добавления в корзину

Очередной необычный эффект для сайта с товарами.

Github | Демо

https://tympanus.net/codrops/2024/11/21/from-product-to-cart-adding-guiding-animations-to-the-shopping-experience/

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

FrontEndDev

Пишем свой аккордеон (музыкальный инструмент) на JavaScript

О том, как работать с WebAudio API и создавать звуки программно на JS.

https://www.taniarascia.com/musical-instrument-web-audio-api/

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

FrontEndDev

Как на самом деле работает position: sticky в CSS

Разбираемся, почему часто position: sticky работает не так, как ожидает разработчик.

https://web-standards.ru/articles/position-sticky/

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

FrontEndDev

Простое введение в Container Queries

Прошло уже несколько лет с тех пор как Container Queries стали доступны в браузерах. Но мало кто их использует в своей разработке, потому что они не так просты как Media Queries. Разберем их по полочкам, чтобы вы могли смело использовать их в работе.

https://www.joshwcomeau.com/css/container-queries-introduction/

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

FrontEndDev

15 советов и трюков по TypeScript

Небольшая подборка примеров продвинутого использования TS.

https://dev.to/mattlewandowski93/15-advanced-typescript-tips-and-tricks-you-might-not-know-12kk

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

FrontEndDev

Дебажим мобильное веб приложение на Android-смартфоне

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

https://jem-space.ru/mobile-degub-on-desktop/

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

FrontEndDev

Устали бороться с древним кодом? Чувствуете, что легаси по-тихоньку захватывает ваш проект? 😱

Приглашаем на онлайн-митап «Как лиду работать с легаси?», где лид фронтенд-разработчик Мерка, Никита Шальнев, поделится проверенными техниками борьбы с «программным наследием».

О чем будем говорить?
- Что такое легаси-код и откуда он берется?
- Как обнаружить легаси в проекте?
- Какую ошибку постоянно совершают лиды?
- Как предотвратить появление легаси и сохранить код чистым?
- Рефакторинг или ... может, ну его? 😜

Встречаемся с вами в 19:00 МСК в канале @merkteam ⬅️

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

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

FrontEndDev

JavaScript Import Attributes

Разбираемся с новым синтаксисом импортов в JS (ES2025) и какую проблему он решает

https://www.trevorlasn.com/blog/import-attributes-in-javascript

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

FrontEndDev

Яндекс приглашает на «Ночь опенсорс библиотек»

Мейнтейнеры крупных проектов расскажут, как коммитить так, чтобы ваш код всегда принимали. Frontend-разработчики смогут познакомиться с созданием интерфейсов в Gravity UI, научиться быстро кодить в HTML/CSS на emmet и упростить написание скриптов с помощью zx.

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

Мероприятие пройдет в московской Библиотеке иностранной литературы. Зарегистрироваться можно до 4 декабря по ссылке.

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

FrontEndDev

Современный CSS reset

Обычно базовые стили кочуют у разработчиков из проекта в проект. Что могло поменяться с течением времени? Josh Comeau делится своим набором стилей и тем, что в нем изменилось за последнее время.

https://www.joshwcomeau.com/css/custom-css-reset/

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

FrontEndDev

ResizeObserver API

ResizeObserver API — инструмент JavaScript для отслеживания изменений размеров HTML-элементов, полезный при работе с адаптивными и динамическими интерфейсами. Туториал, показывающий как создать экземпляр ResizeObserver, наблюдать за элементами и управлять событиями изменения размера.

https://blog.logrocket.com/how-to-use-the-resizeobserver-api-a-tutorial-with-examples/

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

FrontEndDev

CSS трюки с использованием одного градиента

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

https://css-tricks.com/css-tricks-that-use-only-one-gradient/?utm_source=CSS-Weekly&utm_campaign=Issue-597&utm_medium=web

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

FrontEndDev

IT-инженеры объединяйтесь! 🤝

Мы собрали огромную базу прикладной информации для IT-инженеров.

Выбирайте, что вам интересно:

Полупроводники

Высоконагруженные системы

Связь и космос

Промышленный дизайн

Нейроморфные технологии

Индустрия 4.0

Печатные платы

Технологии мира музыки

📌 Статьи, лекции, подкасты, кейсы из инженерной практики и тематические гайды в одном месте
@ultimate_engineer

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

FrontEndDev

Новый релиз кандидат - TypeScript 5.7

Улучшенная работа со Strict Null Checks, улучшения безопасности типов при работе с enum, добавлен утилитарный тип NoInfer и еще несколько улучшений новой версии TS

https://devblogs.microsoft.com/typescript/announcing-typescript-5-7/

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

FrontEndDev

Почта на прокачку: как повысить защиту Microsoft Exchange и не слить чувствительные данные в сеть

⏰ Когда: 27 ноября, 11:00 по Москве
📍 Регистрируйтесь на вебинар!

SuperHardio time*! Чтобы узнать, как захардкорить самое ценное и построить настоящий лабиринт для хакера, присоединяйтесь к нашему новому образовательному проекту от ИТ-экспертов Positive Technologies.

В программе:

- Что не так с типовой настройкой Microsoft Exchange 2019

- Топ-3 сценария уязвимостей

- Как ИТ-специалисту справиться с бременем ответственности за корректную работу почтового сервиса.

- Поговорим про харденинг Microsoft Exchange 2019 и особенности подхода к повышению киберустойчивости

Вебинар будет полезен архитекторам, CIO, СТО, DevOps-экспертам и техническим специалистам разных профилей. Присоединяйтесь!

*Это как "Марио тайм", время героев-экспертов харденинга

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

FrontEndDev

Использование ссылок с атрибутом ping

Новые возможности в привычных элементах — <a ping="url"> или как трекать действия пользователей без счетчиков.

https://jsdev.space/html-ping-attribute/

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

FrontEndDev

Довериться Вселенной и ждать, когда она сама тебя найдёт

💚 Подписаться на Avito Career и получать вакансии прямо в мессенджере.

В канале публикуют предложения для разных грейдов и направлений. От фронтенд-разработчиков до тимлидов.

Получайте актуальные вакансии и стажировки в Авито 👉 Подписывайтесь!

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

FrontEndDev

Лучшие практики по работе с Context API в React приложении

Михаил Непомнящий рассказывает как оптимизировать React приложение при работе с Context API.

https://www.youtube.com/watch?v=zmAL9revylc

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

FrontEndDev

Ждём фронтендеров на Yet Another Frontend Night!

📅 23 ноября мы приглашаем разработчиков интерфейсов провести вечер в офисе Яндекса на Льва Толстого.

О мероприятии:

YAFN — это митап, на котором вы можете послушать экспертов из Яндекса, узнать о вакансиях в наших командах и развлечься в кругу коллег.

Если вы не в Москве, мы всё равно вас ждём — на онлайн-трансляции.

О программе:

Выступление Руслана Муфтиева, руководителя разработки интерфейсов Ecom-сценариев
Батл — ведущие эксперты Яндекса попробуют разобраться, должен ли фронтендер понимать продукт и нужны ли ему навыки менеджера
Презентация вакансий — узнайте, к каким фронтенд-командам можно присоединиться
Code in the Dark — победитель получит Яндекс Станцию Дуо Макс, а финалисты — станции Лайт 2. А ещё будет «Доббль»!
Афтерпати и нетворкинг — под закуски, напитки и музыку

🔗 Оставить заявку на участие можно по ссылке. Дождитесь подтверждения вашего участия.

❤️ Ждём вас!

Реклама. ООО "Яндекс", ИНН 7736207543.

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

FrontEndDev

Введение в API MutationObserver

Короткая заметка о том, что такое MutationObserver, зачем он нужен и как с помощью него отслеживать изменения DOM элемента.

https://css-live.ru/articles/vvedenie-v-api-mutationobserver-iz-javascript.html

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

FrontEndDev

30 простых (и не очень) анимаций на CSS

Подборка анимаций на чистом CSS чтобы оживить ваше приложение.

https://blog.hubspot.com/website/css-animation-examples

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

FrontEndDev

Promise - краткое руководство

Ёмкая документация от Доки по работе с промисами: синтаксис, методы, цепочки вызовов, промисификация функций с колбэком.

https://doka.guide/js/promise/

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

FrontEndDev

Почему оптимизация Lighthouse score не гарантия быстрого сайта?

А также почему фикс по рекомендациям Lighthouse это хороший старт для улучшений приложений.

https://www.smashingmagazine.com/2024/11/why-optimizing-lighthouse-score-not-enough-fast-website/

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

FrontEndDev

Разбираемся с процессом рендеринга в браузере

Один из частых вопросов на собеседовании - вы вводите адрес в строку браузера и нажимаете Enter, что происходит дальше?
Подробное описание стадий - от отправки запроса до отображения пикселей на экране.

https://abhisaha.com/blog/exploring-browser-rendering-process

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

FrontEndDev

10 советов по SEO для разработчиков

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

https://thenewstack.io/top-10-javascript-seo-tricks-every-developer-should-know/

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

FrontEndDev

Фронтенд в картинках — просто, наглядно и понятно. Новые знания в компактном формате каждый день.

Присоединяйтесь: @FrontendPortal

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

FrontEndDev

WebView-приложения. Время гибридных технологий

Андрей Симонов в своем докладе рассказывает, почему появление гибридов — это естественная эволюция, что они дадут разработчику и бизнесу.

https://www.youtube.com/watch?v=l87upW6M9Bw

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