<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

Total TypeScript - это ресурс с материалами для изучения TypeScript. На сайте есть бесплатный курс из 18 уроков и коллекция полезных советов. 

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

#js

Day.js - это библиотека для работы с датами в JavaScript, альтернатива Moment.js. 

Она весит всего 2KB, имеет тот же синтаксис и те же функции, что и Moment.js и отлично поддерживает интернационализацию.

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

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

Framer Motion - это готовая библиотека aнимации для React приложений.

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

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

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

#react

Node.js 19

Вчера был выпущен Node.js 19. Изменения включают обновление движка JavaScript V8 до версии 10.7 и HTTP(S)/1.1 KeepAlive включен по умолчанию. Но это не все обновления. Подробнее читайте в анонсе!

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

#nodejs

blob animation

Делимся ссылкой на генератор, с помощью которого можно создавать плавные анимированные blob-фигуры (фигуры в виде капель). На выходе получается готовый анимированный SVG. 

Ссылка на генератор

#дизайн

DNS и HTTPS

Делимся ссылкой на коллекцию комиксов, где объясняется, как работает HTTPS, DNS, DNSSEC.

Нескучно и познавательно! 

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

#статьи

Освоить веб-разработку с нуля за 10 месяцев — реально, хотя и непросто. Придётся сократить время на хобби, заниматься после работы и до неё, искать дополнительные материалы и подолгу думать над задачами.

Но оно того стоит: в конце пути — новая профессия и интересная работа. А Яндекс Практикум поможет не сбиться с курса.

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

Если не справляетесь с делами, то два раза за курс можно взять академический отпуск на месяц. Если на базовой программе тяжело, снизить темп поможет расширенная программа, которая длится 18 месяцев. Учёба будет размеренной, а программа более фундаментальной.

Оплата учёбы работает в формате подписки: платежи проходят каждый месяц, и вы можете остановить их в любой момент.

Протестируйте формат курса бесплатно →

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