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

В этом году мы присоединяемся к всероссийской акции «Ночь музеев» и приглашаем читателей Хабра в гости. В ночь с 18 на 19 мая, каждые полчаса с 20:00 до 5:30, мы будем водить экскурсии по постоянной экспозиции. Сотрудники Яндекса, профессионально занимающиеся или просто фанатично преданные ретротехнике, расскажут об экспонатах и буднях программистов прошлого.

Под катом коротко расскажем про некоторые наши ретрокомпьютеры и забавные факты из их истории. А ещё вы узнаете про другие активности, которые мы подготовили для наших гостей. В том числе для тех, кто помнит Mortal Kombat 3.

О нас

Доброго времени суток, Хабр! Мы компания «Информационный центр». Наше основное направление – информационная безопасность (она же – ИБ). В ИБ мы занимаемся практически всем: аудитом, проектированием систем защиты, аттестацией, комплаенсом, пентестами, есть свой SOC, даже с гостайной работаем. Поскольку мы базируемся во Владивостоке, изначально мы работали больше в Приморском крае и в дальневосточных регионах страны, но в последнее время география наших проектов все дальше раздвигает немыслимые нами в момент основания границы.

В первой своей статье мы хотели бы рассмотреть такую сторону ИБ, как комплаенс (англ. complience – соблюдение, соответствие). И поговорим мы о том, что нужно сделать, чтобы полностью соответствовать российскому законодательству о персональных данных.

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

Разработчики соединяют людей.
Разработчики помогают людям.
Разработчики дают людям возможности.

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

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

• С точки зрения User Experience (UX) фронтенд должен обеспечивать быструю загрузку и работу веб-страниц.
• А с точки зрения Developer Experience (DX) нам хочется, чтобы и сам фронтенд тоже работал быстро, был прост в использовании и вообще являлся примером для подражания.

Всё это делает пользователей и разработчиков счастливее, а заодно существенно улучшает ранжирование сайтов поисковиками. Например, Google уделяет особое внимание оптимизированности фронтенда. Если вы достаточно долго бились над тем, чтобы ваш сайт заработал побольше баллов в Google Pagespeed Insights, то, надеемся, эта статья поможет вам лучше понять, для чего всё это нужно и каково разнообразие стратегий оптимизации фронтенда.

Иван Михеев (AGIMA)

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

Вы уже используете прогрессивную загрузку? А как насчёт технологий Tree Shaking и разбиения кода в React и Angular? Вы настроили сжатие Brotli или Zopfli, OCSP stapling и HPACK-сжатие? А как у вас обстоят дела с оптимизацией ресурсов и клиентской части, со вложенностью CSS? Не говоря уже о IPv6, HTTP/2 и сервис-воркерах.

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


JavaScript-код, который попадает в мобильные браузеры, всё ещё остаётся самым дорогостоящим ресурсом, так как он, многими способами, может задержать переход страниц в состояние, в котором с ними можно взаимодействовать. Какую нагрузку на системы создаёт JavaScript в наши дни? Как анализировать сайты? Как ускорить загрузку и обработку браузерами интерактивных веб-страниц? Эдди Османи, перевод материала которого мы сегодня публикуем, решил найти ответы на эти и на многие другие вопросы, встающие перед теми, кто пользуется JavaScript для разработки веб-сайтов в 2018 году.

^{Дисклеймер: я не связан с Google Play, Chrome или любой упомянутой компанией. Это не официальное заявление. Логотип и названия используются только для иллюстрации.}

В Chrome 72 для Android реализована долгожданная функция Trusted Web Activity. Это означает, что теперь мы можем распространять PWA через каталог Google Play и запускать Chrome без UI в автономном режиме для нативных пакетов! Я некоторое время поигрался с этой функцией, копаясь в API, а здесь расскажу, о чём речь, чего ожидать и что доступно уже сегодня.

Продолжаем знакомство с Progressive Web Applications. После теоретической прошлой части самое время перейти к практике.

Сегодня мы построим простое, но полноценное PWA «Hello Habr».




