Small dev tools - это еще один полезный ресурс с различными инструментами:
- JSON декодер
- инструмент для форматирования JSON
- BASE64 декодер
- декодер и энкодер URL
и другие!

Ссылка на сайт

#инструменты

Pinia - это официально признанная библиотека управления состоянием для Vue.

Даже создатель Vue Эван Ю назвал его фактически Vuex 5. 

Pinia была создана Эдуардо Сан Мартином Мороте, тем же членом команды Vue, который создал Vue Router.
 
Но знаете ли вы, почему стоит использовать Pinia вместо Vuex?

В статье подробнее рассказывается о данной библиотеке и объясняется, почему она лучше Vuex. 

Ссылка на статью

#vue

AbortController

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

Сделать это в Node.js было сложной задачей в течение очень долгого времени. В Node v15.0.0 появился AbortController для решения вышеуказанной проблемы. 

Данная статья является руководством по AbortController и AbortSignal API.

Ссылка на статью

#nodejs

Shadow Gradients - это генератор цветных теней с градиентом. 

На сайте предлагается коллекция уже готовых вариантов с определенной цветовой гаммой, а для настройки доступны позиция тени, размытие, прозрачность и другие.

Ссылка на сайт

#дизайн

Советы по GitHub

На GitHub есть полезный функционал, о котором, вы возможно не знали!
  
Например, если зайти в какой-нибудь репозиторий на GitHub и нажать кнопку ".", то проект откроется в онлайн-редакторе VS Code.  

В статье рассказывается про 8 функций GitHub, которые могут вам пригодиться! 

Ссылка на статью

#статьи

SMACSS vs. BEM

Не все фанаты BEM.

Если вы в разработке относительно недавно, то возможно и не слышали о других методологиях.

SMACSS - это еще одна методология, помогающая с организацией кода. Аббревиатура расшифровывается, как Scalable and Modular Architecture for CSS (масштабируемая и модульная архитектура для CSS). 

Базовые категории SMACSS: 
- Base - в эту категорию входят правила, которые определяют внешний вид элементов по умолчанию;
- Layout - категория для стилей, с помощью которых страница разделяется на секции;
- Module - это повторно используемые части дизайна(меню, модальные окна и др.);
- State - категория для стилей состояния;
- Theme - в эту категорию входят стили, отвечающие за внешний вид макетов и модулей;

В статье дается сравнение BEM и SMACSS. А на официальном сайте SMACSS можно почитать онлайн или скачать руководство по использованию данной методологии.

Ссылка на статью

Ссылка на официальный сайт SMACSS

#css

Java5cript - это сайт, на котором собраны бесплатные источники для изучения JavaScript.
На нем предоставлены ссылки на книги, курсы, рекомендуемые видео и ресурсы для подготовки к собеседованию.

Ссылка на сайт

#js

PixiJS — это библиотека рендеринга, которая позволяет создавать богатую интерактивную графику, кросс-платформенные приложения и игры без необходимости углубляться в WebGL API или разбираться с совместимостью браузеров и устройств.

Ссылка на сайт

#инструменты

react-speech-kit — это небольшая библиотека для работы с Web Speech API в React. 

В этом пакете доступны два хука: useSpeechSynthesis для преобразования текста в речь и useSpeechRecognition для распознавания речи.

В статье рассказывается, как с помощью хука useSpeechSynthesis преобразовывать текст в речь.

Ссылка на статью

#react

REST vs GraphQL  

С момента своего появления GraphQL завоевал мир веба как альтернатива REST API.

Он решает некоторые проблемы, которые присутствуют в REST. Например, одним из его преимуществ является то, что можно запрашивать все необходимые данные в одном запросе.

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

Ссылка на статью

Pagify – этот онлайн-инструмент обещает превратить Google-документ в сайт.

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

Ссылка на сайт

#дизайн

Chrome 103

Что интересного было добавлено в Chrome 103?

Например, был добавлен новый код состояния HTTP 103 Early Hints, который помогает браузеру решить, какой контент предварительно подгружать, еще до того, как страница начала загружаться.

Обо всем подробно в статье!

Ссылка на статью

#статьи

position: sticky

position: sticky имеет сейчас достаточно хорошую поддержку.

Самый частый случай его использования - это создание "липкого" хедера. Но иногда случается такое, что данное свойство со значением sticky не работает. И причин этому может быть немало.

