Веб-страница
22.1K subscribers
2.18K photos
561 videos
2 files
4.46K links
Всё по фронтенду, бэкенду и девопсу в одном месте

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

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

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

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

Регистрация в перечне РКН: https://tprg.ru/64ai
Download Telegram
​Полное дерево доступности в Chrome DevTools

Chrome DevTools запускает полное дерево специальных возможностей, что облегчает разработчикам обзор всех элементов доступности сайта и их отладку. В этой статье вы узнаете, как создаётся это дерево и как его использовать в своей работе.

https://tprg.ru/aMcB

#chrome
👍4
This media is not supported in your browser
VIEW IN TELEGRAM
Чихающий дракон

Очень милый и качественный codepen-проект, демонстрирующий возможности библиотеки Three.js. Здесь можно заставить дракона чихнуть, регулируя мощность чиха с помощью кликов — чем их больше, тем сильнее чих.

Изучить проект подробнее можно тут:

https://tprg.ru/lZTW

#codepen
👍25🤩5
​Bento — набор компонентов для вашего проекта

Компоненты Bento — это новый проект от создателей AMP, который предоставляет гибкость и производительность при использовании веб-компонентов и компонентов React.

Изучить подробнее можно тут:

https://tprg.ru/1ACV
👍4🤩1
CSS… CSS никогда не меняется
👍43😁29❤5
​Архитектура проекта React

Здесь вы узнаете, как создать структуру и архитектуру проекта с помощью React. Это что-то вроде смеси лучших практик и основ React. Статья будет полезна особенно тем, кто начинает работу с React и хочет разобраться на берегу, как лучше организовать свой проект.

https://tprg.ru/7PTa

#react
👍25🤩1
​Создание универсального кроссбраузерного слайдера

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

Подробнее о них в этой статье:

https://tprg.ru/ilr3

#фронтенд
👍8
​Diet Piechart

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

Посмотреть код и изучить проект можно тут:

https://tprg.ru/TBpR

#codepen
👍5
​Как освоить фронтенд-разработку в 2022 году: дорожная карта

Мы подготовили для вас актуальную дорожную карту по фронтенду, выкинув из неё устаревшие технологии и добавив то, что становится всё популярнее или и вовсе захватывает сферу:

https://tprg.ru/X2ZO

#фронтенд
👍42🤩2🔥1😁1
​Чак Норрис может всё, даже быть цветом для HTML

Да, Чак Норрис настолько крутой, что даже атрибут bgcolor="chucknorris" HTML воспринимает как цвет. И это даже не шутка разработчиков, а особенности HTML.

Наши подписчики тоже круты, поэтому могут в значении атрибута написать своё имя и HTML присвоит цвет.

О том, почему так происходит, узнаете в этой статье:

https://tprg.ru/8qJF

А какого цвета вы по версии HTML?

#фронтенд #html
🔥35👍7😱6😁1
​Наглядная история веба

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

https://tprg.ru/f2Ie
👍9🔥3
​Когда питонист уходит в веб-разработку:
👍31👎15🔥4
​Как стать разработчиком React в 2022 году

По данным опроса, проведённого StackOverFlow в 2021 году, React является самым востребованным веб-фреймворком. В 2022 году в React-разработчиках будет нуждаться больше компаний, чем когда-либо.

Так что же нужно знать, чтобы смело ставить галочку в графе «Знание React»? Ответ здесь:

https://tprg.ru/Xgsa

#фронтенд #react
👍19
​Крутой эффект шифрования текста на чистом JS

Инструкция и готовый проект для создания интересного эффекта анимации в виде шифрования текста, которые выполнен без использования сторонних библиотек. Автор понятно и доступно рассказал о том, как сгенерировать такой текст в этом видео:

https://tprg.ru/N6Qa

#видео #javascript
👍4
​Уязвимость браузера Safari может привести к утечке данных и раскрытию личности пользователя

Именно к такому выводу пришли исследователи из FingerprintJS. Дело в том, что в Safari 15 механизм IndexDB нарушает правила ограничения домена, что позволяет одним веб-сайтам получить данные, хранящиеся от других сайтов.

Подробнее о проблеме в статье:

https://tprg.ru/7cw2

#новости
👍4😱1
​Группировка массивов в JavaScript

JavaScript шаг за шагом обогащает свою стандартную библиотеку, добавляя новые возможности работы со строками и массивами. В этой статье речь пойдёт о новых методах array.groupBy() и array.groupByToMap(), которые предлагают новые способы сортировки массивов:

https://tprg.ru/opcx

#javascript
👍23🎉2
Древняя технология
😁34🔥3👍1
​Тудушка с хранением данных в localstorage

Создание списка дел — один из первых вызовов с которыми сталкивается начинающий разработчик. Подойти к созданию такого простого инструмента можно по-разному.

В этой статье предлагается способ, где хранение данных будет осуществляться в localstorage, что позволит не потерять данные, хотя бы при перезагрузке страницы:

https://tprg.ru/enqf
🔥8💩7👍3😱3
​Как освоить бэкенд-разработку в 2022 году: дорожная карта

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

Подробности:

https://tprg.ru/wbUF

#бэкенд
🔥11👍5😱4
​Как движки JavaScript достигают высокой производительности

Будучи динамически типизированным, с несколькими типами ложных значений, без достаточной оптимизации готового кода, JavaScript остаётся быстрым и производительным. Как ему это удаётся?

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

https://tprg.ru/WdA3

#javascript
👍9😱4💩3🔥1
​Введение в Redux Toolkit для начинающих

В этой статье вы узнаете о Redux Toolkit, инструменте, который решает проблему управления состояниями множества компонентов React. Redux предоставляет централизованное «хранилище», в котором хранятся все состояния в приложении. Каждый компонент в приложении может получить доступ к этому хранилищу без необходимости передавать свойства в дереве компонентов.

Подробнее:

https://tprg.ru/f95k

#redux
👍10