Сейчас популярно мнение, что текущие Javascript-фреймворки непомерно большие, а новый фреймворк Svelte очень компактный. Поэтому всем нужно переходить на него, и проблема размера JavaScript решится сама собой.

Недавно вышла статья "Хороший ли выбор Svelte для реализации виджета?" с опытом реализации проекта с критичным размером бандла. Это отличный повод проверить обещания пиарщиков Svelte на реальном проекте.

Давайте его проанализируем!

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



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

Введение

Умение реализовать грамотное REST API — полезный навык в наше время, т.к. все больше сервисов предоставляют свои возможности с помощью API. Но разработка REST API не ограничивается реализацией HTTP запросов в определенном стиле и формированием ответов в соответствии со спецификацией. Задача обеспечения безопасности REST API не так очевидна, как, например, обеспечение безопасности баз данных, но ее необходимость не менее важна.
В настоящее время многие онлайн системы с помощью API передают приватные данные пользователей, такие как медицинские или финансовые. Текущая же ситуация с безопасностью в веб-приложениях весьма печальна: по данным Comnews порядка 70% содержат кри­тичес­кие уязвимости. Поэтому всем, кто участвует в проектировании, реализации и тестировании онлайн систем, важно иметь общую картину по существующим угрозам и способам обеспечения безопасности как всей системы, так и используемого REST API.

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

Поддержка CSS-функций сравнения min(), max() и clamp() появилась в Firefox 8 апреля 2020 года. Это означает, что данные функции теперь поддерживаются во всех основных браузерах. Эти CSS-функции расширяют наши возможности по созданию динамических макетов и по проектированию более гибких, чем раньше, компонентов. Их можно использовать для настройки размеров элементов-контейнеров, шрифтов, отступов и многого другого. Правда, веб-дизайнеру, создающему макеты страниц с учётом возможности использования этих восхитительных функций, может понадобиться научиться думать по-новому.



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

Загрузка CSS на страницу — блокирующая операция. Если асинхронная загрузка JavaScript может быть незаметна пользователю, то медленное появление стилей может прогнать нетерпеливого гостя с сайта. Как загружать CSS максимально производительно и незаметно для пользователей? Разобраться пробует Никита Дубко DarkMeFoDy из группы поисковых интерфейсов Яндекса в Минске.


— Всем привет. Расскажу про стили. Все сегодня говорят про TypeScript да TypeScript. А я про Cascade style script буду рассказывать.

Спецификация по отзывчивым изображениям — это фантастический документ, в котором описано множество вариантов использования таких изображений. Но опыт подсказывает мне, что чаще всего при работе с ними нужно знать лишь о том, как отдавать клиенту копии одного и того же изображения разного размера, выбирая их в зависимости от ширины области просмотра страницы. Мы называем это «переключением разрешения». Для решения этой задачи можно воспользоваться атрибутами srcset и sizes.

Вывод отзывчивых изображений предусматривает применение достаточно сложной логики. Сюда, кроме прочего, входит определение того, изображение какого размера будет выведено, а также выяснение того, работает ли пользователь с экраном высокого разрешения. К счастью, браузеры лучше, чем люди, умеют определять то, какие именно изображения лучше всего подходят каждому конкретному пользователю. Всё, что нам нужно — это дать им некоторые подсказки. Атрибут srcset даёт браузеру список графических ресурсов, из которых он может выбирать наиболее подходящее изображение. Атрибут sizes позволяет сообщить браузеру о том, изображение какого размера нужно показать в том или ином случае.



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

Сегодня поговорим об измерении производительности рендеринга React-компонентов с использованием API React Profiler. Ещё мы будем оценивать взаимодействия с компонентом, применяя новый экспериментальный API Interaction Tracing. Кроме того, мы воспользуемся API User Timing для проведения собственных измерений.

В качестве площадки для экспериментов воспользуемся приложением React Movies Queue.

Приложение React Movies Queue

Какие проблемы могут быть у frontend-программиста, если тестировщик запустит его приложение на iPad с новой трекпад-клавиатурой, Windows-планшете, с неопределенным состоянием “режима планшета” или ноутбуке с подключенным к нему телевизором c поддержкой Multi-touch?

Это далеко не полный список допустимых конфигураций оборудования, которые мы поддерживаем при разработке системы СБИС. Сегодня СБИС — это не только знакомое многим решение для сдачи отчетности, ведения электронного документооборота и бухгалтерии, но и набор инструментов для автоматизации розницы, общепита, доставки и логистики. В этих сферах нужно уметь хорошо работать на самых разных планшетах и гаджетах с различными экранами и типами устройств ввода. И далеко не всегда проблемы могут быть связаны с экзотическим сочетанием настроек операционных систем и драйверов: если взять обычный iPad с браузером Safari, Android планшет или ноутбук-трансформер на Windows10 с последней версией Google Chrome — везде будет свой набор ошибок и особенностей обработки пользовательского ввода.

Эта статья о том, как, а главное, зачем вводить в обычных Web приложениях режим поддержки Touch.

