Веб-страница
24.2K subscribers
1.73K photos
527 videos
1 file
3.92K links
Всё по фронтенду, бэкенду и девопсу в одном месте

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

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

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

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

Регистрация в перечне РКН: https://tprg.ru/64ai
Download Telegram
Видеокурс по бэкенд-разработке на Python

Прошедшей осенью в московском офисе Яндекса проходила первая Школа бэкенд-разработки по теме промышленной разработки на Python.

Теперь эти уроки выложили в открытый доступ и пройти их может каждый. К каждому видео приложены ссылки на примеры и полезные материалы:

https://tprg.ru/t4e9

#бэкенд #python
На днях вышла новая версия Firefox

Что там новенького:

Audio worklets — новое API для обработки аудио. Например, с его помощью можно в играх и приложениях накладывать в реальном времени эффекты на звук (типа реверберации или эхо) без ущерба для производительности, т.к. аудио ворклеты работают вне основного потока браузера.

В элементе <input> исправили ошибку в атрибутах min и max, когда минимальное значение было больше максимального для элементов с типами time, date, month, week.

Изменения в JavaScript Intl API. Теперь можно использовать опции numberingSystem и calendar в конструкторах Intl.NumberFormat, Intl.DateTimeFormat, Intl.RelativeTimeFormat.

В CSS добавили константы для системных цветов из CSS Color Module Level 4. С их помощью можно легче адаптировать страницу или приложение под цвета ОС.

Улучшения в инструментах разработчика. При копировании стека вызовов теперь копируются полные url до файлов скриптов. Теперь можно автоматически изменять размер колонок панели «Network» при двойном клике на разделителе. Улучшен инспектор веб-сокетов. А в Firefox Developer Edition в DOM-инспекторе доступна вкладка «Compatibility», которая показывает в каких браузерах доступны CSS-свойства, используемые на странице.

Источник: Mozilla Hacks

#firefox
Статья о том, как устроен Node.js изнутри:

https://tprg.ru/f0ax

#бэкенд #nodejs
This media is not supported in your browser
VIEW IN TELEGRAM
Симпатичный планнер задач, написанный на ReactJS и Electron. Открывайте код, изменяйте, практикуйтесь:

https://tprg.ru/injX

#фронтенд #react
Большой и очень подробный гайд по изучению Go — от синтаксиса и структур данных до многопоточки и тестирования:

https://tprg.ru/gfYA

#go
Серия статей, которые можно использовать как шпаргалки по продвинутым командам Git.

Часть 1: https://tprg.ru/Yvyr
Часть 2: https://tprg.ru/eDIw
Часть 3: https://tprg.ru/rquB

#git
This media is not supported in your browser
VIEW IN TELEGRAM
Автор статьи разбирается во всех нюансах использования свойства overflow в CSS:

https://tprg.ru/x9SG

#фронтенд #css
This media is not supported in your browser
VIEW IN TELEGRAM
Программист написал тетрис на чистом JavaScript и выпустил подробную статью о процессе разработки:

https://tprg.ru/dyQg

#javascript
RoughJS — это графическая JS-библиотека, которая позволяет в рукописном стиле рисовать на <canvas> и с помощью SVG.

Здесь сама библиотека: https://tprg.ru/7d3j

А здесь её создатель рассказывает, как это работает и какие алгоритмы используются под капотом: https://tprg.ru/2riI

#фронтенд #javascript
30 вопросов по CSS

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

https://tprg.ru/3ZL4

#фронтенд #css
Большая лекция по знакомству с Node.js

— Введение: история создания, простейшие скрипты, основные возможности.
— Теория: модульная система CommonJS, Streams, дочерние процессы, Event Loop.
— Применение на практике: сервер на Node.js, знакомство с Express, React на сервере, пример с веб-сокетами.

#бэкенд #nodejs
Как появились пакетные менеджеры NPM / Yarn / PNPM? Как проблемы они решают?

В этой статье автор познакомит вас с краткой историей их возникновения:

https://tprg.ru/bk0I

#javascript #npm
Большая подборка ресурсов для веб-дизайнера: https://tprg.ru/z2jR

#фронтенд #дизайн
Функции в CSS

В CSS, как и в серьёзных языках программирования, есть функции. Причём в самых разнообразных реализациях.

По ссылке — полный гайд по работе с любым типом CSS-функции:

https://tprg.ru/GKFe

#фронтенд #css
Создаём веб-приложение с Java Servlets

У нас на сайте есть хороший гайд, в котором по полочкам раскладываем, как создать надёжное веб-приложение на Java с помощью встроенного в язык Servlet API:

https://tprg.ru/pO1J

#java
Главные метрики, по которым стоит оценивать качество сайта

Разработчики Chromium выкатили гайд, в котором описали эти метрики: https://tprg.ru/GCAl

Вот они все слева направо:

— LCP (Largest Contentful Paint): время до отрисовки самого большого фрагмента контента на странице. Должно занимать не более 2,5 с.

— FID (First Input Delay): время задержки обработки первого взаимодействия пользователя со страницей. Должно занимать не более 100 мс.

— CLS (Cumulative Layout Shift): метрика, показывающая насколько сильно происходит сдвиг контента при загрузке сайта.

Источник: Chromium Blog

#фронтенд #производительность
Почему для фавиконок сайтов стоит использовать SVG и как это реализовать:

https://tprg.ru/jq7Y

#фронтенд #svg
Инструменты для создания макета сайта для новичков: чем отличаются и какой выбрать

Макет сайта можно сделать в Фотошопе или Иллюстраторе. Можно в Тильде или Фигме. Главное, нужно понимать, почему вы выбрали тот или иной инструмент и действительно ли он подходит для решения ваших задач.

Помогаем разобраться с выбором подходящего инструмента:

https://tprg.ru/XmW6

#веб #дизайн
Серия статей, объясняющих, как работать с CSS Grid

— Grid-контейнер: https://tprg.ru/YqQy
— Grid-линии: https://tprg.ru/JNBj
— Grid-области: https://tprg.ru/KpfM

#фронтенд #css
Гайд по созданию генератора кроссвордов на JavaScript

https://tprg.ru/czun

В качестве практического задания — самое то. Здесь можно оценить генератор в действии: https://tprg.ru/wJ5d

А здесь посмотреть исходники: https://tprg.ru/VRv0

#javascript
This media is not supported in your browser
VIEW IN TELEGRAM
Анимация кривых Безье на чистом JavaScript

У нашего подписчика вышло очередное видео, в котором он показывает, как создать анимацию кривых Безье на чистом JavaScript, как на видео в посте:

https://tprg.ru/4bRJ

Ещё несколько примеров использования такой анимации:
https://tprg.ru/nurR
https://tprg.ru/zeRC
https://tprg.ru/Md9U
https://tprg.ru/e6JT

А вот другие его уроки на тему анимации:
анимация частиц с параллакс эффектом;
эффект электроразряда;
анимация перемещения частиц по гексагональной сетке.

#фронтенд #javascript