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

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

В этой статье мы разберём основные техники, помогающие сэкономить трафик на веб-сервере.

Привет, Хабр! Рады представить первый мажорный релиз PhpStorm в этом году!

Под катом подробный разбор всех заметных изменений и новых возможностей. Осторожно — много картинок.

Если вам не приходилось работать в команде, то, возможно, вы еще не используете эти вещи, а кто-то даже не знает про них. Работая один, вы сами себе хозяин.

Как только начали работать в команде  —  ситуация резко меняется. Если нет договоренностей, то каждый начинает писать код в таком стиле, в каком умеет. И даже если вы все же собрались и обсудили на словах codestyle на проекте и даже записали где-то, это, скорее всего, не поможет решить проблему, и вот почему.

В 1970 г. американские инженеры запустили аппарат Аполлон-13 к Луне. На борту три батареи топливных элементов, беспокоиться не о чем, всё надежно и многократно продублировано. Но никто не мог предположить, что взрыв кислородного баллона выведет из строя две батареи из трёх. Трагедия! Астронавты вернулись домой, о событии сняли художественный фильм с Томом Хэнксом, а фраза астронавта Джека Свигерта: «Хьюстон, у нас проблема!», вошла в историю.



История Аполлона-13 это еще одно доказательство известного факта, что нельзя подготовиться ко всем возможным неприятностям. Это естественное свойство окружающего мира: железо периодически ломается, код сбоит, а люди ошибаются. Полностью исключить это невозможно.

Для больших распределенных систем такое поведение нормально, это следствие эффекта масштаба и статистики. Именно поэтому Design for Failure (дизайн на отказ) — базовый принцип проектирования облачных сервисов AWS. Системы изначально строятся так, чтобы максимально быстро восстановить штатную работу и минимизировать ущерб от известных и ещё неизвестных сбоев. На HighLoad++ Василий Пантюхин на примерах реальных проблем с боевыми сервисами показал паттерны проектирования распределенных систем, которые используют разработчики AWS.

Микросервисная и модульная системы — это типы архитектуры IT-решений.

При работе с модулями мы дорабатываем коробочную версию существующего IT-продукта.

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

Доработка состоит в создании модулей с недостающим функционалом.

Новые модули получаем путём переиспользования частей монолита (ядра или других модулей).
Бизнес-логика прописывается внутри монолита: для программы (приложения, сайта, портала) есть одна точка входа и одна точка выхода.

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

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

Рендеринг диаграмм может серьёзно нагрузить работой браузер. Особенно если речь идёт о выводе в интерфейсе сложного приложения множества элементов, представляющих диаграммы. Попытаться улучшить ситуацию можно с помощью интерфейса OffscreenCanvas, уровень поддержки которого браузерами постепенно растёт. Он позволяет, задействовав веб-воркер, переложить на него задачи по формированию изображения, выводимого в видимый элемент <canvas>.



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

За последние 5 лет Node.js очень изменился, но знания о платформе у сообщества остались на уровне 2013-2015 годов, все те же подходы, все те же проблемы. Сообщество плохо следит за новыми возможностями, а если и узнает про них, то это не влияет на написание ежедневного кода. В Node.js, да и в JavaScript, слабо проникают фундаментальные знания по программной инженерии и архитектуре, параллельному программированию, GRASP, SOLID, GoF, а если и проникают, то не подвергаются адаптации и переосмыслению. Поэтому, среди других языков программирования JavaScript воспринимается, как несерьезный, а в среде разработчиков Java, C++, C#, распространено мнение, что Node.js, это платформа для малограмотных людей. Как преодолеть эту тенденцию и как изменить подход к разработке на Node.js в 2020 году, с использованием всех современных возможностей и знаний, а так же, что нужно изменить в ежедневных практиках написания кода, эти и другие вопросы рассматриваются в трех бесплатных вебинарах «Node.js в 2020: Выйди и зайди нормально» 11, 14 и 21 апреля, накануне выхода Node.js v14.

Меня всегда интересовала наука о цвете. В 2014 году я выступала на разных конференциях, рассказывая о спецификации CSS Color 4. А до этого, в 2009 году, я написала программу для выбора цвета. Она использовала скрытый Java-апплет для поддержки цветовых профилей ICC и для правильной работы со CMYK. Это была, насколько я знаю, первая программа такого рода. Я никогда её не выпускала, но она привела к появлению этой публикации. Интерес к цвету свёл меня с человеком, который стал моим мужем.



В 2019 году я стала соредактором спецификации CSS Color 5. Моя цель заключается в конкретизации моего предложения по модификации цветов, которое нацелено на то, чтобы позволить дизайнерам произвольно настраивать цветовые каналы для создания вариантов цветов. Я, кроме того, хочу скомбинировать моё предложение с этим предложением. LCH-цвета в CSS — это кое-что такое, что меня прямо-таки восхищает. Я глубоко убеждена в том, что дизайнеры, когда больше узнают об LCH-цветах, будут возмущены тем, что у них до сих пор нет возможности пользоваться такими цветами.