Например, одна из них:
Если какому-то родителю выше задан overflow, то position: sticky не будет работать. 

Подробнее обо всех проблемах и как их решить читайте в статье!

Ссылка на статью

#css

Новые методы массива

Клонирование или копирование - очень распространенная операция в JavaScript. На данный момент самым популярным способом копирования является использование оператора spread(...). Он очень удобен и при изменении скопированного массива, исходный не будет изменяться. 

const myArray = [ 1, 2, 3];
const newArray = [...myArray];

Поскольку клонирование часто используемая операция, в новой спецификации было предложено добавить множество новых способов копирования с последующим изменением массива: 
- toReversed - копирует массив, а затем переворачивает;
- toSorted - копирует массив, а затем сортирует;
- toSpliced - копирует массив и удаляет элементы и/или добавляет новые элементы (то же самое, что и метод splice, только без изменения исходного массива);
- with - копирует массив и добавляет в него новый элемент.

Подробнее читайте в статье!

Ссылка на статью

#js

Golden Ratio Typography

Типографика на сайте очень важна. Если текст выглядит привлекательно и читается легко, то пользователь будет потреблять больше контента, покупать товары и услуги.

Golden Ratio Typography - это генератор идеальных размеров для шрифта на основе золотого сечения.

В результатах предоставляются подходящие размеры, высота и интервал для заголовков разного уровня, списков, цитат и другого.

Ссылка на сайт

#инструменты

Next.js - это React фреймворк, который позволяет создавать веб-приложения с улучшенной производительностью с помощью дополнительных функций предварительного рендеринга, таких как: полноценный рендеринг на стороне сервера (SSR) и статическая генерация страниц (SSG).

Next.js предоставляет:
- встроенный роутер (не нужно устанавливать React Router);
- оптимизацию изображений и шрифтов;
- встроенную поддержку ESLint и TypeScript и многое другое!

Подробнее о всех преимуществах и о том, как использовать данный фрэймворк читайте в статье!

Ссылка на статью

#react

Лайфхак: чтобы найти норм работу на удалёнке (или офисную) — не надо целыми днями шерстить HeadHunter и сотни других сайтов.

Надо просто держать в подписках React Job. Туда напрямую обращаются лучшие работодатели со всего мира.

Если вы пишете на React, вы только начинаете или уже профи в своем деле, то подписывайся на наш канал. У нас вы найдете стажировки, работу для разного уровня и рекомендации как не облажаться при трудоустройстве!

Fresh 1.0

Fresh — это новый fullstack фреймворк для Deno. И недавно была выпущена его первая стабильная версия.

С Fresh рендеринг происходит не на клиентской стороне. Весь объемный рендеринг и вычисления могут выполняться на сервере, а на клиенте нужно только отрисовывать небольшие UI компоненты. А это значительно влияет на производительность сайта.

Подробности o Fresh читайте в статье!

Ссылка на статью
Ссылка на официальную страницу Fresh

#nodejs
#deno

Pictogon - это онлайн-сервис для создания интерактивных картинок. 

Например, с помощью него можно создавать интерактивные карты или схемы. Сервис позволяет выделять области на картинке и добавлять надписи, которые будут отображаться при наведении или щелчке мыши.

Сначала на сайте создается картинка с выделенными областями и надписями к ним, а затем всего лишь нужно встроить сгенерированный скрипт на ваш сайт!

Ссылка на сайт

#дизайн

Бесплатные книги по вебу

Что почитать на досуге по вебу?

Делимся подборкой бесплатных книг!
В списке представлены ссылки на книги по HTML, CSS, JavaScript и другим общим темам.

Материалы полезны, как для новичков, так и для опытных разработчиков. 

Например, для разработчика с опытом будет интересно почитать книгу "Learning JavaScript Design Patterns".

Ссылка на статью

#статьи

Новый синтаксис media запросов

Теперь можно будет использовать операторы сравнения в media запросах в Chrome, начиная с 104 версии. 

Данный синтаксис был доступен еще в Firefox 63, но для Chrome его можно назвать новым. 

Такой синтаксис очень удобен для написания диапазонов. 

Вместо того, чтобы писать:

@media (min-width: 400px) and (max-width: 600px) {
 ...
}

Можно использовать следующую запись: 

@media (400px <= width <= 600px ) {
 ...
}

Подробности в статье!

Ссылка на статью

#css