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 стилями!

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

#дизайн

Podman

Встречайте Podman - альтернативу Docker!

Podman — это еще один инструмент для разработки, управления и запуска контейнеров и образов контейнеров. Он относительный новичок на сцене контейнеризации: версия 1.0 была выпущена в 2019 году.

Весомое их различие в том, что Podman пока остается полностью бесплатным, а Docker частично платный.

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

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

#статьи

box-shadow

Чтобы не мучаться над созданием красивой тени, можно обратиться к данному ресурсу. На нем собрана коллекция из 93 образцов!

Выберите понравившийся вариант, кликните по нему и готовый CSS код будет автоматически скопирован в буфер обмена.
 
Ссылка на сайт

#css

Полезные JS сниппеты

Автор собрал в статье 58 полезных сниппетов JavaScript!

Например, один из них генерирует звездный рейтинг:

const StartScore = rate => "★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);
const start = StartScore(3);
// start => '★★★☆☆'

Все сниппеты смотрите по ссылке.

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

#js

snipt.dev - это инструмент по поиску готовых сниппетов.

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

Например, вам нужно перемешать элементы в массиве. Вводите в поисковую строку "Shuffle an array" ("перемешать массив") и сервис выдает вам готовый вариант.

Для поиска доступны сниппеты JavaScript, TypeScript, Python и другие.

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

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