progressbar.js - JavaScript-библиотека для создания адаптивных и анимируемых индикаторов выполнения.

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

Библиотека мало весит и поддерживает все современные браузеры.

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

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

drag-and-drop

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

По этому случаю делимся обучающей статьей по созданию drag-and-drop загрузчику файлов на Vue 3.

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

#vue

Fetch в Node.js

Fetch API был добавлен в Node.js!

Fetch уже доступен в качестве экспериментальной функции в Node v17. Если вы хотите попробовать его перед основным выпуском, вам необходимо сначала загрузить и обновить версию Node.js до 17.5. А затем запустить, используя флаг --experimental-fetch.

О том, какие это проблемы решает его появление, читайте в статье.

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

#nodejs

Keyframes CSS - это редактор для создания анимаций. Особенность его в том, что интерфейс представлен в виде видеоредактора с временной шкалой. За счет этого можно создавать сложные анимации и пошагово отслеживать их работу. На выходе, вы получаете готовый CSS код.

Опробуйте его сами! 

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

#дизайн

Атрибуты HTML

В HTML немало полезных атрибутов. Возможно о некоторых вы даже не слышали!

Например, знали ли вы, что для тэга <ol> (нумерованного списка) можно использовать атрибуты, которые позволяют настраивать поведение нумерации, отображаемой в списке:

- reversed - для нумерации элементов в обратном порядке;
- start - для определения с какого числа начинать;
- type - для определения, что использовать для нумерации: числа, буквы или римские числа;
- value - для указания номера для определенного элемента списка.

А об атрибуте download для тэга <a> знали?

Об этих атрибутах и других читайте в статье!

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

#статьи

will-change

Свойство CSS, которое появилось еще в 2015 году. Если вкратце, то will-change - это метод оптимизации анимации путем информирования браузера о том, какие элементы и свойства изменятся. Самое главное, что надо запомнить: применять его надо умеренно.

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

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

#css

Условия

Написание сложных и объемных условий влечет за собой огромное ветвление if/else или switch/case. Главный недостаток в том, что читать и воспринимать такой код сложно. 

Конечно всегда есть более элегантные способы написания кода! В статье предложены варианты, как писать условия с помощью литерала объекта.

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

#js

layzr.js - JavaScript библиотека для отложенной загрузки изображений(lazy loading).
Маленькая и быстрая, написана на ES6.

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

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

Radix - это библиотека UI компонентов для создания приложений на React, которая делает акцент на доступности своих компонентов. 

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

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

#react

Защита данных в Node.js

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

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

В статье представлены cоветы по укреплению защиты приложений на Node.js.

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

#nodejs

preloader 

Делимся ссылкой на небольшую библиотеку анимированных спиннеров с готовым CSS кодом.

Просто выберите понравившийся вариант, нажмите на вкладку 'source' и готовый код у вас в кармане!

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

#дизайн

Алгоритмы верстки

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

Автор статьи предлагает посмотреть на CSS под другим углом. CSS — это совокупность взаимосвязанных алгоритмов компоновки, где каждый алгоритм представляет собой сложную систему со своими правилами и секретными механизмами.

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

Данная статья поможет раскрыть некоторые моменты со свойствами CSS, которые до этого были не понятны или казались волшебством.

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

#статьи

all: revert

В CSS есть есть такое свойство, как all, одним из значений которого является revert.
revert сбрасывает свойство к значению по умолчанию, которое было установлено браузером.

В каких случаях оно может быть применено?

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

О том, как решать подобную задачу, рассказывает автор статьи. Небольшой спойлер: был использован all: revert.

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

#css

JavaScript подкаст

Подкаст, посвященный JavaScript и другим веб-технологиям с участием гостей из open-source сообщества.

Как говорится, 2 в 1: и полезную информацию узнаете и по английскому listening подтяните!

Последний эпизод был на тему: "Качество кода".

Ссылка на подкаст

#js

Фронтенд практика

Практиковать свои навыки нужно постоянно. Каким образом?

Делимся ссылкой на ресурс, на котором собрана коллекция реальных сайтов для воссоздания.

В каждом кейсе для практики представлены:

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

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

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

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

Лайфхаки Vue 3

В статье представлены полезные советы и рекомендации для разработки на Vue 3.

Например, вот один из них. Если вы знакомы с Сomposition API, то знаете, для его работы нужно каждый раз в компоненте объявлять defineComponent и setup: 

<script lang="ts">
import {defineComponent} from 'vue';

export default defineComponent({
name: 'Test',
setup() {
// ...
}
})
</script>

А можно воспользоваться короткой записью:

<script lang="ts" setup>
//...
</script>

Об этом и других советах читайте в статье!

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

#vue

yarn - это альтернативный менеджер пакетов для Javascript и среды его выполнения Node.js, который, как утверждается, обеспечивает скорость, согласованность, стабильность и безопасность. 

Кстати, расшифровывается данное название, как Yet Another Resource Negotiator.

Сложно утверждать, что лучше: npm или yarn. Есть приверженцы и того, и другого!

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

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

#nodejs

10015 Tools — это набор инструментов для фронтенд разработки. 

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

Все собрано на одном ресурсе!

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

#дизайн

Аллея памяти веба

Как много вы знаете об истории веба?

Делимся ссылкой на ресурс, посвященный 100 событиям в вебе, начиная с 2008 года.

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

#статьи

Bulma - это CSS фрэймворк, который основан на first-mobile подходе. Это гарантирует, что UI элементы будут отзывчивыми и отлично выглядеть на маленьких экранах.

Bulma предоставляет множество предварительно стилизованных компонентов без использования JavaScript. Этим он похож на Tailwind CSS и Material UI.

Данный фрэймворк очень прост в установке и освоении. Он имеет интуитивно понятные, читаемые модификаторы, синтаксис и классы.

Делимся статьей, которая познакомит вас с Bulma.

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

#css

Map & weakMap

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

Из статьи вы узнаете подробную информацию о Map, когда и как использовать. А так же познакомитесь с такой структурой, как weakMap.

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

#js