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

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

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

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

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

Регистрация в перечне РКН: https://tprg.ru/64ai
Download Telegram
Шпаргалка по оконным функциям в SQL

В ней вы найдёте информацию о синтаксисе, основных командах, группировании, сокращениях, разнице между оконными и агрегатными функциями.

Шпаргалка в высоком разрешении: https://tprg.ru/UcR6

#бэкенд #sql
Уфа не может быть любимым городом
Виджет выбора цвета

Представлен в двух вариантах:

Vanilla Colorful
React Colorful

Легковесный, быстрый, написан на TypeScript, хорошо работает на мобильных устройствах и сенсорных экранах.

#фронтенд #дизайн
Разделение кэша в Chrome 86

Теперь кэш браузера будет разделяться, чтобы улучшить приватность и безопасность. У кэшированных ресурсов появятся ключи, которые помогут исключить некоторые виды анализа и атак со стороны злоумышленников, а именно:

— определение посещённых сайтов;
— межсайтовый скриптинг;
— межсайтовое отслеживание.

В некоторых случаях разделение HTTP-кэша может негативно сказаться на скорости работы веб-ресурсов. Но не стоит переживать: по этому же принципу уже давно работает Safari, и сильных изменений в скорости работы сайтов не наблюдается.

Подробнее о новом кэшировании в Google Chrome 86:
https://tprg.ru/GjWL

#браузеры #chrome
Сила CSS
Смотрите, как изменялся внешний вид Google и лендинги других именитых веб-ресурсов:

https://tprg.ru/45Ab

А у вас тоже олдскулы свело?

#фронтенд #дизайн
WeakSet в JavaScript

Это один из новых объектов коллекций со своими особенностями:

— не итерируется;
— в нём могут быть только объекты;
— имеет свои методы;
— нет свойства size.

WeakSet — это Set, который позволяет сборщику мусора удалять свои элементы. Если некий объект есть только в WeakSet, он легко удаляется из памяти. Это полезно, когда мы хотим хранить лишь вспомогательные данные, существующие, пока «жив» объект, а основное место хранения объектов при этом находится в другой части кода.

Подробнее в статье: https://tprg.ru/VQgm

#javascript
Доступность сайта: 6 главных проверок

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

— Описания изображений alt
— Проверка работы с отключёнными стилями
— Валидация HTML
— Структура документа
— Монохромный режим
— Использование одной лишь клавиатуры

Больше информации и ссылки на полезные ресурсы:
https://tprg.ru/wHLQ

#фронтенд #ux
Небольшой курс по pixi.js для создания игр и динамики на сайте. Если вы давно хотели разрабатывать игры на JavaScript, то время пришло. Автор покажет, как с помощью библиотеки pixi.js можно создать игру.

Весь плейлист: https://tprg.ru/9FVl

#javascript
Набор шпаргалок веб-разработчика

Здесь собраны подсказки для работы с HTML, CSS, JavaScript, базами данных, PHP, Node.js, React, различными DevOps-инструментами и многим другим:

https://tprg.ru/2lfU

Сохраните, чтоб не потерять.

#фронтенд #бэкенд #devops
Согласование API
This media is not supported in your browser
VIEW IN TELEGRAM
Самый маленький офисный пакет, который можно запустить прямо в адресной строке

Имя ему — <html contenteditable>. Для примера, просто вставьте в строку браузера этот код и ваш простенький текстовый редактор готов к работе:

data:text/html,<body contenteditable style="line-height:1.5;font-size:20px;">

На видео можно посмотреть, как это работает, а в репозитории взять код для простой презентации, таблицы и небольшой рисовалки: https://tprg.ru/JFgm

#html
Программист создал «Сапёра» на миллион клеток

До сих пор самое большое поле игры состояло из 480 ячеек (16 на 30). А только мин в новой версии — аж 130 000. На сайте можно сыграть в игру и почитать о том, как сделать такую же на HTMLL, CSS и JS:

https://tprg.ru/nqd0

#css #html #javascript
Что может быть хуже?
This media is not supported in your browser
VIEW IN TELEGRAM
Интересное сочетание трекинга лица со шрифтами, да ещё и прямо в вебе

На сайте можно не только поиграться, но и, покривлявшись, создать свой уникальный шрифт. Ему можно дать название и даже скачать:

https://tprg.ru/VLKJ

#фронтенд #кек
Актуальная дорожная карта для веб-разработчика на 2020 год

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

Оригинал в высоком качестве есть на гитхабе: https://tprg.ru/zcoD

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