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

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

Сперва объясняются основные концепции, которые перетекают в более серьёзную информацию и завершаются погружением в 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

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

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

Как раз для моих клиентов дизайн

​Поздравляем с Днём программиста!

Надёжного бэкенда, качественного фронтенда, отзывчивого дизайна и вкусного кофе! А ещё игривого настроения, ведь сегодня мы предлагаем вам отдохнуть за играми, написанными на CSS:

https://tprg.ru/WwF4

#css #фронтенд

Основные инструкции Docker

Рассказываем о Docker-файлах, образах и инструкциях с подробным описанием и примерами. Вы узнаете, в чём отличие CMD от ENTRYPOINT, когда лучше использовать ADD, а когда — COPY, как определить, где контейнер будет хранить постоянные данные, и многое другое:

https://tprg.ru/AvgI

#docker #devops

​Преподаватель Хекслета Никита Михайлов рассказал о влиянии контраста текста на доступность сайта. Из статьи вы узнаете:

— что такое коэффициент контраста;
— что такое относительная яркость;
— как вычислить коэффициент контраста;
— как контролировать контраст с помощью SASS.

https://tprg.ru/KZVR

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

Когда успел реализовать только фронт

​3 полезных Telegram-скрипта

— bash-скрипт для выполнения бэкапа файлов и баз данных с отправкой уведомления в Telegram:
https://tprg.ru/G27k

— Уведомления об SSH–авторизации на сервере через своего Telegram–бота:
https://tprg.ru/Y9ZB

— Отправка сообщений и стикеров от бота в Telegram:
https://tprg.ru/L1nI

#веб #devops