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

typeof в TypeScript

В Javascript оператор typeof используется для определения типа данных. Поскольку TypeScript является строго типизированным языком, то там typeof имеет другое предназначение.

О том, как работает typeof в TypeScript, читайте в статье!

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

#js

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

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

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

Zustand — это быстрое и масштабируемое решение для управления состоянием в React приложениях, созданное разработчиками Jotai и React springs. 

Zustand известен своей простотой: 
- Использует хуки для управления состояниями; 
- Рендерит компоненты только при изменении значения состояния. Изменения в состоянии часто могут быть обработаны без повторного рендеринга компонента;

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

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

#react

Express 5

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

В статье рассказывается, как перейти с Express v4 на Express v5, а так же рассматриваются обновления и функции, доступные в новой версии.

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

#nodejs

Конические градиенты

Фоновые градиенты в CSS могут быть линейными, радиальными, а еще конусообразными или коническими.

Делимся коллекцией простых и симпатичных конических градиентов с готовыми CSS стилями!

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

#дизайн