29695
🚀 Статьи, новости, туториалы по frontend разработке. http://jem-space.ru Admin: @jem_jem Пишу в @five_a_m Хорошие серваки от DigitalOcean: https://m.do.co/c/1351d64475ee Реклама: http://bit.ly/2NxmVDu № 4850240725
Копаем глубже в Feature-Sliced Design
Александр Моргунов кратко разбирает FSD, делится опытом его использования и раскрывает некоторые моменты, не описанные в его документации. А также отвечает на главный вопрос: нужен вам FSD или нет?
https://www.youtube.com/watch?v=M84x3pzDYr0
Адвент календарь по TS
25 задачек по TypeScript чтобы скрасить ваш декабрь 😁
https://adventofcode.com/2024
Стилизуем рамки элементов с background-clip: border-area
Как работает новое свойство background-clip: border-area, доступное пока только в Safari 18.2, и чем оно отличает от border-image.
https://webkit.org/blog/16214/background-clip-border-area/
IT-инженеры — объединяйтесь! 🤝
Мы собрали огромную базу прикладной информации для IT-инженеров.
Выбирайте, что вам интересно:
— Полупроводники
— Высоконагруженные системы
— Связь и космос
— Промышленный дизайн
— Нейроморфные технологии
— Индустрия 4.0
— Печатные платы
— Технологии мира музыки
📌 Статьи, лекции, подкасты, кейсы из инженерной практики и тематические гайды в одном месте @ultimate_engineer
Новый релиз кандидат - TypeScript 5.7
Улучшенная работа со Strict Null Checks, улучшения безопасности типов при работе с enum, добавлен утилитарный тип NoInfer и еще несколько улучшений новой версии TS
https://devblogs.microsoft.com/typescript/announcing-typescript-5-7/
Почта на прокачку: как повысить защиту Microsoft Exchange и не слить чувствительные данные в сеть
⏰ Когда: 27 ноября, 11:00 по Москве
📍 Регистрируйтесь на вебинар!
SuperHardio time*! Чтобы узнать, как захардкорить самое ценное и построить настоящий лабиринт для хакера, присоединяйтесь к нашему новому образовательному проекту от ИТ-экспертов Positive Technologies.
В программе:
- Что не так с типовой настройкой Microsoft Exchange 2019
- Топ-3 сценария уязвимостей
- Как ИТ-специалисту справиться с бременем ответственности за корректную работу почтового сервиса.
- Поговорим про харденинг Microsoft Exchange 2019 и особенности подхода к повышению киберустойчивости
Вебинар будет полезен архитекторам, CIO, СТО, DevOps-экспертам и техническим специалистам разных профилей. Присоединяйтесь!
*Это как "Марио тайм", время героев-экспертов харденинга
Использование ссылок с атрибутом ping
Новые возможности в привычных элементах — <a ping="url"> или как трекать действия пользователей без счетчиков.
https://jsdev.space/html-ping-attribute/
Довериться Вселенной и ждать, когда она сама тебя найдёт
💚 Подписаться на Avito Career и получать вакансии прямо в мессенджере.
В канале публикуют предложения для разных грейдов и направлений. От фронтенд-разработчиков до тимлидов.
Получайте актуальные вакансии и стажировки в Авито 👉 Подписывайтесь!
Лучшие практики по работе с Context API в React приложении
Михаил Непомнящий рассказывает как оптимизировать React приложение при работе с Context API.
https://www.youtube.com/watch?v=zmAL9revylc
Ждём фронтендеров на Yet Another Frontend Night!
📅 23 ноября мы приглашаем разработчиков интерфейсов провести вечер в офисе Яндекса на Льва Толстого.
О мероприятии:
YAFN — это митап, на котором вы можете послушать экспертов из Яндекса, узнать о вакансиях в наших командах и развлечься в кругу коллег.
Если вы не в Москве, мы всё равно вас ждём — на онлайн-трансляции.
О программе:
— Выступление Руслана Муфтиева, руководителя разработки интерфейсов Ecom-сценариев
— Батл — ведущие эксперты Яндекса попробуют разобраться, должен ли фронтендер понимать продукт и нужны ли ему навыки менеджера
— Презентация вакансий — узнайте, к каким фронтенд-командам можно присоединиться
— Code in the Dark — победитель получит Яндекс Станцию Дуо Макс, а финалисты — станции Лайт 2. А ещё будет «Доббль»!
— Афтерпати и нетворкинг — под закуски, напитки и музыку
🔗 Оставить заявку на участие можно по ссылке. Дождитесь подтверждения вашего участия.
❤️ Ждём вас!
Реклама. ООО "Яндекс", ИНН 7736207543.
Введение в API MutationObserver
Короткая заметка о том, что такое MutationObserver, зачем он нужен и как с помощью него отслеживать изменения DOM элемента.
https://css-live.ru/articles/vvedenie-v-api-mutationobserver-iz-javascript.html
30 простых (и не очень) анимаций на CSS
Подборка анимаций на чистом CSS чтобы оживить ваше приложение.
https://blog.hubspot.com/website/css-animation-examples
Promise - краткое руководство
Ёмкая документация от Доки по работе с промисами: синтаксис, методы, цепочки вызовов, промисификация функций с колбэком.
https://doka.guide/js/promise/
Почему оптимизация Lighthouse score не гарантия быстрого сайта?
А также почему фикс по рекомендациям Lighthouse это хороший старт для улучшений приложений.
https://www.smashingmagazine.com/2024/11/why-optimizing-lighthouse-score-not-enough-fast-website/
Разбираемся с процессом рендеринга в браузере
Один из частых вопросов на собеседовании - вы вводите адрес в строку браузера и нажимаете Enter, что происходит дальше?
Подробное описание стадий - от отправки запроса до отображения пикселей на экране.
https://abhisaha.com/blog/exploring-browser-rendering-process
❓ Хотите создать свою первую веб-страницу с нуля? Без магии и кодерских заклинаний — только HTML, CSS и ваши идеи!
👉 На открытом вебинаре «Создаем свою первую страницу: HTML и CSS» вы узнаете, как работают основные элементы веб-разработки: от структуры HTML до современной стилизации с CSS.
Мы разберем шаги, которые помогают создать не просто страницу, а основу для вашего портфолио или будущего сайта!
💪 Это ваш шанс научиться веб-разработке, используя простой и мощный инструментарий. Уже на вебинаре вы создадите свою первую веб-страницу — с текстом, картинками и уникальным дизайном!
⏰ Регистрируйтесь на открытый урок 3 декабря в 19:00 мск! Урок проходит в преддверии старта курса «Fullstack Developer», участники вебинара получат скидку на обучение.
👉 Для участия зарегистрируйтесь: https://otus.pw/AhpD/
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru
Эксперимент: автоматический запуск View Transitions с помощью MutationObserver
Интересный подход и реализация переходов для создания более приятного и плавного интерфейса.
https://www.bram.us/2024/11/25/experiment-automatically-triggered-view-transitions-with-mutationobserver
Введение в TanStack Router
Посмотрим на что способен TanStack Router и его основные фичи. Простые примеры: объявление роутов, работа с параметрами url, вложенные лейауты.
https://frontendmasters.com/blog/introducing-tanstack-router/
Ищем перфоманс проблемы в React приложениях
Еще один инструмент для поиска слабых мест, не требующий внесения изменений в код проекта.
https://github.com/aidenybai/react-scan#readme
Генерируем моковые запросы/ответы
Mocky — онлайн сервис для создания моков. Настраиваете параметры ответа, в том числе и заголовки и получаете url по которому можно делать запросы. Удобно, если не настроены локальные моки и нужно быстро что-то проверить.
https://designer.mocky.io/
Анимация добавления в корзину
Очередной необычный эффект для сайта с товарами.
Github | Демо
https://tympanus.net/codrops/2024/11/21/from-product-to-cart-adding-guiding-animations-to-the-shopping-experience/
Пишем свой аккордеон (музыкальный инструмент) на JavaScript
О том, как работать с WebAudio API и создавать звуки программно на JS.
https://www.taniarascia.com/musical-instrument-web-audio-api/
Как на самом деле работает position: sticky в CSS
Разбираемся, почему часто position: sticky работает не так, как ожидает разработчик.
https://web-standards.ru/articles/position-sticky/
Простое введение в Container Queries
Прошло уже несколько лет с тех пор как Container Queries стали доступны в браузерах. Но мало кто их использует в своей разработке, потому что они не так просты как Media Queries. Разберем их по полочкам, чтобы вы могли смело использовать их в работе.
https://www.joshwcomeau.com/css/container-queries-introduction/
15 советов и трюков по TypeScript
Небольшая подборка примеров продвинутого использования TS.
https://dev.to/mattlewandowski93/15-advanced-typescript-tips-and-tricks-you-might-not-know-12kk
Дебажим мобильное веб приложение на Android-смартфоне
Как отловить специфичный для мобильной платформы баг или понять особенности выполнения кода на реальных устройствах с помощью adb и DevTools.
https://jem-space.ru/mobile-degub-on-desktop/
Устали бороться с древним кодом? Чувствуете, что легаси по-тихоньку захватывает ваш проект? 😱
Приглашаем на онлайн-митап «Как лиду работать с легаси?», где лид фронтенд-разработчик Мерка, Никита Шальнев, поделится проверенными техниками борьбы с «программным наследием».
О чем будем говорить?
- Что такое легаси-код и откуда он берется?
- Как обнаружить легаси в проекте?
- Какую ошибку постоянно совершают лиды?
- Как предотвратить появление легаси и сохранить код чистым?
- Рефакторинг или ... может, ну его? 😜
Встречаемся с вами в 19:00 МСК в канале @merkteam ⬅️
👉 Подписывайтесь, чтобы не пропустить митап, а заодно быть в курсе других мероприятий, открытых вакансий в Мерке и полезных айти-новостей от меркурианских разработчиков.
JavaScript Import Attributes
Разбираемся с новым синтаксисом импортов в JS (ES2025) и какую проблему он решает
https://www.trevorlasn.com/blog/import-attributes-in-javascript
Яндекс приглашает на «Ночь опенсорс библиотек»
Мейнтейнеры крупных проектов расскажут, как коммитить так, чтобы ваш код всегда принимали. Frontend-разработчики смогут познакомиться с созданием интерфейсов в Gravity UI, научиться быстро кодить в HTML/CSS на emmet и упростить написание скриптов с помощью zx.
Там же можно будет сделать свой первый коммит, принять участие в мини-хакатонах, лекциях и воркшопах, изучить генеративную визуализацию с лайфкодингом под живую музыку, посетить книжную лавку и не только.
Мероприятие пройдет в московской Библиотеке иностранной литературы. Зарегистрироваться можно до 4 декабря по ссылке.
Современный CSS reset
Обычно базовые стили кочуют у разработчиков из проекта в проект. Что могло поменяться с течением времени? Josh Comeau делится своим набором стилей и тем, что в нем изменилось за последнее время.
https://www.joshwcomeau.com/css/custom-css-reset/