FrontEndDev

02 Sep 2024 10:32

Мониторим показатели Web Vitals с web-vitals.js

Показатели CLS, INP и LCP теперь можно удобно отслеживать в консоли без необходимости запускать Lighthouse!

https://www.debugbear.com/blog/core-web-vitals-js

FrontEndDev

29 Aug 2024 00:25

CSS Grid Areas

Свежий взгляд на CSS grid template areas и как использовать их потенциал по максимуму. Интерактивное руководство.

https://ishadeed.com/article/css-grid-area/

FrontEndDev

28 Aug 2024 12:48

Делаем таймер обратного отсчета на чистом CSS

https://blog.logrocket.com/how-to-build-countdown-timer-using-css/

FrontEndDev

27 Aug 2024 19:05

10 консольных команд, необходимых для разработчика

Grep, cat, tail и ещё несколько команд, которые повышают удобство и скорость разработки.

https://www.trevorlasn.com/blog/10-essential-terminal-commands-every-developer-should-know

FrontEndDev

26 Aug 2024 13:33

Больше никаких плохих контролов!

Эти карточки появились благодаря яндексовской конференции «Я 💛 Фронтенд 2024». Ребята из Яндекса сделали их на основе доклада Ильи Бирмана, арт-директора Бюро Горбунова.

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

Полезные посты для фронтендеров вроде этого регулярно публикуют на канале [Yandex for Frontend]. Подписывайтесь, ребята готовят много интересного!

FrontEndDev

26 Aug 2024 01:26

Что нового в ECMAScript 2024

▫️Улучшенная работа с unicode
▫️Atomics.waitAsync
▫️Расширяемые ArrayBuffer
▫️Promise.withResolvers

Подробнее:
https://pawelgrzybek.com/whats-new-in-ecmascript-2024/

FrontEndDev

23 Aug 2024 15:28

True Myth

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

https://github.com/true-myth/true-myth

FrontEndDev

22 Aug 2024 13:01

Уверены, что в коде вашего сайта нет уязвимостей? 💻

За последние три года в 63% случаев именно веб-приложения оказались исходным вектором атаки хакеров (данные Positive Technologies).

Проверить свой веб-ресурс на наличие уязвимостей можно с помощью бесплатного анализатора PT BlackBox Scanner. Для этого вам нужно только ввести его домен на сайте сервиса. А после регистрации будут доступны все возможности сканера (тоже бесплатно) 🎯

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

🐈‍⬛ Проверить веб-ресурс с помощью PT BlackBox Scanner

FrontEndDev

21 Aug 2024 10:57

45 шорткатов для VS Code

Улучшаем продуктивность при работе с VS Code (все, конечно, не запомните, но хоть какие-то из 45 вам приглянутся).

https://www.sitepoint.com/visual-studio-code-keyboard-shortcuts/

FrontEndDev

20 Aug 2024 09:49

Частые причины утечек памяти в JS

Излишняя сложность, замыкания и глобальные переменные - все это сказывается на потреблении памяти. Расскажем, какие есть способы мониторинга и устранения утечек.

https://www.trevorlasn.com/blog/common-causes-of-memory-leaks-in-javascript

FrontEndDev

19 Aug 2024 14:48

Создание игры весом в 13КБ: история создания Space Huggers

О том, как создаются игры из категории JS13K и какие задачи приходится решать: дизайн, анимации, карты, звуковые эффекты и многое другое.

https://frankforce.com/space-huggers-how-i-made-a-game-in-13-kilobytes/

FrontEndDev

18 Aug 2024 17:25

Как Google обрабатывает веб-приложения при индексации

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

https://vercel.com/blog/how-google-handles-javascript-throughout-the-indexing-process

FrontEndDev

16 Aug 2024 11:13

Новый релиз Puppeteer с поддержкой Firefox

Puppeteer 23 теперь поддерживает не только Chrome, но и Firefox, что упростит кроссбраузерное тестирование.

https://hacks.mozilla.org/2024/08/puppeteer-support-for-firefox/

FrontEndDev

15 Aug 2024 02:09

Машинное обучения на JavaScript

Введение в ML разработку c ML5.js.
ML5 - библиотека, основанная на Tensorflow, предоставляющая упрощенный интерфейс для интеграции в веб приложения.

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

FrontEndDev

12 Aug 2024 15:30

Друзья, приглашаю вас на FrontendConf 2024 — одно из крупнейших ежегодных событий в мире frontend, где соберутся профессионалы для обмена опытом и новыми идеями.

🗓 30 сентября и 1 октября в Москве, в кластере "Ломоносов", более 1000 участников обсудят новейшие тенденции во фронтенде.

Программа включает 51 доклад с реальными кейсами, дебаты и фейл-митапы. В этом году особое внимание уделено внедрению ML в продукты и применению нейросетей для повышения производительности. Александр Шатилов и Илья Никитин обсудят ИИ в пользовательских интерфейсах и верстке.

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

Программа конференции уже на сайте

Регистрируйтесь и присоединяйтесь к FrontendConf 2024, чтобы зарядиться энергией, завести новые профессиональные связи и вдохновиться на работу над своими проектами!

