Frontend разработчик
11.7K subscribers
1.75K photos
489 videos
44 files
2.7K links
Полезные материалы для фронтендера по HTML, CSS, JS, React.js, Angular.js, Vue.js, TypeScript, Redux, MobX, JavaScript, NodeJS.

По всем вопросам @evgenycarter

РКН clck.ru/3KoFrk
加入频道
JavaScript фишки

Простые решения для сложных задач с Intersection Observer API
MatchMedia для определения типа устройства
Форматирование чисел в JavaScript
Форматирование дат под локаль пользователя
Множественная форма существительных в JS
Работа со ссылками в JavaScript
Расчет временной дистанции в JavaScript
Глубокое копирование объекта в JavaScript

источник

👉 @frontend_1
👍82
Глубокий JS. В память о типах и данных

Всех нас учили, что в JavaScript есть примитивные и ссылочные типы данных. Исчерпывающая информация есть в документации MDN, а на просторах интернета полно статей на этот счет.

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

Но, прежде чем мы приступим к разбору, давайте вспомним основные теоретические моменты.

https://habr.com/ru/articles/774548/

👉 @frontend_1
👍13
SOLID на front-end примерах

SOLID: Принцип единственной ответственности (простым языком с примерами на React)
Как разделить код на React компоненты правильно | Эволюция моего подхода | Компоненты по SOLID
SOLID: Как использовать DIP в реальном мире! | Объясняю с примерами на React
SOLID: Interface Segregation Principle! | Объясняю с примерами на React
SOLID: LSP или гайд по полиморфизму! | Любой костыль это нарушение LSP
Как не страдать, когда пришёл заказчик | OCP самый главный принцип SOLID!

источник

👉 @frontend_1
👍7
Media is too big
VIEW IN TELEGRAM
JavaScript должен поставляться с батарейками, автор Лука Касонато

Создание проектов на JavaScript - дело не из легких. Начало работы включает установку и настройку node, tsc, prettier, eslint, фреймворка для тестирования, драйвера базы данных и многого другого. Почему JavaScript не включен в комплект поставки? В этом докладе мы расскажем о том, как Deno решает эту проблему, позволяя вам сосредоточиться на создании вещей. Мы изучим, какие преимущества открывает полная интеграция инструментария, и вспомним, как весело программировать, если инструменты помогают вам, а не требуют, чтобы вы с ними нянчились.

источник

👉 @frontend_1
👍3
Совет по Javascript 💡

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

👉 @frontend_1
👍9🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
Создание отзывчивого профиля с помощью HTML и CSS 🚀

https://github.com/atherosai/ui/tree/main/profile-02

👉 @frontend_1
👍4
This media is not supported in your browser
VIEW IN TELEGRAM
Типизированные маршруты в Next.js

👉 @frontend_1
👍5
Готовимся к вопросам по вёрстке на интервью Frontend-разработчика: значения свойства display

Я продолжаю отвечать на вопросы из собеседований на должность фронтендера. Сегодня я отвечу на следующий вопрос: «В чём отличия между значениями block, inline, flex, inline-flex, grid и inline-grid для свойства display?»

Прошу внимания. Мой ответ будет основан на теории, которую я описал в статье «Зачем нужно использовать свойство display?». Прочитайте, пожалуйста, сначала её.

Последний технический момент. Во всех примерах я использую <body> в качестве родительского контейнера. На картинках он обозначен голубой пунктирной линией.

https://habr.com/ru/companies/ruvds/articles/806493/

👉 @frontend_1
👍7