
Веб-разработка *
Делаем веб лучше
Улучшаем useReducer
С появлением useReducer и useContext управление app state стало намного удобнее, а также отпала необходимость в использовании Redux.
Когда я в первый раз отказался от Redux в пользу стандартного useReducer я ощутил нехватку некоторых полезных функций:
- useSelector. Позволяет оптимизировать перерисовку компонент, которые используют
useContext, с помощьюmemo. - Единственный dispatch. Упрощает обновление app state так как не нужно использовать отдельный dispatch каждого
useReducer. - Cache. Не нужно заботиться о кэширование каждого
useReducer.
Тогда я решил попробовать улучшить стандартный useReducer, добавив эти 3 функции. Эта идея превратилась в новую небольшую библиотеку, которую я назвал Flex Reducer.
Интересный факт!
Flex Reducer не использует ни useReducer ни useContext в своей реализации.
Посмотрим плюсы и минусы использования стандартных useReducer + useContext и Flex Reducer на примере типичного Todo App.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №426 (27 июля — 2 августа 2020)

Laravel-Дайджест (27 июля – 2 августа 2020)
Подборка новых статей по Laravel. Срочное исправление уязвимости во фреймворке. Анонс женского сообщества Ларавел-разработчиц. Новый стек разработки приложений. Бесплатный курс по веб-сокетам.

Локальное хранилище или куки? Безопасное хранение JWT на клиенте

Материал, перевод которого мы сегодня публикуем, посвящён разбору плюсов и минусов использования локального хранилища браузера (
localStorage) и куки-файлов для хранения JWT.Иерархия компьютерных информационных систем для разработки сайта

В своей работе я постоянно сталкиваюсь с необходимостью создания или модернизации сайтов. При этом заказчики часто задают вопросы, почему вы рекомендуете именно эту CMS, зачем нужны фреймворки, как вы определяете, что нужно в нашем случае. Когда-то, когда я сам изучал это направление программирования, я и сам задавался подобными вопросами.
Но, независимо от личного профессионализма, наверное, практически каждый веб-разработчик сталкивается с вопросами, которые я озвучил выше. В помощь пользователям и коллегам, которые также вынуждены постоянно отвечать на одинаковые вопросы, я решил написать эту статью.
Чем «фрагменты» могут помочь в Веб-разработке на примере Malina.js

Никто не спрашивает зачем нужны функции, ведь это очевидная и полезная вешь в программировании. Функции позволяют переиспользовать код и делать архитектуру приложения лучше.
Почему бы не использовать такую же способность в шаблонах компонентов. В настоящее время многие фреймворки позволяют использовать компоненты внутри других компонентов. Но это больше похоже на подключение модуля, нежели просто функции. Ведь компонент кроме шаблона может иметь свой JavaScript код, свои стили и он весьма изолирован (что хорошо).
Нововведения CSS – Июль 2020 (Gap, Aspect ratio, Masonry, Subgrid)
Приветствую. Представляю вашему вниманию перевод статьи «CSS News July 2020», опубликованной 7 июля 2020 года автором Rachel Andrew

В последнее время скорость внедрения новых возможностей технологий веб-разработки существенно увеличилась по сравнению с тем, как это было раньше. Данная статья содержит подборку новых CSS-функций, поддержка которых уже сейчас появляется в современных браузерах. Если вы относитесь к разработчикам, которым не нравится читать о технологиях, если их нельзя сразу же начать применять, вероятно, эта статья может быть вам не интересна. Однако, если вам интересно узнать, что нас ждёт в самое ближайшее время и уже сейчас опробовать это в бета-версии браузера, тогда читайте дальше.
CSS и множественный фон
background — это одно из самых часто используемых свойств. Но сообщество веб-разработчиков пока не слишком хорошо осведомлено о возможностях, которые даёт использование множественного фона. Здесь я собираюсь серьёзно поговорить о том, что может дать применение множественного фона, и о том, как использовать стандартные механизмы CSS на полную мощность.В этом материале я подробно расскажу о свойстве
background-image, приведу наглядные примеры совместного использования нескольких фоновых изображений элемента, рассмотрю сильные стороны такого подхода. Здесь будет много иллюстраций.
Если вы не знакомы с CSS-свойством
background — хорошо будет, если вы, перед чтением материала, заглянете на эту страницу документации MDN, посвящённую данному свойству.Vue.js для начинающих, урок 8: компоненты

