CSS toggles 

Все знают хак с чекбоксом для создания переключателя и он до сих пор является популярным способом для создания “toggle effect” на чистом CSS.

Но в скоро будущем возможно появится официальный функционал для создания переключателей. CSS toggles сейчас на стадии предложения и пока экспериментальная реализация появилась в Chrome Canary.

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

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

#css

Temporal API 

Работать с датами в JavaScript немного проблематично, вот почему часто используются готовые библиотеки.

Было предложено добавить новое API для работы с датами - Temporal API. Основная цель нового API — упростить работу с датами и временем в JavaScript, а также добавить дополнительную поддержку таких вещей, как даты без времени, время без дат и часовые пояса.

Пока новинка на 3 стадии предложения. Подробнее о ней читайте в статье!

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

#js

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

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

Доступные языки: JavaScript, Java и C++.

Через визуализацию изучение становится проще!

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

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

react-draggable - это компонент для создания перетаскиваемых элементов. 

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

Cсылка на репозиторий

#react

Icônes – это ресурс с коллекциями иконок, среди которых есть Material Design Icons, Ant Design Icons, Bootstrap Icons и другие. Выбор огромный!

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

#дизайн

JAMstack

Многие думают, что JAMstack - это какая-то новая технология. 

На самом деле, это новый архитектурный подход к созданию современных веб-сайтов, основанный на клиентском JavaScript, повторно используемых API и предварительно созданной разметке. 

Кстати, аббревиатура JAM расшифровывается, как:
J - JavaScript,
A - API,
M - Markup.

Подробнее о нем и его преимуществах можно почитать на официальном сайте.

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

#статьи

Text fragments

Текстовые фрагменты (Text fragments) - это одна из спецификаций, благодаря которой можно добавлять фрагмент текста в URL-адреса. При переходе по такому URL-адресу браузер прокрутит до указанного фрагмента и выделит его.

Недавно данный функционал начал поддерживать Safari. Какие еще браузеры его поддерживают можно глянуть по этой ссылке.

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

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

#css

Starfield

Делимся ссылкой на пример, как на чистом JavaScript создать анимацию звездного неба. Всего 21 строчка кода и создается иллюзия полета среди звезд.

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

#js

Accordion Slider Generator - это генератор кода для создания адаптивного аккордиона на чистом CSS.

Задайте необходимые параметры и получите на выходе готовый HTML и CSS. 

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

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

Next.js 13

Совсем недавно была официально выпущена 13 версия Next.js. 

Напомним, что Next.js — это хорошо зарекомендовавший себя React фреймворк от компании Vercel.

Нового и интересного появилось немало в этой версии! Обо всем читайте в статье.

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

#react

metallicss - это библиотека для придания элементам эффекта металла.

Также на сайте можно глянуть генератор CSS кода в котором представлено демо. Выглядит очень круто и реалистично!

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

#дизайн

YAML — это один из популярных языков для написания конфигурационных файлов.

Если вы еще не знакомы с YAML, то советуем почитать данную статью. В ней он сравнивается с XML и JSON — двумя языками, которые также используются для создания файлов конфигураций. А также рассказывается о некоторых правилах и особенностях этого языка, и его синтаксисе.

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

#статьи

Чекбоксы

Делимся ссылкой на коллекцию готовых кастомных чекбоксов и переключателей с интересным дизайном и анимацией при нажатии.

Всего в один клик можно скопировать готовый HTML и CSS код!

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

#css

Learn Regex - это руководство по регулярным выражениям. Доступно на нескольких языках!

Ссылка 

#js

DgrmJS — это JavaScript библиотека для создания редактора блок-схем.

Поддерживает десктопные и мобильные устройства. Весит 3,5 КБ в сжатом виде.

По ссылке в репозитории можно глянуть демо!

Ссылка

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

React Simple Maps - это библиотека для создания SVG карт в React приложениях. Она примечательна своей простотой в освоении, гибкостью, миниатюрностью и расширяемостью. Идеальный вариант для создания простых карт!

Ссылка

#react

Tylify - это инструмент для создания бесшовных паттернов для фона.

Доступна настройка цвета фона и добавление собственных изображений. Результат можно скачать в виде SVG, CSS или PNG.

Ссылка 

#дизайн

Полезные команды npm

В статье приводится несколько команд npm, которые могут вам пригодиться.
 
Например, команда npm docs <имя_пакета> открывает документацию в браузере. И не нужно больше гуглить, достаточно одной команды!

Об этой и остальных командах, читайте в статье.

Ссылка

#статьи

Новые viewport единицы

Всем известны такие единицы измерения в CSS, как:
vw = 1% от ширины области просмотра
vh = 1% от высоты области просмотра

В то время как единицы vw и vh хорошо работают для десктопа, на мобильных устройствах дело обстоит иначе. Там на размер области просмотра влияет наличие или отсутствие динамических панелей инструментов(адресные строки и панели вкладок). 

Поэтому появилась необходимость в ведении новых единиц:
Единицы c префиксом lv(large viewport): lvw, lvh, lvi, lvb, lvmin, lvmax
Единицы c префиксом sv(small viewport): svw, svh, svi, svb, svmin, svmax

На данный момент эти единицы работают в последних версиях браузеров Chrome, Firefox, Safari.

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

Ссылка

#css

Javascriptmas - это онлайн адвент-календарь с заданиями по JavaScript. Каждый день открывается новое испытание.

Совершенствуйте свои навыки в JavaScript, выполняя ежедневные задачи.

Ссылка

#js

Content Parser Website - это онлайн-инструмент для извлечения текста или разметки с веб-сайта. 

Очень быстрый способ, когда на ресурсе много контента и рекламы, а вы хотите скопировать только текст! Для извлечения нужно ввести URL адрес.

Ссылка

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