Веб-разработка *

1. Material components web

Если использовать в заголовке слово «Material», то это гарантированно даст первые места в рейтингах UI-библиотек. Веб-библиотека Google Material-components — это версия веб-компонента библиотеки Material-UI. Эти веб-компоненты можно включить в широкий спектр контекстов и сред.

Когда говорят о выполнении программ, то под «асинхронным выполнением» понимают такую ситуацию, когда программа не ждёт завершения некоего процесса, а продолжает работу независимо от него. В качестве примера асинхронного программирования можно привести утилиту, которая, работая асинхронно, делает записи в лог-файл. Хотя такая утилита и может дать сбой (например, из-за нехватки свободного места на диске), в большинстве случаев она будет работать правильно и ей можно будет пользоваться в различных программах. Они смогут её вызывать, передавая ей данные для записи, а после этого смогут продолжать заниматься своими делами.



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

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

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

Представляем вашему вниманию вторую часть перевода материала, посвящённого особенностям работы с модулями в Python-проектах Instagram. В первой части перевода был дан обзор ситуации и показаны две проблемы. Одна из них касается медленного запуска сервера, вторая — побочных эффектов небезопасных команд импорта. Сегодня этот разговор продолжится. Мы рассмотрим ещё одну неприятность и поговорим о подходах к решению всех затронутых проблем.

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

Во время код ревью мы рассматривали некоторую функцию, которая требовала, чтобы программа выводила список букв A-Z (например, список контактов с набором кнопок, которые позволяют переходить к именам, начинающимся с определенной буквы).

Итак, появился молодой преуспевающий программист. (Хорошо, это был я.) Я решил, что вместо хардкода массива всех букв будет проще написать цикл for, который проходит от 65 до 90, а затем генерировал буквы по полученному коду символа.

В варианте JavaScript это будет выглядеть примерно так:

for (let i = 65; i <= 90; i++) {
 letters.push(String.fromCharCode(i))
}

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

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


Угловой градиент внутри прямоугольника

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

В экосистеме PHP не было подходящего решения, чтобы автоматически перезапускать приложения при изменениях в исходном коде. Поэтому я решил сделать свой инструмент — на чистом PHP и с доступом через Composer.

Это как Nodemon, но на PHP

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

После того, как наш дизайнер проделал потрясающую работу, продумав и нарисовав сайт, нам, разработчикам, было необходимо реализовать макет, сохранив его чистым и цельным для каждого устройства, от большого 2K экрана, на которых мы пишем код, до старого iPhone 4 с его 3.5-дюймовым дисплеем.

Несколько недель спустя веб-сайт был почти готов и я просматривал его, чтобы убедиться, что всё работает как нужно. Заметив, что макет главной страницы неправильно отображался на нашем iPad, я быстро изменил некоторые CSS-правила и исправил ошибку, но… это привело к проблемам отображения макета на всех всех ноутбуках с небольшим экраном

Недавно в Redash приступили к смене одной системы выполнения задач на другую. А именно — они начали переход с Celery на RQ. На первом этапе на новую платформу перевели лишь те задания, которые не выполняют запросы напрямую. Среди таких заданий — отправка электронных писем, выяснение того, какие запросы должны быть обновлены, запись пользовательских событий и другие вспомогательные задачи.



После развёртывания всего этого было замечено, что RQ-воркеры требуют гораздо больше вычислительных ресурсов для решения того же объёма задач, который раньше решали средствами Celery.

Материал, перевод которого мы сегодня публикуем, посвящён рассказу о том, как в Redash выяснили причину проблемы и справились с ней.

Эта статья основана на моём выступлении на конференции ITSubbotnik, прошедшем 2 ноября 2019 года в Москве.

Вообще я бэкенд программист, но меня заинтересовала эта технология, она позволяет использовать мои знания бэкенда на фронте.

Проблема

Начнём с проблемы, которая решается этой (относительно новой) технологией. Проблема эта — быстро исполнять код в браузере. Быстро — это значит, «быстрее чем JavaScript», в идеале настолько быстро, насколько позволяет имеющийся у нас процессор.

Недавно на GitHub опубликовали список ресурсов с необоснованно сложными и просто неудачными правилами для паролей. Подборку активно обсуждают, и мы решили подключиться к дискуссии.

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