Приложение доступно по адресу https://altrusl.github.io/habr-pwa/hello-habr/. При открытии в браузере на мобильном устройстве возможно добавление ярлыка на домашний экран и запуск в полноэкранном режиме.

Наверное, все близкие к веб-разработке люди уже наслышаны о Progressive Web App. Ещё бы! Эта технология практически уравняла веб и мобильную разработку с точки зрения распространения продуктов и вовлечённости пользователей.

Да, современный фронтенд, написанный, например, на React, работает как приложение. Но вот только скачивается это приложение в браузер и запускается из него. В этом и заключается огромный гандикап, который всегда имела мобильная разработка. Давайте подумаем, чем с точки зрения обычного пользователя, «приложение» отличается от «сайта». Сразу в голову приходит, что приложение в телефоне, а сайт на компьютере. Но ведь есть мобильный браузер, так что сайт и в телефоне тоже. Тогда остаётся 3 существенных отличия:

В первой части мы превратили наш сайт в Progressive Web App. Там же было сказано, что совсем недавно, 6 февраля 2019 года, Google предоставили простую возможность выкладывать PWA в Google Play при помощи Trusted Web Activity. Всё, что нужно сделать, это написать небольшую обёртку под Android, которую можно будет выложить в Google Play. Когда пользователь скачает такое приложение-обёртку, оно просто будет открывать наше PWA внутри Chrome. Конечно же, интерфейс Chrome будет спрятан и всё будет выглядеть красиво.

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

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

Автор материала, перевод которого мы сегодня публикуем, Эдди Османи из Google, говорит, что уже в Chrome 75 вполне может появиться поддержка нового атрибута элементов <img> и <iframe> loading. Это означает, что данные элементы будут поддерживать стандартные возможности по так называемой «ленивой загрузке» данных.

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



Сайт клиента в один момент сильно потерял в позициях. Как следствие – меньше трафика и звонков. Рассказ про типичную проблему и её решение.

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

Я работаю с контекстной рекламой достаточно давно. И ещё веду курсы для новичков по работе с Я.Директ. Некоторым из них повседневные приёмы кажутся крутыми «фишками». Возникла идея поделиться некоторыми из них в этой короткой статье.

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

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

Внимание к мелочам рождает совершенство,
а вот совершенство уже не мелочь.

Микеланджело Буонарроти


C 2012 года администраторам веб-ресурсов стала доступна новая технология HTTP Strict Transport Security (HSTS) — механизм, активирующий форсированное защищённое соединение по HTTPS. Данная политика безопасности позволяет сразу же устанавливать безопасное соединение, вместо использования HTTP. Механизм использует особый заголовок HTTP Strict-Transport-Security, для переключения пользователя, зашедшего по HTTP, на HTTPS-сервер [1].
HSTS направлен на закрытие следующих уязвимостей к атакам:

Пользователь помещает в закладки или набирает в адресной строке http://example.com/ и становится жертвой атаки «man-in-the-middle»	HSTS автоматически преобразует HTTP-запросы в HTTPS для целевого домена
Веб-приложение, предполагаемое к использованию строго по HTTPS, по небрежности содержит HTTP-ссылки или отдает контент по HTTP	HSTS автоматически преобразует HTTP-запросы в HTTPS для целевого домена
Атакующий «man-in-the-middle» пытается перехватить трафик жертвы используя поддельный сертификат в надежде, что пользователь не обратит внимания на сообщение о невалидном сертификате	HSTS не даст пользователю пройти дальше сообщения о проблемах с сертификатом

Включается данная технология проще простого, необходимо возвращать пользователю HTTP-заголовок «Strict-Transport-Security» в тот момент, когда он заходит на сайт по HTTPS:

Strict-Transport-Security: max-age=expireTime [; includeSubdomains]

expireTime
    Время в секундах, на которое браузер должен запомнить, что данный сайт должен посещаться исключительно по HTTPS. includeSubdomains (опционально)
    Если указать этот необязательный параметр, правила так же применятся ко всем поддоменам.

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

Предлагаем вашему вниманию коллекцию полезных CSS-сниппетов, в которых вы можете разобраться за 30 секунд, а то и быстрее.