Frontend разработчик
Полезные материалы для фронтендера по HTML, CSS, JS, React.js, Angular.js, Vue.js, TypeScript, Redux, MobX, JavaScript, NodeJS. По всем вопросам @evgenycarter
Show more12 379
Subscribers
+124 hours
-107 days
+5130 days
Posting time distributions
Data loading in progress...
Find out who reads your channel
This graph will show you who besides your subscribers reads your channel and learn about other sources of traffic.
Publication analysis
| Posts | Views | Shares | Views dynamics |
01 Vercel Data Cache остается неизменным в течение всего периода развертывания
👉 @frontend_1 | 650 | 5 | Loading... |
02 Для первого сезона профильной IT-конференции Podlodka React Crew сложно придумать более нужную тему, чем «архитектура».
Уже 27 мая опытные эксперты научат React-разработчиков:
💜 Решать архитектурные вопросы в разрезе React. В формате круглого стола Сергей Сова, Максим Вишневский и Сергей Самохов обсудят, как строить архитектуру, организовывать компоненты и данные, использовать рендер-движок, задействовать реактивность и учитывать особенности
💜 Применять архитектурный линтер для Feature-Sliced Design. Антон Медведев и Лев Челядинов из FSD core team представят новый линтер и в режиме лайвкодинга покажут, как его применять.
💜 Менять жизненный цикл проектов на React, проектировать гибкое приложение и править негибкое. Редактор «Доки» Полина Гуртовая расскажет, когда мигрировать проект и нужно ли это делать, если он ещё не устарел.
💜 Выбирать стейтменеджер. Валерий Смирнов из Oone.World покажет, когда и какие популярные библиотеки использовать для управления стейтом.
🎁 Бонусы: публичное собеседование по архитектуре и открытый микрофон.
Билеты уже ждут вас на сайте
Реклама. ИП Толстая Елена Петровна ИНН:507503278104 | 763 | 5 | Loading... |
03 Узнайте о позиционировании CSS с помощью следующей шпаргалки 🚀
👉 @frontend_1 | 806 | 22 | Loading... |
04 Создание отзывчивого макета с помощью HTML и CSS 🚀
https://github.com/atherosai/ui/tree/main/layout-04
👉 @frontend_1 | 1 086 | 31 | Loading... |
05 Совет по Javascript 💡
Вы можете не знать об этом сокращенном синтаксисе для объявления метода в object literal
👉 @frontend_1 | 1 185 | 11 | Loading... |
06 Создание вкладок с помощью HTML, CSS и JavaScript 🚀
https://github.com/atherosai/ui/tree/main/tabs-02
👉 @frontend_1 | 1 395 | 27 | Loading... |
07 Совет по производительности веб-сайтов 💡
Используйте Map вместо Object в случае частых добавлений/удалений пар key-value или когда ключи динамические ✅.
👉 @frontend_1 | 1 347 | 18 | Loading... |
08 Frontend meetup
1. Хоп, хлоп, и MVP готов — Дмитрий Карловский, HyOO
Нарисуем полноценный фронтенд без чат-ботов. Поднимем базу данных без сервера. Задеплоим всё на статический сервер без боли. И будем наслаждаться результатом без тормозов.
2. Причины деградации перформанса фронтенда — Денис Басковский, МТС Диджитал
Почему скорость железа не успевает за веб-приложениями. Причины большого количества JS-кода на сайте. SPA по 20мб уже действительность. Инструменты куда мы смотрим чтобы найти про лесы большого размера сайта. Графики скорости и восприятие клиентов. Почему скорость браузерной страницы лагает на 4090ti, а Cyberpunk идет на максималках.
3. Serverless - уже можно? — Андрей Лаврентьев, NDA
Опыт запуска проекта на cloudflare pages и трудности, с которыми пришлось столкнуться на каждом шаге.
Модератор Григорий Петров, Devrel, Evrone
Эксперт Глеб Михеев, Руководитель ПК, FrontendConf
➖➖➖
🗓 22 мая, начало в 19:00 мск, Среда
🌐 ОНЛАЙН
✅ Регистрация на мероприятие | 1 384 | 3 | Loading... |
09 Создавайте drag and drop с помощью HTML, CSS и JavaScript 🚀
https://github.com/atherosai/ui/tree/main/drag-and-drop-01
👉 @frontend_1 | 1 308 | 30 | Loading... |
10 Совет по использованию инструментов Chrome Dev Tools 💡
Знаете ли вы, что с помощью Chrome Dev Tools можно легко отслеживать, какие события срабатывают на элементе, и просматривать свойства этих событий?
👉 @frontend_1 | 1 668 | 34 | Loading... |
11 Promises Training
Проект помогает углубить фронтенд-разработчику свои знания о промисах в Javascript.
Практикуйтесь в работе с promises с помощью коллекции интерактивных задач. Этот репозиторий предоставляет платформу для оттачивания навыков, дополненную автоматизированными тестами для мгновенной обратной связи и проверки вашего прогресса.
https://github.com/henriqueinonhe/promises-training
👉 @Githublib | 1 680 | 69 | Loading... |
12 Обзор методов JavaScript DOM 👨💻
👉 @frontend_1 | 1 702 | 36 | Loading... |
13 Frontend meetup
1. Хоп, хлоп, и MVP готов — Дмитрий Карловский, HyOO
Нарисуем полноценный фронтенд без чат-ботов. Поднимем базу данных без сервера. Задеплоим всё на статический сервер без боли. И будем наслаждаться результатом без тормозов.
2. Причины деградации перформанса фронтенда — Денис Басковский, МТС Диджитал
Почему скорость железа не успевает за веб-приложениями. Причины большого количества JS-кода на сайте. SPA по 20мб уже действительность. Инструменты куда мы смотрим чтобы найти про лесы большого размера сайта. Графики скорости и восприятие клиентов. Почему скорость браузерной страницы лагает на 4090ti, а Cyberpunk идет на максималках.
3. Serverless - уже можно? — Андрей Лаврентьев, NDA
Опыт запуска проекта на cloudflare pages и трудности, с которыми пришлось столкнуться на каждом шаге.
Модератор Григорий Петров, Devrel, Evrone
Эксперт Глеб Михеев, Руководитель ПК, FrontendConf
➖➖➖
🗓 22 мая, начало в 19:00 мск, Среда
🌐 ОНЛАЙН
✅ Регистрация на мероприятие | 1 765 | 5 | Loading... |
14 staleTimes в Next.js 14.2
👉 @frontend_1 | 1 625 | 8 | Loading... |
15 Создание отзывчивого макета с помощью HTML и CSS flex 🚀
https://github.com/atherosai/ui/tree/main/layout-03
👉 @frontend_1 | 1 880 | 34 | Loading... |
16 Подборка Telegram каналов для программистов
Системное администрирование 📌
https://t.me/tipsysdmin Типичный Сисадмин (фото железа, было/стало)
https://t.me/sysadminof Книги для админов, полезные материалы
https://t.me/i_odmin Все для системного администратора
https://t.me/i_odmin_book Библиотека Системного Администратора
https://t.me/i_odmin_chat Чат системных администраторов
https://t.me/i_DevOps DevOps: Пишем о Docker, Kubernetes и др.
https://t.me/sysadminoff Новости Линукс Linux
https://t.me/tikon_1 Новости высоких технологий, науки и техники💡
https://t.me/mir_teh Мир технологий (Technology World)
https://t.me/rust_lib Полезный контент по программированию на Rust
https://t.me/golang_lib Библиотека Go (Golang) разработчика
https://t.me/itmozg Программисты, дизайнеры, новости из мира IT.
https://t.me/phis_mat Обучающие видео, книги по Физике и Математике
https://t.me/php_lib Библиотека PHP программиста 👨🏼💻👩💻
https://t.me/nodejs_lib Подборки по Node js и все что с ним связано
https://t.me/ruby_lib Библиотека Ruby программиста
1C разработка 📌
https://t.me/odin1C_rus Cтатьи, курсы, советы, шаблоны кода 1С
Программирование C++📌
https://t.me/cpp_lib Библиотека C/C++ разработчика
https://t.me/cpp_knigi Книги для программистов C/C++
https://t.me/cpp_geek Учим C/C++ на примерах
Программирование Python 📌
https://t.me/pythonofff Python академия. Учи Python быстро и легко🐍
https://t.me/BookPython Библиотека Python разработчика
https://t.me/python_real Python подборки на русском и английском
https://t.me/python_360 Книги по Python Rus
Java разработка 📌
https://t.me/BookJava Библиотека Java разработчика
https://t.me/java_360 Книги по Java Rus
https://t.me/java_geek Учим Java на примерах
GitHub Сообщество 📌
https://t.me/Githublib Интересное из GitHub
Базы данных (Data Base) 📌
https://t.me/database_info Все про базы данных
Мобильная разработка: iOS, Android 📌
https://t.me/developer_mobila Мобильная разработка
https://t.me/kotlin_lib Подборки полезного материала по Kotlin
Фронтенд разработка 📌
https://t.me/frontend_1 Подборки для frontend разработчиков
https://t.me/frontend_sovet Frontend советы, примеры и практика!
https://t.me/React_lib Подборки по React js и все что с ним связано
Разработка игр 📌
https://t.me/game_devv Все о разработке игр
Вакансии 📌
https://t.me/sysadmin_rabota Системный Администратор
https://t.me/progjob Вакансии в IT
Чат программистов📌
https://t.me/developers_ru
Библиотеки 📌
https://t.me/book_for_dev Книги для программистов Rus
https://t.me/programmist_of Книги по программированию
https://t.me/proglb Библиотека программиста
https://t.me/bfbook Книги для программистов
https://t.me/books_reserv Книги для программистов
БигДата, машинное обучение 📌
https://t.me/bigdata_1 Data Science, Big Data, Machine Learning, Deep Learning
Программирование 📌
https://t.me/bookflow Лекции, видеоуроки, доклады с IT конференций
https://t.me/coddy_academy Полезные советы по программированию
QA, тестирование 📌
https://t.me/testlab_qa Библиотека тестировщика
Шутки программистов 📌
https://t.me/itumor Шутки программистов
Защита, взлом, безопасность 📌
https://t.me/thehaking Канал о кибербезопасности
https://t.me/xakep_1 Статьи из "Хакера"
Книги, статьи для дизайнеров 📌
https://t.me/ux_web Статьи, книги для дизайнеров
Английский 📌
https://t.me/UchuEnglish Английский с нуля
Математика 📌
https://t.me/Pomatematike Канал по математике
Excel лайфхак📌
https://t.me/Excel_lifehack | 1 625 | 19 | Loading... |
17 Записываем музыку при помощи CSS Grid
Слишком часто я наблюдал за тем, как импровизирующий музыкант трясущимися руками пытается увеличить pdf размером A4 на крошечном экране телефона в самом разгаре исполнения. Мы обязаны создать плавный и отзывчивый рендеринг музыки для веба!
В вебе нотная запись должна быть столь же доступной и плавной, как текст; однако пока это не так, и это уязвляет мои чувства. Давайте решим эту актуальную проблему.
https://cruncher.ch/blog/printing-music-with-css-grid/
👉 @frontend_1 | 1 876 | 12 | Loading... |
18 Создание меню бургера с помощью HTML, CSS и JavaScript 🚀
https://github.com/atherosai/ui/blob/main/menu-06/index.html
👉 @frontend_1 | 2 059 | 23 | Loading... |
19 Вы можете использовать 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 | 2 059 | 29 | Loading... |
20 Рефлексия в JavaScript и TypeScript: обзор основных техник. Как сгенерировать CLI-интерфейс для класса
Как и в любом достаточно динамическом языке, в JavaScript из коробки есть способы разобрать в рантайме структуру его значений — определить типы, ключи объектов, получить конструкторы и прототипы.
В этой статье я хочу рассмотреть основные такие возможности, плюс показать, как можно получить ещё больше информации о типах при использовании TypeScript, и как добавить классам и их полям собственные метаданные при помощи декораторов. Каждую из техник я покажу на примере небольшого CLI-фреймворка, работа с которым к концу статьи будет выглядеть как на картинке:
https://habr.com/ru/companies/ruvds/articles/754764/
👉 @frontend_1 | 2 206 | 27 | Loading... |
21 Трюк по 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 | 2 278 | 23 | Loading... |
22 Современный CSS очень хорош.
Отключить скролбар, когда этот диалог является одновременно модальным и открытым.
Никакого JS, никакого состояния, никаких классов, никаких меток aria — всего несколько строк CSS.
👉 @frontend_1 | 2 259 | 45 | Loading... |
23 CSS трюк для раскрытия текста при прокрутке? ✨
Объедините position: sticky с анимацией прокрутки.
Разделите текст на слова. Используйте значение «Pixel per character» для расчета начальной и конечной позиции прокрутки для каждого слова 🤙
👉 @frontend_1 | 2 324 | 25 | Loading... |
24 17 мая собираем всех на IT-конференцию МТС True Tech Day.
Наша работа строится на коде, который мы создали из синтеза науки и технологий. Это надёжная и универсальная платформа для разработки продуктов и сервисов.
Каждый участник конференции поучаствует в сессиях от лидеров индустрии, испытает технологии в true labs и получит новые впечатления и эмоции.
Что будет:
→ 5 тематических треков: Main, Development, AI/ML, Cloud, Science
→ 50 спикеров с докладами про архитектуру, облачные платформы, NLP4Code, вероятностное программирование, безопасность контейнеров и другое
→ 10 часов нетворкинга
→ цифровые зоны и digital-интеграции
→ а ещё вечеринка со звездой
Все спикеры и темы уже на сайте. Регистрируйся на True Tech Day. Участие бесплатное | 2 027 | 6 | Loading... |
25 Люблю использовать CSS-анимацию, например, такую
.ring {
animation: float 2s infinite alternate var(--ease);
animation-delay: calc(
sin((var(--index) / var(--count)) * 45deg)
* -2s
);
}
👉 @frontend_1 | 1 802 | 25 | Loading... |
26 Эффекты мерцания с помощью 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 | 1 956 | 24 | Loading... |
00:18
Video unavailableShow in Telegram
Vercel Data Cache остается неизменным в течение всего периода развертывания
👉 @frontend_1
👍 3
Photo unavailableShow in Telegram
Для первого сезона профильной IT-конференции Podlodka React Crew сложно придумать более нужную тему, чем «архитектура».
Уже 27 мая опытные эксперты научат React-разработчиков:
💜 Решать архитектурные вопросы в разрезе React. В формате круглого стола Сергей Сова, Максим Вишневский и Сергей Самохов обсудят, как строить архитектуру, организовывать компоненты и данные, использовать рендер-движок, задействовать реактивность и учитывать особенности
💜 Применять архитектурный линтер для Feature-Sliced Design. Антон Медведев и Лев Челядинов из FSD core team представят новый линтер и в режиме лайвкодинга покажут, как его применять.
💜 Менять жизненный цикл проектов на React, проектировать гибкое приложение и править негибкое. Редактор «Доки» Полина Гуртовая расскажет, когда мигрировать проект и нужно ли это делать, если он ещё не устарел.
💜 Выбирать стейтменеджер. Валерий Смирнов из Oone.World покажет, когда и какие популярные библиотеки использовать для управления стейтом.
🎁 Бонусы: публичное собеседование по архитектуре и открытый микрофон.
Билеты уже ждут вас на сайте
Реклама. ИП Толстая Елена Петровна ИНН:507503278104
👍 2
Photo unavailableShow in Telegram
Узнайте о позиционировании CSS с помощью следующей шпаргалки 🚀
👉 @frontend_1
👍 9
00:10
Video unavailableShow in Telegram
Создание отзывчивого макета с помощью HTML и CSS 🚀
https://github.com/atherosai/ui/tree/main/layout-04
👉 @frontend_1
👍 5❤ 1
Photo unavailableShow in Telegram
Совет по Javascript 💡
Вы можете не знать об этом сокращенном синтаксисе для объявления метода в object literal
👉 @frontend_1
👍 5👎 1
00:09
Video unavailableShow in Telegram
Создание вкладок с помощью HTML, CSS и JavaScript 🚀
https://github.com/atherosai/ui/tree/main/tabs-02
👉 @frontend_1
❤ 4👍 1
Photo unavailableShow in Telegram
Совет по производительности веб-сайтов 💡
Используйте
Map вместо Object в случае частых добавлений/удалений пар key-value или когда ключи динамические ✅.
👉 @frontend_1👍 3
Photo unavailableShow in Telegram
Frontend meetup
1. Хоп, хлоп, и MVP готов — Дмитрий Карловский, HyOO
Нарисуем полноценный фронтенд без чат-ботов. Поднимем базу данных без сервера. Задеплоим всё на статический сервер без боли. И будем наслаждаться результатом без тормозов.
2. Причины деградации перформанса фронтенда — Денис Басковский, МТС Диджитал
Почему скорость железа не успевает за веб-приложениями. Причины большого количества JS-кода на сайте. SPA по 20мб уже действительность. Инструменты куда мы смотрим чтобы найти про лесы большого размера сайта. Графики скорости и восприятие клиентов. Почему скорость браузерной страницы лагает на 4090ti, а Cyberpunk идет на максималках.
3. Serverless - уже можно? — Андрей Лаврентьев, NDA
Опыт запуска проекта на cloudflare pages и трудности, с которыми пришлось столкнуться на каждом шаге.
Модератор Григорий Петров, Devrel, Evrone
Эксперт Глеб Михеев, Руководитель ПК, FrontendConf
➖➖➖
🗓 22 мая, начало в 19:00 мск, Среда
🌐 ОНЛАЙН
✅ Регистрация на мероприятие
👍 2
00:07
Video unavailableShow in Telegram
Создавайте drag and drop с помощью HTML, CSS и JavaScript 🚀
https://github.com/atherosai/ui/tree/main/drag-and-drop-01
👉 @frontend_1
👍 6💩 1
00:30
Video unavailableShow in Telegram
Совет по использованию инструментов Chrome Dev Tools 💡
Знаете ли вы, что с помощью Chrome Dev Tools можно легко отслеживать, какие события срабатывают на элементе, и просматривать свойства этих событий?
👉 @frontend_1
👍 19🥰 2