API Style Guide

Если вы каким-то образом работаете с API, но у вас до сих пор нет стайлгайда к нему, то, возможно, стоит подумать о его внедрении.

В статье читайте, какие распространённые проблемы он решает и как облегчает жизнь разработчикам. Также автор делится своим опытом по написанию и внедрению стайлгайда в компании:

https://tprg.ru/TX6c

#api

Хотите прямо в личке узнавать о курсах, конференциях, хакатонах и прочих айтишных событиях? Хорошо бы ещё не отвлекаться на пуши в рабочее время, правда?

Бот «Веб-страницы» присылает анонсы ивентов по веб-разработке в удобное для вас время. И сам напоминает о тех, которые понравились. А за сколько дней напомнить — решать вам.

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

Попробуйте: @webpagetpbot

​Вышла новая версия Chrome — Chrome 83

Интересное из нововведений:

— Из origin trial вышел Trusted Types API, который позволяет избежать DOM-based XSS атак, блокируя прямой доступ к потенциально небезопасным частям web-платформы.

— В рамках origin tirals доступны performance.measureMemory() — новое API для мониторинга потребления памяти страницей и Native File System API для упрощения работы с файлами в веб-приложениях.

— В Chrome Dev Tools теперь можно эмулировать проблемы со зрением и разные локали.

— А ещё были обновлены встроенные html-контролы — унифицирован внешний вид, улучшена поддержка клавиатуры и тач-ввода.

Источник: Defront

#chrome

​Я не робот: 10 альтернатив reCAPTCHA

Сейчас виджет reCAPTCHA от гугла установлен более, чем на 5 миллионах сайтов. Однако не всем приходится по вкусу его дизайн.

Подобрали 10 альтернатив этого виджета:

https://tproger.ru/articles/recaptcha-alternatives/

#безопасность #фронтенд

​Высокая цена стилей

Загрузка CSS на страницу — блокирующая операция. Если асинхронная загрузка JavaScript может быть незаметна пользователю, то медленное появление стилей может прогнать нетерпеливого гостя с сайта.

Как загружать CSS максимально производительно и незаметно для пользователей? Автор этого видеодоклада помогает разобраться.

Текстовая версия здесь: https://tprg.ru/V7JY

#фронтенд #css

React-библиотека для реализации просмотра набора картинок:

https://tprg.ru/EHqV

#фронтенд #react

​JavaScript-стайлгайд от Google

В Google для стандартизации написания кода на JavaScript используют стайлгайд, в котором чётко прописаны правила оформления JS-кода:

https://tprg.ru/WfHd

Автор этого ролика простым языком рассказывает про самые актуальные моменты из этого документа.

#javascript #google

Когда пытаешься воспользоваться CSS в первый раз

Недавно мы рассказывали про дизайн-систему, с помощью которой можно проектировать интерфейсы в стиле Windows 98.

Теперь там появились CSS-компоненты для стилизации интерфейса под Windows XP. Кайф:

https://tprg.ru/klLc

#фронтенд #windows #css

Актуальная статья про приоритеты ресурсов в Chrome (а значит и примерно во всём интернете):

https://tprg.ru/XYIi

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

#chrome

​Пользователи: Chrome кушает так много памяти!
Веб-разработчики:

Как ускорить сборку Docker-образов до 30 секунд

Один из этапов попадания фичи на прод — сборка Docker-образа. Иногда сборка длится минуты, иногда — десятки минут, что совсем не круто.

В этой статье ребята из ITSumma (создавали и поддерживают сайты таких СМИ, как: ТАСС, The Bell, «Новая газета») поделились своим опытом оптимальной настройки деплоя и сокращения уровня сборки аж до 30 секунд:

https://tprg.ru/VduW

#devops #docker

​Chaos Engineering

Это такой подход к тестированию, когда систему намеренно ломают в разных частях и смотрят на её состояние.

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

Рекомендуем серию из трёх докладов для ознакомления с этой темой:

— Часть 1: https://tprg.ru/8iab
— Часть 2: https://tprg.ru/Nlr4
— Часть 3: https://tprg.ru/B37L

#devops #тестирование

Автоматический HTTPS

Certmagic — библиотека, с помощью которой можно реализовать автоматический HTTPS для любой программы на Go. Полностью управляемая выдача и обновление TLS-сертификатов:

https://tprg.ru/scSR

#безопасность #go #https

Периодическая таблица HTML

Хотите выучить HTML? Или прокачать существующие навыки? А может просто хотите хорошо и полезно провести время?

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

https://tprg.ru/3JoL

#фронтенд #html

CSS Grid Generator

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

https://tprg.ru/TO9l

#фронтенд #css

​Когда бэкенд-разработчик успешно поменял что-то в main.css

Гайд по качественной реализации популярного в интерфейсах поведения drag-and-drop:

https://tprg.ru/uM3h

#фронтенд #ux

​101 UX-принцип

Чтобы не напортачить при проектировании UX приложения, важно понимать лежащие в его основе принципы.

В этой статье описан 101 такой принцип — с подробным пояснением и примерами для каждого из них:

https://growth.design/psychology/

#фронтенд #дизайн #ux

​* Илон Маск называет своего сына X Æ A-12 *
Веб-разработчики, пишущие валидацию для формы ввода имени:

​Почему window.matchMedia(), а не window.innerWidth

Используете в JS свойство window.innerWidth? Признайтесь, вам ведь не нужна ширина окна в пикселях? Скорее всего, вы просто хотите проверить, мобильный это экран или нет.

Для этого есть window.matchMedia(): метод возвращает объект MediaQueryList с результатом обработки переданной media query строки. Он не приводит к пересчёту вёрстки и forced reflow, что обеспечивает:

— уменьшение блокировок при выполнении JS;
— быстрый ответ на реакцию пользователя;
— быструю полную загрузку.

Рекомендуем использовать window.matchMedia() вместо вычисления точной ширины там, где возможно. В некоторых случаях это значительно быстрее.

По этой ссылке вы сможете протестировать, как именно работает window.matchMedia(): измените размер браузерного окна так, чтобы его ширина была меньше или равна 700px, и розовый фон в окошке справа станет жёлтым.

#javascript #фронтенд