→ Vue.js для начинающих, урок 1: экземпляр Vue
→ Vue.js для начинающих, урок 2: привязка атрибутов
→ Vue.js для начинающих, урок 3: условный рендеринг
→ Vue.js для начинающих, урок 4: рендеринг списков
→ Vue.js для начинающих, урок 5: обработка событий
→ Vue.js для начинающих, урок 6: привязка классов и стилей
→ Vue.js для начинающих, урок 7: вычисляемые свойства
→ Vue.js для начинающих, урок 8: компоненты
День и ночь в интернете, или открытое письмо веб-разработчикам
Я — веб-разработчик со стажем, и мне приходится подолгу сидеть за компьютером. Поэтому, чтобы к вечеру глаза не уставали, мне пришлось перепробовать все возможные способы снижения нагрузки на зрение — от защитных экранов, специальных очков и упражнений для глаз до различных режимов «eye saver» и прочих манипуляций с настройками монитора.
Ближайшие события
Простое объяснение делегирования событий в JavaScript
Приветствую. Представляю вашему вниманию перевод статьи «A Simple Explanation of Event Delegation in JavaScript», опубликованной 14 июля 2020 года автором Dmitri Pavlutin

В данной статье Дмитрий Павлутин объясняет, на чём основан один из базовых паттернов работы с DOM-событиями.
Lock-файлы npm

Всем привет! В прошлом посте мы рассмотрели экосистему npm в качестве источника хаоса в нашем проекте, и научились с умом подходить к выбору зависимостей, чтобы минимизировать наши риски. Сегодня мы пойдем дальше и рассмотрим lock-файлы npm, которые помогают повысить стабильность проекта в процессе работы над ним.
1С справа налево: как мы поддержали RTL в платформе 1С: Предприятие
Одна из особенностей арабского языка в том, что текст на нём пишут и читают справа налево. UI для арабского языка надо отображать зеркально по горизонтали (но не всё и не всегда – тут есть тонкости), контекстное меню открывать слева от курсора и т.п.
Под катом – о том, как мы поддержали RTL (right-to-left) в веб-клиенте платформы 1С:Предприятие, а ещё – одна из гипотез, объясняющая, почему арабский мир пишет справа налево.

Какая асинхронность должна была бы быть в Python
async и семантика асинхронного программирования проникла во многие популярные языки программирования: JavaScript, Rust, C#, и многие другие. Конечно, в Python тоже есть async/await, они появились в Python 3.5.В этой статье хочу обсудить проблемы асинхронного кода, порассуждать об альтернативах и предложить новый подход поддерживать и синхронные, и асинхронные приложения одновременно.
Правильное автоматическое заполнение метатегов alt и title изображений для WordPress

Приветствую вас, уважаемые читатели Хабра. Как часто мы сталкиваемся с заполнением атрибутов для изображений? Я — довольно часто. И каждый раз начиная пользоваться WordPress на очередном сайте, этот процесс вызывает некоторое раздражение. Поскольку из коробки CMS устанавливает метатеги изображений не корректно, точнее не так, как того требуют поисковые системы для грамотного предоставления информации о картинке. Я решил исправить эту несправедливость.
Наука о пользовательском опыте. Использование когнитивных искажений в разработке качественных продуктов

Содержание
Введение. О чем эта статья
Цели и дисклеймеры
Часть 1. Хороший продукт
Часть 2. Пользовательский опыт (UX). Что это?
Часть 3. Архитектура выбора
Часть 4. Архитектор выбора
Часть 5. Когнитивные искажения и Пользовательский опыт
Ссылка на полную версию UX CORE (105 примеров использования когнитивных искажений в менеджменте команд и продуктов)
Часть 6. Наши дни
Часть 7. Не только искажения
Часть 8. Эпилог
Часть 9. Материал, качественно дополняющий эту статью
Введение. О чем эта статья
В этой статье мы поговорим о когнитивной психологии, поведенческой экономике и об ошибках (искажениях) нашего мозга. Мы посмотрим как понимание ошибок мозга и моделей человеческого поведения может помочь нам обеспечить высококачественный пользовательский опыт (UX) в цифровых продуктах. В основном, мы поговорим о программном обеспечении для мобайл и десктоп платформ. Внимательный же читатель сможет применить эти знания широко за рамками как этих платформ, так и программного обеспечения вообще.



