метод startsWith

Существует много способов для того, чтобы проверить, что строка начинается с определенного символа:
- метод indexOf; 
- метод substring;
- регулярное выражение;  

А также существует метод специально предназначенный для этого! startsWith помогает определить, начинается ли строка с символов переданных в качестве аргумента, возвращая true или false. 

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

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

#js

elevator.js - это библиотека для создания прокрутки наверх по клику на кнопку. Особенность ее в том, что она создает иллюзию подъема наверх, как будто на лифте, да еще и в сопровождении соответствующей мелодии.

Советуем глянуть демо на сайте!

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

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

React Just Parallax - библиотека React для создания параллакс эффекта при прокрутке и при движении мыши.

Она написана на TypeScript, весит мало, работает молниеносно и проста в использовании.

Смотрите демо и примеры использования на сайте!

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

#react

Passport - это промежуточное программное обеспечение для аутентификации для Node.js. Оно поддерживает аутентификацию с использованием имени пользователя и пароля, Facebook, Twitter и многого другого.

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

#nodejs

fffuel - это коллекция бесплатных генераторов для создания уникальных фонов, градиентов и декоративных элементов в формате SVG.

Сохраняйте в закладки!

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

#дизайн

Именование коммитов

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

Кстати, существует единое соглашение (Conventional Commit) по тому, как писать коммиты.

В статье как раз рассказывается о правилах из данного соглашения и примерах хороших и плохих коммитов.
 
Ссылка на статью

#статьи

Псевдоселектор :modal

Псевдоселектор :modal позволяет выбирать модальные элементы.

Два типа элементов в настоящее время классифицируются как :modal:
- <dialog>, использующий метод showModal;
- элементы, находящиеся в полноэкранном режиме;

Поддержка пока еще недостаточно хорошая, но :modal поддерживается уже последними версиями Chrome, Safari, Firefox и Edge. Ее уровень можно глянуть тут.

А подробнее об его использовании читайте в статье.

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

#css

JavaScript API, о которых вы не знали

В статье описываются наименее известные, но чрезвычайно полезные API, такие как:
- Page Visibility API 
- Web Share API 
- Broadcast Channel API 
- Internationalization API

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

Подробнее об этих API и о том, как их использовать читайте в статье.

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

#js

ZincSearch — поисковой движок, выполняющий полнотекстовое индексирование. Это альтернатива Elasticsearch, которая требует меньше ресурсов и соответственно легче по весу.

Подробная информация о нем на официальном сайте!

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

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

React Hook Form - это библиотека для создания производительных, гибких и расширяемых форм.

Она поддерживает встроенную валидацию, очень мало весит и имеет хорошую производительность. React Hook Form сводит к минимуму количество повторных перерисовок и минимизирует вычисления валидации.

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

#react

Gradient Text Generator - это генератор градиентов для текста. Для превью можно сразу ввести необходимый текст и задать в настройках цвета. На выходе генерируется готовый CSS код.

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

#дизайн

<input type="number"/>

Семантически правильно использовать <input type="number"/> для полей, где вводятся числа.
Но оказывается, что этот HTML-элемент имеет некоторые особенности. Например, когда поле содержит недопустимое значение, то при его извлечении, вы получаете пустую строку.

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

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

#статьи

CSS Puzzle

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

Автор этого CodePen реализовал ее на чистом CSS. Удивительно, что фрагмент встает только на свое место и никакое другое. Это тот случай, когда возможности CSS поражают!

Ссылка на CodePen

#css

South Hub — IT-кэмп в Сочи для СТО и тех, кто хочет ими стать  
Когда? 
6 – 8 октября 
Где? 
Красная Поляна, Сочи 
Зачем? 
Подняться на уровень выше. Профессионально и физически.  
 
В отеле Novotel Congress соберутся 400 IT-руководителей, тех директора и CEO. На протяжении 3-х дней 45 спикеров будут делиться с участниками своим опытом и мыслями о будущем отрасли в формате лекций и бесконечного нетворкинга.  
Помимо конференц-части гостей ждут зрелищные спортивные турниры в баскетбол, FIFA 23 PS 5 и Го, хайкинг по горам, утренние пробежки, много неформального общения, а также вечеринка на закате на высоте 2 200 метров. 
Все подробности о кэмпе можно найти на сайте:  
https://i.southhub.ru/zhNMv

Разработка PWA 

Делимся ссылкой на бесплатный курс по разработке PWA(Progressive Web Applications - прогрессивные веб-приложения). 

Курс охватывает основы создания PWA приложений. Вы узнаете: 
- что такое прогрессивное веб-приложение;
- как его создать или обновить существующий контент;
- что такое service workers и многое другое.

Ссылка на курс

#js

Grid.js - это плагин для создания красивых таблиц, написанный на TypeScript. Он может использоваться в React, Angular, Vue приложениях, а также без каких-либо библиотек и фрэймворков. 

Минифицированная и сжатая версия весит 12КБ. Таблицы Grid.js легко кастомизируются и стилизуются.

Примеры таблиц смотрите на сайте!

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

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

react-use - это библиотека с коллекцией полезных React хуков.

Например:
useNetworkState — отслеживает состояние сетевого подключения браузера;
useOrientation — отслеживает состояние ориентации экрана устройства;
usePageLeave — срабатывает, когда мышь покидает границы страницы;

Более 90 хуков!

Ссылка на GitHub

#react

sails.js - это MVC фрэймворк для создания Node.js приложений. Разработчики sails.js вдохновились архитектурой и подходом к разработке приложений у Ruby On Rails и решили создать нечто подобное на JavaScript.

Он построен на Node.js, Express и Socket.io. Имеет низкий порог вхождения.

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

#nodejs

Super Designer - это коллекция бесплатных инструментов для создания уникальных фонов, градиентов, узоров, форм, изображений и многого другого. Результат доступен в формате SVG, PNG, JPG или CSS кода.

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

#дизайн

Нотация Big O

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

Нотация Big O — это метрика для определения эффективности алгоритма. Она позволяет оценить, как долго код будет работать с различными наборами входных данных, и измерить, насколько эффективно код масштабируется по мере увеличения размера входных данных. 

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

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

#статьи

HTML-элементы, которые никто не использует

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

Например, <datalist> позволяет добавлять список предложенных вариантов для автозаполнения у элементов ввода. 

Полный список читайте в статье!

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

#html