Веб-страница
24K subscribers
1.75K photos
535 videos
1 file
3.96K links
Всё по фронтенду, бэкенду и девопсу в одном месте

Разместить рекламу: @tproger_sales_bot

Правила общения: https://tprg.ru/rules

Другие каналы: @tproger_channels

Сайт: https://tprg.ru/site

Регистрация в перечне РКН: https://tprg.ru/64ai
Download Telegram
Форматирование чисел в 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 вместе
👍2
Здесь собраны инструменты для веб-дизайна, интерактивные уроки и полезные сайты:

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

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

#фронтенд #дизайн
Как раз для моих клиентов дизайн
😁1
Поздравляем с Днём программиста!

Надёжного бэкенда, качественного фронтенда, отзывчивого дизайна и вкусного кофе! А ещё игривого настроения, ведь сегодня мы предлагаем вам отдохнуть за играми, написанными на 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
Bad UX формы

Интерактивная коллекция форм ввода телефонного номера с адовым UX. Автор собрал девять худших практик, наглядно продемонстрировав, что всякому решению — своё место:

https://fun.mishasaidov.com/badux

А на сколько форм хватит ваших нервишек? Проверьте себя.

#дизайн #ux
Catchpoint покупает Webpagetest

Webpagetest.org, который всегда был бесплатным и даже дефолтным инструментом для проверки производительности веб-проектов, сегодня был куплен компанией Catchpoint — лидером в области мониторинга цифрового опыта.

Представители Catchpoint уверяют, что сделка позволит расширить возможности Webpagetest и географию тестирования производительности Webpagetest.org. Объединение инфраструктуры глобальной сети мониторинга с чрезвычайно популярными возможностями веб-тестирования производительности имеет все шансы создать не имеющую аналогов платформу.

А вот что произойдёт с доступностью ныне бесплатного сервиса — другой вопрос.

Подробнее на официальном сайте Catchpoint:
https://tprg.ru/7Y6B

#devops
14 лучших инструментов для веб-дизайнера

Автор статьи включил в список актуальные инструменты, которые помогут в создании макетов, графики и обеспечат эффективное управление проектами:

https://tprg.ru/cEWT

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