​Indicium — это инструмент рантайм анализа V8 в виде веб-интерфейса, позволяющий в реальном времени выполнять отладку, отслеживание создания и анализ inline-кэшей (IC).

Суть в том, что JavaScript-движок V8 использует для представления объектов структуру карты (Map), которая в свою очередь для быстрого доступа к свойствам этих объектов использует Inline Cache.

В V8 уже предусмотрена инфраструктура трассировки для ICs и Maps, которая может обрабатывать и анализировать события IC с помощью IC Explorer, а события Map — с помощью Map Processor. Но эти инструменты не позволяли анализировать всё в целом.

Indicium связывает Map с IC и представляет информацию в удобном виде. Отличный инструмент для быстрого выявления проблем в исходном коде.

Подробнее: https://tprg.ru/gt9a

#devops #javascript

Полезные библиотеки для работы на Vue.js

Статья посвящена обзору не популярных, но эффективных инструментов для разработки на Vue.js. Речь пойдёт о Vuex-Persistedstate для работы с состоянием и о Vuelidate — инструменте для валидации форм. Вы пройдёте с автором процесс от их установки до готовых примеров:

https://tprg.ru/BZ5s

#фронтенд #vuejs

Главное красивый фронт

Компания Google выпустила Chrome 86

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

— Функция Safety Check, предупреждающая о небезопасных комбинациях логин/пароль, теперь доступна в мобильных версиях Chrome.
— Появилось предупреждение об отправке заполненных данных через незашифрованный канал связи.
— В контекстном меню по умолчанию есть опция «Всегда показывать URL полностью».
— Предусмотрена блокировка небезопасной загрузки архивов и вывод предупреждения при небезопасной загрузке документов.
— Для небольшого процента пользователей запущен эксперимент по отображению по умолчанию в адресной строке только домена.
— По умолчанию доступен File System Access API, позволяющий создавать приложения для взаимодействия с локальными файлам.

Кроме того, добавлен CSS-селектор :focus-visible, поддержка псевдоэлемента ::marker для стилизации маркеров списка, изменено кодирование пробела в URL с «+» на «%20», расширены инструменты для web-разработчиков и многое другое. Выпуск Chrome 87 запланирован на 17 ноября.

Подробнее: https://tprg.ru/HwZY

#браузеры #chrome

​Cloudflare анонсировал поддержку gRPC

Поддержка нового протокола подарит пользователям сервиса ряд преимуществ, в частности:

— возможность добавлять WAF и Bot Management;
— увеличение производительности за счёт Argo Smart Routing;
— использование Load Balancer для повышения надёжности.

Подробнее читайте в статье: https://tprg.ru/kbWI

#бэкенд #devops

​VK обновил дизайн для десктопной версии

Пока активировать его смогут только первые 100 тысяч человек. Сделать это можно в настройках профиля в самом низу раздела «Общее»: https://vk.com/settings

Фронтенд vs. Бэкенд

​Решаем проблемы с CLS на примере Tproger

Благодаря советам из нашей статьи вы можете улучшить техническую оптимизацию сайта в «глазах» Google и постепенно подняться в поисковой выдаче. Всё со скринами и на реальных примерах:

https://tprg.ru/KMau

Остались вопросы? Спрашивайте в комментариях под статьёй: с радостью ответим.

#фронтенд #дизайн #ux

Игра Elevator Saga поможет скоротать досуг и подучить JavaScript. Вам нужно запрограммировать движение лифта так, чтобы он перевёз указанное количество человек за отведённое время. С каждым новым уровнем увеличивается этажность, количество лифтов, и сами задачи становятся более сложными:

https://tprg.ru/kdEv

А сколько уровней прошли вы?

#фронтенд #javascript

Шпаргалка по оконным функциям в 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