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

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

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

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

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

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

Огромный гайд на тему отступов в CSS — различные подходы к реализации, padding и margin, практические примеры:

https://tprg.ru/aFcw

#фронтенд #css
Туториал по реализации классической игры «Виселица» на JavaScript:

https://tprg.ru/XNHW

#javascript
Представляешь, у нас в телеге есть канал про самые важные и смешные IT события России, СНГ и мира, которые влияют на каждого из нас.

Пишем там понятно, нескучно и часто с мемами: @your_tech
90+ инструментов для Kubernetes

Подборка из 94 инструментов для Kubernetes, которые часто используются на практике — развёртывание, управление, мониторинг, безопасность:

https://tprg.ru/KSt3

#devops #kubernetes
API Style Guide

Если вы каким-то образом работаете с API, но у вас до сих пор нет стайлгайда к нему, то, возможно, стоит подумать о его внедрении.

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

https://tprg.ru/TX6c

#api
Хотите прямо в личке узнавать о курсах, конференциях, хакатонах и прочих айтишных событиях? Хорошо бы ещё не отвлекаться на пуши в рабочее время, правда?

Бот «Веб-страницы» присылает анонсы ивентов по веб-разработке в удобное для вас время. И сам напоминает о тех, которые понравились. А за сколько дней напомнить — решать вам.

Лучше уж один раз настроить бота, чем постоянно искать вебинары с курсами и ставить напоминания.

Попробуйте: @webpagetpbot
Вышла новая версия Chrome — Chrome 83

Интересное из нововведений:

— Из origin trial вышел Trusted Types API, который позволяет избежать DOM-based XSS атак, блокируя прямой доступ к потенциально небезопасным частям web-платформы.

— В рамках origin tirals доступны performance.measureMemory() — новое API для мониторинга потребления памяти страницей и Native File System API для упрощения работы с файлами в веб-приложениях.

— В Chrome Dev Tools теперь можно эмулировать проблемы со зрением и разные локали.

— А ещё были обновлены встроенные html-контролы — унифицирован внешний вид, улучшена поддержка клавиатуры и тач-ввода.

Источник: Defront

#chrome
Я не робот: 10 альтернатив reCAPTCHA

Сейчас виджет reCAPTCHA от гугла установлен более, чем на 5 миллионах сайтов. Однако не всем приходится по вкусу его дизайн.

Подобрали 10 альтернатив этого виджета:

https://tproger.ru/articles/recaptcha-alternatives/

#безопасность #фронтенд
Высокая цена стилей

Загрузка CSS на страницу — блокирующая операция. Если асинхронная загрузка JavaScript может быть незаметна пользователю, то медленное появление стилей может прогнать нетерпеливого гостя с сайта.

Как загружать CSS максимально производительно и незаметно для пользователей? Автор этого видеодоклада помогает разобраться.

Текстовая версия здесь: https://tprg.ru/V7JY

#фронтенд #css
React-библиотека для реализации просмотра набора картинок:

https://tprg.ru/EHqV

#фронтенд #react
JavaScript-стайлгайд от Google

В Google для стандартизации написания кода на JavaScript используют стайлгайд, в котором чётко прописаны правила оформления JS-кода:

https://tprg.ru/WfHd

Автор этого ролика простым языком рассказывает про самые актуальные моменты из этого документа.

#javascript #google
Когда пытаешься воспользоваться CSS в первый раз