​Написание лучшего 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

Визуализируем кодовую базу с помощью сервиса CodeSee

С помощью CodeSee вы можете быстро проанализировать зависимости между различными файлами и кусками кода благодаря понятной визуализации. Диаграммы автоматически генерируются на основе вашего проекта, что позволяет вам проще ориентироваться в нём при наличии большого количества компонентов.

Причём CodeSee работает со множеством языков программирования, поэтому его можно применять не только для веб-разработки.

Попробовать можно тут:

https://www.codesee.io/

​С сегодняшнего дня Vue 3 становится версией по умолчанию

Об этом в блоге фреймворка сообщил Эван Ю. Он рекомендует всем разработчикам проверить все изменения, чтобы избежать поломки вашего проекта.

Что именно меняется и на что может повлиять, можно узнать здесь:

https://blog.vuejs.org/posts/vue-3-as-the-new-default.html

#фронтенд #vue

​Методы обхода защиты приложений VueJS

К сожалению, VueJS не идеален и имеет свои недостатки. Один из них — уязвимость для XSS атак. В этой статье вы узнаете какими способами обычно обходят защиту, чтобы своевременно устранить возможные уязвимости:

https://webdevblog.ru/metody-obhoda-zashhity-prilozhenij-vuejs/

#фронтенд #vue

...посмотреть мой компьютер? Что-то греться стал

​Как создать многопользовательскую игру в реальном времени с нуля

Для этого нам понадобится немного HTML и CSS, горстка JavaScript-кода, охапка библиотек и Svelte в качестве вишенки на торте. Если все ингредиенты у вас готовы, то дело за малым — открывайте статью и следуйте рецепту:

https://www.smashingmagazine.com/2021/10/real-time-multi-user-game/

#html #css #javascript #svelte

​6 принципов создания производительных веб-приложений

Веб-разработчики используют несколько принципов, чтобы создавать сайты, которые хорошо функционируют даже на дешевом оборудовании. Это и правильное сжатие изображений, и кэширование и многое другое.

Подробнее об этих и других аспектах создания производительного сайта тут:

https://nuancesprog.ru/p/14998/

​Организация отступов в вёрстке

Первое на чём спотыкается неопытный фронтенд-разработчик во время вёрстки — организация отступов для элементов сайта. Правильное обращение с margin и padding играет очень большую роль в этом деле.

Эта статья поможет вам разобраться в главных принципах организации отступов:

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

#фронтенд

​Библиотека Floating UI

Эта легковесная JavaScript-библиотека позволит вам без труда настроить позиционирование самых разных всплывающих элементов — от тултипов до дропдаунов. Забирайте к себе в закладки и используйте с удовольствием.

https://floating-ui.com/

#библиотека

JavaScript, что ты такое?!