​​6 полезных инструментов для фронта с уклоном в CSS

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

Meanderer - Маленькая библиотека JavaScript для создания отзывчивых траекторий анимации.

Transition.css - Переходы на CSS.

CSS Scan - Hаведите курсор на любой элемент и мгновенно получите его CSS, цвета, ресурсы, анимацию, шрифт и размеры.

Parsel - Парсер CSS-селекторов в два килобайта.

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

​​Вместо background лучше использовать background-color , если требуется поменять только цвет фона. В целом разницы никакой но на code review могут придираться

🔴 Не так
.example {
background: tomato;
}

✅ Вот так
.example {
background-color: tomato;
}

​​HTML <base> Тэг

<base> тег определяет базовый URL для всех относительных URL - адресов в документе.
В документе может быть только один единственный <base> элемент, и он должен находиться внутри элемента <head>.

Пример:
<head>
 <base href="https://www.some-website.com/">
</head>

<body>
<img src="images/stickman.gif">
<a href="article/about-us">About us</a>
</body>

​​Проверка наличия свойства в объекте JS

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

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

const person = { name: 'John Doe', salary: 1000 };
console.log('salary' in person); // true
console.log('age' in person); // false

Он возвращает true или false, в зависимости от того, удалось ли найти требуемое поле.

​​Самопаркующаяся тачка в 500 строк кода
С помощью генетического алгоритма натренируем тачку парковаться самостоятельно.

Статья

​​DOM, который построил Chrome. Или не построил? Или не Chrome? Или не DOM?

Обычный, теневой, виртуальный, инкрементальный… Как получилось, что простой программный интерфейс доступа к элементам веб-страниц обзавелся таким количеством «родственников»? Чем современные фреймворки не устраивает стандартная объектная модель документа или просто DOM? Что и как на самом деле отрисовывает браузер в процессе рендера веб-страницы?

Статья

​​☕ ТОП-10 актуальных книг по JavaScript на русском языке: от новичка до профессионала

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

Статья

​​🔥🔥Toп 8 Расширений VSCode.

1. JavaScript (ES6) Code Snippets - предоставляет сниппеты кода JS, TS, Vue, React и HTML.

2. Live Server - обеспечивает просмотр вашего веб-приложения в реальном времени прямо в редакторе.

3. Prettier - Code formatter - выполняет форматирование кода JS, CSS и HTML.

4. Better Comments - создаёт более понятные и удобные для чтения комментарии.

5. Bracket Pair Colorizer - Это расширение позволяет идентифицировать совпадающие скобки по цвету.

6. Path Intellisense - Это расширение ускоряет разработку за счет автозаполнения имен файлов при импорте.

7. Debugger for Chrome - Это расширение добавляет дебаггер прямо в IDE.

8. Git Lens - это плагин VSC, расширяющий возможности git.

​☕️ Распространенные алгоритмы и структуры данных в JavaScript: основные понятия и работа с массивами

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

статья

​Бандлинг всего того, что не относится к обычному JavaScript-коду

Предположим, вы работаете над веб-приложением. В таком случае весьма вероятно то, что вам приходится иметь дело не только с JavaScript-модулями, но и с самыми разными другими ресурсами. Это и веб-воркеры (их тоже пишут на JavaScript, но они обособлены от обычного кода фронтенда), и изображения, и стили, и шрифты, и WebAssembly-модули, и иные материалы, входящие в состав сайта.

Статья

React: простое и эффективное решение для управления состоянием приложений


В этом небольшом "туториале" я хочу показать вам, как реализовать простое, но эффективное решение для управления состоянием React-приложений.
Немного забегая вперед, скажу, что решение получилось чуть менее производительным, чем "классическое" сочетание хука useReducer() и инструментов, предоставляемых Context API (которые, собственно, и составляют ядро решения).

Статья

​Самосохраняющийся компонент выбора

Недавно Бхарат Рави опубликовал статью о директиве самосохраняющегося select-элемента на InDepth. Это интересная концепция изолирования логики в директиве, что в целом идея хорошая.
Однако в этом случае у меня есть сомнения, которые я хочу подсветить. Я предлагаю свою версию компонента, исправляющую эти моменты. Начнем с того, что назовем проблемы текущего решения.

Статья