Большая подборка ресурсов для веб-дизайнера: 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

Анимация кривых Безье на чистом JavaScript

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

https://tprg.ru/4bRJ

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

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

#фронтенд #javascript

Плагин для интеграции сервиса 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/

#безопасность #фронтенд