Learn frontend tips
@tips_frontend
1012 лучших совета по Frontend
Авторские права, сотрудничество: @sul_furas
Learn frontend tips (Russian)
В постоянно развивающемся мире веб-разработки, быть в курсе последних тенденций и технологий является ключевым фактором успеха. Именно для этого был создан наш Telegram канал под названием "tips_frontend". Здесь вы найдёте множество полезных советов и рекомендаций для frontend разработчиков, которые помогут вам улучшить свои навыки и стать более востребованными на рынке труда.
В канале представлены подсказки по таким темам, как:
✓ HTML
✓ CSS
✓ JavaScript
✓ UX/UI
Мы постоянно обновляем контент канала, чтобы держать вас в курсе последних изменений и новинок в мире frontend разработки. Кроме того, у нас вы сможете найти интересные статьи, видеоуроки и ресурсы, которые помогут вам расширить свои знания и навыки.
Если у вас есть какие-то вопросы или вы хотите поделиться своими знаниями с другими участниками канала, не стесняйтесь обращаться к администратору канала @deathwarlock. Он всегда готов помочь вам и ответить на все ваши вопросы. Присоединяйтесь к нашему каналу "tips_frontend" прямо сейчас и станьте лучшим frontend разработчиком! 🚀
Learn frontend tips
09 Feb, 04:17
Топ-40, которые необходимы каждому разработчику
➡️ @tips_frontend
Learn frontend tips
07 Feb, 04:00
Ознакомьтесь с этим руководством по выравниванию сетки CSS
➡️ @tips_frontend
Learn frontend tips
03 Feb, 04:14
Основные команды Git для ежедневного использования
➡️ @tips_frontend
Learn frontend tips
31 Jan, 05:27
Sams Teach Yourself Java in 21 Days (Covers Java 11/12), 8th Edition (2020)
Автор: Роджерс Каденхед
➡️ @tips_frontend
Автор: Роджерс Каденхед
Learn frontend tips
29 Jan, 08:51
Cryptocurrency Master Bundle: Все, что вам нужно знать о криптовалюте и биткоине: торговля, майнинг, инвестирование, Ethereum, ICO и блокчейн (2018)
➡️ @tips_frontend
Learn frontend tips
26 Jan, 15:12
80 лучших вопросов и ответов для собеседования по SQL
➡️ @tips_frontend
Learn frontend tips
24 Jan, 13:06
Термины науки о данных, которые вы должны знать
➡️ @tips_frontend
Learn frontend tips
14 Jan, 08:58
Совет по инструментам для разработчиков Chrome
Легко перечислить/удалить слушателей событий, прикрепленных к элементу, для быстрой отладки
➡️ @tips_frontend
Легко перечислить/удалить слушателей событий, прикрепленных к элементу, для быстрой отладки
Learn frontend tips
13 Jan, 05:15
Создайте эту приборную панель с помощью HTML, CSS и JavaScrip
➡️ @tips_frontend
Learn frontend tips
12 Jan, 14:06
🌟 Привет, друзья! 🌟
Вы увлечены технологиями и хотите узнать больше о DevOps? 🚀 Присоединяйтесь к нашему каналу! Мы делимся полезными советами, инструментами и последними трендами в мире DevOps! 💻✨
📚 Учитесь у экспертов, задавайте вопросы и становитесь частью сообщества единомышленников! 🤝
Не упустите возможность погрузиться в мир автоматизации, CI/CD и эффективного управления проектами! 💡🔧
👉 Подписывайтесь и начните свой путь в DevOps вместе с нами! 🌐
🚀 Присоединяйтесь к каналу
#DevOps #Технологии #Присоединяйтесь
Вы увлечены технологиями и хотите узнать больше о DevOps? 🚀 Присоединяйтесь к нашему каналу! Мы делимся полезными советами, инструментами и последними трендами в мире DevOps! 💻✨
📚 Учитесь у экспертов, задавайте вопросы и становитесь частью сообщества единомышленников! 🤝
Не упустите возможность погрузиться в мир автоматизации, CI/CD и эффективного управления проектами! 💡🔧
👉 Подписывайтесь и начните свой путь в DevOps вместе с нами! 🌐
#DevOps #Технологии #Присоединяйтесь
Learn frontend tips
09 Jan, 15:52
50 сайтов для бесплатных HTML и CSS шаблонов
### Общие сайты с шаблонами
http://colorlib.com
http://templatemo.com
http://free-css.com
http://html5up.net
http://bootstrapmade.com
http://startbootstrap.com
http://nicepage.com
http://untree.co
http://templated.co
http://freehtml5.co
### Шаблоны для бизнеса и корпоративных сайтов
http://w3layouts.com
http://themefisher.com
http://smarteyeapps.com
http://bestfreehtmlcsstemplates.com
http://websitetemplatesonline.com
http://os-templates.com
http://all-free-download.com/free-website-templates/
http://freewebsitetemplates.com
http://freebiefy.com
http://designseer.com
### Шаблоны для электронной коммерции
http://shopify.in/templates
http://openelement.com/en/templates
http://cssauthor.com
http://designmodo.com/free-templates
http://99designs.com/blog/web-digital/free-website-templates
http://htmltemplates.co
http://tooplate.com
http://freshdesignweb.com/free-html-templates/
http://superdevresources.com/html-templates/
http://bootstrapzero.com
### Шаблоны для портфолио и личных сайтов
http://graphicburger.com/html-css-templates/
http://themezy.com
http://pagecloud.com/templates
http://awwwards.com/templates/
http://creativemarket.com/templates
http://mobirise.com/free-templates
http://themehunt.com
http://html5webtemplates.co.uk
http://layoutit.com/templates
http://snipcart.com/templates
### Шаблоны для блогов и других целей
http://ui8.net/templates
http://pixfort.com/templates
http://htmlcodex.com
http://creative-tim.com/templates/free
http://onedesblog.com/free-html-templates/
http://html.design
http://templatetide.com
http://webthemez.com
http://freehtmlcsstemplates.net
http://wowthemes.net
➡️ @tips_frontend
### Общие сайты с шаблонами
http://colorlib.com
http://templatemo.com
http://free-css.com
http://html5up.net
http://bootstrapmade.com
http://startbootstrap.com
http://nicepage.com
http://untree.co
http://templated.co
http://freehtml5.co
### Шаблоны для бизнеса и корпоративных сайтов
http://w3layouts.com
http://themefisher.com
http://smarteyeapps.com
http://bestfreehtmlcsstemplates.com
http://websitetemplatesonline.com
http://os-templates.com
http://all-free-download.com/free-website-templates/
http://freewebsitetemplates.com
http://freebiefy.com
http://designseer.com
### Шаблоны для электронной коммерции
http://shopify.in/templates
http://openelement.com/en/templates
http://cssauthor.com
http://designmodo.com/free-templates
http://99designs.com/blog/web-digital/free-website-templates
http://htmltemplates.co
http://tooplate.com
http://freshdesignweb.com/free-html-templates/
http://superdevresources.com/html-templates/
http://bootstrapzero.com
### Шаблоны для портфолио и личных сайтов
http://graphicburger.com/html-css-templates/
http://themezy.com
http://pagecloud.com/templates
http://awwwards.com/templates/
http://creativemarket.com/templates
http://mobirise.com/free-templates
http://themehunt.com
http://html5webtemplates.co.uk
http://layoutit.com/templates
http://snipcart.com/templates
### Шаблоны для блогов и других целей
http://ui8.net/templates
http://pixfort.com/templates
http://htmlcodex.com
http://creative-tim.com/templates/free
http://onedesblog.com/free-html-templates/
http://html.design
http://templatetide.com
http://webthemez.com
http://freehtmlcsstemplates.net
http://wowthemes.net
Learn frontend tips
09 Jan, 13:48
Mr.Robot — обучение хакингу в простой и доступной форме.
➖ Видеокурсы, книги, гайды
➖ OSINT, социальная инженерия, пентест
➖ Тесты, CTF, практика
Советуем подписаться — https://t.me/+VOujnf7_b7ZmYThi
➖ Видеокурсы, книги, гайды
➖ OSINT, социальная инженерия, пентест
➖ Тесты, CTF, практика
Советуем подписаться — https://t.me/+VOujnf7_b7ZmYThi
Learn frontend tips
05 Jan, 15:19
Совет по HTML
Чтобы повысить отзывчивость вашего сайта, включите тег <meta> viewport в раздел <head> вашего HTML-документа.
Этот тег помогает управлять макетом на мобильных устройствах и гарантирует, что ваш сайт будет правильно адаптироваться к различным размерам экрана.
➡️ @tips_frontend
Чтобы повысить отзывчивость вашего сайта, включите тег <meta> viewport в раздел <head> вашего HTML-документа.
Этот тег помогает управлять макетом на мобильных устройствах и гарантирует, что ваш сайт будет правильно адаптироваться к различным размерам экрана.
Learn frontend tips
05 Jan, 11:38
Совет по Javascript
Знаете ли вы, что мы можем легко добавить пользовательскую валидацию формы с помощью метода setCustomValidity()?👇
➡️ @tips_frontend
Знаете ли вы, что мы можем легко добавить пользовательскую валидацию формы с помощью метода setCustomValidity()?
Learn frontend tips
03 Jan, 03:56
15 элементов HTML, о существовании которых вы даже не подозревали
➡️ @tips_frontend
Learn frontend tips
02 Jan, 09:19
80 идей проектов Frontend-разработки на 2025 год
➡️ @tips_frontend
Learn frontend tips
30 Dec, 04:25
Chrome DevTools может переопределять содержимое запросов Fetch/XHR! Полезно для имитации API, не дожидаясь изменений в бэкенде.
➡️ @tips_frontend
Learn frontend tips
29 Dec, 06:01
Совет по HTML
Реализуйте чистые разрывы строк для длинных URL с помощью элемента <wbr>
➡️ @tips_frontend
Реализуйте чистые разрывы строк для длинных URL с помощью элемента <wbr>
Learn frontend tips
28 Dec, 14:25
Совет по CSS
Вы можете использовать псевдокласс CSS
➡️ @tips_frontend
Вы можете использовать псевдокласс CSS
:in-range для элементов <input> с атрибутами min и max, чтобы стилизовать элемент со значением в пределах заданного диапазона.
Learn frontend tips
27 Dec, 15:10
Господи, да в чём проблема стать фронтендером?
Подписался на эти три канала:
👉 Фронтенд
👉 Верстка
👉 Node.JS
Заходишь каждый день, тратишь 15 минут и изучаешь актуальную информацию. Можешь сразу применять на практике. ВСЁ!
Это настолько просто, что даже твой кот справится. Подпишись сейчас, потом спасибо скажешь.
Подписался на эти три канала:
👉 Фронтенд
👉 Верстка
👉 Node.JS
Заходишь каждый день, тратишь 15 минут и изучаешь актуальную информацию. Можешь сразу применять на практике. ВСЁ!
Это настолько просто, что даже твой кот справится. Подпишись сейчас, потом спасибо скажешь.
Learn frontend tips
24 Dec, 10:52
800 с лишним вопросов и ответов для собеседования по SQL-серверу
➡️ @tips_frontend
Learn frontend tips
23 Dec, 08:59
3D-карта товара 🖥 🖥 🖥
Сохраняй в избранное, пригодится
➡️ @tips_frontend
Сохраняй в избранное, пригодится
Learn frontend tips
22 Dec, 05:46
В CSS можно сделать
➡️ @tips_frontend
attribute selector регистронезависимым: на заметку фронтенд-разработчику
Learn frontend tips
21 Dec, 10:22
15 полезных сайтов, которые упростят вашу работу и не только: подборка для фронтенд-разработчика 🔥
✹ Визуализация регулярных выражений JavaScript
✹ Документация для разработчиков: онлайн + офлайн
✹ cdnjs: поиск библиотек с открытым исходным кодом
✹ Фотосток с огромной коллекцией изображений
✹ Интеллектуальное сжатие WebP, PNG и JPEG
✹ Удаление фона изображения
✹ Создание красивых изображений с исходным кодом
✹ Подбор палитры цветов для разработки дизайна
✹ Тестирование и демонстрация сниппетов на основе HTML, CSS и JavaScript
✹ Иконки с открытым исходным кодом
✹ Проверка совместимости CSS и JavaScript в различных популярных браузерах
✹ Создание файла README
✹ Проверка производительности сайта
✹ Редактирование фотографий
✹ Подборка иллюстраций без лицензии
➡️ @tips_frontend
✹ Визуализация регулярных выражений JavaScript
✹ Документация для разработчиков: онлайн + офлайн
✹ cdnjs: поиск библиотек с открытым исходным кодом
✹ Фотосток с огромной коллекцией изображений
✹ Интеллектуальное сжатие WebP, PNG и JPEG
✹ Удаление фона изображения
✹ Создание красивых изображений с исходным кодом
✹ Подбор палитры цветов для разработки дизайна
✹ Тестирование и демонстрация сниппетов на основе HTML, CSS и JavaScript
✹ Иконки с открытым исходным кодом
✹ Проверка совместимости CSS и JavaScript в различных популярных браузерах
✹ Создание файла README
✹ Проверка производительности сайта
✹ Редактирование фотографий
✹ Подборка иллюстраций без лицензии
Learn frontend tips
20 Dec, 09:39
CSS sticky в действии, или Как прикрепить заголовок таблицы
Поиграть можно здесь
➡️ @tips_frontend
Поиграть можно здесь
Learn frontend tips
19 Dec, 10:53
HTML-элемент <dialog> в действии, или Как просто создать модальное окно
Поиграть можно здесь
➡️ @tips_frontend
Поиграть можно здесь
Learn frontend tips
18 Dec, 09:57
Простой способ анимации иконки при нажатии/фокусе: на заметку фронтенд-разработчику
➡️ @tips_frontend
Learn frontend tips
16 Dec, 09:31
Быстрый способ доступа к результату последнего выражения в консоли Chrome: на заметку фронтенд-разработчику
➡️ @tips_frontend
Learn frontend tips
15 Dec, 06:49
Одно правило CSS для отображения * у всех обязательных меток полей: на заметку фронтенд-разработчику
↘️ Поиграть можно здесь
➡️ @tips_frontend
Learn frontend tips
14 Dec, 17:04
20 методов сокращения JavaScript для повышения эффективности
Сокращение кода — это компромисс между производительностью и удобочитаемостью.
Читайте подробнее
➡️ @tips_frontend
Сокращение кода — это компромисс между производительностью и удобочитаемостью.
Читайте подробнее
Learn frontend tips
26 Nov, 04:12
Использовать новые функции CSS и применять резервные стили в неподдерживаемых браузерах можно с помощью правила
➡️ @tips_frontend
supports. То же самое можно сделать и в JavaScript
Learn frontend tips
25 Nov, 13:19
Мы не можем изменить цвет внешней SVG-иконки с помощью свойств
➡️ @tips_frontend
fill/storke, но есть способ сделать это с помощью CSS mask
Learn frontend tips
25 Nov, 07:00
Как легко прокачать навыки верстки и найти работу?
Присоединяйся к каналам опытного верстальщика:
2. Вёрстка сайтов | HTML, CSS, JS — здесь собраны бесплатные, структурированные уроки и различные материалы по HTML, CSS, JS, а также советы по заработку на фрилансе.
2. Работа — вёрстка и фронтенд — канал с лучшими вакансиями и проектами с фриланса по вёрстке и фронтенду
Научись и зарабатывай на верстке!
Присоединяйся к каналам опытного верстальщика:
2. Вёрстка сайтов | HTML, CSS, JS — здесь собраны бесплатные, структурированные уроки и различные материалы по HTML, CSS, JS, а также советы по заработку на фрилансе.
2. Работа — вёрстка и фронтенд — канал с лучшими вакансиями и проектами с фриланса по вёрстке и фронтенду
Научись и зарабатывай на верстке!
Learn frontend tips
25 Nov, 06:01
Простой способ добавить кастомные проверки форм с помощью JavaScript-метода
Поиграть можно здесь
➡️ @tips_frontend
setCustomValidity(): на заметку фронтенд-разработчикуПоиграть можно здесь
Learn frontend tips
24 Nov, 03:21
Простой и правильный способ отображения таймера с помощью
Поиграть можно здесь
➡️ @tips_frontend
tabular-nums: на заметку фронтенд-разработчикуПоиграть можно здесь
Learn frontend tips
23 Nov, 04:16
Поиграть можно здесь
Learn frontend tips
22 Nov, 16:17
Адаптивные SVG на практике
Расширьте свои знания о работе с SVG, чтобы получить масштабируемый и адаптивный интерфейс.
▶️ Читать
➡️ @tips_frontend
Расширьте свои знания о работе с SVG, чтобы получить масштабируемый и адаптивный интерфейс.
Learn frontend tips
21 Nov, 13:51
Не нужно ждать изменений от backend API. Мы можем легко переопределить ответ на любой запрос локально, чтобы продолжить работу с помощью Dev Tools
➡️ @tips_frontend
Learn frontend tips
21 Nov, 11:04
Совет фронтендерам: уважайте свое время
В Html Gram собраны готовые и уникальные codepen решения на каждый день. От эффектов при наведении до 3D анимации.
Учитесь, практикуйтесь и прокачивайте свое портфолио вместе с @HtmlGram
В Html Gram собраны готовые и уникальные codepen решения на каждый день. От эффектов при наведении до 3D анимации.
Учитесь, практикуйтесь и прокачивайте свое портфолио вместе с @HtmlGram
Learn frontend tips
21 Nov, 06:34
Простой кейс реализации паузы/старта видео в зависимости от состояния видимости страницы
🔜 Поиграть можно здесь
➡️ @tips_frontend
Learn frontend tips
20 Nov, 16:45
7 способов скрыть элемент с помощью CSS: на заметку фронтенд-разработчику
➡️ @tips_frontend
Learn frontend tips
20 Nov, 07:52
Знаете ли вы, почему мы не можем создавать новые инстансы из стрелочной функции в JavaScript? 👆
➡️ @tips_frontend
Learn frontend tips
19 Nov, 08:04
Что нужно знать о современном CSS: на заметку фронтенд-разработчику
Подборка современных дополнений к CSS: container queries, nesting, scroll-driven animations, view transitions, :has() и многие другие.
🔜 Читать
➡️ @tips_frontend
Подборка современных дополнений к CSS: container queries, nesting, scroll-driven animations, view transitions, :has() и многие другие.
Learn frontend tips
18 Nov, 17:05
Начав свою историю как коллекция из нескольких сотен пунктов, с тех пор её сократили до менее чем 200 за счет удаления всех устаревших проектов и сосредоточения внимания на самом главном.
Learn frontend tips
18 Nov, 15:04
Господи, да в чём проблема стать фронтендером?
Подписался на эти три канала:
👉 Фронтенд
👉 Верстка
👉 Node.JS
Заходишь каждый день, тратишь 15 минут и изучаешь актуальную информацию. Можешь сразу применять на практике. ВСЁ!
Это настолько просто, что даже твой кот справится. Подпишись сейчас, потом спасибо скажешь.
Подписался на эти три канала:
👉 Фронтенд
👉 Верстка
👉 Node.JS
Заходишь каждый день, тратишь 15 минут и изучаешь актуальную информацию. Можешь сразу применять на практике. ВСЁ!
Это настолько просто, что даже твой кот справится. Подпишись сейчас, потом спасибо скажешь.
Learn frontend tips
18 Nov, 05:58
Знаете ли вы, что мы можем разместить кнопку отправки формы за пределами формы?
В большинстве случаев кнопка отправки находится внутри тега <form>, но иногда, из-за особенностей макета или других причин, её можно разместить снаружи. Просто используйте атрибуты
➡️ @tips_frontend
В большинстве случаев кнопка отправки находится внутри тега <form>, но иногда, из-за особенностей макета или других причин, её можно разместить снаружи. Просто используйте атрибуты
form и id.
Learn frontend tips
17 Nov, 04:18
Простой способ сортировки без учета регистра в JavaScript: на заметку фронтенд-разработчику
➡️ @tips_frontend
Learn frontend tips
16 Nov, 06:53
React + структуры данных = суперкод: 7 примеров для практики
Представляешь, оказывается, если правильно подобрать структуру данных, можно не только заставить приложение летать, но и сделать код настолько чистым и красивым, что глаз не оторвать. Серьезно, это как убраться в квартире — и жить приятнее, и гостей не стыдно позвать. Причем, это не какая-то там магия — это просто грамотный подход, который может освоить каждый разработчик, было бы желание!
🔜 Читать статью
➡️ @tips_frontend
Представляешь, оказывается, если правильно подобрать структуру данных, можно не только заставить приложение летать, но и сделать код настолько чистым и красивым, что глаз не оторвать. Серьезно, это как убраться в квартире — и жить приятнее, и гостей не стыдно позвать. Причем, это не какая-то там магия — это просто грамотный подход, который может освоить каждый разработчик, было бы желание!
Learn frontend tips
14 Nov, 13:04
Тестирование React-приложений на практике
Запись 5-часового воркшопа о TDD и тестировании React приложений, в рамках которого Александр Беспоясов написал конвертер валют и покрыл его тестами. Вы узнаете, как:
☑️ Выделять и тестировать бизнес-логику
☑️ Разделять код на модули так, чтобы их было удобно тестировать
☑️ Применять разные стратегии моков, готовить стабы и тестовые данные
☑️ Тестировать сайд-эффекты и React-хуки
☑️ Работать с асинхронными функциями и тестировать их
☑️ Подключать сторонние библиотеки через адаптеры для удобного тестирования
▶️ Смотреть
➡️ @tips_frontend
Запись 5-часового воркшопа о TDD и тестировании React приложений, в рамках которого Александр Беспоясов написал конвертер валют и покрыл его тестами. Вы узнаете, как:
☑️ Выделять и тестировать бизнес-логику
☑️ Разделять код на модули так, чтобы их было удобно тестировать
☑️ Применять разные стратегии моков, готовить стабы и тестовые данные
☑️ Тестировать сайд-эффекты и React-хуки
☑️ Работать с асинхронными функциями и тестировать их
☑️ Подключать сторонние библиотеки через адаптеры для удобного тестирования
Learn frontend tips
14 Nov, 11:04
♨️ Прокачивай свои навыки вместе с Java | Фишки и трюки
Ежедневные порции Java-фишек, полезные советы и трюки от опытных разработчиков.
👉🏼 Присоединиться
Ежедневные порции Java-фишек, полезные советы и трюки от опытных разработчиков.
👉🏼 Присоединиться
Learn frontend tips
13 Nov, 17:04
HTML-элемент
➡️ @tips_frontend
<meter> в действии: на заметку фронтенд-разработчику
Learn frontend tips
13 Nov, 15:04
📌Есть только 2 способа стать JavaScript Senior:
1. Часами просматривать видео на YouTube, документацию и решать сложные задачи, так и не достигнув ощутимого прогресса
2. Следить за каналом «JavaScript Senior» и сократить 70% времени на подготовку к собеседованиям и улучшение навыков!
Получай полезные сниппеты, актуальные вопросы с собеседований и будь в курсе последних новинок – подпишись @JavaScriptSenior!
1. Часами просматривать видео на YouTube, документацию и решать сложные задачи, так и не достигнув ощутимого прогресса
2. Следить за каналом «JavaScript Senior» и сократить 70% времени на подготовку к собеседованиям и улучшение навыков!
Получай полезные сниппеты, актуальные вопросы с собеседований и будь в курсе последних новинок – подпишись @JavaScriptSenior!
Learn frontend tips
11 Nov, 14:17
Как устроена асинхронность в JavaScript: гайд для фронтенд-разработчика
⏩ Что такое Event loop и очередь событий?
⏩ При чём здесь Web API?
⏩ Как работают промисы и async/await?
🔜 Читать
➡️ @tips_frontend
Learn frontend tips
08 Nov, 03:58
Простой способ изменения числового представления упорядоченного списка в CSS: на заметку фронтенд-разработчику
➡️ @tips_frontend
Learn frontend tips
07 Nov, 05:46
Руководство по Next.js: пополняемая серия для фронтенд-разработчика
⏩ Часть 1
⏩ Часть 2
⏩ Часть 3
➡️ @tips_frontend
Learn frontend tips
06 Nov, 08:25
Простой способ упрощения CSS селекторов с использованием
➡️ @tips_frontend
:where(): на заметку фронтенд-разработчику
Learn frontend tips
03 Nov, 04:24
Простая шпаргалка по поисковой оптимизации для веб-разработчика
➡️ @tips_frontend
Learn frontend tips
02 Nov, 08:04
Подборка 3500++ редких книг по:
"Информация и знания должны быть доступны и бесплатны для всех.." Администрация
Learn frontend tips
31 Oct, 11:11
Если вы добавляете символы кавычек, используйте в качестве содержимого
👉 Подробнее
➡️ @tips_frontend
open-quote и close-quote, поскольку они учитывают язык документа.👉 Подробнее
Learn frontend tips
31 Oct, 07:15
Псевдокласс
Это помогает избегать ненужного выделения элементов при навигации с помощью мыши, что делает интерфейс менее загроможденным и более чистым.
➡️ @tips_frontend
:focus-visible вместо :focus в CSS применяется только тогда, когда фокусировка элемента происходит способами, видимыми для пользователя, например, через клавиатурный ввод. Это помогает избегать ненужного выделения элементов при навигации с помощью мыши, что делает интерфейс менее загроможденным и более чистым.
Learn frontend tips
30 Oct, 14:17
Полезный сниппет, позволяющий скрыть контент, но оставить его доступным для скрин-ридеров
Поиграть можно здесь
➡️ @tips_frontend
Поиграть можно здесь
Learn frontend tips
29 Oct, 15:04
Learn frontend tips
29 Oct, 11:14
Мы не можем изменить цвет внешней SVG-иконки с помощью свойств
➡️ @tips_frontend
fill/storke, но есть способ сделать это с помощью CSS mask
Learn frontend tips
27 Oct, 08:04
Простой способ изменения стиля кнопки выбора файлов с помощью CSS: на заметку фронтенд-разработку
➡️ Поиграть можно здесь
➡️ @tips_frontend
Learn frontend tips
26 Oct, 13:53
Знаете ли вы, что к числам в упорядоченном списке можно добавить 0?
➡️ @tips_frontend
Learn frontend tips
25 Oct, 13:16
Простой способ форматирования числа в качестве валюты без использования сторонних библиотек
Поиграть можно здесь
➡️ @tips_frontend
Поиграть можно здесь
Learn frontend tips
24 Oct, 15:19
Краш-курс по JavaScript Promises от
Kevin Powell👩💻
Таймкоды:
00:00 Introduction
01:40 Creating a promise
03:50 Errors and catch
05:20 Chaining multiple methods
07:42 Using finally
08:54 Practical examples
14:05 async and await
16:45 gotchas with async and await
22:00 Which approach should you use?
📱 Смотреть полностью
➡️ @tips_frontend
Kevin Powell
Таймкоды:
00:00 Introduction
01:40 Creating a promise
03:50 Errors and catch
05:20 Chaining multiple methods
07:42 Using finally
08:54 Practical examples
14:05 async and await
16:45 gotchas with async and await
22:00 Which approach should you use?
Learn frontend tips
24 Oct, 13:04
Бесплатное IT-образование в 2024
Отобрали для вас полезные телеграм-каналы, которые помогут освоить программирование и другие IT-направления
Выбирайте нужное и подписывайтесь:
👩💻 Frontend: @FrontendPortal
⚙️ Backend: @BackendPortal
📱 GitHub: @git_developer
🤓 Книги айти: @portalToIT
👩💻 Python: @PythonPortal
👩💻 Java: @Java_Iibrary
👩💻 C#: @KodBlog
👩💻 С/С++: @Cpportal
🖥 Базы Данных & SQL: @SQL
👩💻 Golang: @juniorGolang
👩💻 PHP: @PHPortal
👩💻 Моб. разработка: @MobDev
👩💻 Разработка игр: @GameDevgx
👩💻 DevOps: @loose_code
🖥 Data Science: @DataSciencegx
🤔 Хакинг & ИБ: @cybersecinform
🐞 Тестирование: @QAPortal
📱 Маркетинг: @MarketingPortal
🖥 Дизайн: @PortalToDesign
➡️ Сохраняйте себе, чтобы не потерять
Отобрали для вас полезные телеграм-каналы, которые помогут освоить программирование и другие IT-направления
Выбирайте нужное и подписывайтесь:
🐞 Тестирование: @QAPortal
Learn frontend tips
23 Oct, 17:48
Простой способ получения доступа к любому значению атрибута в виде строки с помощью CSS: на заметку фронтенд-разработчику
➡️ Поиграть можно здесь
➡️ @tips_frontend
Learn frontend tips
22 Oct, 17:21
Шпаргалка по Nuxt.js от Vue Mastery: на заметку фронтенд-разработчику
➡️ @tips_frontend
Learn frontend tips
22 Oct, 15:12
Learn frontend tips
21 Oct, 11:05
Оператор логического ИЛИ с присваиванием (
Он используется для упрощения присваивания значения по умолчанию и работает следующим образом: если левый операнд имеет ложное значение (например, null, undefined, 0, пустая строка "", false, или NaN), то правое выражение присваивается левому операнду.
➡️ @tips_frontend
||=) в действииОн используется для упрощения присваивания значения по умолчанию и работает следующим образом: если левый операнд имеет ложное значение (например, null, undefined, 0, пустая строка "", false, или NaN), то правое выражение присваивается левому операнду.
Learn frontend tips
19 Oct, 08:22
Лучший способ создания паттерна проектирования Singleton в JavaScript и TypeScript
Делимся эффективными методами реализации паттерна Singleton в JavaScript и TypeScript. Кроме того рассмотрим преимущества паттерна и потенциальные риски его использования.
🔗 Читать статью
➡️ @tips_frontend
Делимся эффективными методами реализации паттерна Singleton в JavaScript и TypeScript. Кроме того рассмотрим преимущества паттерна и потенциальные риски его использования.
🔗 Читать статью
Learn frontend tips
18 Oct, 11:04
Бесплатное обучение фронтенд-разработке с нуля с личной поддержкой от наставника
На канале Интенсивный JavaScript разрботчик и действующий тимлид помогает изучить фронтенд на практике
Когда-то он работал крупье в казино, а сейчас помогает новичкам попасть в IT и собеседует людей в свою команду
С 20 по 23 октября он проводит бесплатный интенсив, где поможет разобраться во фронтенде с нуля
Что получите на интенсиве
✅ Напишете свой проект на JS: сайт с аниме
✅ Узнаете, как вам сейчас попасть в сферу, каких ошибок избегать
✅ и получите пошаговый план изучения фронтенда с нуля до трудоустройства или стабильных 50 тысяч на фрилансе
Интенсив подойдёт, даже если вы новичок — всё объясняют так, чтобы поняла даже ваша бабушка
Подписывайтесь, осталось 30 мест
Учить фронтенд можно бесконечно, если не знать, куда копать
На интенсиве сократите время на изучение фронтенд-разработки и получите пошаговый план от разработчика, который нанимает новичков в свою команду
👉Участвовать бесплатно
🔥 Подписывайтесь и сразу получите мини-курс по основам JavaScript
На канале Интенсивный JavaScript разрботчик и действующий тимлид помогает изучить фронтенд на практике
Когда-то он работал крупье в казино, а сейчас помогает новичкам попасть в IT и собеседует людей в свою команду
С 20 по 23 октября он проводит бесплатный интенсив, где поможет разобраться во фронтенде с нуля
Что получите на интенсиве
Интенсив подойдёт, даже если вы новичок — всё объясняют так, чтобы поняла даже ваша бабушка
Подписывайтесь, осталось 30 мест
Учить фронтенд можно бесконечно, если не знать, куда копать
На интенсиве сократите время на изучение фронтенд-разработки и получите пошаговый план от разработчика, который нанимает новичков в свою команду
👉Участвовать бесплатно
Learn frontend tips
17 Oct, 16:50
Playwright и Allure как хорошая практика для разработки веб-приложения
Фронтенд-разработчик из Clevertec делится опытом использования Playwright в сочетании с Allure для автоматизации тестирования и оптимизации работы команды.
👉 Читать
➡️ @tips_frontend
Фронтенд-разработчик из Clevertec делится опытом использования Playwright в сочетании с Allure для автоматизации тестирования и оптимизации работы команды.
👉 Читать
Learn frontend tips
15 Oct, 09:10
Советы по CSS при работе с текстовыми полями: на заметку фронтенд-разработчику
⏩ Используйте
⏩ Используйте единицы измерения lh, чтобы установить высоту в вычисленных единицах высоты строки шрифта.
➡️ @tips_frontend
field-sizing: content, чтобы текстовая область автоматически изменяла размер в соответствии с ее содержимым.
Learn frontend tips
14 Oct, 17:10
Мини-гайд по добавлению изображения с помощью HTML
Если принимать во внимание такие аспекты, как производительность, размеры экрана, доступность или пользовательские настройки, в какой-то момент можно задаться вопросом, достаточно ли для этой задачи простого HTML.
И ответ — да! HTML имеет много опций и достаточно мощен, чтобы справиться с этой задачей. В статье рассказано о том, что следует учитывать при добавлении изображения с помощью HTML.
⏩ Читать
➡️ @tips_frontend
Если принимать во внимание такие аспекты, как производительность, размеры экрана, доступность или пользовательские настройки, в какой-то момент можно задаться вопросом, достаточно ли для этой задачи простого HTML.
И ответ — да! HTML имеет много опций и достаточно мощен, чтобы справиться с этой задачей. В статье рассказано о том, что следует учитывать при добавлении изображения с помощью HTML.
Learn frontend tips
13 Oct, 10:11
Как избежать булевых значений в сигнатуре функции JavaScript
Сложно не согласиться с автором, ведь options object или enums почти всегда являются лучшим выбором.
⏩ Читать статью
➡️ @tips_frontend
Сложно не согласиться с автором, ведь options object или enums почти всегда являются лучшим выбором.
Learn frontend tips
11 Oct, 13:24
Отложенная загрузка некритических модулей для повышения производительности загрузки страниц в действии: на заметку фронтенд-разработчику
Поиграть можно здесь
➡️ @tips_frontend
Поиграть можно здесь
Learn frontend tips
09 Oct, 05:49
Не нужно ждать изменений от backend API. Мы можем легко переопределить ответ на любой запрос локально, чтобы продолжить работу с помощью Dev Tools
➡️ @tips_frontend
Learn frontend tips
08 Oct, 12:14
Скорость загрузки веб-приложений критична для пользовательского опыта. В этой статье мы расскажем о семи инструментах, которые помогут сделать ваши приложения более быстрыми и отзывчивыми.
Learn frontend tips
07 Oct, 09:59
Простой способ визуализации списка данных с помощью
➡️ @tips_frontend
console.table(): на заметку фронтенд-разработчику
Learn frontend tips
06 Oct, 14:14
Простой кейс создания закругленных углов в CSS
Поиграть можно здесь
➡️ @tips_frontend
Поиграть можно здесь
Learn frontend tips
04 Oct, 14:22
Шпаргалка по React 19 от Kent C Dodds, создателя Epic React
Это отчасти шпаргалка, отчасти краткое напоминание о некоторых новых возможностях React 19 с простыми примерами кода.
➡️ @tips_frontend
Это отчасти шпаргалка, отчасти краткое напоминание о некоторых новых возможностях React 19 с простыми примерами кода.
Learn frontend tips
04 Oct, 09:07
Источники вдохновения для UI/UX-дизайнеров и фронтендеров: 50 полезных ресурсов
Ищете идеи для своего следующего проекта? Эта подборка поможет вам найти вдохновение и новые подходы к дизайну. Разберем первые десять, а остальные читайте в статье:
• Websitevice – новая, часто обновляемая галерея с широким спектром примеров веб-дизайна. Удобная фильтрация по категориям.
• One Page Love – коллекция высококачественных одностраничных сайтов и лендингов.
• Landingfolio – большая коллекция красивых лендингов, оптимизированных для маркетинга.
• Lapa Ninja – тщательно отобранные примеры веб-дизайна с полными скриншотами страниц.
• Godly – обширная галерея с анимированными превью сайтов, мобильных и десктопных приложений.
• Siteinspire – объемная коллекция лучших веб-дизайнов с удобной сортировкой.
• Maxibestof – огромная подборка примеров, курируемая опытным дизайнером.
• InspoVault – фокусируется на качестве, а не количестве примеров, в основном в минималистичном и креативном стилях.
• Landing Gallery – специализируется на эффектных лендингах.
• SEE + SAW – галерея с динамичными видеопревью сайтов.
➡️ @tips_frontend
Ищете идеи для своего следующего проекта? Эта подборка поможет вам найти вдохновение и новые подходы к дизайну. Разберем первые десять, а остальные читайте в статье:
• Websitevice – новая, часто обновляемая галерея с широким спектром примеров веб-дизайна. Удобная фильтрация по категориям.
• One Page Love – коллекция высококачественных одностраничных сайтов и лендингов.
• Landingfolio – большая коллекция красивых лендингов, оптимизированных для маркетинга.
• Lapa Ninja – тщательно отобранные примеры веб-дизайна с полными скриншотами страниц.
• Godly – обширная галерея с анимированными превью сайтов, мобильных и десктопных приложений.
• Siteinspire – объемная коллекция лучших веб-дизайнов с удобной сортировкой.
• Maxibestof – огромная подборка примеров, курируемая опытным дизайнером.
• InspoVault – фокусируется на качестве, а не количестве примеров, в основном в минималистичном и креативном стилях.
• Landing Gallery – специализируется на эффектных лендингах.
• SEE + SAW – галерея с динамичными видеопревью сайтов.
Learn frontend tips
02 Oct, 13:31
Коллекция современных руководств по производительности веб-сайтов
Полезный сборник руководств, охватывающих все, что вам нужно знать, чтобы освоить мониторинг, аналитику и диагностику веб-сайтов. Узнайте, как обеспечить быстрый и приятный опыт для всех ваших пользователей.
👉 Читать
➡️ @tips_frontend
Полезный сборник руководств, охватывающих все, что вам нужно знать, чтобы освоить мониторинг, аналитику и диагностику веб-сайтов. Узнайте, как обеспечить быстрый и приятный опыт для всех ваших пользователей.
👉 Читать
Learn frontend tips
01 Oct, 11:33
Понимание компилятора React
Новый экспериментальный инструмент от команды React автоматизирует настройку производительности. Но стоит ли вам его использовать и как он работает «под капотом»? Рассказывает Tony Alicea, преподаватель курсов на Udemy и Pluralsight.
👉 Читать
➡️ @tips_frontend
Новый экспериментальный инструмент от команды React автоматизирует настройку производительности. Но стоит ли вам его использовать и как он работает «под капотом»? Рассказывает Tony Alicea, преподаватель курсов на Udemy и Pluralsight.
👉 Читать
Learn frontend tips
29 Sep, 13:37
Анимации на CSS: 13 библиотек для креативных решений
CSS-анимации не только более производительны, чем их JavaScript-аналоги, но и проще в реализации. В этой статье мы рассмотрим 13 библиотек, которые помогут вам создавать впечатляющие анимационные эффекты.
🔗 Читать статью
➡️ @tips_frontend
CSS-анимации не только более производительны, чем их JavaScript-аналоги, но и проще в реализации. В этой статье мы рассмотрим 13 библиотек, которые помогут вам создавать впечатляющие анимационные эффекты.
🔗 Читать статью
Learn frontend tips
29 Sep, 06:19
Простой способ отладки/разработки стилей для различных состояний элементов с помощью Dev Tools: на заметку фронтенд-разработчику
➡️ @tips_frontend
Learn frontend tips
27 Sep, 10:48
В HTML есть средства для создания раскрывающихся виджетов, индикаторов прогресса и скалярных значений, переадресации на нужный URL, воспроизведения аудио/видео, сохранения форматирования кода и валидации с помощью regex.
Читать статью
Learn frontend tips
26 Sep, 10:00
Изучите React 19 и узнайте, как начать использовать библиотеку уже сегодня.
👉 Читать
Learn frontend tips
25 Sep, 13:10
Мы отобрали 15 плагинов, которые покрывают все аспекты современной веб-разработки: от работы с HTML до интеграции с Figma и Docker.
2,440
subscribers
1,075
photos
8
videos
![Frontender's notes [ru] Telegram Channel](/avatar/1306/1306975317.jpg)
