Разбираемся в соотношениях сторон в CSS. Ахмад Шадид верстает компоненты, в которых важно сохранять пропорции.

https://ishadeed.com/article/css-aspect-ratio/

В новом браузере Safari 15 используя метатеги можно задать свой цвет фона таббара для вашего сайта.

Читать подробнее

Заезженная тема о том, стоит или не стоит учить JS в 2021 уже всем давно надоела, но Дмитрий Дементий, расписал, зачем и почему не только стоит, но и НЕОБХОДИМО его изучать.
https://ru.hexlet.io/blog/posts/stoit-li-uchit-javascript-perspektivy-situatsiya-na-rynke-truda-mneniya-ekspertov

Unfreeze — приложение для macOS, которое позволяет быстро скопировать код с изображения.

Открыть на Gumroad

Недавно вышел Lighthouse 8. Самым значимым изменением в релизе стало изменение оценки "Performance Score". Каролина Щур в статье "How Lighthouse 8 Changes Affect Your Metrics" рассказала, как именно поменялась эта оценка.

Были изменены веса метрик FCP, SI, TTI, TBT и CLS. Теперь наибольшее влияние будут оказывать TBT (Total Blocking Time, +30% от общего веса всех метрик) и CLS (Cumulative Layout Shift, +10%). Если на вашем сайте была хорошая оценка, но в новой версии Lighthouse она упала, это означает, что при открытии страницы много времени занимает инициализация и выполнение клиентского кода или из-за того, что на странице происходит сдвиг контента.

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

Lighthouse 8 уже доступен в PageSpeed Insights, а его поддержка в Chrome появится в версии 93.

#performance #release #lighthouse

https://calibreapp.com/blog/lighthouse-8

Используйте ссылки и кнопки правильно. Заметка о том, как выбрать правильный тег по ожидаемой от него функциональности.

https://habr.com/p/561892/

Что получится, если соединить навыки разработки и кибербезопасности?

Погрузитесь в мир прикладной безопасности на курсе от HackerU и откройте путь к таким профессиям, как Application Security Expert, Специалист по безопасной разработке.

Курс проводят практикующие эксперты, которые уже посотрудничали с Тинькофф Банк, Альфа-Банк, Positive Technologies, IBM и др.

По окончанию курса вы получите:
— Навыки анализа защищенности кода и отдельных программных решений, выявления атак и уязвимостей в окружении продукта
— Навыки построения безопасного жизненного цикла разработки ПО и реализации различных программных механизмов с точки зрения безопасности
— Карьерные консультации с ИБ-экспертами и HR-специалистами
— Возможность найти новую работу ещё в процессе обучения

Познакомиться с экспертами и порешать первые задачки можно уже сейчас — записывайтесь на бесплатный пробный урок в формате CTF-турнира. Всех участников пробного урока ждёт бонус — 30% скидка на курс!

Регистрируйтесь по ссылке: https://is.gd/2qxKEi

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

https://jakearchibald.com/2021/serving-sharp-images-to-high-density-screens/

Джек Франклин — участвует в разработке Chrome DevTools — реализовал на React и Svelte небольшое приложение для трекинга времени с сохранением данных в Firebase и рассказал о своём опыте в статье "Comparing Svelte and React".

В статье сравнивается простота интеграции с аутентификацией Firebase, работа с веб-воркерами, условный рендеринг, реактивность, композиция компонентов, стилизация. По результатам сравнения победил Svelte, так как в нём проще работать с сайд-эффектами. Кодовая база Svelte в целом также оказалась проще. Из коробки идут средства для работы со стилями. Как бы то ни было Джек пишет, что ему нравится работать и с React, и со Svelte.

Немного субъективная статья, но всё равно интересная. Рекомендую заглянуть.

#jsframeworks #react #svelte

https://www.jackfranklin.co.uk/blog/comparing-svelte-and-react-javascript/

#гуд № 90
Если в Google вбить Mr C The Slide Man — Cha Cha Slide, то поисковик поможет выучить танец из клипа. Нужно нажимать на иконки около названия.

Прислал @sashalazar

Как отличить хороший дизайн от «бревна»:

1. Вспомните, как выглядят логотипы техники или вещей, которые вы используете.
2. Попробуйте нарисовать их на бумаге.
3. Похоже? Если да, то это и есть эффективный дизайн.

Как въедаться в мозг аудитории через картинки и образы, рассказывает канал «Записки Дизайнера» — жестоко и справедливо о самых глобальных ошибках пользовательского дизайна, тошнотворных лендингах и способах все это исправить.

Есть чему поучиться:
– 5 основных анти-трендов современного дизайна;
– Два главных цвета 2021 года;
– Портфолио, которое уничтожит карьеру дизайнера.

@designwrite — мастерская для дизайнеров, идущих до конца!

За прошедшие две недели в канале для патронов Defront было опубликовано десять постов:

— Список нетехнических навыков для опытных разработчиков
— Нестандартное использование функций плавности
— Организация работы с npm-скриптами
— Использование Babel в современном TypeScript-проекте
— Корреляция между Performance Score в Lighthouse и Core Web Vitals
— Функции плавности (easing functions) в CSS
— Как Facebook кодирует видео
— Кастомный REPL для Node.js
— SVG и доступность
— Этапы написания статьи и способы снятия писательского блока

Становитесь патроном канала на Patreon, чтобы получить доступ к дополнительным постам в Defront Plus. Все донаты идут на поддержку канала, на оплату аренды квартиры, покупку еды и т.п.

Спасибо всем, кто читает и поддерживает Defront!

https://www.patreon.com/myshov