Быстрая загрузка изображений с 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

Эффективная удалёнка: как продуктивно использовать дистанционную работу

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

Читать: https://proglib.io/p/effektivnaya-udalenka-kak-distancionnaya-rabota-povyshaet-produktivnost-organizaciy-2020-04-03

#covid19 #remote

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

7 апреля стартует цикл из 19 бесплатных вебинаров от Слёрма по основам Kubernetes. Для прохождения достаточно знать Linux.
Вебинары идут 1-2 раза в неделю в 20:00 по Москве.

Регистрация: https://proglib.io/w/e1802f38

CSS Filters Demo

Живые примеры работы CSS-фильтров с кодом

Поиграть: https://prglb.ru/5il7v

#css #core

JavaScript - язык будущего

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

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

#javascript

Производительность во время пандемии

Из-за мирового карантина растет интернет-трафик, а значит производительность сайтов и приложений становится особенно важной.

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

#performance

Какие платформы мы не упомянули, но которые вы используете?

Архитектура фронтенда: Большой круг (Фреймворки)

Проектирование фронтенда - это не только и не столько выбор фреймворка. Но фреймворк служит каркасом вашего приложения.

Он должен обеспечить три основных механизма для дальнейшего построения архитектуры:

- Шаблоны - для избавления от повторяющегося кода
- Связывание данных - для внедрения данных в разметку
- Работа с потоками данных - для взаимодействия с источниками этих данных

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

Совсем необязательно - из одной коробки. Каркас можно собрать из отдельных модулей и библиотек.

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

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

#bestpractices #frontend #architecture #frameworks

В поисках идеального JavaScript-фреймворка

Статья написана аж в 2014 году, но требования к идеальному фреймворку с тех пор не особо изменились.

- Грамотные абстракции, в которых легко разобраться
- Доступ к ключевым точкам логики
- Удобная и производительная работа с DOM
- Ослабление связи между JavaScript логикой и HTML селекторами
- Интуитивное управление зависимостями
- Удобные шаблоны
- Грамотный API
- Модульная структура и возможность брать только нужные компоненты
- Простота тестирования
- Хорошая документация

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

Читать: https://prglb.ru/2jbkz

#frameworks

Архитектура фронтенда: Средний круг (Библиотеки и сервисы)

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

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

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

Автор статьи утверждает, что все инструменты, находящиеся на этом уровне, должны иметь максимально независимую модульную структуру.

#frontend #architecture

10 отличных JavaScript библиотек на 2020 год

Самые востребованные и эффективные JS-библиотеки, которые вам точно пригодятся.

Смотреть и использовать: https://prglb.ru/3a5qx

#tools #library #digest

Архитектура фронтенда: Малый круг (Визуальные элементы и компоненты)

UI-компоненты - это лицо и начинка любого фронтенда. Есть разные способы для их создания, но общий подход к организации остается неизменным - от малого к большему.

Система компонентов должна быть гибкой и легкой в использовании.

Читать: https://prglb.ru/39mbr

Статья расскажет, почему "материалы" важнее, чем "инструменты", как в фронтенде реализуются классические паттерны проектирования и об уровнях абстракции в компонентных системах.

#frontend #architecture

Суперменом может стать каждый: разделяем дизайн и данные в React

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

Читать: https://proglib.io/p/supermenom-mozhet-stat-kazhdyy-razdelyaem-dizayn-i-dannye-v-react-2020-04-08

#react #frameworks #beginners