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 и другие.

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

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

NuxtJS Content

Модуль Content в NuxtJS это headless CMS, основанная на файловой системе. Она предоставляет мощные функции для создания блогов, документации или просто добавления контента на обычный сайт.

Контент хранится в директории content/ в вашем проекте в виде файлов .md, .yml, .csv и .json и извлекать его можно также с помощью API.

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

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

#vue

Bun — это новая среда выполнения JavaScript, как Node и Deno. Она обладает собственным сборщиком, транспилером, таск-менеджером и встроенным клиентом npm и по мнению создателей является быстрее других.

Подробнее о Bun читайте на официальном сайте.

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

#nodejs

Кнопки TailwindCSS 

TailwindCSS – это CSS-библиотека, которая упрощает стилизацию HTML, тем же путем, как это делает Bootstrap – добавляя определенные классы к элементам.

Делимся готовой коллекцией красивых и эффектных кнопок с hover эффектами, созданных с помощью классов TailwindCSS. 

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

#дизайн

Wasp - это новый язык программирования для разработки full-stack веб-приложений с меньшим количеством кода.

Это простой декларативный язык, который упрощает разработку веб-приложений, но при этом позволяет использовать новейшие технологии, такие как React, Node.js и Prisma.

Упрочнит ли он свою позицию в вебе? Покажет время!

А пока можете познакомиться с ним поближе. В статье рассказывается: чем Wasp может быть полезен для веб-разработки, как он работает, на какой он сейчас стадии и каковы планы создателей на будущее. 

И делимся ссылкой на официальный сайт, где можно почитать документацию.

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

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

#статьи

overflow: hidden

Как достичь такого же результата, как у overflow: hidden, но без его использования?

Для этого есть два способа:
- использовать свойство clip-path
- использовать contain: paint.

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

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

#css

Фильтрация объектов

Объекты JavaScript не являются итерируемыми, как массивы или строки, поэтому для них невозможно использовать метод filter(). 

Объект — это набор пар ключ-значение. Можно извлекать ключи, используя метод Object.keys(), значения с помощью Object.values(), а если нужно и то и другое, то с помощью метода Object.entries(). Эти методы как раз и помогут в фильтрации объектов!

В статье рассказывается, как фильтровать объекты по ключу.

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

#js