​JavaScript-однострочники

Несколько полезных приемов на JS, укладывающихся в одну строчку кода:

Удаление дубликатов из массива

const deDupe = [...new Set(myArray)];

Изменение значений двух переменных

[varA, varB] = [varB, varA];

Установка свойства по условию

const myObject = { ...myProperty && { propName: myProperty } };

Форматирование JSON-строки

const formatted = JSON.stringify(myObj, null, 2);

Создание массива, заполненного числами

const numArray = Array.from(new Array(52), (x, i) => i);

Перемешивание массива

myArray.sort(() => { return Math.random() - 0.5});

Глубокое клонирование

const myClone = JSON.parse(JSON.stringify(originalObject));

Источник: https://prglb.ru/5ximt

#code #snippets #javascript

Полная настройка Webpack 4

7 полезных видео уроков:

🖍 Настройка Webpack 4 шаблона. Установка Babel 7 и webpack dev server. Настройка js на примере vue
🖍 Полная настройка Webpack 4 препроцессоров. Sass, настройка post css плагинов, минификация стилей.
🖍 Самое важное по WEBPACK 4 - обработка картинок и html. Webpack-merge. Обработка статических файлов
🖍 Подключение VUE и VUEX, забываем jQuery. Использование vuejs в верстке.
🖍 Ускоряем загрузку JS в 3-4 раза. Code Splitting и vendors.js
🖍 Лучший способ подключения и обработки шрифтов.
🖍 Полная настройка шаблонизатора pug. Использование в верстке и не только

Смотреть и настраивать: https://www.youtube.com/playlist?list=PLkCrmfIT6LBQWN02hNj6r1daz7965GxsV

#webpack #tools #video

Чему меня научил год изучения и преподавания доступности

Сара Суайдан очень убедительно объясняет, зачем нужна доступность в вебе и что мешает делать по-настоящему доступные интерфейсы.

❗️Семантика - это важно!
❕Там, где не хватает семантики, помогут ARIA-атрибуты
❗️Не бойтесь использовать JavaScript
❕Прогрессивное улучшение - основа разработки
❗️Реализация не должна зависеть от дизайна

Читать: https://prglb.ru/464v0

#accessibility

Dependency Injection и Инверсия зависимостей

Плейлист (5 видео) от Ильи Климова (JavaScript ninja), посвященный паттернам Внедрение и инверсия зависимостей.

🤔 Зачем это вообще нужно
🤔 Зачем это нужно в JavaScript
🤔 Почему недостаточно обычных импортов
🤔 Как работает InversifyJS

Смотреть: https://www.youtube.com/playlist?list=PLvTBThJr861xKTf1x6P49MwN6yoN4v69k

#video #javascript #bestpractices

По каким материалам вы предпочитаете изучать фронтенд-разработку?
anonymous poll

Статьи на русском языке – 405
👍👍👍👍👍👍👍 53%

Статьи на английском языке – 194
👍👍👍 25%

Видео на русском языке – 112
👍👍 15%

Видео на английском языке – 56
👍 7%

👥 767 people voted so far.

​Веб в 2020 году: расширяемость и совместимость

В 2020 году основными трендами сообщества веб-разработчиков вполне предсказуемо станут расширяемость и совместимость.

* CSS Houdini
* Вариативные шрифты
* Кастомные свойства
* Веб-компоненты
* Логические свойства
* Учет пользовательских предпочтений
и еще много интересного

Читать: https://prglb.ru/156nl

#css

ПЕРВЫЙ ОНЛАЙН-КУРС В РУНЕТЕ, по Flutter в мобильной разработке.

Перспективной технологии, которую уже используют Google, Alibaba, eBay, BMW и другие мировые бизнес-империи!🔥

Курс предлагает изучение мультиплатформенной разработки на языке Dart. Вы научитесь создавать эффектный Frontend и максимально отзывчивый UI с потрясающей анимацией и стабильными 60 FPS.

• Длительность курса 3,5 месяца
• Более 40 часов лекций и 100 часов практики
• Code Review вашего проекта
• Cистема автоматической проверки заданий

❗️Результатом обучения станет реально выполненный проект – созданное вами мобильное приложение на Flutter, и сертификат, подтверждающий полученные навыки.
⠀
Узнай больше о новом курсе по Flutter-разработке от Skill-Branch.🚀
Перейти на сайт
===========================
🗣Приобщайся к сообществу в чате, посвящённом Flutter-разработке
👉🏼 @Flutter_Mobile_Dev

