Deep JavaScript

Бесплатная версия книги Deep JavaScript!
Также доступна платная в других форматах.

Эта книга предлагает погрузиться глубоко в JavaScript.
В ней рассказывается:
- о практических методах, как использовать язык лучше;
- о том, как работает язык;
- о спецификации ECMAScript и многом другом!

Ссылка на книгу

#javascript

Openbase

Openbase помогает разработчикам выбирать среди множества npm пакетов подходящий.

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

Данный сервис поможет выбирать правильные решения для любой задачи.

Ссылка

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

nextTick

nextTick - это утилита Vue, которая используется в случаях, когда нужно дождаться обновления DOM после его перерисовки. 

Важно знать, что DOM обновляется асинхронно. Когда меняются какие-то данные во Vue, изменение не сразу отображается в DOM. Обычно это происходит так быстро, что порой может не иметь значения. 

Но иногда, например, нужно сразу обновить отрендеренный DOM после того, как Vue отрисовал его. А сделать это в методе вы сразу не можете, потому что обновление еще не произошло. В таких случаях на помощь приходит nextTick.

Как и когда использовать nextTick читайте в статье!

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

#vue

Обработка PDF

В экосистеме JavaScript отсутствует надежная поддержка работы с PDF-файлами.
Но для этого существует npm пакет pdf-lib!
 
В статье на примерах показано, как управлять PDF-файлами: создавать новые, добавлять в них текст и модифицировать уже существующие и еще много других полезных манипуляций. И все это с помощью Node.js! 

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

#nodejs

Анимация градиента

Анимация градиента бэкграунда - это что-то необычное...Стоит взять на заметку!

А еще делимся ссылкой на генератор таких анимаций!

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

#дизайн

emoji

Забавная статья об эмодзи!

Знали ли вы, что если в JavaScript объединить несколько разных эмодзи, они вернут одну общую?
Например, сочетание следующих:

['👨', '🏼', '‍', '💻'].join('') // => 👨🏼‍💻

И наоборот, вы можете разделить одну эмодзи на несколько:

[...'👨🏼‍💻'] // => ['👨', '🏼', '‍', '💻']

Почему это возможно, читайте в статье.

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

#статьи

CSS лайфхаки

В статье приведены полезные примеры создания UI элементов и анимационных эффектов без использования JavaScript.

Например, создание чеклиста на чистом CSS или появление подсказок с помощью attr().

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

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

#css

JavaScript анимация

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

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

Существует множество библиотек, которые вы можете использовать для реализации, например, популярный плагин Greensock ScrollTrigger.

Подобное можно реализовать и на ванильном JavaScript. Пример реализации смотрите в данной статье.

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

#js

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