Эдди Османи, в статье «Цена JavaScript в 2018 году», озвучил одну ценную мысль: время, необходимое на обработку скрипта размером 200 Кб, и на обработку изображения, имеющего такой же размер, серьёзно различается. Дело в том, что при обработке кода браузеру нужно проделать более масштабную работу, чем при подготовке к использованию изображений. Вот что об этом говорится в статье:

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

Эти слова были написаны в 2018 году, но они до сих пор более чем справедливы. Правда, учитывая текущую обстановку, высказанная здесь мысль сегодня воспринимается немного иначе.

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

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

Сразу уточняем: это не 15 самых лучших библиотек, а 15 из лучших. Разумеется, есть и другие, не менее замечательные, о которых я не упомянул или не знаю.
И, нет, это не рейтинг — список маркированный, а не нумерованный.

Как ответ на комментарии к цене электричества в Германии и резонному вопросу «Так доколе народ будет это терпеть?» я решил привести свой расчет в данной статье.

Вступление

Данный расчет я делаю уже второй раз. Первый делал пару лет назад, и следующий буду делать как только появятся обновленные данные. Он не рассчитывает на объективность, а служит только для ответа на вопрос «Есть ли смысл?»

Задача рассчитать себестоимость солнечной электроэнергии, выработанной у себя дома с учетом сегодняшних цен на оборудование и текущие сроки эксплуатации и без учета различных субсидий, «зеленых тарифов» и прочей фигни, так это все равно рано или поздно отменят, а Солнце — оно постоянно. Полученную цифру можно будет сравнить с текущей ценой электроэнергии в данном регионе и понять будут ли окупаться инвестиции в собственный ВИЭ.
Я специально учитываю только основное оборудование и не учитываю стоимость монтажных работ, проводки и т.д, так как это не должно сильно влиять, но усложняет расчет.

В мире серверного JavaScript'а я — новичок с чистым, практически незамутнённым разумом. Поэтому когда я узнал о существовании менеджеров процессов, а конкретно — о pm2, то сразу же попробовал применить его для запуска какого-нибудь простейшего backend-сервиса на nodejs в целях самообразования. Мне очень импонирует возможность подключения модулей в JS-коде через import (ES6 modules), т.к. он позволяет использовать один и тот же код как в браузере, так и на серверной стороне, и я запилил простой сервис с ES6-модулями.

Если вкратце, то запустить ES6-версию приложения под pm2 у меня не получилось, для запуска таких приложений лучше использовать либо forever, либо systemd. Под катом — отчёт о результатах для тех, кто любит тексты подлинее.

В последний квартал я столкнулся с тем, что у всех моих клиентов по контекстной рекламе, работающих в высококонкурентных нишах, резко упал CTR (кликабельность объявлений) на поиске.

При дроблении на ключевые слова, устройства и группы объявлений причину выявить не удалось. Однако при разбитии кампаний на поиске на пол и возраст, выявилась заметная аномалия: группы людей с неопределенными демографическими характеристиками имеют до 87% показов с почти нулевым CTR.


Рисунок 1. Отчет в Яндекс Директ по поисковой компании с характеристикой дробления пол и возраст

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

Необходимо построить отчет по интересующим нас рекламным кампаниям в Я. Директ:


Первый признак накрутки показов в поисковых рекламных — это падение CTR (кликабельности).

«CTR (кликабельность, от англ. Click-Through Rate) — это отношение числа кликов на объявление к числу его показов, измеряется в процентах. Можно сказать, что этот показатель определяет эффективность работы объявления»

– глоссарий Я. Директа.

Доброй зимы, дамы и господа. Подготовил для вас подборку самых интересных находок из опенсорса за ноябрь 2019.

За полным списком новых полезных инструментов, статей и докладов можно обратиться в мой телеграм канал @OpensourceFindings (по ссылке зеркало, если не открывается оригинал).

В сегодняшнем выпуске.
Технологии внутри: Rust, TypeScript, JavaScript, Go, Python.
Тематика: веб разработка, инструменты для QA, работа с данными, инструменты разработчика и администратора.

Прошлый выпуск.

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

Меня зовут Артём Сайгин, я веду проект «Growth Lab», в котором рассказываю о digital-маркетинге и росте IT-продуктов.

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

Добавляйте в закладки и подписывайтесь на мой блог на Хабр, будет еще много полезных статей.


Отмечу, что список материалов будет пополняться.
Если я не добавил стоящий материал, свяжитесь со мной — добавлю.

Приступим!

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



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

Завершилось мое участие в чемпионате по программированию. Я неплохо прошел квалификацию, решив 4 из 6 задач и шел на 20 месте, поэтому были надежды и в финале попасть топ 20.
Но к сожалению не удалось попасть даже в топ-100. После драки кулаками не машут, но я смог решить еще несколько задач по завершению. Предлагаю вашему вниманию все решенные мной задания.

До недавнего времени во всех проектах фронта разработчики Dodo Pizza Engineering использовали tslint – полезный инструмент, который подсказывает, когда ты накосячил в коде допустил неточность, помогает поддерживать код в одном стиле и сам исправляет многие замечания. Но тут tslint взял и умер. Под катом я расскажу, почему так вышло, как перестать лить слёзы по умершему и перейти на инструмент eslint, а также покажу кое-что очень интимное.