​Что такое 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

​Тёмная сторона CSS: выходим за рамки с border-image и градиентами

Автор статьи поделился способом, который позволяет создавать сложные фигуры при помощи CSS-свойства border-image, выходящие за границы элемента.

Узнать подробности можно тут:

https://css-live.ru/tricks/border-image-gradients-sorcery.html

#css

​Fuite: инструмент для поиска утечек памяти в веб-приложениях

Отладка утечек памяти в веб-приложениях сложна. Инструменты существуют, но они сложны, громоздки и часто не отвечают на простой вопрос: «почему в моём приложении происходит утечка памяти?»

Fuite — это инструмент командной строки, которому вы можете указать любой URL-адрес, и он проанализирует страницу на наличие утечек памяти. Подробнее:

https://nolanlawson.com/2021/12/17/introducing-fuite-a-tool-for-finding-memory-leaks-in-web-apps/

​Полное руководство по созданию электронных писем в формате HTML

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

Подробнее:

https://www.smashingmagazine.com/2021/04/complete-guide-html-email-templates-tools/

#html

​Каскадные слои в CSS: обзор новых CSS-примитивов @layer и layer()

Новые примитивы позволяют разработчикам лучше взаимодействовать с каскадными слоями. Они уже доступны в Safari TP, а вскоре появятся в Chromium 99+ и Firefox 97+.

В этом видео Юна Кравец за 5 минут рассказала, что это и зачем:

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

#видео #css

​5 лучших расширений VS Code для разработчиков Vue на 2022 год

VS Code является наиболее популярным редактором кода среди веб-разработчиков благодаря открытому исходному коду и множеству полезных расширений. Вероятно, многие из вас тоже пользуются именно им. А если вы ещё и работаете с Vue, то в этой статье вы найдёте 5 расширений, которые придутся вам по душе:

https://blog.openreplay.com/top-5-vs-code-extensions-for-vue-developers-for-2022

#фронтенд #vue

Кто так пишет вообще?!