​20 проектов для прокачки навыков в JavaScript

https://tprg.ru/FtUl

Для каждого проекта приведено описание, реализация и демо. Вот, например, игра «Виселица» из этой подборки:

#javascript

​Типичные ошибки в дизайне сайта

Пиксельное проектирование, игнорирование user-flow, использование старых шаблонов — эксперты рассказали, какие типичные ошибки допускают новички при разработке дизайна и интерфейса сайта:

https://tprg.ru/CpUo

#дизайн #ux

Что изучать веб-разработчику

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

Для каждой темы/инструмента есть список ресурсов, где можно всё это изучить. HTML, CSS, JS, PWA, фреймворки, тестирование, безопасность, архитектура, дизайн, алгоритмы, базы данных — всё есть:

https://tprg.ru/LfoT

Как починить перегруженный сервер

Если на ваш сайт неожиданно пришло большое количество пользователей, и он перестал справляться с нагрузкой, то проблема решается в 4 этапа:

1. Поиск причин отказов.
2. Быстрые фиксы, которые вернут сайт к жизни.
3. Улучшение сайта.
4. Мониторинг.

В этой статье веб-разработчик из Google подробно рассказывает про каждый из этих этапов:

https://tprg.ru/MX52

Вам, кстати, удобнее читать на английском или нужен перевод? Отвечайте в опросе. А если хотите перевести эту статью, то напишите на почту experts@tproger.ru.

#бэкенд #производительность

Spring Boot + Kubernetes

Подробный гайд, автор которого рассказывает:
— как запустить Kubernetes кластер,
— как разработать приложение с помощью фреймворка Spring Boot,
— как развернуть это приложение в виде контейнера в Kubernetes.

Годнота: https://tprg.ru/xB2Q

#devops #kubernetes #spring

​Новая версия PageSpeed Insights

В середине марта команда Google Chrome выпустила бета-версию Lighthouse 6, финальная версия которого ляжет в основу замеров в новом PageSpeed Insights. Это в свою очередь начнёт влиять на поисковую выдачу.

Для оценки производительности сайтов будут добавлены новые метрики, например:

— TBT (Total Blocking Time): время, в течение которого пользователь не может взаимодействовать с сайтом после его отображения. Например, из-за парсинга большого объёма js-кода.

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

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

Здесь (или на картинке в посте) можно изучить вес новых показателей в оценке: https://tprg.ru/0VEk

А здесь почитать подробнее про новые метрики: https://tprg.ru/KcXy

#фронтенд #производительность

1.1.1.1 for Families

Пару лет назад Cloudflare выпустила DNS-резолвер 1.1.1.1, основной фишкой которого стала приватность пользовательских данных. Сейчас по этому адресу обрабатывается 200 миллиардов DNS-запросов в день, что делает его вторым по популярности резолвером после гугловского (8.8.8.8).

А неделю назад компания выпустила «1.1.1.1 for Families», благодаря которому можно добавить ещё 2 уровня защиты:

— 1.1.1.2 будет фильтровать вредоносные программы;

— 1.1.1.3 отфильтрует вредоносные программы и контент для взрослых. Здорово может стать простейшим фильтром для детей.

#безопасность #dns

Чистая архитектура фронтенда

Один разработчик однажды сильно впечатлился адаптированными под JavaScript выдержками «Чистого кода». Он держал вкладку с этим репозиторием открытой полгода, чтобы регулярно применять лучшие практики в работе.

В итоге решил написать статью, в которой рассказал о своих мыслях по поводу чистой архитектуры применительно к фронтенду:

https://tprg.ru/J6VZ

#фронтенд #архитектура #чистыйкод

Один из самых простых способов добавить видео на сайт — вставить YouTube-плеер. Как при это сделать его адаптивным?

Вот гайд: https://tprg.ru/7Re2

А вот только код: https://tprg.ru/Sklq

#фронтенд #css

Unsplash API

Unsplash — сервис с огромным количеством отличных и, что самое крутое, бесплатных фотографий.

Кроме того, у этого сервиса есть API, который очень просто встроить в любое приложение. В этом гайде рассказано, как:

https://tprg.ru/ysmn

#api

MeiliSearch — поисковой движок, который можно прикрутить к своему приложению. Чем он крут:

— мгновенный отклик (< 50 мс);
— полнотекстовый поиск;
— понимает опечатки и неправильное написание;
— поддерживает синонимы;
— хорошо задокументированный;
— кастомизируемый;
— RESTful API.

Вся документация по его использованию здесь:

https://tprg.ru/MiqW

#api

Наш подписчик разработал генератор неонового текста для CSS и HTML:

https://tprg.ru/yWs8

Есть функции копирования исходного кода, настройки свечения и использования иконок FontAwsome.

Код: https://tprg.ru/Boai

#фронтенд #css #html

Для работы с SVG можно использовать тулзу от Adobe, но есть и много бесплатных браузерных редакторов. Вот подборочка из таких:

https://tprg.ru/OQXT

#фронтенд #svg

NATS

Это система обмена сообщениями с открытыми исходниками.

Делимся с вами серией постов про работу с ней:
— Часть 1: https://tprg.ru/QlER
— Часть 2: https://tprg.ru/ZlT1
— Часть 3: https://tprg.ru/cx26
— Часть 4: https://tprg.ru/9nbf
— Часть 5: https://tprg.ru/cNJW

​Подборка материалов по Git

В ней рассказываем:
— как установить Git;
— как работать с популярными Git-платформами;
— что учить после этого;
— где учить;
— что делать дальше.

https://tprg.ru/BPwu

#git

Шпаргалка по БЭМ

Большая интерактивная шпарглака по БЭМ-подходу к разработке интерфейсов:

https://tprg.ru/iREB

Также смотрите: видеолекция по основным концепциям БЭМ

#фронтенд

Шпаргалка по Docker, скачать в формате PDF можно тут:

https://tprg.ru/W3VK

#devops #docker

Чек-листы для веб-разработки

Подборка из 30 чек-листов, которую помогут не забыть о важных вещах на разных этапах разработки:

https://tprg.ru/7U8c

Сгруппированы в несколько категорий:
— запуск сайта;
— бэкенд;
— фронтенд;
— React;
— кросс-браузерное тестирование;
— доступность;
— производительность;
— миграция;
— SEO;
— маркетинг;
— GDPR;

#фронтенд #бэкенд

Подборка из 40 инструментов для мониторинга приложений на Ruby on Rails:

https://tprg.ru/KD9q

#ruby #инструменты

Инструмент для визуализации графа зависимостей для вашего проекта. Ещё и сообщает об ошибках, если где-то перемудрили:

https://tprg.ru/VsBt

#инструменты #javascript

​Google вернёт в Chrome поддержку FTP по умолчанию, которую только недавно убрал

Как мы писали ранее, Google планировал прекратить поддержку протокола FTP в своём браузере из-за небезопасности и непопулярности протокола. В последней версии Chrome поддержка протокола была отключена по умолчанию, а в версии 82 планировалось полностью выпилить весь связанный с этим код.

Теперь же, на фоне новостей о пропуске 82-й версии Chrome, в компании заявили, что вынуждены вернуть к жизни старый протокол «в свете текущего кризиса». Каким образом связан отказ от FTP и нынешний кризис, в компании не уточнили.

Источник: Bleeping Computer

#ftp #chrome