12510
Библиотека Frontend программиста. Книги, полезные материалы, статьи, новости, уроки по front end/web разработке. По всем вопросам @evgenycarter
Создание отзывчивого макета с помощью HTML и CSS flex 🚀
https://github.com/atherosai/ui/tree/main/layout-03
👉 @frontend_1
Записываем музыку при помощи CSS Grid
Слишком часто я наблюдал за тем, как импровизирующий музыкант трясущимися руками пытается увеличить pdf размером A4 на крошечном экране телефона в самом разгаре исполнения. Мы обязаны создать плавный и отзывчивый рендеринг музыки для веба!
В вебе нотная запись должна быть столь же доступной и плавной, как текст; однако пока это не так, и это уязвляет мои чувства. Давайте решим эту актуальную проблему.
https://cruncher.ch/blog/printing-music-with-css-grid/
👉 @frontend_1
Вы можете использовать CSS-анимацию с прокруткой, например, IntersectionObserver от JavaScript 🤙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
Трюк по CSS ⭐
Вы можете создать этот сверкающий фон с помощью одного элемента, используя 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
CSS трюк для раскрытия текста при прокрутке? ✨
Объедините position: sticky с анимацией прокрутки.
Разделите текст на слова. Используйте значение «Pixel per character» для расчета начальной и конечной позиции прокрутки для каждого слова 🤙
👉 @frontend_1
Люблю использовать CSS-анимацию, например, такую
.ring {
animation: float 2s infinite alternate var(--ease);
animation-delay: calc(
sin((var(--index) / var(--count)) * 45deg)
* -2s
);
}
👉 @frontend_1
❓Вышел React 18 — что нового для разработчиков?
Расскажем на бесплатном практическом уроке «Обзор нововведений в React 18» от OTUS. Спикер — опытный разработчик и преподаватель.
На вебинаре мы разберем изменения, которые были добавлены в React 18, познакомимся с ними поближе и посмотрим на новые фичи и API.
Встречаемся 25 апреля в 19:00 мск в преддверии старта курса «React.js Developer». Все участники вебинара получат специальную цену на обучение и персональную консультацию от менеджеров OTUS!
👉 Оставьте заявку прямо сейчас, чтобы посетить бесплатный урок: https://otus.pw/kjRZ/?erid=LjN8KbGzm
Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963.
Создание отзывчивого профиля с помощью HTML и CSS 🚀
https://github.com/atherosai/ui/tree/main/profile-02
👉 @frontend_1
Совет по Javascript 💡
Возможно, вы не знаете, что мы можем передавать исходную ошибку, при этом повторно выбрасывая ошибку с полезным сообщением для лучшей отладки.
👉 @frontend_1
Alfa Frontend Meetup #3
Митап frontend-сообщества про архитектуру.
Поговорим про webpack module federation, рассмотрим статический анализ кода и попробуем применить этот подход к статическому анализу зависимостей с помощью программирования в ограничениях, обсудим плюсы и минусы монорепозиториев.
Когда: 25 апреля, 19:00.
Где: Москва, пр. Андропова, д. 18, к. 3 и онлайн.
Вас ожидают доклады спикеров:
▪️Алексей Охрименко, техлид в Yandex Cloud Tracker, расскажет о статистическом анализе зависимостей.
▪️Алексей Николаев, Teamlead в Sendsay.ru, разберёт плюсы и минусы монорепозиториев.
▪️Степан Иваньков, главный frontend-разработчик в «Альфа-Банке», расскажет о том, как перевести 45 приложений на webpack module federation и ничего не сломать.
Регистрируйтесь
Больше полезного в комьюнити @alfa_frontend
erid: LjN8KRxTa
Реклама. АО «Альфа-Банк». ИНН 7728168971.
Глубокий JS. В память о типах и данных
Всех нас учили, что в JavaScript есть примитивные и ссылочные типы данных. Исчерпывающая информация есть в документации MDN, а на просторах интернета полно статей на этот счет.
Теория теорией, однако, JS-код исполняется не в теории, а на практике. Точнее, его компилирует и исполняет движок JS. Таких движков существует несколько, разрабатывались они разными людьми и для разных целей. Было бы наивно предполагать, что все они полностью идентичны друг другу. А значит, время разобраться, как же на самом деле хранятся вполне конкретные данные на вполне конкретном движке JS. В качестве испытуемого возьмем один из самых распространенных, на сегодняшний день, движок V8 от компании Google.
Но, прежде чем мы приступим к разбору, давайте вспомним основные теоретические моменты.
https://habr.com/ru/articles/774548/
👉 @frontend_1
ВКонтакте представила образовательный проект для разработчиков, IT-предпринимателей и бизнесменов, который познакомит с открытыми веб-технологиями на примере сервисов VK Mini Apps.
Студентам курса будут доступны видеоуроки с рекомендациями по дизайну, разработке, тестированию и продвижению сервисов. Эксперты VK Mini Apps записали практические советы и подготовили элементы кода и шаблоны, которые можно использовать бесплатно.
👉 @frontend_1
🚀 Участвуй в True Tech Hack от МТС и поборись за общий призовой фонд в 1 500 000 рублей. Регистрируйся.
Приглашаем разработчиков, специалистов по Data Science, менеджеров по продукту, дизайнеров. Соревноваться предстоит в одном из двух треков, чтобы улучшить жизнь людей с особыми потребностями.
🏠 Трек 1. Улучшение клиентского опыта витрины МТС Live для пользователей с особыми потребностями
⭐ Трек 2. Разработка голосового управления для МТС Финтех на основе искусственного интеллекта для людей с ограниченными возможностями
Как пройдет True Tech Hack:
🔸 26 апреля – открытие хакатона и Q&A-сессия
🔸 27 апреля-12 мая – чек-поинты с экспертами
🔸 12 мая – окончание приема проектов
🔸 14 мая – полуфинал, защита лучших решений и объявление финалистов
🔸 17 мая – финал в Москве
True Tech Hack – твой шанс получить новый опыт, выиграть приз и сделать наш мир доступней и удобней для всех. Регистрируйся на хакатон до 25 апреля по ссылке.
Совет по CSS 💡
Знаете ли вы о свойстве shape-outside в CSS?
Demo https://www.codewithshripal.com/playground/css/shape-outside
👉 @frontend_1
Подборка Telegram каналов для программистов
Системное администрирование 📌
/channel/tipsysdmin Типичный Сисадмин (фото железа, было/стало)
/channel/sysadminof Книги для админов, полезные материалы
/channel/i_odmin Все для системного администратора
/channel/i_odmin_book Библиотека Системного Администратора
/channel/i_odmin_chat Чат системных администраторов
/channel/i_DevOps DevOps: Пишем о Docker, Kubernetes и др.
/channel/sysadminoff Новости Линукс Linux
/channel/tikon_1 Новости высоких технологий, науки и техники💡
/channel/mir_teh Мир технологий (Technology World)
/channel/rust_lib Полезный контент по программированию на Rust
/channel/golang_lib Библиотека Go (Golang) разработчика
/channel/itmozg Программисты, дизайнеры, новости из мира IT.
/channel/phis_mat Обучающие видео, книги по Физике и Математике
/channel/php_lib Библиотека PHP программиста 👨🏼💻👩💻
/channel/nodejs_lib Подборки по Node js и все что с ним связано
/channel/ruby_lib Библиотека Ruby программиста
1C разработка 📌
/channel/odin1C_rus Cтатьи, курсы, советы, шаблоны кода 1С
Программирование C++📌
/channel/cpp_lib Библиотека C/C++ разработчика
/channel/cpp_knigi Книги для программистов C/C++
/channel/cpp_geek Учим C/C++ на примерах
Программирование Python 📌
/channel/pythonofff Python академия. Учи Python быстро и легко🐍
/channel/BookPython Библиотека Python разработчика
/channel/python_real Python подборки на русском и английском
/channel/python_360 Книги по Python Rus
Java разработка 📌
/channel/BookJava Библиотека Java разработчика
/channel/java_360 Книги по Java Rus
/channel/java_geek Учим Java на примерах
GitHub Сообщество 📌
/channel/Githublib Интересное из GitHub
Базы данных (Data Base) 📌
/channel/database_info Все про базы данных
Мобильная разработка: iOS, Android 📌
/channel/developer_mobila Мобильная разработка
/channel/kotlin_lib Подборки полезного материала по Kotlin
Фронтенд разработка 📌
/channel/frontend_1 Подборки для frontend разработчиков
/channel/frontend_sovet Frontend советы, примеры и практика!
/channel/React_lib Подборки по React js и все что с ним связано
Разработка игр 📌
/channel/game_devv Все о разработке игр
Вакансии 📌
/channel/sysadmin_rabota Системный Администратор
/channel/progjob Вакансии в IT
Чат программистов📌
/channel/developers_ru
Библиотеки 📌
/channel/book_for_dev Книги для программистов Rus
/channel/programmist_of Книги по программированию
/channel/proglb Библиотека программиста
/channel/bfbook Книги для программистов
/channel/books_reserv Книги для программистов
БигДата, машинное обучение 📌
/channel/bigdata_1 Data Science, Big Data, Machine Learning, Deep Learning
Программирование 📌
/channel/bookflow Лекции, видеоуроки, доклады с IT конференций
/channel/coddy_academy Полезные советы по программированию
QA, тестирование 📌
/channel/testlab_qa Библиотека тестировщика
Шутки программистов 📌
/channel/itumor Шутки программистов
Защита, взлом, безопасность 📌
/channel/thehaking Канал о кибербезопасности
/channel/xakep_1 Статьи из "Хакера"
Книги, статьи для дизайнеров 📌
/channel/ux_web Статьи, книги для дизайнеров
Английский 📌
/channel/UchuEnglish Английский с нуля
Математика 📌
/channel/Pomatematike Канал по математике
Excel лайфхак📌
/channel/Excel_lifehack
Создание меню бургера с помощью HTML, CSS и JavaScript 🚀
https://github.com/atherosai/ui/blob/main/menu-06/index.html
👉 @frontend_1
Рефлексия в JavaScript и TypeScript: обзор основных техник. Как сгенерировать CLI-интерфейс для класса
Как и в любом достаточно динамическом языке, в JavaScript из коробки есть способы разобрать в рантайме структуру его значений — определить типы, ключи объектов, получить конструкторы и прототипы.
В этой статье я хочу рассмотреть основные такие возможности, плюс показать, как можно получить ещё больше информации о типах при использовании TypeScript, и как добавить классам и их полям собственные метаданные при помощи декораторов. Каждую из техник я покажу на примере небольшого CLI-фреймворка, работа с которым к концу статьи будет выглядеть как на картинке:
https://habr.com/ru/companies/ruvds/articles/754764/
👉 @frontend_1
Современный CSS очень хорош.
Отключить скролбар, когда этот диалог является одновременно модальным и открытым.
Никакого JS, никакого состояния, никаких классов, никаких меток aria — всего несколько строк CSS.
👉 @frontend_1
17 мая собираем всех на IT-конференцию МТС True Tech Day.
Наша работа строится на коде, который мы создали из синтеза науки и технологий. Это надёжная и универсальная платформа для разработки продуктов и сервисов.
Каждый участник конференции поучаствует в сессиях от лидеров индустрии, испытает технологии в true labs и получит новые впечатления и эмоции.
Что будет:
→ 5 тематических треков: Main, Development, AI/ML, Cloud, Science
→ 50 спикеров с докладами про архитектуру, облачные платформы, NLP4Code, вероятностное программирование, безопасность контейнеров и другое
→ 10 часов нетворкинга
→ цифровые зоны и digital-интеграции
→ а ещё вечеринка со звездой
Все спикеры и темы уже на сайте. Регистрируйся на True Tech Day. Участие бесплатное
Эффекты мерцания с помощью CSS 🚀
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
Готовимся к вопросам по вёрстке на интервью Frontend-разработчика: значения свойства display
Я продолжаю отвечать на вопросы из собеседований на должность фронтендера. Сегодня я отвечу на следующий вопрос: «В чём отличия между значениями block, inline, flex, inline-flex, grid и inline-grid для свойства display?»
Прошу внимания. Мой ответ будет основан на теории, которую я описал в статье «Зачем нужно использовать свойство display?». Прочитайте, пожалуйста, сначала её.
Последний технический момент. Во всех примерах я использую <body> в качестве родительского контейнера. На картинках он обозначен голубой пунктирной линией.
https://habr.com/ru/companies/ruvds/articles/806493/
👉 @frontend_1
Типизированные маршруты в Next.js
👉 @frontend_1
Телеграм-канал Яндекса специально для фронтендеров
В одном телеграм-канале собираем всё, что нужно знать про фронтенд-разработку в Яндексе. Самые полезные библиотеки и опенсорсные инструменты, высокое искусство автотестирования, последние тренды фронтенд-разработки, новости о релизах и чейнджлогах всем известных продуктов.
Подписывайтесь 👉 @yandex4frontend
JavaScript должен поставляться с батарейками, автор Лука Касонато
Создание проектов на JavaScript - дело не из легких. Начало работы включает установку и настройку node, tsc, prettier, eslint, фреймворка для тестирования, драйвера базы данных и многого другого. Почему JavaScript не включен в комплект поставки? В этом докладе мы расскажем о том, как Deno решает эту проблему, позволяя вам сосредоточиться на создании вещей. Мы изучим, какие преимущества открывает полная интеграция инструментария, и вспомним, как весело программировать, если инструменты помогают вам, а не требуют, чтобы вы с ними нянчились.
источник
👉 @frontend_1
SOLID на front-end примерах
SOLID: Принцип единственной ответственности (простым языком с примерами на React)
Как разделить код на React компоненты правильно | Эволюция моего подхода | Компоненты по SOLID
SOLID: Как использовать DIP в реальном мире! | Объясняю с примерами на React
SOLID: Interface Segregation Principle! | Объясняю с примерами на React
SOLID: LSP или гайд по полиморфизму! | Любой костыль это нарушение LSP
Как не страдать, когда пришёл заказчик | OCP самый главный принцип SOLID!
источник
👉 @frontend_1
JavaScript фишки
Простые решения для сложных задач с Intersection Observer API
MatchMedia для определения типа устройства
Форматирование чисел в JavaScript
Форматирование дат под локаль пользователя
Множественная форма существительных в JS
Работа со ссылками в JavaScript
Расчет временной дистанции в JavaScript
Глубокое копирование объекта в JavaScript
источник
👉 @frontend_1
Совет по HTML 💡
Знаете ли вы, что мы можем легко создать сворачивающуюся панель без использования Javascript?
Demo https://www.codewithshripal.com/playground/html/details-element
👉 @frontend_1
Создание карточек с эффектом наведения зума с помощью HTML и CSS 🚀
https://github.com/atherosai/ui/tree/main/cards-07
👉 @frontend_1
❓Не используешь библиотеку quasar в JS? Фатальная ошибка!
А ведь UI-фреймворки сильно сокращают время на построение интерфейсов, оставляя его для работы над продуктом!
Поэтому пора прокачать квалификацию и добавить в свой инструментарий разработку на Vue.js.
Начни с бесплатного практического урока «Форма входа на quasar и аутентификация пользователя на сайте» от OTUS. Спикер Илья Нуруллин — FingerprintJS, Software engineer.
Занятие пройдёт сегодня, 16 апреля, в 20:00 мск в рамках курса «Vue.js разработчик». Доступна рассрочка на обучение!
➡️Для бесплатного участия и получения записи регистрируйтесь прямо сейчас: регистрацияРеклама. ООО «Отус онлайн-образование», ОГРН 1177746618576