
Веб-разработка *
Делаем веб лучше
Профилирование производительности React-приложений
В качестве площадки для экспериментов воспользуемся приложением React Movies Queue.

Приложение React Movies Queue
Как разрабатываются сайты от 100 000$

Последние 7 лет я занимаюсь управлением индивидуальными IT проектами в рамках веб студии, которой я руковожу, и за это время я набрал неплохой опыт по работе с крупными проектами, которым и хочу с Вами поделиться. Мои клиенты, обычно, из США, Франции и Германии, но есть выполненные проекты в Канаде, Швейцарии, Дании, Австралии, Японии и т.д. Я проектировал социальную сеть, онлайн-аукцион, фитнес-конкурс, сервис по подбору автозапчастей, доставку еды, онлайн-кабинеты по приему и обработке заказов, торговые площадки и другие виды сервисов. Как видите, проекты разные, но их объединяет одна отличительная черта: пользователь взаимодействует с сервисом по заданному алгоритму. Моей основной задачей является продумать эти алгоритмы.
А если детальнее, то я должен:
- обсудить проект в деталях с Заказчиком
- составить проектную документацию
- выдать задачи специалистам
- проверить их выполнение и выдать поправки
- сдать рабочий функционал Заказчику
- обучить его пользованию сервисом
- подписать акт выполненных работ и передать проект отделу сопровождения
- периодически подключаться по сложным задачам в процессе сопровождения
Про нюансы своего дела и набитые шишки напишу в отдельной статье. А теперь, собственно, о проектах…
Дайджест свежих материалов из мира фронтенда за последнюю неделю №411 (13 — 19 апреля 2020)

Переход с reCAPTCHA на hCaptcha в Cloudflare

Компания Cloudflare сообщила о том, что она недавно перешла с использования сервиса reCAPTCHA, предоставляемого Google, на сервис hCaptcha, который поддерживает компания Intuition Machines. В Cloudflare очень рады тому, что им удалось совершить этот переход, так как он способствует решению проблем со сбором конфиденциальной информации, актуальных в то время, когда компания полагалась на сервисы Google. Это, кроме того, способствует более гибкой настройке CAPTCHA-задач, предлагаемых посетителям сайтов. Данное изменение, в принципе, затрагивает всех пользователей Cloudflare. Поэтому компания решила поделиться подробностями о переходе на reCaptcha и подготовила материал, перевод которого мы сегодня публикуем.
[в закладки] Работа с изображениями в веб
<img>. Это может быть применение CSS-свойства background или тега <image> элемента <svg>. Выбор правильного подхода к работе с изображениями весьма важен, так как это может очень сильно повлиять на производительность и доступность проекта.
Материал, перевод которого мы сегодня публикуем, посвящён изучению различных способов включения изображений в состав веб-страниц. Здесь будут обсуждены преимущества и недостатки этих способов. Кроме того, мы поговорим о том, когда и почему их обычно используют.
Почему не надо удалять все элементы массива, переназначая его на [ ]?

Очень часто бывают моменты, когда мы хотим удалить все элементы массива, как вариант, у нас есть список задач, и мы хотим удалить все задачи одновременно.
Рассмотрим такой список элементов:
let items = ["tea", "coffee", "milk"];Чтобы удалить все элементы из массива, мы устанавливаем его значение в пустой массив
items = [];Это работает отлично, и вы обнаружите, что данный пример используют постоянно. Но с этим есть проблема ...
Порождающие шаблоны проектирования в ES6+ на примере Игры престолов

Шаблоны проектирования — способы решения наиболее часто встречающихся при разработке программного обеспечения проблем. В этой статье мы рассмотрим порождающие шаблоны с отсылками на Игру престолов.
О структурных паттернах читайте здесь.
Порождающие паттерны предназначены для работы с механизмами построения объектов с целью создания объекта наиболее подходящим в данной ситуации способом.
10 лучших расширений Chrome для дизайнеров

Как дизайнеры, мы почти всегда ищем новые советы, хитрости и инструменты, которые помогут ускорить и улучшить наш рабочий процесс. После нескольких месяцев тестирования расширений Chrome я составил список из 10 лучших расширений и плагинов для дизайнеров.
Крошка сын к отцу пришел и спросила кроха: что такое DDD? Но так, чтобы я понял

