​Введение в Redux Toolkit для начинающих

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

Подробнее:

https://tprg.ru/f95k

#redux

Не переделывать же всё

​Создание компонента React с помощью TDD

Подход TDD, или Test-Driven Development, предполагает очень короткий цикл разработки, который повторяется до достижения необходимого результата путём постоянного проведения тестов кода и внесения необходимых изменений.

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

https://tprg.ru/9TA0

#react

​Топ 10 JavaScript-фреймворков и библиотек в 2022

В этой статье вы не найдёте Angular, Vue или React, потому что о них и так слышали все. Мы решили сосредоточиться на менее известных, но полезных решениях. Там также представлены плюсы и минусы каждого продукта, взятые из отзывов реальных пользователей.

Подробнее:

https://tprg.ru/8ZXr

#javascript

​​Создание бесконечного цикла фонового изображения CSS

Бесконечная прокрутка изображений по-разному используется в приложениях и на веб-сайтах, которыми мы пользуемся ежедневно. В этой статье вы изучите два способа создания эффекта бесконечной прокрутки с использованием фоновых изображений с некоторой базовой HTML-разметкой и CSS:

https://tprg.ru/0aGD

#css

​Reacting in Svelte — понимание компонентов в svelte на основе знаний React

Svelte — относительной молодой фреймворк, который достаточно быстро обретает преданных поклонников. Одним из них стал автор статьи, который даже перевёл свой сайт-портфолио с React на Svelte. О том почему он это сделал, читайте в статье:

https://tprg.ru/LGyA

#svelte

​Что такое JSON — Введение

JSON, или JavaScript Object Notation — текстовый формат обмена данными, основанный на JavaScript, но применяемый и при работе с другими языками программирования. В этой статье разбираемся, как он работает и зачем нужен:

https://tprg.ru/zyEj

#json

​Распространённые ошибки при написании CSS с помощью БЭМ

При разработке программного обеспечения важно согласовать руководящие принципы, технологии и методологии. Одной из таких методологий является БЭМ. Если вы хотите работать в команде, применяющей методологию БЭМ, то стоит убедиться, что вы всё делаете правильно.

Какие ошибки могут возникнуть, узнаете здесь:

https://tprg.ru/f2Uy

#css

И как это адаптировать?

​Интерактивное руководство по созданию @keyframe анимации

Анимация с помощью @keyframes — это один из самых мощных и универсальных инструментов в CSS, и мы можем использовать его для самых разных отличных вещей.

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

https://tprg.ru/lqWA

#css

​JavaScript: разрабатываем приложение для записи звука

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

Хотите научиться также? Тогда открывайте статью:

https://tprg.ru/nrOW

#javascript

Безопасный CSS

Безопасный CSS — это набор сниппетов, которые могут помочь вам в написании защищённого CSS. Другими словами, у вас будет меньше проблем в будущем при их использовании.

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

https://tprg.ru/Io0E

#css

​Как создать расширение для браузера

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

https://tprg.ru/N4Ji

А что выбираете вы?

​Metho: безопасное добавление сверхспособностей в JS

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

https://dev.to/jonrandy/introducing-metho-safely-adding-superpowers-to-js-1lj

#javascript

​Попап вместо селекта: новые HTML-элементы наконец-то решат старую проблему

В своём новом видео Вадим Макеев рассказал про новый способ создания выпадающего меню, который пока что находится на стадии разработки, но уже сейчас его можно «пощупать». Он решит проблему стилизации и большого количества JS-кода в случае создания кастомного кроссбраузерного селектора.

Подробнее:

https://www.youtube.com/watch?v=mG0VFWCTnZI

#видео #фронтенд #html

​Добавление Vite в ваше существующее веб-приложение

Vite — это более современная альтернатива таким сборщикам, как Webpack или другим подобным. При этом он имеет более понятную настройку конфигурации, но также отлично работает и с параметрами по умолчанию.

В этой статье вы узнаете, как без особого труда перевести ваш существующий проект на Vite:

https://css-tricks.com/adding-vite-to-your-existing-web-app/

#vite #webpack

​Создаём красивые градиенты

Хотите разобраться, как работают градиенты в браузерах? Это поможет вам создавать качественные градиенты без некрасивых переходов цветов.

Если интересно, то переходите по ссылке. А ещё там вы найдёте уже готовый генератор градиентов:

https://www.joshwcomeau.com/css/make-beautiful-gradients/

#фронтенд #css

Он не может ответить — он тушит компьютер

​10 полезных SEO-расширений Google Chrome для разработчиков

Мы подготовили для вас небольшую подборку расширений для Google Chrome, которые позволят разработчикам создать идеальную страницу с точки зрения SEO. Они и ссылки на валидность проверят, и разметку и многое другое.

Подробнее:

https://tproger.ru/articles/10-seo-rasshirenij-google-chrome/

#seo