⚠ Внимание, с 1 сентября будет повышение цен на билеты, поэтому успейте купить билет заранее.

FrontEndDev

29 Aug 2024 23:20

Telegram Mini App. Как создать Web App с нуля

Туториал по созданию веб-приложения для Telegram и работе с Telegram API.

https://habr.com/ru/companies/amvera/articles/838180/

FrontEndDev

28 Aug 2024 13:02

‼️Тест по React JS от OTUS

— Ответьте на 30 вопросов и проверьте, насколько хорошо вы знаете язык.
Сможете сдать — пройдёте на продвинутый онлайн-курс по React.js по спец. цене!

👉ПРОЙТИ ТЕСТ - https://vk.cc/czSWZI

Курс доступен в рассрочку.

❇️ Пройдите тест и получите:
✔️ Живое общение с экспертами
✔️Получите видео-курс по Git в подарок
✔️ Лучшие открытые уроки прошлых наборов курса
✔️ Продвинутые темы и практика на «боевых» задачах уровня Middle+
✔️ Скидку на прохождение онлайн курса «React.js Developer»

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

FrontEndDev

28 Aug 2024 00:09

Кастомный слайдер с использованием API привязки позиционирования

Пошаговый туториал по созданию слайдера на основе современных фич CSS: Anchor Positioning API и Scroll-Driven Animation.

https://frontendmasters.com/blog/custom-range-slider-using-anchor-positioning-scroll-driven-animations/

FrontEndDev

26 Aug 2024 18:51

Настраиваем деплой приложений с Dokku

Dokku - это мини-Heroku, который можно установить на свой сервер и удобно деплоить приложения командой git push.
В статье — пошаговый туториал по установке, первоначальной настройке и конфигурации приложений для деплоя.

https://jem-space.ru/dokku-deploy/

FrontEndDev

26 Aug 2024 09:52

Пишем в буфер обмена с помощью JS

Основы работы с Clipboard API и некоторые нюансы его использования.

https://frontendmasters.com/blog/writing-to-the-clipboard-in-javascript/

FrontEndDev

24 Aug 2024 16:56

Советы по CSS

Профессиональные советы как с популярными, так и с малоизвестными решениями по работе с CSS.

https://github.com/AllThingsSmitty/css-protips/tree/master/translations/ru-RU

FrontEndDev

23 Aug 2024 11:16

Набор инструментов для веб разработки

Большая подборка инструментов для разработки, разбитая на категории: UI киты, библиотеки для анимации, расширения для Chrome, иконки и многое другое.

https://surffers.notion.site/surffers/The-Best-Web-Development-Tools-2cf90734ead54d748edaf706120728d8

FrontEndDev

22 Aug 2024 10:28

Релиз Storybook 8.2

Что нового: хуки, портативные стори, онбординг.

Подробнее по ссылке: https://storybook.js.org/blog/storybook-8-2/

FrontEndDev

20 Aug 2024 11:50

Создаем 3D иллюстрации на CSS

Сложно, но возможно: пошаговый гайд по созданию красивых иллюстраций

https://frontend.horse/articles/creating-3d-illustrations-with-css/

FrontEndDev

19 Aug 2024 16:55

Создаем свой собственный React Query

14 минутный тутораил по созданию собственного React Query с нуля. Залипательное видео, позволяющее понять как React Query работает под капотом

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

FrontEndDev

19 Aug 2024 11:31

🚀 Вебинар для frontend и JavaScript разработчиков! 🚀
👉 Узнайте, какими задачами проверяют ваше знание JavaScript на интервью.

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

Этот вебинар поможет вам лучше понять тонкости разработки, анализировать задачи и эффективно готовиться к интервью. Примеры задач, их анализ и способы подготовки – все это и многое другое!

📅 Дата: 22.08.2024 в 20:00
🔗 Присоединяйтесь и улучшите свои навыки JavaScript!
Встречаемся в преддверии старта курса «JavaScript Developer. Basic». Все участники вебинара получат специальную цену на обучение!

👉 Для участия и получения записи зарегистрируйтесь: https://vk.cc/czri5m

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

FrontEndDev

16 Aug 2024 14:58

Создаем шрифты в браузере

typlr — онлайн инструмент позволяющий относительно просто создать свой собственный шрифт.

https://typlr.app/

FrontEndDev

16 Aug 2024 02:08

Изучаем возможности нативных декораторов в JS

Декораторы неизбежно станут частью стандарта, так что уже можно посмотреть, в каких случаях и как можно будет их применять.

https://frontendmasters.com/blog/exploring-the-possibilities-of-native-javascript-decorators/

FrontEndDev

13 Aug 2024 06:15

12 лучших библиотек для анимации

Несколько интересных инструментов для анимации, в том числе давно знакомые GSAP, Anime.js, Three.js и Framer Motion.

https://dev.to/vyan/12-best-javascript-animation-libraries-to-supercharge-your-web-projects-in-2024-21ka

FrontEndDev

12 Aug 2024 13:14

Transition к `height: auto` и `display: none`

Как на чистом CSS реализовать переходы используя новые функции.

https://blog.css-weekly.com/transition-to-height-auto-display-none-using-pure-css