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

Два года назад я писал о методике, которую сейчас обычно называют паттерном module/nomodule. Её применение позволяет писать JavaScript-код, используя возможности ES2015+, а потом применять бандлеры и транспиляторы для создания двух версий кодовой базы. Одна из них содержит современный синтаксис (она загружается с помощью конструкции вида <script type="module">, а вторая — синтаксис ES5 (её загружают с помощью <script nomodule>). Паттерн module/nomodule позволяет отправлять в браузеры, поддерживающие модули, гораздо меньше кода, чем в браузеры, эту возможность не поддерживающие. Теперь этот паттерн поддерживает большинство веб-фреймворков и инструментов командной строки.



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

Коротко о меню

• 99% меню HTML5 + CSS3, 1% JavaScript (закрытие открытой категории по клику).
• На мобильных устройствах «горизонтальное» меню становится «аккордеон-меню».
• В первичном состоянии показаны 10 основных пунктов меню из 33, остальные пункты появляются при нажатии на 11-ый (крайне правый пункт) «Ещё...».
• «Время загрузки для взаимодействия» страницы категории с меню и товарами на компьютере 1 секунда, на мобильных 5,2 секунд (по данным developers.google.com).
• «Время загрузки первого контента» страницы категории с меню и товарами на компьютере 0,3 секунды, на мобильных 1 секунда (по данным developers.google.com).
• Категории меню открываются и закрываются по нажатию, после открытия символ "+" меняется на "-".
• При открытии других пунктов меню, открытые ранее закрываются.
• Подпункты-категорий и подпункты-подпунктов-категорий меню на desktop помещаются в область просмотра без полосы прокруток.

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

Они помогут вам:

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

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

Вчера Апелляционный суд 9-го округа США принял решение (pdf), что скрапинг публичных сайтов не противоречит закону CFAA (Computer Fraud and Abuse Act).

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

Сейчас многие владельцы сайтов пытаются поставить технические препоны конкурентам, которые полностью копируют их информацию, не защищённую копирайтом. Например, цены на билеты, товарные лоты, открытые профили пользователей и т. д. Некоторые сайты считают эту информацию «своей», а скрапинг расценивают как «воровство». Юридически это не так, что теперь закреплено официально в США.

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



→ Вот, кстати, первая часть.

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



→ Вторая часть.

По-прежнему в ходу RC4/3DES/TLS 1.0 и сертификаты на сотни лет. Анализ сотен миллионов SSL-рукопожатий

Если посмотреть на набор данных с 350 млн SSL-соединений, сразу возникает несколько вопросов:

• кто выдал эти сертификаты
  
• какая там криптография
  
• каково их время жизни

Свежая подборка со ссылками на новости и материалы. В выпуске: PHP 7.4.0 RC1, Laravel 6, Monolog 2 и другие релизы, Union Types и прочие новости из PHP Internals, порция полезных инструментов, пачка подкастов и многое другое.

Приятного чтения!

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

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

Как часто вам приходилось настраивать окружения сервера для деплоя вашего приложения (например веб-сайта)? Наверняка чаще чем хотелось бы.

В лучшем случае, у вас был скрипт, который все это делал автоматически. В худшем случае, это могло выглядеть вот так:

• установить базу данных D версии x.x.x
• установить веб сервер N версии x.x и т.д.

Управление окружением, сконфигурированное подобным образом, со временем становится очень ресурсозатратным. Любое, даже незначительное изменение в конфигурации означает как минимум:

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

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

Выше я описал то, что называется vendor lock-in. Для разработки приложений, в частности серверного типа, это явление становится большой проблемой. В данной статье мы рассмотрим одно из возможных решений — Docker. Вы узнаете, как создать, задеплоить и запустить приложение на его основе.

Привет Хабр! В этой статье мы будем строить свой CDN. Почему не воспользоваться готовыми решениями? Потому что сайт автора полностью статический, сделанный на Jekyll, с большими картинками, которые нужно отдавать максимально быстро. Сервер не должен быть кэширующим, он должен хранить сайт целиком, поддерживать HTTP/2 и Brotli, а на всех серверах должен быть установлен один и тот же сертификат.

Ещё мы сделаем это всё на IIS, работающим под Windows Server 2019 Core.

В среде SRE-/DevOps-инженеров никого не удивишь, что однажды появляется клиент (или система мониторинга) и сообщает, что «всё пропало»: сайт не работает, оплаты не проходят, жизнь — тлен… Как бы ни хотелось помочь в такой ситуации, сделать это без простого и понятного инструмента бывает очень сложно. Зачастую проблема скрыта в коде самого приложения — нужно лишь локализовать её.

И в горе, и в радости…

Так сложилось, что мы уже весьма давно и сильно полюбили New Relic. Он был и остаётся отличным средством для мониторинга производительности приложения, а также позволяет инструментировать микросервисную архитектуру (с помощью своего агента) и многое-многое другое. И всё могло быть замечательно, если бы не изменения в ценовой политике сервиса: его стоимость с 2013 года выросла в 3+ раза. Вдобавок, с прошлого года для получения trial-аккаунта требуется общение с персональным менеджером, что затрудняет презентацию продукта потенциальному заказчику.

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

Сейчас существует немало приложений на iOS и Android для «мобильного сканирования» документов. Но сколько у вас на телефоне мобильных приложений? Зачем тратить время и устанавливать еще новые, если этого можно и не делать?

Гораздо проще сфотографировать документ прямо в мобильном браузере, который уже есть на любом смартфоне. Поэтому мы и создали ABBYY Mobile Web Capture. Это JavaScript API, то есть SDK, который мы предлагаем нашим клиентам встраивать в свои web-странички и web-based приложения. Он позволяет захватить хорошую картинку прямо в web-браузере на самых популярных мобильных ОС и отправить ее для дальнейшей обработки на сервер или в облако. О том, как эта технология работает, мы сегодня и расскажем.

Привет, Хабр.

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

Работает билдер следующим образом: вы пишете код на js, используя специальные методы из документации, отдаете его утилите, а она собирает документ. Или не собирает, если есть ошибки.

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



→ Читать первую часть

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



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

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



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

Никита Дубко — разработчик интерфейсов в компании Яндекс. Помимо работы в Яндексе, Никита участвует в организации англоязычной конференции CSS-Minsk-JS и митапов MinskCSS и MinskJS. На FrontendConf на РИТ++ 2019 Никита выступал с докладом «Алиса, пойдем во фронтенд». В нём описан эксперимент по созданию голосового навыка от Алисы от разработчика, который раньше с ней не работал. Доклад интересен тем, что за время, пока выступает спикер, легко создать такой же навык. Рассказ об Алисе зрители выбрали лучшим на всей конференции.



За плечами Никиты десятки выступлений, на каждое из которых уходят недели. Во время подготовки он изучает много нового материала, тренирует выступления на камеру, среди коллег и друзей, оттачивает сценарий и слайды. Поэтому его доклады интересны, увлекательны и заслуженно получают высшие оценки слушателей. О подготовке к докладам, изменениях в жизни, синдроме самозванца, а также о том как выступать на конференциях, чтобы получить работу в Яндекс, в интервью Никиты Дубко. Это не совсем обычное интервью, а текстовая расшифровка подкаста Frontend Weekend, который ведёт Андрей Смирнов. Что из этого получилось, читайте под катом.