Анатомия браузера веб-разработчика

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

https://tprg.ru/Ku87

#фронтенд

То, как браузеры планируют и выполняют сценарии, может повлиять на производительность веб-страниц. Держите шпаргалку по приоритетам загрузки JavaScript в Chrome:

https://tprg.ru/FKpM

#javascript #chrome

​Как ускорить сайт с помощью CDN

CDN (Content Delivery Network) — это географически распределённая сетевая инфраструктура, которая повышает производительность сайта за счёт использования распределённой сети серверов. Поскольку CDN снижают нагрузку на сервер, они также снижают затраты и подходят для обработки всплесков трафика.

В этой статье рассказывается, как работают сети CDN, разбирается оптимизация изображений, кэширование, протоколы TLS 1.3, HTTP/2, HTTP/3 и многое другое:

https://tprg.ru/qESv

#сети

Когда бэкендера попросили подобрать цвета для фронта

​Улучшаем SEO с помощью Next.js

Это бесплатный открытый JavaScript-фреймворк, созданный поверх React, и работает он по принципу SSR.

В подходе SPA всё отрисовывается на стороне клиента, поэтому код подгружается, когда пользователь заходит на страницу. Но поисковый робот может просмотреть только изначальный код страницы, ещё не обработанный React’ом. И тут на помощь приходит технология SSR, которая позволяет запускать код на сервере и улучшать таким образом SEO.

Подробнее о Next.js и серверном рендеринге можно почитать здесь:

https://tprg.ru/HSR3

#javascript

Критика веб-компонентов

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

Автор статьи предполагает, что для включения веб-компонентов требуются строгие критерии:

— Никаких зависимостей, никакой начальной установки помимо добавления тега <script>. Если зависимости необходимы, компонент подгружает их автоматически.
— Всё, что можно сделать без JS, должно делаться без JS.
— Доступность по умолчанию благодаря осмысленным настройкам ARIA.
— Изменение тем оформления с помощью ::part(), выборочного наследования и кастомных свойств.
— Только один компонент каждого типа в каталоге, при этом гибкий, расширяемый и улучшаемый сообществом.

Подробнее в статье: https://tprg.ru/r7iP

#фронтенд

.голова { position: absolute; right: 5em; }

Дорожная карта full stack разработчика

Фулстек-разработчику необходим солидный багаж знаний и навыков. Новичкам, которые сходу хотят погрузиться в full stack, зачастую трудно подобрать правильный способ обучения.

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

https://dev.to/ender_minyard/full-stack-developer-s-roadmap-2k12

А в какой сфере работаете вы?

#фронтенд #бэкенд

Комментарии в Telegram

Если у вас обновилась десктопная, iOS или Android-версия телеги, то начиная с этого поста теперь можно оставлять комменты.

Если ещё не разобрались, как работают новоиспечённые комментарии, то в этом посте мы объяснили. Го тестить:

Шпаргалка по работе с Jenkins включила в себя:

— инструкцию по установке на Ubuntu;
— информацию о Pipeline;
— наиболее популярные плагины;
— типы Jenkins Jobs;
— советы и рекомендации.

Всё это с примерами и в формате PDF:
https://tprg.ru/wfrX

#jenkins #devops

Как выглядит валидация на фронте

​Детективная игра на знание SQL

Она позволит освежить в памяти основы SQL и интересно провести досуг. Примерьте на себя роль детектива, выясняя обстоятельства с помощью SQL-запросов:

https://tprg.ru/c1by

#sql

Полное руководство по медиа-запросам в CSS

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

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

https://tprg.ru/5Bgk

#фронтенд #css

Морской бой на PostgreSQL

Для написания были использованы PostgreSQL 12 и язык PLpgSQL. Вот что из этого получилось:
https://tprg.ru/iwH2

Статья о том, как именно создавалась игра:
https://tprg.ru/dVgX

#базыданных #postgresql

​Indicium — это инструмент рантайм анализа V8 в виде веб-интерфейса, позволяющий в реальном времени выполнять отладку, отслеживание создания и анализ inline-кэшей (IC).

Суть в том, что JavaScript-движок V8 использует для представления объектов структуру карты (Map), которая в свою очередь для быстрого доступа к свойствам этих объектов использует Inline Cache.

В V8 уже предусмотрена инфраструктура трассировки для ICs и Maps, которая может обрабатывать и анализировать события IC с помощью IC Explorer, а события Map — с помощью Map Processor. Но эти инструменты не позволяли анализировать всё в целом.

Indicium связывает Map с IC и представляет информацию в удобном виде. Отличный инструмент для быстрого выявления проблем в исходном коде.

Подробнее: https://tprg.ru/gt9a

#devops #javascript

Полезные библиотеки для работы на Vue.js

Статья посвящена обзору не популярных, но эффективных инструментов для разработки на Vue.js. Речь пойдёт о Vuex-Persistedstate для работы с состоянием и о Vuelidate — инструменте для валидации форм. Вы пройдёте с автором процесс от их установки до готовых примеров:

https://tprg.ru/BZ5s

#фронтенд #vuejs

Главное красивый фронт

Компания Google выпустила Chrome 86

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

— Функция Safety Check, предупреждающая о небезопасных комбинациях логин/пароль, теперь доступна в мобильных версиях Chrome.
— Появилось предупреждение об отправке заполненных данных через незашифрованный канал связи.
— В контекстном меню по умолчанию есть опция «Всегда показывать URL полностью».
— Предусмотрена блокировка небезопасной загрузки архивов и вывод предупреждения при небезопасной загрузке документов.
— Для небольшого процента пользователей запущен эксперимент по отображению по умолчанию в адресной строке только домена.
— По умолчанию доступен File System Access API, позволяющий создавать приложения для взаимодействия с локальными файлам.

Кроме того, добавлен CSS-селектор :focus-visible, поддержка псевдоэлемента ::marker для стилизации маркеров списка, изменено кодирование пробела в URL с «+» на «%20», расширены инструменты для web-разработчиков и многое другое. Выпуск Chrome 87 запланирован на 17 ноября.

Подробнее: https://tprg.ru/HwZY

#браузеры #chrome

​Cloudflare анонсировал поддержку gRPC

Поддержка нового протокола подарит пользователям сервиса ряд преимуществ, в частности:

— возможность добавлять WAF и Bot Management;
— увеличение производительности за счёт Argo Smart Routing;
— использование Load Balancer для повышения надёжности.

Подробнее читайте в статье: https://tprg.ru/kbWI

#бэкенд #devops