Через несколько дней после первого релиза я, и правда, начал получать письма. Но благодарностей в них не наблюдалось. Мне писали менеджеры, работники кадровой службы, и все те, кто пытался воспользоваться моей программой. Все они говорили, что у них приложение работает неправильно.



В чём же дело? А дело в том, что я, создавая проект, тестировал его в Chrome. Но пользователи этого проекта постоянно применяют Firefox и IE. Работа с моим приложением не стала исключением. Мне, в итоге, было совсем невесело от того, что проект, запущенный пару дней назад, надо было дорабатывать.

Собственно говоря, тут мне на помощь и пришли полифиллы.

Тестировать API и интерфейсы можно по-разному. В связи с открытием широкого доступа к Acronis Cyber Platform мы вынуждены были искать способы проверить сервисы “на прочность” с самых разных позиций. В этом посте ведущий архитектор программного обеспечения Acronis Дмитрий Саломатин рассказывает о том, как мы выбирали фреймворк для тестирования, с какими сложностями сталкивались, и какие доработки пришлось делать самостоятельно.

Публикуем первую часть перевода очередного материала из серии, посвящённой тому, как в Instagram работают с Python. В первом материале этой серии речь шла об особенностях серверного кода Instagram, о том, что он представляет собой монолит, который часто меняется, и о том, как статические средства проверки типов помогают этим монолитом управлять. Второй материал посвящён типизации HTTP-API. Здесь речь пойдёт о подходах к решению некоторых проблем, с которыми столкнулись в Instagram, используя Python в своём проекте. Автор материала надеется на то, что опыт Instagram пригодится тем, кто может столкнуться с похожими проблемами.

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



Генерирование случайных чисел — это территория JavaScript, на которую CSS не заходит. А что если это не совсем так? На самом деле, если принять в расчёт действия, выполняемые пользователем, это позволит добавить в CSS немного случайности. Автор материала, перевод которого мы сегодня публикуем, предлагает это обсудить.

Язык XML был изобретен в 1996 году. Едва он успел появиться, как возможности его применения уже начали понимать неправильно, и для тех целей, к которым его пытались адаптировать, он был не лучшим выбором.

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

XML — это язык разметки. Это не формат данных. В большинстве схем XML это разграничение явно не учитывали, путая XML с форматом данных, что в итоге означало ошибку в самом выборе XML, поскольку на самом деле нужен был именно формат данных.

С момента выхода стандарта ECMAScript 2015 (его ещё называют ES6) JavaScript серьёзно изменился и улучшился. Это очень хорошая новость для всех JS-разработчиков. Более того, теперь новая версия ECMAScript выходит каждый год. Возможно, вы не обратили особого внимания на то, что появилось в самой свежей версии стандарта, который был выпущен в июне 2019 года. Автор заметки, перевод которой мы сегодня публикуем, хочет в двух словах рассказать о новшествах JavaScript, и о том, чего можно ждать в следующей версии стандарта ECMAScript.



Здесь будут упомянуты возможности, предложения которых находятся на третьем этапе согласования (Stage 3). Это значит, что они, скорее всего, появятся в следующей версии стандарта ECMAScript, но с абсолютной достоверностью этого утверждать нельзя. Вот репозиторий, в котором можно найти сведения о предложениях, находящихся на разных этапах согласования.

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Существует небольшая, но довольно важная разница между функцией, которая просто возвращает промис, и функцией, которая была объявлена с помощью ключевого слова async.

Взгляните на следующий фрагмент кода:

Обсуждаем трудности, которые стоят перед разработчиками открытого ПО, и то, как сложности, с которыми им приходится сталкиваться, влияют на ИТ-экосистему в целом.

Google Page Speed Insights — это сервис от гугла, который позволяет определить производительность сайта и дает рекомендации по его оптимизации. Очень важно понимать, что это всего лишь рекомендации! Некоторые воспринимают эти рекомендации настолько серьезно, что готовы реализовать все что там написано в ущерб функционалу своего сайта, что в итоге может даже навредить. Но это довольно сложная тема с множеством нюансов, а данная статься лишь мои мысли в слух и пара замечаний самому google.

Есть такая рекомендация:

Используйте современные форматы изображений:
Форматы JPEG 2000, JPEG XR и WebP обеспечивают более эффективное сжатие по сравнению с PNG или JPEG, поэтому такие изображения загружаются быстрее и потребляют меньше трафика

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