​Создаём красивые градиенты

Хотите разобраться, как работают градиенты в браузерах? Это поможет вам создавать качественные градиенты без некрасивых переходов цветов.

Если интересно, то переходите по ссылке. А ещё там вы найдёте уже готовый генератор градиентов:

https://www.joshwcomeau.com/css/make-beautiful-gradients/

#фронтенд #css

Он не может ответить — он тушит компьютер

​10 полезных SEO-расширений Google Chrome для разработчиков

Мы подготовили для вас небольшую подборку расширений для Google Chrome, которые позволят разработчикам создать идеальную страницу с точки зрения SEO. Они и ссылки на валидность проверят, и разметку и многое другое.

Подробнее:

https://tproger.ru/articles/10-seo-rasshirenij-google-chrome/

#seo

​Тёмная сторона CSS: выходим за рамки с border-image и градиентами

Автор статьи поделился способом, который позволяет создавать сложные фигуры при помощи CSS-свойства border-image, выходящие за границы элемента.

Узнать подробности можно тут:

https://css-live.ru/tricks/border-image-gradients-sorcery.html

#css

​Fuite: инструмент для поиска утечек памяти в веб-приложениях

Отладка утечек памяти в веб-приложениях сложна. Инструменты существуют, но они сложны, громоздки и часто не отвечают на простой вопрос: «почему в моём приложении происходит утечка памяти?»

Fuite — это инструмент командной строки, которому вы можете указать любой URL-адрес, и он проанализирует страницу на наличие утечек памяти. Подробнее:

https://nolanlawson.com/2021/12/17/introducing-fuite-a-tool-for-finding-memory-leaks-in-web-apps/

​Полное руководство по созданию электронных писем в формате HTML

В этой статье вы найдёте всё, что нужно знать для вёрстки качественных писем с помощью HTML. От самых основ до тёмного режима и альтернатив стандартному HTML.

Подробнее:

https://www.smashingmagazine.com/2021/04/complete-guide-html-email-templates-tools/

#html

​Каскадные слои в CSS: обзор новых CSS-примитивов @layer и layer()

Новые примитивы позволяют разработчикам лучше взаимодействовать с каскадными слоями. Они уже доступны в Safari TP, а вскоре появятся в Chromium 99+ и Firefox 97+.

В этом видео Юна Кравец за 5 минут рассказала, что это и зачем:

https://www.youtube.com/watch?v=ilrPpSQJb3U

#видео #css

​5 лучших расширений VS Code для разработчиков Vue на 2022 год

VS Code является наиболее популярным редактором кода среди веб-разработчиков благодаря открытому исходному коду и множеству полезных расширений. Вероятно, многие из вас тоже пользуются именно им. А если вы ещё и работаете с Vue, то в этой статье вы найдёте 5 расширений, которые придутся вам по душе:

https://blog.openreplay.com/top-5-vs-code-extensions-for-vue-developers-for-2022

#фронтенд #vue

Кто так пишет вообще?!

​Написание лучшего CSS

Держите статью, которая поможет вам научиться максимально использовать современные возможности CSS, а кого-то и вовсе впервые познакомит с ними:

https://www.aleksandrhovhannisyan.com/blog/writing-better-css/

#css

​Тренды JavaScript в 2022 году

Мир веб-разработки крайне изменчив. Сегодня популярно одно, завтра — другое. Давайте посмотри, как выглядят основные тренды JavaScript сегодня:

https://tproger.ru/articles/trendy-javascript-v-2022-godu/

#javascript

​Боль фронтов, или что нам нужно от дизайнеров

Извечная борьба дизайнеров и разработчиков уже давно ведётся в мире веб-разработки. Как правило, у разных представителей обеих сторон возникают одни и те же проблемы из года в год.

В этой статье автор постарался разобрать некоторые из этих проблем и предложить пути их решения:

https://habr.com/ru/post/541666/

#фронтенд #ui

Все Telegram-каналы от Tproger теперь собраны в одном месте: @tproger_channels

Каналы по конкретным направлениям разработки, подборки полезных ресурсов, канал для начинающих, новости, мемы — всего около двух десятков каналов разного формата. Точно найдёте что-нибудь для себя.

​Сделал ли Core Web Vitals интернет быстрее?

Core Web Vitals (CWV) был анонсирован в мае 2020 года, и тогда Google заявляла, что будет «оценивать возможности страницы для улучшения работы в Интернете». Прошло уже почти два года и теперь пора разобраться стала ли работа в интернете действительно быстрее благодаря CWV или нет.

Барри Поллард попробовал проанализировать этот вопрос и поделился результатами с нами:

https://calendar.perfplanet.com/2021/have-core-web-vitals-made-the-web-faster/

​Не хотите включить пуши? Извините, ничего, что мы используем куки? А выключите AdBlock...

​Визуальное руководство по useEffect

Отличная статья для тех, кто с трудом понимает как работает useEffect в React и зачем он нужен. Здесь на понятных и простых примерах наглядно показано, как ведёт себя код в различных случаях, когда необходимо использовать useEffect с ним и без него:

https://alexsidorenko.com/blog/useeffect/

#react

Как сделать дизайн сайта с нуля? Гайд в трёх частях

Создание дизайна сайта — это не просто подбор подходящих цветов по палитре, а полноценное проектирование.

У нас есть гайд из трёх частей, в котором вы узнаете, как с нуля создать высококачественный сайт:

1. Какой сайт вам нужен: https://tprg.ru/ptXx
2. Визуальная концепция: https://tprg.ru/C6Gw
3. Инструменты для создания макета: https://tprg.ru/XmW6

#фронтенд #дизайн

​Разработчик из Японии уже шестой год подряд публикует ежегодный рейтинг JS-фреймворков на основе количества звёзд, полученных на гитхабе за последний год.

В этом году неожиданный «чемпион» — инструмент командной строки zx от Google:

https://risingstars.js.org/2021/en

#javascript

​Программист создал сайт, на котором в очень удобной форме показал огромный список того, что неплохо бы изучить веб-разработчику.

Для каждой темы/инструмента есть список ресурсов, где можно всё это изучить. HTML, CSS, JS, PWA, фреймворки, тестирование, безопасность, архитектура, дизайн, алгоритмы, базы данных — всё есть:

https://andreasbm.github.io/web-skills/?compact

Серия из 51 обучающего видео про основы JavaScript от разработчиков из Microsoft:

https://tprg.ru/FxV0

Видео короткие. Удобно для тех, кто хочет не нырять в обучение с головой и получать новые знания дозировано:

#javascript