Есть вопрос, который я никак не могу раскусить. Казалось бы, по нему есть масса информации: книги, статьи, доклады. Но сложность и многогранность темы не позволяет сразу ухватить суть. Поможешь мне в этом?
Чтобы действительно понять сложную тему, нужно прочитать и обдумать множество источников. Прелесть в том, что каждый из них предоставляет одну и ту же информацию по-своему и какой-то из этих подходов может сработать именно для тебя. Так что давай и я попробую внести свой вклад в общее информационное пространство. Так какой у тебя вопрос?
Что такое Domain Driven Design?
О превращении интереса к фондовой бирже в домашний проект
На днях я прочитал этот твит Джейсона Фрайда, основателя Basecamp. Там говорилось о том, что в компании работают над новым email-приложением Hey. Это заставило меня задуматься.

Проверка почтового ящика — это одно из моих первых утренних дел. Быстро просмотрев почту, я узнаю о том, есть ли среди писем что-то важное, и о том, на что мне надо обратить внимание. Я читаю новости и уделяю время тому, чтобы содержать мой почтовый ящик в чистоте. Электронная почта — это мой центральный повседневный инструмент.
Сервисно-ориентированный state management c lamp-luwak
Благодаря тому, что React предоставляет удивительные возможности по работе с отображением, можно сосредоточиться только на организации логики приложения и семантике кода, описывающего работу с данными. Т.е. выбирая state management библиотеку, происходит выбор стилистики будущей кодовой базы.
В данной статье мы рассмотрим подход, основанный на сервисах-сторах, реализуемый благодаря библиотеке lamp-luwak.

Ближайшие события
Спасибо Хабру, и новые возможности в постах пользователей

В CodePen добавлена поддержка Flutter

Сегодня (15 апреля 2020) мы рады сообщить, что CodePen, основная среда разработки для миллионов frontend разработчиков и дизайнеров, добавила поддержку Flutter! Для веб-разработчиков CodePen уже давно является отличным местом для обмена экспериментами по дизайну, новыми подходами и идеями. Теперь с появлением Flutter CodePen предлагает аудитории новые возможности, чтобы учиться, делиться и продвигать свое творчество.
Что говорит Alex Vazquez (один из соучредителей CodePen):
Интересные CSS-находки в новом дизайне Facebook

Речь идёт о CSS-находках в новом дизайне Facebook. Этот дизайн появился сравнительно недавно. Я его увидел пару недель назад. Сначала все элементы интерфейса казались мне необычно большими, но я привык к ним буквально за несколько дней. Здесь я расскажу обо всём том интересном, что я нашёл в дизайне Facebook.
8 распространенных структур данных на примере JavaScript

Звучит ли это знакомо: «Я начал заниматься веб разработкой после прохождения курсов»?
Возможно, вы хотите улучшить свои знания основ информатики в части структур данных и алгоритмов. Сегодня мы поговорим о некоторых наиболее распространенных структурах данных на примере JS.
1. Стек (вызовов) (Stack)

Стек следует принципу LIFO (Last In First Out — последним вошел, первым вышел). Если вы сложили книги друг на друга, и захотели взять самую нижнюю книгу, то сначала возьмете верхнюю, затем следующую и т.д. Кнопка «Назад» в браузере позволяет перейти (вернуться) на предыдущую страницу.
Поддержка Touch в JavaScript

Какие проблемы могут быть у frontend-программиста, если тестировщик запустит его приложение на iPad с новой трекпад-клавиатурой, Windows-планшете, с неопределенным состоянием “режима планшета” или ноутбуке с подключенным к нему телевизором c поддержкой Multi-touch?
Это далеко не полный список допустимых конфигураций оборудования, которые мы поддерживаем при разработке системы СБИС. Сегодня СБИС — это не только знакомое многим решение для сдачи отчетности, ведения электронного документооборота и бухгалтерии, но и набор инструментов для автоматизации розницы, общепита, доставки и логистики. В этих сферах нужно уметь хорошо работать на самых разных планшетах и гаджетах с различными экранами и типами устройств ввода. И далеко не всегда проблемы могут быть связаны с экзотическим сочетанием настроек операционных систем и драйверов: если взять обычный iPad с браузером Safari, Android планшет или ноутбук-трансформер на Windows10 с последней версией Google Chrome — везде будет свой набор ошибок и особенностей обработки пользовательского ввода.
Эта статья о том, как, а главное, зачем вводить в обычных Web приложениях режим поддержки Touch.
Как экономить трафик на веб-сервере

Нагруженный веб-проект расходует терабайты трафика. На больших числах экономия в 10-20% может существенно сберечь деньги и помочь не выйти за квоты.
Что делать, если трафик опасно приближается к лимитам вашего тарифа на хостинге или вовсе выходит за них?
В этой статье мы разберём основные техники, помогающие сэкономить трафик на веб-сервере.


