Frontend разработчик
Полезные материалы для фронтендера по HTML, CSS, JS, React.js, Angular.js, Vue.js, TypeScript, Redux, MobX, JavaScript, NodeJS. По всем вопросам @evgenycarter
نمایش بیشتر
Network:12 346
مشترکین
-524 ساعت
-287 روز
-2630 روز
توزیع زمان ارسال
در حال بارگیری داده...
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.
تجزیه و تحلیل انتشار
| پست ها | بازدید ها | به اشتراک گذاشته شده | ديناميک بازديد ها |
01 Метаданные в Next.js (статические и динамические)
👉 @frontend_1 | 522 | 8 | Loading... |
02 Собрались как-то разработчик, product owner и QA 🤝
5 июля в 19:00 встречаемся в Санкт-Петербурге на A?.Frontend Party.
С коллегами из соседних экспертиз обсудим: как находить общий язык с QA и менеджером, как реагировать на найденные баги в коде и кто может ставить задачи разработчику. Помимо докладов, всех гостей ждут активности: нетворкинг, технический Alias, баланс борд, игра на укулеле и Угадайка Хабр.
Читайте подробности регистрируйтесь на митап по ссылке ❤️
Ещё больше полезного в канале A?.Frontend Community | 797 | 2 | Loading... |
03 Собрались как-то разработчик, product owner и QA 🤝
5 июля в 19:00 встречаемся в Санкт-Петербурге на A?.Frontend Party.
С коллегами из соседних экспертиз обсудим: как находить общий язык с QA и менеджером, как реагировать на найденные баги в коде и кто может ставить задачи разработчику. Помимо докладов, всех гостей ждут активности: нетворкинг, технический Alias, баланс борд, игра на укулеле и Угадайка Хабр.
Читайте подробности регистрируйтесь на митап по ссылке ❤️
Ещё больше полезного в канале A?.Frontend Community | 1 | 0 | Loading... |
04 Создайте форму входа в систему с помощью HTML и CSS 🚀
https://github.com/atherosai/ui/tree/main/login-04
👉 @frontend_1 | 800 | 12 | Loading... |
05 Собрались как-то разработчик, product owner и QA 🤝
5 июля в 19:00 встречаемся в Санкт-Петербурге на A?.Frontend Party.
С коллегами из соседних экспертиз обсудим: как находить общий язык с QA и менеджером, как реагировать на найденные баги в коде и кто может ставить задачи разработчику. Помимо докладов, всех гостей ждут активности: нетворкинг, технический Alias, баланс борд, игра на укулеле и Угадайка Хабр.
Читайте подробности регистрируйтесь на митап по ссылке ❤️
Ещё больше полезного в канале A?.Frontend Community | 547 | 1 | Loading... |
06 Создаем галерею с красивым эффектом наведения, используя только HTML и CSS 👨💻
https://github.com/atherosai/ui/tree/main/gallery-02
👉 @frontend_1 | 966 | 24 | Loading... |
07 Layout vs Template в Next.js
👉 @frontend_1 | 1 125 | 5 | Loading... |
08 Совет по CSS 💡
Возможно, вы не знаете об этом новом и самом простом способе вертикального центрирования содержимого в box layout
👉 @frontend_1 | 1 229 | 20 | Loading... |
09 Совет по CSS! ✨
Вы можете сделать стили компонентов портативными с помощью контейнерных запросов 😎
Изменение макета карты в зависимости от размера 🔥
Удаление текста кнопки, если она маленькая 🤏
.card {container-type: inline-size;}
@ container (min-width: 50ch) {.info { grid-column: 2; }}
https://codepen.io/jh3y/pen/JjZavRJ
👉 @frontend_1 | 1 677 | 25 | Loading... |
10 Один цвет для светлого, другой для темного? 🌗
Используйте CSS light-dark в сочетании с color-scheme 🤙.
[data-theme=light] { color-scheme: light; }
[data-theme=dark] { color-scheme: dark; }
h1 {
color: light-dark(var(--red), var(--orange));
}
👉 @frontend_1 | 1 359 | 20 | Loading... |
11 Представьте, что вы хотите создавать мощные и интерактивные веб-приложения, но каждый раз сталкиваетесь с трудностями в структуре кода и управлении компонентами. Вы чувствуете, что ваши текущие знания и навыки недостаточны для достижения результата.
А теперь представьте, что вы без труда создаете современные веб-приложения с помощью Angular, успешно используя компоненты, TypeScript, RxJS и Reactive Programming. Вы уверенно разрабатываете интерфейсы, которые нравятся пользователям и используете передовые инструменты для упрощения разработки.
Хотите это реализовать? Приглашаем вас на практический открытый урок «Angular Framework: работа с Компонентами» 24 июня в 20:00 мск. На вебинаре мы разберём структуру фреймворка Angular и научимся использовать компоненты для создания приложений. А еще создадим приложение при помощи ng терминала, поставляемого Angular, и компоненты, которые отобразим на странице.
Этот урок специально разработан для junior-разработчиков, которые хотят познакомиться с фреймворком Angular.
Регистрируйтесь прямо сейчас, чтобы не пропустить бесплатный урок: https://vk.cc/cxNkqP
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru | 1 224 | 2 | Loading... |
12 Как проверить, что страница открыта из кэша Edge Cache на Vercel
👉 @frontend_1 | 1 222 | 6 | Loading... |
13 Создаем dropzone с помощью HTML, CSS и JavaScript 🚀
https://github.com/atherosai/ui/tree/main/dropzone-03
👉 @frontend_1 | 1 340 | 11 | Loading... |
14 👩💻 Хотите научиться создавать API с использованием GraphQL и NestJS?
Ждём вас на открытом практическом уроке от OTUS, где вы получите теоретические знания о GraphqL и NestJS и практические навыки по созданию и интеграции GraphQL с NestJS.
Спикер Николай Лапшин — опытный разработчик на нескольких языках, архитектор, тимлид и преподаватель.
Встречаемся 25 июня в 20:00 мск в преддверии старта курса «JavaScript Developer. Professional».
Все участники вебинара получат специальную цену на обучение!
➡️ Регистрируйтесь прямо сейчас, чтобы не пропустить бесплатный урок: https://vk.cc/cxKIWJ
🎁 Только до 23 июня скидка 10%, подробности у наших менеджеров.
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576 | 1 323 | 0 | Loading... |
15 Spectral.js - это библиотека для смешивания красок, использующая теорию Кубелки-Мунка.
Используя возможности теории Кубелки-Мунка, надежной научной модели, имитирующей взаимодействие света с краской, Spectral.js гарантирует, что ваши проекты будут иметь яркие и реалистичные цвета.
Благодаря использованию 7 различных спектральных каналов, включая белый, голубой, пурпурный, желтый, красный, зеленый и синий, Spectral.js может быть эффективно использован в различных веб-проектах, таких как:
Веб-дизайн: Насыщайте свои веб-дизайны реалистичными цветовыми палитрами благодаря способности Spectral.js к реалистичному смешиванию цветов.
Графика: Повысьте качество графики, используя реалистичное смешивание цветов, которое точно отражает взаимодействие света с различными оттенками.
Генеративное искусство: Создавайте захватывающее генеративное искусство, используя мощные возможности смешивания цветов Spectral.js, в результате чего получаются визуально ошеломляющие и динамичные творения.
Воспользуйтесь гибкостью и точностью, которые предлагает Spectral.js, и преобразуйте свои проекты с помощью обширной и яркой цветовой палитры, имитирующей реальное взаимодействие цветов.
https://github.com/rvanwijnen/spectral.js
👉 @frontend_1 | 1 327 | 12 | Loading... |
16 Совет по CSS 💡
Несмотря на некоторые ограничения в отдельных браузерах, мы можем изменять размеры любого блочного элемента, а не только textarea! 🤯
👉 @frontend_1 | 1 393 | 18 | Loading... |
17 Интерактивное объяснение CSS calc()
👉 @frontend_1 | 1 622 | 24 | Loading... |
18 Полный гайд по CSS Flexbox с примерами из практики
Это первая статья по HTML&CSS из серии. И начать я решил именно с Flexbox. В интернете уже довольно много гайдов по Flexbox в CSS. Но чаще всего это шпаргалки, которые не сильно помогают разобраться как на самом деле все работает. Я постараюсь раскрыть тему на реальных примерах. А в конце статьи поделюсь лайфхаками, которыми сам постоянно пользуюсь в работе.
Если вам больше нравится воспринимать информацию в видео-формате, то можете посмотреть ролик.
https://habr.com/ru/articles/816349/
👉 @frontend_1 | 2 371 | 37 | Loading... |
19 👩💻 Хочешь выйти на максимальный уровень в веб-разработке на JavaScript?
Пройди тест по JavaScript и проверь свои знания.
Ответишь — пройдешь на продвинутый курс "JavaScript Developer. Professional" от OTUS по специальной цене + получишь доступ к записям открытых уроков курса курса
👉 ПРОЙТИ ТЕСТ: https://vk.cc/cxBwfy
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576 | 1 940 | 1 | Loading... |
20 CSS border values
👉 @frontend_1 | 1 706 | 5 | Loading... |
21 Возможно, будет полезно задуматься о клиентских компонентах React как об API для создания интерактивных HTML-элементов (аналогично стандартному вводу или выбору в браузере).
👉 @frontend_1 | 1 684 | 10 | Loading... |
22 Создание аватаров с анимацией при наведении с помощью HTML и CSS 🚀
https://github.com/atherosai/ui/tree/main/avatars-01
👉 @frontend_1 | 1 707 | 12 | Loading... |
23 Подборка 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 575 | 11 | Loading... |
24 Conform - это потрясающе
- Валидация клиента + сервера из одной схемы Zod
- Прогрессивное улучшение
- Восхитительно простой API
- Работает с Next.js ( server actions + useFormState)
👉 @frontend_1 | 1 823 | 15 | Loading... |
25 Начали свой путь в разработке на JS? Хотите продвинуться дальше?
Тогда ждём вас на открытом практическом уроке «Объектно-ориентированный JavaScript и функции конструкторов» от OTUS, где мы разберем:
▫️как наследуются свойства в объектах;
▫️объектную модель JavaScript;
▫️написание ООП-кода с экономией памяти;
▫️создание объектов при помощи функций конструкторов с наследованием свойств.
Встречаемся 18 июня в 20:00 мск в рамках курса «Специализация Fullstack Developer». Все участники вебинара получат специальную цену на обучение!
➡️ Регистрируйтесь прямо сейчас, чтобы не пропустить бесплатный урок: https://vk.cc/cxqIUB
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576 | 1 957 | 1 | Loading... |
26 Становится ли дочерний компонент клиентского компонента также клиентским компонентом?
👉 @frontend_1 | 1 744 | 7 | Loading... |
27 Теперь в CSS появилась функция Math.pow() от JavaScript, и вы можете генерировать плавные изменения масштаба шрифтов в CSS для размеров области просмотра/контейнера 👀
:where(dd) {
--min: calc(17 * pow(1.2, var(--lvl, 0)));
font-size: clamp(var(--min), var(--fluid), var(--max)); ✨
}
dd:nth-of-type(2) { --lvl: 2; }
👉 @frontend_1 | 1 964 | 28 | Loading... |
28 👩💻 Стань настоящим гуру в веб-разработке на JS с курсом от OTUS
Пройди тест по JavaScript и проверь свои знания.
Ответишь — пройдешь на продвинутый курс "JavaScript Developer. Professional" от OTUS по специальной цене + получишь доступ к записям открытых уроков курса курса
👉 ПРОЙТИ ТЕСТ: https://vk.cc/cxp8d4
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576 | 1 782 | 0 | Loading... |
29 Валидация форм - это сложно.
Что если бы существовала либа форм Next.js, которая бы выполняла валидацию как на клиенте, так и на сервере из одной схемы Zod 👀.
👉 @frontend_1 | 1 786 | 13 | Loading... |
30 View Transitions — это подарок 🎁
Один набор CSS keyframes и одна локальная пользовательская переменная для ::view-transition-old/new(body) 🚀
👉 @frontend_1 | 1 729 | 20 | Loading... |
00:39
Video unavailableShow in Telegram
Метаданные в Next.js (статические и динамические)
👉 @frontend_1
24jueOj-mG4V9Ivj.mp42.93 MB
👍 5
Собрались как-то разработчик, product owner и QA 🤝
5 июля в 19:00 встречаемся в Санкт-Петербурге на A?.Frontend Party.
С коллегами из соседних экспертиз обсудим: как находить общий язык с QA и менеджером, как реагировать на найденные баги в коде и кто может ставить задачи разработчику. Помимо докладов, всех гостей ждут активности: нетворкинг, технический Alias, баланс борд, игра на укулеле и Угадайка Хабр.
Читайте подробности регистрируйтесь на митап по ссылке ❤️
Ещё больше полезного в канале A?.Frontend Community
❤ 3👍 2🔥 1
Собрались как-то разработчик, product owner и QA 🤝
5 июля в 19:00 встречаемся в Санкт-Петербурге на A?.Frontend Party.
С коллегами из соседних экспертиз обсудим: как находить общий язык с QA и менеджером, как реагировать на найденные баги в коде и кто может ставить задачи разработчику. Помимо докладов, всех гостей ждут активности: нетворкинг, технический Alias, баланс борд, игра на укулеле и Угадайка Хабр.
Читайте подробности регистрируйтесь на митап по ссылке ❤️
Ещё больше полезного в канале A?.Frontend Community
00:12
Video unavailableShow in Telegram
Создайте форму входа в систему с помощью HTML и CSS 🚀
https://github.com/atherosai/ui/tree/main/login-04
👉 @frontend_1
Up7K8fBWlVPBTZOj.mp40.80 KB
👏 4👍 3
Photo unavailableShow in Telegram
Собрались как-то разработчик, product owner и QA 🤝
5 июля в 19:00 встречаемся в Санкт-Петербурге на A?.Frontend Party.
С коллегами из соседних экспертиз обсудим: как находить общий язык с QA и менеджером, как реагировать на найденные баги в коде и кто может ставить задачи разработчику. Помимо докладов, всех гостей ждут активности: нетворкинг, технический Alias, баланс борд, игра на укулеле и Угадайка Хабр.
Читайте подробности регистрируйтесь на митап по ссылке ❤️
Ещё больше полезного в канале A?.Frontend Community
🎉 3👍 2
00:08
Video unavailableShow in Telegram
Создаем галерею с красивым эффектом наведения, используя только HTML и CSS 👨💻
https://github.com/atherosai/ui/tree/main/gallery-02
👉 @frontend_1
d1nXFyssvhqRXwhI.mp45.10 KB
👍 10
00:43
Video unavailableShow in Telegram
Layout vs Template в Next.js
👉 @frontend_1
gZjZfX1xvFnNVVMz.mp42.29 MB
🔥 4
Photo unavailableShow in Telegram
Совет по CSS 💡
Возможно, вы не знаете об этом новом и самом простом способе вертикального центрирования содержимого в box layout
👉 @frontend_1
👏 5👍 4
00:29
Video unavailableShow in Telegram
Совет по CSS! ✨
Вы можете сделать стили компонентов портативными с помощью контейнерных запросов 😎
Изменение макета карты в зависимости от размера 🔥
Удаление текста кнопки, если она маленькая 🤏
.card {container-type: inline-size;}
@ container (min-width: 50ch) {.info { grid-column: 2; }}
https://codepen.io/jh3y/pen/JjZavRJ
👉 @frontend_13434.mp44.87 KB
👍 7
00:18
Video unavailableShow in Telegram
Один цвет для светлого, другой для темного? 🌗
Используйте CSS light-dark в сочетании с color-scheme 🤙.
[data-theme=light] { color-scheme: light; }
[data-theme=dark] { color-scheme: dark; }
h1 {
color: light-dark(var(--red), var(--orange));
}
👉 @frontend_1J1MUTU_30eXUHrTL.mp44.55 KB
👍 6
یک طرح متفاوت انتخاب کنید
طرح فعلی شما تنها برای 5 کانال تجزیه و تحلیل را مجاز می کند. برای بیشتر، لطفا یک طرح دیگر انتخاب کنید.