В процессе загрузки веб-страницы генерируется два события:

— load запускается, когда все исходные ресурсы готовы, включая скрипты, изображения и CSS;
— DOMContentLoaded запускается, когда HTML-документ полностью загружен без ожидания CSS, изображений и фреймов.

Но автор статьи уверен, что оба события не очень. Чтобы докопаться до истины, он создал интерактивную демо-панель для управления загрузкой страницы с помощью ряда параметров. Измените время, необходимое для загрузки CSS, JS или изображения, и посмотрите, что получится:

https://tprg.ru/yfwH

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

Типичный JS

Быстрая загрузка с предварительным просмотром изображений

Прогрессивная загрузка работает по такому принципу: сперва создаётся изображение плохого качества и постепенно заменяется качественным, которое и предполагалось. Грубо говоря, набросок, а только затем реальное содержимое.

Такой подход ускоряет загрузку страниц, и не нужно создавать дополнительные файлы — достаточно использовать Progressive JPEG и Ajax-запросы. Подробнее о магии отложенной загрузки читайте в статье:

https://tprg.ru/Zhao

#фронтенд

100 самых популярных проектов CodePen

В сотню «залайканных» за 2019 год вошли как прикольные анимации, так и готовые решения вроде Excel-таблицы, генератора паролей и списка дел. Весь ТОП-100 собрался здесь:

https://tprg.ru/B3Tm

А вы используете готовые проекты с CodePen? Как?

#фронтенд

Запускаем PHP 8 с JIT через Docker за 5 минут

Близится релиз PHP 8, и если вам не терпится протестировать свой код в beta-версии, а заодно и пощупать JIT, загляните в статью:

https://tprg.ru/iNf4

Автор описывает процесс, начиная сборкой образа и заканчивая запуском бенча.

#php #бэкенд #devops

Типичный CSS

​Как устроен интернет

Эта исчерпывающая статья нацелена не только на веб-разработчиков, но и на «нетехническую» аудиторию.

Сперва объясняются основные концепции, которые перетекают в более серьёзную информацию и завершаются погружением в DNSSEC. Статья состоит из семи разделов:

— Протокол связи
— Выявление аномалий
— Сетевая топология
— Маршрутизация сигнала
— Ретрансляция сигнала
— Интернет-слои
— История интернета

https://tprg.ru/hqSn

#интернет

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

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

Но помните: чем больше фильтров, тем больше времени требуется браузеру, чтобы отрисовать страницу.

Из этой статьи вы узнаете, какими бывают фильтры и как их применять:

https://tprg.ru/sEFr

#css #фронтенд

В JS без божьей помощи никак

​Форматирование чисел в JavaScript

Для этого чаще всего используют Number.prototype.toFixed(), стороннюю библиотеку или вручную обрабатывают число. Но современные браузеры поддерживают Number.prototype.toLocaleString() и Intl.NumberFormat, с помощью которых можно преобразовать число, добавить знак валюты, отформатировать проценты и многое другое.

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

#javascript

​Логирование в Kubernetes: как собирать, хранить, парсить и обрабатывать логи

Автор статьи разбирает основы логирования в Docker и Kubernetes, а затем рассматривает Grafana Loki и стек EFK (Elasticsearch + Fluent Bit + Kibana) — инструменты, которые можно смело использовать на продакшене:

https://tprg.ru/8HlD

#devops

Изучаем CSS вместе

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

https://tprg.ru/me7a

#фронтенд

10 малоизвестных веб-API

Вместе с HTML5 появилось и большое количество новых API. Вот лишь некоторые из малоизвестных:

— Fullscreen API
— Async Clipboard API
— Resize Observer API
— Image Capture API
— Broadcast Channel API
— Performance Interface API
— Battery Status API
— Network Information API
— Vibration API
— Bluetooth API

О том, как с ними работать, читайте в статье:
https://tprg.ru/ctK3

#бэкенд #api

​Kubernetes 101

На примере растущего сайта автор статьи рассказывает, как формировалась потребность в Kubernetes — инструменте для автоматизации развёртывания, масштабирования и управления контейнеризированными приложениями.

Но статья не ограничивается одними лишь предпосылками. Автор также затрагивает архитектуру, Kubernetes Control Plane и «Hello World» на k8s:

https://tprg.ru/K3XD

#kubernetes #devops

Есть целых 14 способов отцентрировать элемент с помощью CSS, и ни один из них не работает

​Все способы создания веб-компонентов

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

https://tprg.ru/UI7k

#фронтенд

Шпаргалка по CSS

На CSS Values можно воспользоваться полнотекстовым поиском и фильтрацией по свойствам одной группы или свойствам с повторяющимся содержанием.

#css #фронтенд

CSS в нашей жизни: стул в столовой Bethesda Game Studios

Вариации headers с использованием CSS Flexbox

Казалось бы, а в чём проблема расположить элементы в хедере? Но вариантов оформления много, и то, что в одном случае подходит, в другом скажется на адаптивности. Рекомендуем ознакомиться со статьёй, в которой автор разобрал более 17 различных вариаций и то, как с ними работать:

https://tprg.ru/0fjB

Предполагается, что у вас уже есть базовые знания о Flexbox.

#css #фронтенд

UI-фреймворк в стиле киберпанк

Здесь хорошо всё: дизайн, звуковые эффекты, удобная документация, возможность использовать отдельные компоненты и настраивать анимацию. Не теряет свой «товарный» вид и на мобильных девайсах.

Фреймворк построен на базе React, JSS, Anime и Howler. На сайте представлена альфа-версия, которая проходит тестирование, так что API некоторых компонентов может измениться.

Сайт: https://arwes.dev/
Репозиторий: https://github.com/arwes/arwes

Как вам? Оцените по трёхбалльной шкале.

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