Внутренние размеры в CSS

Что такое min-content, max-content, fit-content и как ими пользоваться?

Разбираемся с размерами, зависящими от контента, и рассматриваем несколько популярных кейсов, в которых они могут быть полезны.

Читать: https://prglb.ru/yj5

#css

Все, что вам нужно для начала работы с VueJS

Небольшое вводное руководство, в котором вы найдете целых 4! способа создания первого приложения на Vue. Бонусом - много полезных ссылок и советов.

Читать: https://prglb.ru/wd8d

#frameworks #vue

Небезопасные промисы

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

Подробнее о проблеме и ее решении: https://prglb.ru/2z3uz

#javascript #advanced

​Подборка библиотек для создания анимаций и эффектов

Выбирайте 🤗

CSS

Простые эффекты:

👉 CSS WAND
Очень маленькая copy-past библиотечка с симпатичными эффектами наведения и загрузки

👉 CSShake
Забавные shake-эффекты

👉 Three Dots
Классические анимации загрузки с тремя точками

Коллекции популярных анимаций появления-исчезновения (bounce, slide и т.д.):

👉 Vov.css
👉 Tuesday
👉 Animation library
👉 Animate.css (очень большой набор эффектов)
👉 Magic (много нестандартных анимаций)
👉 Woah.css (эксцентричные анимации)

JS

👉 Scene.js
Мощный инструмент с поддержкой CSS, JS и SVG-анимаций

👉 Micron.js
Контролируемые микроанимации

👉 Popmotion Pure
Анимации и эффекты на любой вкус, гибкая настройка

Графика:

👉 Granim.js
Красивые анимированные градиенты

👉 Curtains.js
Невероятные WebGL-эффекты для изображений и видео

Скролл-анимации:

👉 AOS
👉 Sal.js
👉 ScrollReveal

Анимация частиц:

👉 Particles.js

#tools #library #animation

Повесть об однонаправленном потоке данных в Angular

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

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

Читать: https://prglb.ru/3syte

#frameworks #angular

JavaScript Web Workers: руководство для начинающих

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

Пишем самый простой веб-воркер и учимся общаться с ним.

const worker = new Worker("worker.js");

Читать: https://prglb.ru/21jlh

#pwa #javascript

Используем Google-таблицы вместо базы данных

🗓 А вы знали, что данные для вашего сайта можно хранить в обычных гугл-таблицах? Оказывается, это невероятно просто!

Попробуйте сами: https://prglb.ru/1zsjk

#tools #library

Все, что вы хотели знать о TypeScript

Полноценное введение в TypeScript

🐣 для начинающих

Статическая типизация
Как указывать типы
Линтинг на лету
Работа с функциями
Интерфейсы
Enum
Абстрактные классы
Модификаторы классов

🦁 для продвинутых

Конфигурация компилятора
Дженерики
Декораторы
Пространства имен

#typescript #beginners #advanced #video

React vs Svelte

Создаем одно и то же приложение на React и на Svelte. Есть ли разница?

Сравнить: https://prglb.ru/2k9a5

#frameworks #react #svelte

«Каждый охотник желает знать»: теория цвета для веба и приложений

Рассказываем, как правильно подбирать и комбинировать цвета. Цветовой круг, модель HSL, цветовые схемы и психология, советы и правила. Показываем на примерах, как применять в CSS.

Смотреть: https://prglb.ru/19u2h

#interface #css

Секреты правильной растяжки: адаптивные графики в вебе без клиентского JavaScript

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

Узнать подробнее: https://prglb.ru/5bcel

#tools #svg #library

Parcel

Очень быстрый сборщик модулей без всяких настроек.

Умеет работать с JS, TS, Babel, процессорами CSS, Pug, Vue, React и еще некоторыми типами ассетов из коробки. Он даже необходимые модули самостоятельно скачивает!

Просто берите, подключайте - и пишите проект. Parcel позаботится о его сборке самостоятельно.

Идеальное решение для небольших/несложных проектов со стандартными технологиями.

Документация: https://ru.parceljs.org
Обновляющийся список полезных материалов: https://prglb.ru/1fd4b

#tools

Хотите быть в курсе новых конференций, митапов по фронтенду? Мы сделали бота, который оперативно оповещает о новых мероприятиях, и вы не пропустите все самое интересное.

Подписывайтесь: t.me/event_listener_bot