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

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

Подробнее о проблеме и ее решении: 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

Все, что вы должны знать о каркасных экранах

Каркасные экраны (Skeleton Screens) позволяют загружать данные по мере их готовности, не вызывая при этом беспокойства у пользователей.

Читать: https://prglb.ru/1lyxt

#interace

Шпаргалка по самым распространенным операциям над массивами в JavaScript

15 важнейших операций - от перебора до сортировки с наглядными примерами.

Смотреть: https://prglb.ru/3pbwq

#javascript #core #cheatsheets

Agile-методы — семейство гибких подходов к управлению проектами. Они помогают командам во всём мире эффективно работать в условиях постоянно меняющихся требований, учитывать все изменения и встраивать новые факторы в рабочий процесс.

Прекрасные новости для каждого, кто хочет вывести работу своей команды на новый уровень! GeekBrains запускает трёхдневный интенсив по методологии Agile.

В ходе интенсива вы не только познакомитесь с «гибкими» подходами, но научитесь выбирать подходящие для решения любой задачи. На практике вы разберёте реальные кейсы и научитесь внедрять и применять Agile-методы в своих проектах.

Успейте подать заявку и повысьте свою эффективность - https://prglb.ru/3ph0p

7 полезных CSS-свойств

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

👉 hyphens
Позволяет переносить длинные слова (будет очень полезно разработчикам сайтов на немецком языке 👍)
Ссылка на MDN

👉 will-change
Указывает браузеру, какие свойства элемента могут изменяться. Очень важное свойство для улучшения оптимизации
Ссылка на MDN

👉 -webkit-line-clamp
Ограничивает многострочный текст указанным числом строк и добавляет многоточие при необходимости
Ссылка на MDN

👉 conic-gradient()
Создает красивые конические градиенты
Ссылка на MDN

👉 caret-color
Изменяет цвет мигающего курсора при вводе текста
Ссылка на MDN

👉 CSS Motion Path
Группа свойств, позволяющая указать кастомный путь для анимации
Ссылка на MDN

👉 CSS Scroll Snap
Умное управление прокруткой
Ссылка на MDN

👍 Список 300+ CSS-свойств, разбитых на группы по функциональности: https://prglb.ru/44u42

#css

Простое объяснение рекурсии и стека вызовов

Рекурсия это один из наиболее потрясающих принципов во всех языках программирования. При правильном использовании она может сделать ваш код проще и понятнее.

Подробнее: https://prglb.ru/1sljb

#javascript

Полное руководство по отзывчивым изображениям

При создании веб-страницы часто требуется использовать разные изображения для экранов разного размера. В HTML и CSS существуют специальные решения для того, чтобы не грузить сразу все необходимые картинки.

Из руководства вы узнаете:

👉 что такое плотность пикселей, чем она отличается от реального размера дисплея и как ее определить
👉 как работают атрибуты srcset и sizes тега img
что умеет тег picture
👉 как проверить, поддерживает ли браузер webp-формат
👉 как определить плотность экрана с помощью CSS
👉 какие волшебные возможности даст нам когда-нибудь функция image()

Подробнее: https://prglb.ru/3tzet

#css #performance

Тестирование Vue с Jest

Пишем первый тест для Vue-проекта с помощью Jest.

Читать: https://prglb.ru/4q6m4

#testing #frameworks #vue

Введение в Web Share API

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

С WebShare API для этого вам нужна только одна кнопка!

Подробнее: https://prglb.ru/5svop

#api #web