Веб-страница
24.1K subscribers
1.74K photos
533 videos
1 file
3.94K links
Всё по фронтенду, бэкенду и девопсу в одном месте

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

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

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

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

Регистрация в перечне РКН: https://tprg.ru/64ai
Download Telegram
Большой и очень подробный гайд по изучению 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
This media is not supported in your browser
VIEW IN TELEGRAM
Плагин для интеграции сервиса Draw.io в VS Code, который позволяет создавать и редактировать диаграммы прямо в IDE:

https://tprg.ru/VzgH

#vscode
Как сделать дизайн сайта с нуля?

Полностью опубликован на нашем сайте гайд из трёх частей по созданию дизайна сайта с нуля:

1 часть — сбор информации: https://tprg.ru/ptXx
2 часть — разработка визуальной концепции: https://tprg.ru/C6Gw
3 часть — инструменты для создания макета: https://tprg.ru/XmW6

#фронтенд #дизайн
Продвинутый JavaScript

Автор видеодоклада помогает разобраться в нетривиальных особенностях JavaScript:

— типы данных;
— преобразования типов ;
— область видимости ;
— поднятие ;
— замыкания ;
— контекст ;
— объекты ;
— прототипы ;
— асинхронность.

Также смотрите: функциональное программирование в мире JavaScript

#javascript
Недавно создатель Node.js выпустил первую стабильную версию нового рантайма для JavaScript и TypeScript — Deno 1.0: https://tprg.ru/wfX7

В ней создатель пытается исправить допущенные в Node.js ошибки проектирования. Например:

— Ориентация на безопасность в конфигурации по умолчанию. При запуске любого кода надо явно указывать, что может использовать скрипт (сеть, файловую систему и т.п.).

— Отказ от EventEmitter в пользу промисов.

— Встроенная поддержка TypeScript.

А здесь небольшое введение по настройке и запуску Deno: https://flaviocopes.com/deno/

#javascript #nodejs #deno