Гибридная ленивая загрузка

Атрибут loading для изображений и фреймов пока имеет ограниченную поддержку в браузерах.

К сожалению, для него нельзя создать адекватный JavaScript-полифилл. Но можно сочетать loading и привычную нам ленивую загрузку через data-src.

if ('loading' in HTMLImageElement.prototype) {
  el.src = el.dataset.src;
}

Подробнее о гибридной загрузке: https://prglb.ru/3kf53
+бонус - скрипт vanilla-lazyload

#performance #html #javascript

Говоришь на JavaScript?

Тогда HolyJS 2020 Piter 16-17 июня для тебя!
2 дня, 3 десятка технических докладов от опытных разработчиков, море общения с коллегами, возможность обсудить наболевшее с матёрыми экспертами JavaScript или вовсе выступить в роли докладчика!

Программа HolyJS включает важные области JavaScript: от тем про управление базами данных на бэкенде до связки JS c ML и IoT.

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

Промокод единомышленникам: proglib2020pc
Билеты и актуальная информация на сайте: http://bit.ly/2xx72a2

8 CSS фильтров для изображений

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

Подробнее: https://www.cat-in-web.ru/8-css-filters/

#css

Что объединяет фотохостинг Pinterest и приложение для планирования Trello? Оба они написаны на JavaScript.
Если английский — это основной язык современного мира, то JS — это основной язык современного интернета, ведь на нем написано большинство сайтов, которые вы посещаете каждый день.

Для тех, кто хочет погрузиться в разработку сайтов и веб-приложений SkillFactory запустили курс «Frontend-разработчик». За 6 месяцев обучения вы освоите HTML, CSS, кроссбраузерную и адаптивную верстку, JavaScript и React и добавите в своё портфолио 6 проектов; дополнительный модуль про soft skills поможет подготовиться к собеседованиям.

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

🚀Давно откладывали обучение? Самое лучшее время – сейчас! Получите курс со скидкой: https://clc.to/k8S7cQ

Паттерны проектирования в JavaScript

22 самых важных паттерна, реализованных на JS. На каждый паттерн - по одному коротенькому видео.

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

#video #javascript #bestpractices

Как работает reduce() в JavaScript, когда его нужно применять и какие крутые вещи можно с ним делать

В этой статье вы узнаете про метод reduce() и какие клевые штуки можно вытворять с его помощью, выйдя за рамки его общеизвестного применения.

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

#javascript #core

Переплетение элементов на CSS

Пара слоев, режим наложения - вуаля! - получился очень симпатичный эффект переплетения.

Интересно-интересно: https://prglb.ru/505fr

#css

Показываем кнопку Искать, если поле поиска не пустое

Небольшая заметка по улучшению UX поисковой формы с помощью селектора :placeholder-shown

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

#interface #css

Разбираемся с HTML-элементом dialog

Dialog - крутое нативное решение всех проблем с модальными окнами. Поддержка в браузерах пока не очень хорошая, но начинать практиковаться уже можно, тем более, что есть полифиллы.

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

#html

Как изучить JavaScript с нуля

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

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

#javascript #beginners

Инклюзивные компоненты

Серия материалов Хейдона Пикеринга в переводе Татьяны Фокиной:

👉 Инклюзивные компоненты: переключатели

👉 Инклюзивные компоненты: список дел

👉 Инклюзивные компоненты: меню и кнопки меню

👉 Инклюзивные компоненты: переключатель темы

👉 Инклюзивные компоненты: интерфейсы со вкладками

👉 Инклюзивные компоненты: сворачиваемые секции

👉 Инклюзивные компоненты: слайдер

#interface #accessibility

Лучшие практики Node.js

Продолжаем следить за самой большой пополняемой подборкой по Node

Смотреть: https://prglb.ru/1y08z

#node #digest

Sony PlayStation 4 за фото вашего рабочего стола

RUVDS.com запустил конкурс фотографий хоум-офисов и дарят Sony PlayStation 4 автору лучше фотографии.

Как участвовать:

1. Загружайте своё фото на сайт homeoffice.ruvds.com или в бота @ruvds_contest_bot
2. Через 10 минут ваше фото появится на сайте и в канале @homeofficeruvds
3. Победят фотографии, набравшие максимальное количество лайков
4. Каждые 3 дня выбирается локальный победитель (тот, кто за эти 3 дня набрал больше всех лайков) и он получает один из классных призов поменьше — сегодня например подарят капсульную кофемашину.
5. Итоги конкурса — 15 апреля.

Не хотите участвовать? Тогда просто подписывайтесь на @homeofficeruvds и собирайте идеи для своего рабочего места, подглядывая за российскими айтишниками.

Что такое super() в JavaScript?

Зачем мы вызываем super в дочерних классах и что произойдет, если этого не сделать?

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

#javascript #core #beginners

Быстрая загрузка изображений с Embedded Image Previews

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

Используя прогрессивный JPEG и обычные AJAX-запросы мы можем загружать "упрощенную" и "продвинутую" версию одной и той же картинки!

Разобраться: https://prglb.ru/10f90

#performance

Если вы боитесь, что ваш заработок пострадает из-за карантина, участвуйте в онлайн-марафоне от GeekBrains. За 14 дней вы выберете другую востребованную профессию. Вас ждут:

23 бесплатных вебинара по программированию, дизайну, маркетингу и управлению.
Инсайды от экспертов из Mail ru Group, Wikium, Альфа-Банка и других компаний-лидеров рынка.
Заряд мотивации: вы поймете, что начать карьеру можно в любом возрасте, с любым бэкграундом.
Шанс выиграть бесплатное обучение.

Успейте зарегистрироваться и выбрать новую профессию мечты!

Проблемы закругленных кнопок

Использование border-radius на кнопках вызывает побочные эффекты. Разбираемся, какие и как их лечить.

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

#css #interface

Разбираем на примерах: как избежать мутаций в JavaScript

Из этого подробного руководства с многочисленными примерами кода на JavaScript вы узнаете, что такое мутации объектов, почему их следует избегать и как это сделать.

Читать: https://proglib.io/p/razbiraem-na-primerah-kak-izbezhat-mutaciy-v-javascript-2020-04-01

#javascript #advanced

Бесплатные курсы по HTML CSS от сайта code.mu для новичков и продолжающих. Начало 8-го апреля.

Запись и подробности тут:
https://prglb.ru/4udxr

Обработка null и undefined в JavaScript

Советы по обработке неопределенных значений

Читать: https://prglb.ru/23bpu

#javascript #bestpractices

Тестирование React-проектов с Jest и Enzyme

В React-приложении много частей, которые следует тестировать.

Например, редьюсеры. С ними все просто - они сами по себе изолированы от остального кода.

С синхронными создателями действий - то же самое, а вот асинхронные - уже поинтереснее. Чтобы написать тесты для них, придется воспользоваться некоторыми redux-инструментами и научиться делать моки (заглушки) для аякс-запросов.

👉 Unit тестирование redux экшенов и редьюсеров

Не забудем и про компоненты. Для их тестирования потребуется библиотека enzyme. Заодно разберемся с тестированием снапшотами и симуляцией событий.

👉 Тестирование компонентов с помощью jest и enzyme

#react #testing #video #frameworks