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

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 и многое другое.

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

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

#дизайн