​Дизайн аккордеонов: лучшие практики

«Аккордеон» — это список параметров в выпадающем меню, расположенных вертикально, которые можно развернуть / свернуть, чтобы отобразить или скрыть дополнительное связанное содержимое. В этой статье рассмотрены лучшие практики по созданию аккордеонов с точки зрения дизайна:

https://tprg.ru/OWso

​Chrome DevTools: Хитрости при отладке

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

https://tprg.ru/ky8O

Разработка текстового виджета

Разработчики из Readymag поделились своим опытом разработки текстового редактора в вебе, начиная с обзора существующих возможностей html/css и заканчивая best practices, которые они сформировали во время разработки.

Подробнее:

https://tprg.ru/yaMI

#фронтенд

От создателей «Х**к х**к и в продакшн»

​Веб-разработка: основы статического сайта

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

https://tprg.ru/b2Sn

​Топ-10 признаков плохого кода: хардкод и спагетти-код в примерах на JavaScript

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

https://tprg.ru/5xT2

#javanoscript

Иконка отправки письма

Интересная иконка отправки письма, анимированная с помощью трансформации SVG-изображения. Выполнена без использования JS. Посмотреть код можно здесь:

https://tprg.ru/kD36

#codepen

А мой проект — это сайт-визитка

​Визуализация данных с помощью веб-фреймворка Dash

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

В этой статье вы узнаете о некоторых его возможностях, которые вам могут быть интересны:

https://tprg.ru/mxg0

​CSS-медиафичи для улучшения доступности

Медиафича (media feature) — это условие для CSS-директивы @media. В этой статье вы узнаете о нескольких медиафичах: prefers-reduced-motion, prefers-color-scheme, inverted-colors, forced-colors, ms-high-contrast, prefers-contrast и prefers-reduced-transparency.

Подробнее:

https://tprg.ru/TqS9

#фронтенд #css

​Скрытие всплывающих окон, при прокрутке страницы с помощью React

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

https://tprg.ru/dNGC

#react

​Бесплатный курс — «Школа разработки интерфейсов 2021»

Летом 2021 года прошла Школа разработки интерфейсов от Академии Яндекса: студенты слушали лекции, выполняли домашние задания, изучая Node.js, React, тестирование и многое другое. Теперь запись этих лекций доступна онлайн каждому на YouTube.

Посмотреть можно тут:

https://tprg.ru/SLP0

Сразу видно, кто письма для рассылки верстал

​Вышел Git 2.34: что нового

Последнее обновление Git содержит в себе большое количество исправлений, а также добавление новых функций. Подробнее обо всех изменениях читайте в статье:

https://tprg.ru/y0EX

#git

​Различия деструктуризации массивов и объектов в JavaScript

Назначение деструктуризации в JavaScript — обеспечить аккуратный и надёжный способ извлечения значений из ваших массивов и объектов.

Эта статья призвана показать вам, как именно в JavaScript работает деструктуризация массивов и объектов, а также главные отличия:

https://tprg.ru/7YRe

#javanoscript

​Дженерики в TypeScript

Дженерики — это обобщённые типы, которые нужны для описания похожих, но отличающихся какими-то характеристиками типов. Если вы не используете их из-за незнания или боязни, то эта статья развеет все ваши страхи и научит правильно применять дженерики на практике.

https://tprg.ru/Lr7H

#typenoscript

Иконки с эффектом глассморфизма в CSS

Несмотря на то, что существует множество статей о том, как создать такой эффект в CSS, все они предполагают очень простой случай, когда наложение является прямоугольным или, самое большее, прямоугольником с border-radius. 

Однако получение эффекта глассморфизма для неправильных форм, таких как значки, независимо от того, являются ли эти значки смайликами или SVG, намного сложнее, поэтому автор статьи решил, что стоит поделиться этим процессом, ловушками, в которые он попал, и вещами, которые он узнал по пути.

https://tprg.ru/ymJ8

#css

​Разработка через тестирование: как тестировать с помощью Vue.js, VueTestUtils и Jest

Разработка через тестирование - это практика разработки программного обеспечения. TDD предполагает три этапа разработки:

— сначала пишется тест, покрывающий желаемое изменение;
— затем пишется код, который позволит пройти тест;
— а в конце проводится рефакторинг нового кода к соответствующим стандартам.

TDD также требует, чтобы вы часто писали модульные тесты. В этой статье вы узнаете, как реализовать такой подход при помощи Vue.js, VueTestUtils и Jest:

https://tprg.ru/i7z1

​Полный курс по Gulp

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

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

https://tprg.ru/hIAg

#gulp

Проще признать устаревшим и переписать с нуля

Как сделать игру 2048 на React

Игру 2048 знают многие. В своё время она была хитом на смартфонах. Простые правила сделали её увлекательной и затягивающей.

Автор этого туториала сосредоточился на анимации. Он использовал хуки библиотеки React, её Context API, а также TypeScript и LESS для создания собственной версии этой игры. В конце этой статьи вы найдёте ссылки на игру, её код и демо анимаций.

https://tprg.ru/7HEU

#react