Фронтендер от бога
3.58K subscribers
1.12K photos
19 videos
1.08K links
Божественные дайджесты по фронтенду и немного юмора.

По всем вопросам: @godinmedia
Download Telegram
JavaScript. Обработка событий на
примерах

Автор:
Янцев В. В
Год издания: 2021

#javascript #ru

Скачать книгу
👍4🔥2👌1
Что означает гидратация

#почитать

Короткий ответ: это процесс, в ходе которого JavaScript выполняет, согласовывает и делает интерактивным HTML, уже находящийся в DOM, посредством рендеринга на стороне сервера (SSR).

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6🔥1👌1
Система типов и настройки TS

#почитать

Обязательно устанавливайте флажок strict. Он подключает дополнительные проверки типов.

При реализации интерфейсов, и работе с объектами корректность соблюдения принципа подстановки Барбары Лисков ложится на плечи разработчиков.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4🔥2👌1
Как фронтенд-разработчику затащить на собесе

#почитать

Фронтендеру мало знать один только JavaScript. Разработчик, который ориентируется в понятиях из этого чеклиста, намного ценнее для команды, чем «энтузиаст», прорешавший тысячу задач на leetcode, поскольку владение нужными навыками и хотя бы базовое знакомство со смежными технологиями позволяет видеть и понимать фронтенд намного глубже, чем просто в разрезе голого кода. Благодаря перечисленным компетенциям опытный девелопер способен учесть запросы пользователя, потребности команды и возможности системы, а значит – сделать качественный фронтенд.

Хорошая новость состоит в том, что при собеседовании на позицию стажера или джуна вам понадобятся не все пункты из этого списка. Плохая новость (на самом деле, тоже хорошая) – с каждым из них рано или поздно предстоит столкнуться в работе. Не откладывайте изучение вспомогательных инструментов и смежных сфер в долгий ящик.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6👍1👌1
Горизонтальная галерея-аккордеон на CSS

#почитать

Это галерея-аккордеон, реализованная с помощью чистого CSS, которая создает адаптивный горизонтальный макет аккордеона, раскрывающий изображения в полном размере при простом наведении курсора.

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

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍51🔥1
React и FormData

#почитать

О новейшем и одновременно старейшем стандарте React для доступа к данным формы, а также о том, как использовать его с TypeScript.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍52🔥1
▫️ Состояние рынка труда фронтендеров

#посмотреть

Рассказываю свои ощущения состояния рынка труда front-end разработчиков в 2024 году и как оно изменилось за последние два с половиной года.


Смотреть на YouTube ⏱️25 минут
Please open Telegram to view this post
VIEW IN TELEGRAM
👍52🔥1
Ленивая загрузка - пример реализации на Vue.js

#почитать

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

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍51🔥1
Использование стандарта ES5

#почитать

Движки JavaScript оптимизируют код ES5 гораздо дольше, чем современный код, поэтому если у вас есть старый код ES5, который все еще работает, нет смысла обновлять его только для того, чтобы сделать его «современным».

Однако, если вы создаете код в синтаксисе ES6+, а затем используете инструмент сборки для его транспиляции в ES5, это обычно приводит к большому количеству полифиллов и транспиляторов, что может значительно увеличить размер ваших конечных бандлов.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍51👌1
Что такое HMPL.js

#почитать

Как сократить размеры javascript-файлов с сохранением дизайна сайта.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍51🔥1
Отображение favicon сторонних сайтов в приложении

#почитать

Описанный способ отображения приложенных ссылок серьезно улучшает UX:

- ссылки имеют уникальный графический элемент,
- информация выделяется,
- пользователю «красиво и приятно»,
- он получает позитивный эмоциональный отклик.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥4👍21
this: управление контекстом выполнения

#почитать

Без четкого понимания, как работает this, ваш код может стать источником путаницы и ошибок.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍51🔥1
▫️ Фронтовые метрики — что нужно для сбора качественных SLI

#посмотреть

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


Смотреть на YouTube ⏱️35 минут
Please open Telegram to view this post
VIEW IN TELEGRAM
👍62🔥1
JavaScript Promise Interview Questions

#почитать

It’s not a friendly question for junior JS coders

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍53🔥2
▫️ Парсерные комбинаторы: когда регулярок не хватает

#посмотреть

Регулярные выражения — это невероятно мощный инструмент, но что делать, если их выразительности не хватает? Действительно ли нам необходимы грамматики для обработки более сложных конструкций? Как с помощью обычных функций и итераторов можно написать парсер любой сложности? И при чем здесь ФП?


Смотреть на YouTube ⏱️ 30 минут
Please open Telegram to view this post
VIEW IN TELEGRAM
👍61🔥1
Пятничное. Почему ИИ-инструменты для разработчиков не оправдывают ожиданий

#почитать

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

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


Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍52🔥1
▫️Как переписывать и не переписывать проекты, монтировать в коде и работать с датами

#посмотреть

Фронтенд-митап.

Смотреть на YouTube ⏱️ 3 часа
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥21
▫️Перевели сотни проектов на Vue 3 и не пострадали

#посмотреть

Спикер рассказал про вызовы, с которыми его команда столкнулась при переводе решения, на котором работает более 400 проектов, на новый стек Nuxt 3 + Vite. Никита затронул внутреннее устройство экосистемы платформы Ozon и рассмотрел решения для перевода каждой ее части. Показал, зачем они используют JSX и как его можно сохранить при переводе. Показал, как помогли разработчикам автоматизировать обновление и как улучшилась их жизнь после перехода на Vue 3.


Смотреть на YouTube ⏱️45 минут
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7👍21
10 однострочников React, которые должен знать каждый UI-разработчик

#почитать

React JS стал основной библиотекой для создания пользовательских интерфейсов, и на то есть веские причины. Он гибкий, эффективный и позволяет нам создавать удивительные вещи. Но иногда мы пишем больше кода, чем нужно. Вот тут-то и пригодятся однострочники.

Читать
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7
▫️ Какими задачами проверяют ваше знание JavaScript

#посмотреть

Посмотрим на типы задач, которые могут дать прямо во время интервью. Обсудим как и что проверяют эти задачи и что можно сделать, чтобы подготовиться к таким моментам. Открытый урок предназначен для тех, кто знает основы javascript (может работать с объектами) и хочет лучше понимать тонкости разработки.

Смотреть на YouTube ⏱️1 час 30 минут
Please open Telegram to view this post
VIEW IN TELEGRAM
👍61🔥1
Подробное руководство по Pinia

#почитать

Если вы работаете с Vue 3, скорее всего, вы уже слышали о Pinia — современном, легком и мощном инструменте для управления состоянием. Pinia — это официально рекомендованная библиотека для Vue.js, которая заменяет Vuex и делает вашу жизнь разработчика проще. В этой статье мы разберем Pinia вдоль и поперек, начав с основ и завершая продвинутыми техниками.


Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍61🔥1