Иногда кажется, что веб компоненты не дотягивают до фреймворка, особенно если сравнивать их с наиболее популярными представителями. Но многое самое насущное, что не закрывается реализацией стандартов входящих в понятие веб компонентов, достаточно легко прикрутить с помощью библиотек или небольшого объема своего изящного кода. Одной из таких возможностей является роутинг на стороне фронтенда. Фича не всегда необходимая, возможно даже спорная, но в большинстве фреймворков она присутствует и многими используется. Что же в веб-компонентах? А мы попробуем реализовать роутинг с помощью библиотеки navigo.

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

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



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

Хочу поделиться своей интересной находкой, которая помогла мне наконец осуществить свою маленькую мечту. Объединить все свои рабочие инструменты единым стилем. И не просто стилем, а хорошо продуманным, выверенным и целостным. Что мне помогло этого добиться? Это палитра Nord, портированная для большинства современных и не очень редакторов, терминалов и не только. Если вам не чужда подобная мечта, прошу под кат.

Утечки памяти похожи на сущности, паразитирующие на приложении. Они незаметно проникают в системы, поначалу не принося никакого вреда. Но если утечка оказывается достаточно сильной — она способна довести приложение до катастрофы. Например — сильно его замедлить или попросту «убить».



Автор статьи, перевод которой мы сегодня публикуем, предлагает поговорить об утечках памяти в JavaScript. В частности, речь пойдёт об управлении памятью в JavaScript, о том, как идентифицировать утечки памяти в реальных приложениях, и о том, как с бороться с утечками памяти.

Перевод статьи подготовлен специально для студентов курса «Framework Laravel».

---

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

К счастью, с Laravel и Pusher реализация этого функционала довольно проста.

Уведомления в реальном времени

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

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

Доброго времени суток, друзья!

Простые одностраничные приложения, основанные на React, Vue или чистом JavaScript, окружают нас повсюду. Хороший «одностраничник» предполагает соответствующий механизм маршрутизации.

Такие библиотеки, как «navigo» или «react-router», приносят большую пользу. Но как они работают? Необходимо ли нам импортировать всю библиотеку? Или достаточно какой-то части, скажем, 10%? В действительности, быстрый и полезный маршрутизатор можно легко написать самому, это займет немного времени, а программа будет состоять менее чем из 100 строчек кода.

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



Не ожидал, что именно эта история станет моей первой статьей на Хабре. Пишу пока горячо!

Все что Вы прочитаете далее — это не призыв к действию или попытка «кого-либо» скомпрометировать.

Привет! Меня зовут Алиса и мы вместе с командой meetups-online.ru подготовили список интересных митапов в сети на ближайшую неделю.

Пока встречаться с друзьями получается только в online-барах, можно развлечь себя прогулкой на митап, например, не по своей теме. Или можно ввязаться в холивар (хоть и обещали себе никогда так не делать) на дебатах про TDD или дискуссии про необходимость аналитиков.

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

С момента своего возникновения веб-приложения прошли долгий путь. Мы знаем, какую важную роль играет в вебе JavaScript и какие безграничные возможности есть у нас при выборе фреймворков и технологий. Каждый фреймворк имеет свои достоинства и недостатки, но почти во всех используются какие-то основные методологии. Такие инструменты как create-react-app, next.js, vue-cli и другие действительно полезны для начального формирования проекта и его структуры, но в остальном вы вольны создавать приложение в соответствии со своими предпочтениями и требованиями проекта.

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

3 апреля 2020 года Президент РФ подписал закон, позволяющий аптекам продавать безрецептурные препараты через интернет. Этот закон был вынесен на рассмотрение ещё в конце 2017 года. C того времени аптеки начали готовиться к его принятию. Планировать логистику, нанимать интернет-маркетологов, разрабатывать интернет-магазины. Делать все, чтобы к моменту подписания закона быть во всеоружии.

Пару лет назад к принятию закона начала готовиться и известная на всю страну сеть аптек «Планета здоровья». Сегодня компания имеет более 1500 аптек в нескольких городах и странах, тысячи товарных позиций и интернет-магазин, который мы им разработали.

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

Баннер на Stack Overflow, который позволяет включить тёмную тему

Меня зовут Аарон Шеки. Я — руководитель отдела дизайна Stack Overflow. Я участвую в разработке дизайна компонентов интерфейса, лежащих в основе новых возможностей проекта.

Для начала — немного иронии. Лично я не являюсь любителем тёмных тем интерфейсов.

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

Но я — тот человек, усилиями которого на Stack Overflow появилась тёмная тема.

Та работа, о которой я хочу рассказать, никогда не была направлена именно на разработку тёмной темы, несмотря на то, что многие пользователи уже давно просили оснастить ресурс такой темой. Но в ходе продвижения к тёмной теме нам пришлось решить множество задач. В частности — был модернизирован фронтенд-код Stack Overflow, была улучшена доступность контента. Работая над тёмной темой, мы получили стимул к более широкому использованию в проекте нашей дизайн-системы.

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