SOLID на front-end примерах
SOLID: Принцип единственной ответственности (простым языком с примерами на React)
Как разделить код на React компоненты правильно | Эволюция моего подхода | Компоненты по SOLID
SOLID: Как использовать DIP в реальном мире! | Объясняю с примерами на React
SOLID: Interface Segregation Principle! | Объясняю с примерами на React
SOLID: LSP или гайд по полиморфизму! | Любой костыль это нарушение LSP
Как не страдать, когда пришёл заказчик | OCP самый главный принцип SOLID!
источник
👉 @frontend_1
SOLID: Принцип единственной ответственности (простым языком с примерами на React)
Как разделить код на React компоненты правильно | Эволюция моего подхода | Компоненты по SOLID
SOLID: Как использовать DIP в реальном мире! | Объясняю с примерами на React
SOLID: Interface Segregation Principle! | Объясняю с примерами на React
SOLID: LSP или гайд по полиморфизму! | Любой костыль это нарушение LSP
Как не страдать, когда пришёл заказчик | OCP самый главный принцип SOLID!
источник
👉 @frontend_1
Media is too big
VIEW IN TELEGRAM
JavaScript должен поставляться с батарейками, автор Лука Касонато
Создание проектов на JavaScript - дело не из легких. Начало работы включает установку и настройку node, tsc, prettier, eslint, фреймворка для тестирования, драйвера базы данных и многого другого. Почему JavaScript не включен в комплект поставки? В этом докладе мы расскажем о том, как Deno решает эту проблему, позволяя вам сосредоточиться на создании вещей. Мы изучим, какие преимущества открывает полная интеграция инструментария, и вспомним, как весело программировать, если инструменты помогают вам, а не требуют, чтобы вы с ними нянчились.
источник
👉 @frontend_1
Создание проектов на JavaScript - дело не из легких. Начало работы включает установку и настройку node, tsc, prettier, eslint, фреймворка для тестирования, драйвера базы данных и многого другого. Почему JavaScript не включен в комплект поставки? В этом докладе мы расскажем о том, как Deno решает эту проблему, позволяя вам сосредоточиться на создании вещей. Мы изучим, какие преимущества открывает полная интеграция инструментария, и вспомним, как весело программировать, если инструменты помогают вам, а не требуют, чтобы вы с ними нянчились.
источник
👉 @frontend_1
Совет по Javascript 💡
Возможно, вы не знаете, что мы можем передавать исходную ошибку, при этом повторно выбрасывая ошибку с полезным сообщением для лучшей отладки.
👉 @frontend_1
Возможно, вы не знаете, что мы можем передавать исходную ошибку, при этом повторно выбрасывая ошибку с полезным сообщением для лучшей отладки.
👉 @frontend_1
This media is not supported in your browser
VIEW IN TELEGRAM
Создание отзывчивого профиля с помощью HTML и CSS 🚀
https://github.com/atherosai/ui/tree/main/profile-02
👉 @frontend_1
https://github.com/atherosai/ui/tree/main/profile-02
👉 @frontend_1
Готовимся к вопросам по вёрстке на интервью Frontend-разработчика: значения свойства display
Я продолжаю отвечать на вопросы из собеседований на должность фронтендера. Сегодня я отвечу на следующий вопрос: «В чём отличия между значениями
Прошу внимания. Мой ответ будет основан на теории, которую я описал в статье «Зачем нужно использовать свойство display?». Прочитайте, пожалуйста, сначала её.
Последний технический момент. Во всех примерах я использую
https://habr.com/ru/companies/ruvds/articles/806493/
👉 @frontend_1
Я продолжаю отвечать на вопросы из собеседований на должность фронтендера. Сегодня я отвечу на следующий вопрос: «В чём отличия между значениями
block, inline, flex, inline-flex, grid и inline-grid для свойства display?»Прошу внимания. Мой ответ будет основан на теории, которую я описал в статье «Зачем нужно использовать свойство display?». Прочитайте, пожалуйста, сначала её.
Последний технический момент. Во всех примерах я использую
<body> в качестве родительского контейнера. На картинках он обозначен голубой пунктирной линией.https://habr.com/ru/companies/ruvds/articles/806493/
👉 @frontend_1
This media is not supported in your browser
VIEW IN TELEGRAM
Эффекты мерцания с помощью CSS 🚀
1. Animate opacity
2. Use custom linear() timing 🔥
👉 @frontend_1
1. Animate opacity
2. Use custom linear() timing 🔥
:root { --flicker: linear(0 0% 0.5%, 0.1723 0.7925% ... ); }
.flicker {
animation: dim 4s infinite var(--flicker) alternate;
}
@keyframes dim { opacity: 0.25; }
👉 @frontend_1
This media is not supported in your browser
VIEW IN TELEGRAM
Люблю использовать CSS-анимацию, например, такую
.
👉 @frontend_1
.
ring {
animation: float 2s infinite alternate var(--ease);
animation-delay: calc(
sin((var(--index) / var(--count)) * 45deg)
* -2s
);
}
👉 @frontend_1
This media is not supported in your browser
VIEW IN TELEGRAM
CSS трюк для раскрытия текста при прокрутке? ✨
Объедините position: sticky с анимацией прокрутки.
Разделите текст на слова. Используйте значение «Pixel per character» для расчета начальной и конечной позиции прокрутки для каждого слова 🤙
👉 @frontend_1
Объедините position: sticky с анимацией прокрутки.
Разделите текст на слова. Используйте значение «Pixel per character» для расчета начальной и конечной позиции прокрутки для каждого слова 🤙
👉 @frontend_1
Современный CSS очень хорош.
Отключить скролбар, когда этот диалог является одновременно модальным и открытым.
Никакого JS, никакого состояния, никаких классов, никаких меток aria — всего несколько строк CSS.
👉 @frontend_1
Отключить скролбар, когда этот диалог является одновременно модальным и открытым.
Никакого JS, никакого состояния, никаких классов, никаких меток aria — всего несколько строк CSS.
👉 @frontend_1
This media is not supported in your browser
VIEW IN TELEGRAM
Трюк по CSS ⭐
Вы можете создать этот сверкающий фон с помощью одного элемента, используя mask-composite, при этом анимируя mask-position.
Хитрость заключается в том, чтобы наложить маски друг на друга, а затем использовать значение intersect для mask-composite✨.
Intersect работает так же, как и в SVG, объединяя маски и беря их пересечение.
Маска dots — это базовый radial-gradient, который повторяется по всему элементу. Маска noise — сгенерированное изображение шума Перлина.
https://codepen.io/jh3y/pen/ExrWOJe
👉 @frontend_1
Вы можете создать этот сверкающий фон с помощью одного элемента, используя mask-composite, при этом анимируя mask-position.
.canvas {
background: var(--gradient);
mask: var(--dots), var(--noise);
mask-composite: intersect /* source-in, xor */;
animation: flicker;
}
@keyframes flicker {
to { mask-position: 50% 50% , 0 50%; }
}Хитрость заключается в том, чтобы наложить маски друг на друга, а затем использовать значение intersect для mask-composite✨.
Intersect работает так же, как и в SVG, объединяя маски и беря их пересечение.
Маска dots — это базовый radial-gradient, который повторяется по всему элементу. Маска noise — сгенерированное изображение шума Перлина.
mask: radial-gradient(circle at 50% 50%, white 2px, transparent 2.5px) 50% 50% / 40px 40px;mask: url("noise.png") 50% 50% / 256px 256px;https://codepen.io/jh3y/pen/ExrWOJe
👉 @frontend_1
Рефлексия в JavaScript и TypeScript: обзор основных техник. Как сгенерировать CLI-интерфейс для класса
Как и в любом достаточно динамическом языке, в JavaScript из коробки есть способы разобрать в рантайме структуру его значений — определить типы, ключи объектов, получить конструкторы и прототипы.
В этой статье я хочу рассмотреть основные такие возможности, плюс показать, как можно получить ещё больше информации о типах при использовании TypeScript, и как добавить классам и их полям собственные метаданные при помощи декораторов. Каждую из техник я покажу на примере небольшого CLI-фреймворка, работа с которым к концу статьи будет выглядеть как на картинке:
https://habr.com/ru/companies/ruvds/articles/754764/
👉 @frontend_1
Как и в любом достаточно динамическом языке, в JavaScript из коробки есть способы разобрать в рантайме структуру его значений — определить типы, ключи объектов, получить конструкторы и прототипы.
В этой статье я хочу рассмотреть основные такие возможности, плюс показать, как можно получить ещё больше информации о типах при использовании TypeScript, и как добавить классам и их полям собственные метаданные при помощи декораторов. Каждую из техник я покажу на примере небольшого CLI-фреймворка, работа с которым к концу статьи будет выглядеть как на картинке:
https://habr.com/ru/companies/ruvds/articles/754764/
👉 @frontend_1
This media is not supported in your browser
VIEW IN TELEGRAM
Вы можете использовать CSS-анимацию с прокруткой, например, IntersectionObserver от JavaScript 🤙
👉 @frontend_1
img {
animation: reveal;
animation-timeline: view();
animation-range: entry 0% entry 150%;
}
@keyframes reveal { 0% {
opacity: 0;
filter: brightness(2);
scale: 0.9;
}}
👉 @frontend_1
This media is not supported in your browser
VIEW IN TELEGRAM
Создание меню бургера с помощью HTML, CSS и JavaScript 🚀
https://github.com/atherosai/ui/blob/main/menu-06/index.html
👉 @frontend_1
https://github.com/atherosai/ui/blob/main/menu-06/index.html
👉 @frontend_1