Не минифицируйте CSS (мнение автора статьи)
78 kB сырого CSS превращаются в 65kB. Так ли вам важны эти 13kB?
Компрессия. Без gzip или Brotli уже вообще не должно быть сайтов:
- 78kB сжимается до 11kB
- 65 kB сжимается до 10kB
Так ли вам важен этот 1kB?
Протокол.
HTTP/2 мультиплексирование позволяет серверу использовать одно соединение для параллельной передачи нескольких запросов и ответов.
Если сжатый CSS-файл без минификации составляет всего 10 кБ, а затем разбивается на более мелкие фрагменты, скажем, по 2 кБ, то минификация становится как бы не проблемой
Статья: https://blog.sentry.io/why-dont-we-talk-about-minifying-css/
Моё мнение: занимайтесь оптимизацией сайта комплексно. Немножко CSS минифицировал, потом JS, потом HTML. Вот и картиночки оптимизировались. И хоба! 1mB сайта превратился в 100kB. Пользователь счастлив. Вы счастливы. Все счастливы.
78 kB сырого CSS превращаются в 65kB. Так ли вам важны эти 13kB?
Компрессия. Без gzip или Brotli уже вообще не должно быть сайтов:
- 78kB сжимается до 11kB
- 65 kB сжимается до 10kB
Так ли вам важен этот 1kB?
Протокол.
HTTP/2 мультиплексирование позволяет серверу использовать одно соединение для параллельной передачи нескольких запросов и ответов.
Если сжатый CSS-файл без минификации составляет всего 10 кБ, а затем разбивается на более мелкие фрагменты, скажем, по 2 кБ, то минификация становится как бы не проблемой
Статья: https://blog.sentry.io/why-dont-we-talk-about-minifying-css/
Моё мнение: занимайтесь оптимизацией сайта комплексно. Немножко CSS минифицировал, потом JS, потом HTML. Вот и картиночки оптимизировались. И хоба! 1mB сайта превратился в 100kB. Пользователь счастлив. Вы счастливы. Все счастливы.
👍11
Линтер для HTML
Напомню, что я делаю линтер для HTML на основе linthtml.
С последнего моего отчёта было многое, что сделано нового:
- Поправил правило
У правила появилось исключение для первого
-
-
- Новое правило
- Правило
-
- У
- Добавил правило
- Правило
- Правило
- Правило
- Правило
Работа идёт и если у вас идеи для правил, то приходите в гости https://github.com/htmlacademy/linthtml-rules-htmlacademy
На данный момент уже стало ясно, что из-за того, что linthtml не развивается, а его API не обширно, то уже хочется какой-то другой инструмент. Поживём - увидим.
Напомню, что я делаю линтер для HTML на основе linthtml.
С последнего моего отчёта было многое, что сделано нового:
- Поправил правило
htmlacademy/attr-req-value, которое требует заполнение атрибутов, например value="chto-nibud"У правила появилось исключение для первого
<option> в <select>-
input-req-label теперь исключает проверку <input type="submit">-
tag-req-attr появилась новая настройка ignore, которая спасает от ситуаций вроде <input type="submit" name="submit">- Новое правило
htmlacademy/req-stylesheet-link, которое проверяет наличие <link rel="stylesheet"> внутри тега head.- Правило
htmlacademy/req-mailto требует mailto: для ссылок с email в теле тега-
htmlacademy/no-blocking-script теперь игнорирует <script> с type="module" в <head>, так как подобные скрипты неблокирующие- У
<source> внутри <picture> требуем атрибуты размеров width и height если <source> внутри <picture>- Добавил правило
tag-forbid-attr, запрещающее использование указанных атрибутов в указанном теге.- Правило
req-tags-presence требует наличия указанных тегов на странице. - Правило
req-preload-font требует значения preload для шрифта. - Правило
req-webp-in-picture требует webp в <picture>. - Правило
no-class-in-container проверяет атрибут class для дочерних элементов внутри указанного контейнера.Работа идёт и если у вас идеи для правил, то приходите в гости https://github.com/htmlacademy/linthtml-rules-htmlacademy
На данный момент уже стало ясно, что из-за того, что linthtml не развивается, а его API не обширно, то уже хочется какой-то другой инструмент. Поживём - увидим.
🔥8🤝1
Альтернативное описание на максималках
Четыре года назад я на работе обсуждал, что альтернативное описания контентным изображениям никто не пишет. Все понимают, что надо, но всем лень. Тогда пришли к мнению, что надо донести простую мысль. Если лень, то хотя бы оставь
3.5 года назад я обсуждал, что если уж контентным изображениям никто альтернативное описание не пишет, то про описание для декоративных изображений можно забыть, хотя такая возможность есть:
в
Но это вообще не рабочий вариант, так как описание находится в стилях. Абсолютно никто не будет после изменения изображения, да и во время создания, менять текст описания, а это значит, что этот текст будет только сбивать столку.
Буквально сегодня, в Chrome 126 версии, должно произойти, то что сможет нам все помочь. Лень никуда не уйдёт, но будут способы делать нормальное описание.
И так: в спецификации CSS Generated Content Module Level 3 для
Исправим изначальный пример
добавим в разметку атрибут
Кажется, что ничего не поменялось, текст "Альтернативное описание" всё также попадает в дерево доступности, а мы всего лишь перенесли описания из стилей в разметку. В этом заключается мощь. У нас появляются новые возможности управлять контентом. Теперь у нашего бэкендера появляется возможность взять нейросеточку, которая делает описания изображению, а результат работы нейросетки вставлять в разметку в
В общем, как вы поняли, то появляются новые возможности, которыми мы конечно же не будем пользоваться, но как приятно, что эти новые возможности постоянно появляются.
Четыре года назад я на работе обсуждал, что альтернативное описания контентным изображениям никто не пишет. Все понимают, что надо, но всем лень. Тогда пришли к мнению, что надо донести простую мысль. Если лень, то хотя бы оставь
alt правильно пустым — alt="". Это уже победа.3.5 года назад я обсуждал, что если уж контентным изображениям никто альтернативное описание не пишет, то про описание для декоративных изображений можно забыть, хотя такая возможность есть:
.element {
content: url("images/background.jpg") / "альтернативное описание";
}в
content можно добавить /, после него написать описать изображение текстом. Такое описание попадает в дерево доступности.Но это вообще не рабочий вариант, так как описание находится в стилях. Абсолютно никто не будет после изменения изображения, да и во время создания, менять текст описания, а это значит, что этот текст будет только сбивать столку.
Буквально сегодня, в Chrome 126 версии, должно произойти, то что сможет нам все помочь. Лень никуда не уйдёт, но будут способы делать нормальное описание.
И так: в спецификации CSS Generated Content Module Level 3 для
content появились новые возможности, а именно использование функции attr() для альтернативного описания.Исправим изначальный пример
.element {
content: url("images/background.jpg") / attr(data-alt);
}добавим в разметку атрибут
<div class="element" data-alt="Альтернативное описание"></div>
Кажется, что ничего не поменялось, текст "Альтернативное описание" всё также попадает в дерево доступности, а мы всего лишь перенесли описания из стилей в разметку. В этом заключается мощь. У нас появляются новые возможности управлять контентом. Теперь у нашего бэкендера появляется возможность взять нейросеточку, которая делает описания изображению, а результат работы нейросетки вставлять в разметку в
data-alt="", ну либо сделать это руками.В общем, как вы поняли, то появляются новые возможности, которыми мы конечно же не будем пользоваться, но как приятно, что эти новые возможности постоянно появляются.
👏11👍6❤1😁1
gapЧасто ведь возникает вопрос «В каких случаях мне переписывать margin на gap» 🤔 У меня уже сложилось мнение, которое я ещё уточняю, но всегда не хватает примеров.
Ахмад Шадид постарался и показал кучу примеров - https://ishadeed.com/article/the-gap/
Статья на английском, но знаний английского не нужно, так как есть примеры кода и небольшие интерактивные демонстрации. Статья хоть и длинная, но хватит 5 минут, чтобы её посмотреть
👍12
Уже практически закончился Я 💛 Фронтенд 2024
https://www.youtube.com/watch?v=xKhuDlMySsE
но вы пересмотрите позже =)
https://www.youtube.com/watch?v=xKhuDlMySsE
но вы пересмотрите позже =)
👍7
Коллекция проектов для самостоятельной тренировки JS начального уровня.
Есть проект. Есть его реализация. Осталось повторить ручками или написать самостоятельно с нуля. Можно закрепить замыкание, буквально в первом проекте, каррирование и многое другое
https://www.jisan.io/dom-projects/#projects
Есть проект. Есть его реализация. Осталось повторить ручками или написать самостоятельно с нуля. Можно закрепить замыкание, буквально в первом проекте, каррирование и многое другое
https://www.jisan.io/dom-projects/#projects
👍17
<permission>Пока мы все наслаждаемся тем, что не нужно изучать новые HTML-теги, Google начинает экспериментировать над новым тегом
<permission>. Тег уже доступен в 126 версии Chrome за флагом.Если коротко: Новый HTML-тег
<permission> предназначен для запроса разрешений на использование функций, таких как доступ к камере или микрофону. Этот тег позволяет избежать проблем с "спамом разрешений", это ситуация, когда сайты постоянно запрашивают разрешения на доступ к различным функциям устройства.Тег также поддерживает атрибуты для настройки запросов, такие как
type и type-ext, например:<permission type="camera">
<permission type="camera" type-ext="precise:true"> <!-- для разрешения геолокации -->
В
type можно передавать несколько значений<permission type="camera microphone">
Демо: https://permission.site/pepc
Стилизация элемента
<permission> на данный момент сильно ограничена, но возможно будет расширена после окончания эксперимента.<permission> работает вместе с API Permissions. Можно прослушать несколько событий:-
onpromptdismiss: пользователь отклонил запрос на разрешение-
onpromptaction: запрос разрешения был разрешен пользователем-
onvalidationstatuschange: элемент переходит из состояния "валидный" в состояние "невалидный"На данный момент
<permission> является одиночным тегом. Также я не увидел, что можно изменять текст "кнопки", видимо для снижения манипуляций над пользователем.👍9🔥1
Новые стейджи
Делегаты Ecma TC39 находятся на этой неделе в Финляндии на 102-й встрече, которая проходит в течение трёх дней и организуется Mozilla и Университетом Аалто. Комитет работает на основе консенсуса и имеет право вносить изменения в спецификацию, если сочтет это необходимым. Сегодня несколько предложений получили консенсус для перехода на следующий этап.
Коротко:
- "Ленивая инициализация модулей" переходит на stage 2.7
- Error.isError() переходит на stage 2
- RegExp Escaping переходит в stage 2.7
- Promise.try переходит на stage 3
Ещё много вкусного в статье: https://socket.dev/blog/tc39-advances-key-proposals
Делегаты Ecma TC39 находятся на этой неделе в Финляндии на 102-й встрече, которая проходит в течение трёх дней и организуется Mozilla и Университетом Аалто. Комитет работает на основе консенсуса и имеет право вносить изменения в спецификацию, если сочтет это необходимым. Сегодня несколько предложений получили консенсус для перехода на следующий этап.
Коротко:
- "Ленивая инициализация модулей" переходит на stage 2.7
- Error.isError() переходит на stage 2
- RegExp Escaping переходит в stage 2.7
- Promise.try переходит на stage 3
Ещё много вкусного в статье: https://socket.dev/blog/tc39-advances-key-proposals
👍2
Очерёдность выполнения
Недавно составил очередность выполнения кода. Это сейчас обычные задачи про "асинхронность" выполнения кода на собеседованиях.
В целом, можно в закладку кинуть и вспомнить перед собеседованием
1. Сначала выполняется весь синхронный код:
- Весь код, который находится вне асинхронных конструкций (например,
2. Выполнение микротасков:
- После выполнения всего синхронного кода, JavaScript движок выполняет микротаски (microtasks). К микротаскам относятся:
- Колбэки, добавленные в
- Колбэки, добавленные с помощью метода
- Во время выполнения микротасков могут быть добавлены новые макротаски или микротаски. Они будут обработаны в следующих итерациях.
3. Выполнение макротасков:
- После выполнения всех микротасков, движок переходит к выполнению макротасков (macrotasks). К макротаскам относятся:
- Колбэки, переданные в
- Колбэки событий DOM.
- Во время выполнения макротасок могут быть добавлены новые микротаски или макротаски. Микротаски будут обработаны в конце текущей макротаски.
4. Повторение цикла:
- После выполнения макротаски, движок снова возвращается к выполнению микротасков, если они появились в процессе выполнения макротасков.
Приходите в комментарии если есть что добавить
Недавно составил очередность выполнения кода. Это сейчас обычные задачи про "асинхронность" выполнения кода на собеседованиях.
В целом, можно в закладку кинуть и вспомнить перед собеседованием
1. Сначала выполняется весь синхронный код:
- Весь код, который находится вне асинхронных конструкций (например,
setTimeout, Promise, async/await), выполняется сразу же в порядке написания.2. Выполнение микротасков:
- После выполнения всего синхронного кода, JavaScript движок выполняет микротаски (microtasks). К микротаскам относятся:
- Колбэки, добавленные в
.then и .catch блоках промисов.- Колбэки, добавленные с помощью метода
queueMicrotask.- Во время выполнения микротасков могут быть добавлены новые макротаски или микротаски. Они будут обработаны в следующих итерациях.
3. Выполнение макротасков:
- После выполнения всех микротасков, движок переходит к выполнению макротасков (macrotasks). К макротаскам относятся:
- Колбэки, переданные в
setTimeout и setInterval.- Колбэки событий DOM.
- Во время выполнения макротасок могут быть добавлены новые микротаски или макротаски. Микротаски будут обработаны в конце текущей макротаски.
4. Повторение цикла:
- После выполнения макротаски, движок снова возвращается к выполнению микротасков, если они появились в процессе выполнения макротасков.
console.log("Start"); // 1
setTimeout(() => {
console.log("Timeout 1"); // 4
Promise.resolve().then(() => {
console.log("Promise inside Timeout 1"); // 5 Микротаски будут обработаны в конце текущей макротаски.
});
}, 0);
Promise.resolve().then(() => {
console.log("Promise 1"); // 3 микротаски идут быстрее макротасок
setTimeout(() => {
console.log("Timeout inside Promise 1"); // 6
}, 0);
});
console.log("End"); // 2 потому что синхронная задачаПриходите в комментарии если есть что добавить
🔥18👍2
Привет. Давно не виделись =)
Ко мне в команду ищем джуна фронтендера: React + TS + SCSS.
Требования
- Опыт работы с React.js от 1 лет (обязательно)
- Опыт работы с TypeScript от 1 лет (обязательно)
- Опыт работы c любым из популярных state manager: MobX (используется на проекте), Redux, и тд от 1 лет
- Знания в области кроссбраузерной и адаптивной верстки с использованием HTML5/CSS3
- Владение нативным JavaScript (ES5/ES6/ES7)
- Опыт использования пакетных менеджеров (NPM, Yarn).
- Опыт работы с git. Стандартный набор команд. Ничего сверхъестественного.
- Опыт командной разработки и умение разбираться в уже реализованном коде;
Будет плюсом:
- Опыт работы с CSS-препроцессором LESS/ SASS/ SCSS.
- Опыт работы с любой из систем сборки (Webpack, Gulp, Grunt, Browserify) будет плюсом.
- Опыт написания unit-тестов или e2e-тестов (Jest, etc).
- Понимание концепций ООП, методологий разработки, шаблонов проектирования;
Что делать:
Разработка web-приложения для возможности отрисовки диаграмм, моделирующих бизнес-логику обработки данных, в соответствии с бизнес- и системными требованиями. Участие в подготовке методики тестирования разработанного функционала.
Контроль качества кода, исправление дефектов. Проведение ревью и рефакторинга кода. Оптимизация производительности функционала, анализ ошибок и сбоев.
Формат работы: Очный / смешанный / удаленный
По всем вопросам пишите: https://t.me/kinzazdev
Ко мне в команду ищем джуна фронтендера: React + TS + SCSS.
Требования
- Опыт работы с React.js от 1 лет (обязательно)
- Опыт работы с TypeScript от 1 лет (обязательно)
- Опыт работы c любым из популярных state manager: MobX (используется на проекте), Redux, и тд от 1 лет
- Знания в области кроссбраузерной и адаптивной верстки с использованием HTML5/CSS3
- Владение нативным JavaScript (ES5/ES6/ES7)
- Опыт использования пакетных менеджеров (NPM, Yarn).
- Опыт работы с git. Стандартный набор команд. Ничего сверхъестественного.
- Опыт командной разработки и умение разбираться в уже реализованном коде;
Будет плюсом:
- Опыт работы с CSS-препроцессором LESS/ SASS/ SCSS.
- Опыт работы с любой из систем сборки (Webpack, Gulp, Grunt, Browserify) будет плюсом.
- Опыт написания unit-тестов или e2e-тестов (Jest, etc).
- Понимание концепций ООП, методологий разработки, шаблонов проектирования;
Что делать:
Разработка web-приложения для возможности отрисовки диаграмм, моделирующих бизнес-логику обработки данных, в соответствии с бизнес- и системными требованиями. Участие в подготовке методики тестирования разработанного функционала.
Контроль качества кода, исправление дефектов. Проведение ревью и рефакторинга кода. Оптимизация производительности функционала, анализ ошибок и сбоев.
Формат работы: Очный / смешанный / удаленный
По всем вопросам пишите: https://t.me/kinzazdev
❤2👎1😢1
lint-staged
Инструмент, позволяющий запускать линтеры только для файлов, которые попадут в коммит.
Полезность инструмента
В крупных проектах запуск одного линтера на сотни файлов затягивается на десятки секунд. Ситуация усугубляется, когда количество линтеров увеличивается. Стайллинт проверяет сотни CSS-файлов проекта, eslint проверяет сотни js-файлов, а мы в это время гадаем, будут ли ошибки или подсветка редактора кода была достаточной.
lint-staged позволяет запускать линтеры только для тех файлов, которые попадут в коммит, а по сути, нам нужно именно это. Проверять уже проверенные файлы нет смысла, ведь они не были изменены, а значит, ошибок там уже нет, так как они уже были исправлены.
В конфигурационный файл .lintstagedrc.json можно добавить запись в простом виде:
Но работа для проекта остаётся непростой. Когда теперь будет коммит файлов (
- Из всех файлов, которые попадут в коммит, отфильтруются все .js-файлы.
- Из-за указанного флага
- Исправленные .js-файлы заново попадут в коммит.
Если во время работы eslint, даже с
npm-пакет: https://github.com/lint-staged/lint-staged
PS:
Инструмент, позволяющий запускать линтеры только для файлов, которые попадут в коммит.
Полезность инструмента
В крупных проектах запуск одного линтера на сотни файлов затягивается на десятки секунд. Ситуация усугубляется, когда количество линтеров увеличивается. Стайллинт проверяет сотни CSS-файлов проекта, eslint проверяет сотни js-файлов, а мы в это время гадаем, будут ли ошибки или подсветка редактора кода была достаточной.
lint-staged позволяет запускать линтеры только для тех файлов, которые попадут в коммит, а по сути, нам нужно именно это. Проверять уже проверенные файлы нет смысла, ведь они не были изменены, а значит, ошибок там уже нет, так как они уже были исправлены.
В конфигурационный файл .lintstagedrc.json можно добавить запись в простом виде:
{
"*.js": "eslint --fix"
}Но работа для проекта остаётся непростой. Когда теперь будет коммит файлов (
git commit), произойдёт следующее:- Из всех файлов, которые попадут в коммит, отфильтруются все .js-файлы.
- Из-за указанного флага
--fix произойдёт исправление для правил, которые можно автоисправить.- Исправленные .js-файлы заново попадут в коммит.
Если во время работы eslint, даже с
--fix, всё равно будут ошибки, то коммит не будет создан, а eslint как и всегда выведет ошибки в терминал.npm-пакет: https://github.com/lint-staged/lint-staged
PS:
lint-staged не отменяет полной проверки кода всех файлов. Её всё-таки нужно делать, но точно не во время активной разработки фичи.👍6
Commitlint
Я продолжаю исследовать инструменты.
Commitlint — это инструмент, который проверяет сообщения коммитов в Git на соответствие определенным правилам.
Например, можно написать правило, чтобы заголовок коммита отвечал на вопрос "Что делает?".
У меня в команде принято писать в начале коммита номер задачи, для этого тоже можно написать правило.
Если сообщение коммита не удовлетворяет правилу, то коммит не создаётся, а в терминале происходит подсказка, что поправить, как в любых других линтерах.
Это позволяет не держать в голове все возможные правила ведения проекта, а переложить это на инструменты, которые всегда подскажут как поправить commit message.
Также удобно для тех, кто только пришёл в команду и привыкает к нюансам работы конкретно в этой новой команде.
Я продолжаю исследовать инструменты.
Commitlint — это инструмент, который проверяет сообщения коммитов в Git на соответствие определенным правилам.
Например, можно написать правило, чтобы заголовок коммита отвечал на вопрос "Что делает?".
У меня в команде принято писать в начале коммита номер задачи, для этого тоже можно написать правило.
Если сообщение коммита не удовлетворяет правилу, то коммит не создаётся, а в терминале происходит подсказка, что поправить, как в любых других линтерах.
Это позволяет не держать в голове все возможные правила ведения проекта, а переложить это на инструменты, которые всегда подскажут как поправить commit message.
Также удобно для тех, кто только пришёл в команду и привыкает к нюансам работы конкретно в этой новой команде.
👍12
Короткой строкой: что производительнее флексы или гриды?
Ответ: успокойтесь уже и используйте, что хотите =)
Но посмотреть на результаты рендеринга, где проверяют расчёт ширины и отступов, можно в статье https://benfrain.com/is-css-grid-really-slower-than-flexbox/
Ответ: успокойтесь уже и используйте, что хотите =)
Но посмотреть на результаты рендеринга, где проверяют расчёт ширины и отступов, можно в статье https://benfrain.com/is-css-grid-really-slower-than-flexbox/
Среднее время рендеринга(меньше лучше)
Флексы хром: 54.84
Гриды хром: 52.75
Флексы сафари: 14.6
Гриды сафари: 18.25❤2👍2
Пришли очень важные новости
Разработчики браузеров срочно увеличивают размер опции в селекте.
Начиная с 129 хрома элемент
Хром: https://chromestatus.com/feature/5152633181700096
Обсуждение: https://github.com/openui/open-ui/issues/1026
Разработчики браузеров срочно увеличивают размер опции в селекте.
Начиная с 129 хрома элемент
<option> в раскрывающемся списке <select> будет иметь минимальные размеры 24x24, чтобы удовлетворять требования WCAG 2.5.8.Хром: https://chromestatus.com/feature/5152633181700096
Обсуждение: https://github.com/openui/open-ui/issues/1026
🔥7👍1😁1🤔1
В хроме добавили обработчик действий
Пример: https://googlechrome.github.io/samples/picture-in-picture/skip-ad.html
Хром: https://chromestatus.com/feature/4749278882824192
Обсуждение: https://github.com/WICG/mediasession/pull/203
skipad (skip - пропустить, ad - реклама), который можно использовать для отображения кнопки «Пропустить рекламу» в окне "картинка-в-картинке", а разработчик в этот момент может отследить нажатие на эту кнопку.Пример: https://googlechrome.github.io/samples/picture-in-picture/skip-ad.html
Хром: https://chromestatus.com/feature/4749278882824192
Обсуждение: https://github.com/WICG/mediasession/pull/203
Центрируй по вертикали без гридового или флексового контекста
Мало ли вы пропустили:
Плюсы:
- работает без дополнительных обёрток(html-тегов)
- не нужно указывать флексы или гриды, если вам просто нужно центрировать элемент по вертикали.
Статья: https://build-your-own.org/blog/20240813_css_vertical_center/
PS: не забывайте проверять браузерную совместимость перед использованием
Мало ли вы пропустили:
align-content: center теперь работает без флексов и гридов<div style="align-content: center; height: 100px;">
<code>align-content</code> просто работает!
</div>
Плюсы:
- работает без дополнительных обёрток(html-тегов)
- не нужно указывать флексы или гриды, если вам просто нужно центрировать элемент по вертикали.
Статья: https://build-your-own.org/blog/20240813_css_vertical_center/
PS: не забывайте проверять браузерную совместимость перед использованием
build-your-own.org
CSS finally adds vertical centering in 2024 | Blog | build-your-own.org
CSS finally adds vertical
centering in 2024
centering in 2024
👍11🔥8❤3
PowerToys 0.84.0
Обновился мой любимый PowerToys. В нём появилась новая утилита "Workspaces"(рабочее место), которая позволяет одним щелчком мыши запускать набор приложений, например:
- можно запустить программы для работы: редактор кода, графический редактор, браузер
- набор для отладки: открыть firefox, chrome
- можно запустить терминал, а в нём уже запустить vs code с путём к проекту и с заданными параметрами, например чистый vs code, или нужный профиль
Программы можно запускать с параметрами, например с отключенными сертификатами или вообще какими угодно флагами. Программы можно запустить с нужными размерами, а также в нужном месте, например слева или сверху
Самое удобное это то, что для каждого набора программ можно создать ярлык на рабочем столе.
Обновился мой любимый PowerToys. В нём появилась новая утилита "Workspaces"(рабочее место), которая позволяет одним щелчком мыши запускать набор приложений, например:
- можно запустить программы для работы: редактор кода, графический редактор, браузер
- набор для отладки: открыть firefox, chrome
- можно запустить терминал, а в нём уже запустить vs code с путём к проекту и с заданными параметрами, например чистый vs code, или нужный профиль
Программы можно запускать с параметрами, например с отключенными сертификатами или вообще какими угодно флагами. Программы можно запустить с нужными размерами, а также в нужном месте, например слева или сверху
Самое удобное это то, что для каждого набора программ можно создать ярлык на рабочем столе.
🔥8👍1
ECMAScript stage 2.7
На мой взгляд, в ECMAScript самый эффективный и наглядный процесс стандартизации среди всех браузерных технологий, особенно по сравнению с HTML и CSS.
Каждое новое предложение проходит этапы от 0 до 4:
Stage 0 (Strawman) — Идея находится на обсуждении, без чётких деталей.
Stage 1 (Proposal) — Формальное предложение с общей концепцией.
Stage 2 (Draft) — Конкретная спецификация и черновая реализация.
Stage 3 (Candidate) — Почти готово, тестируется для включения в стандарт.
Stage 4 (Finished) — Окончательное принятие, включено в стандарт.
При продвижении на новый этап крупные предложения часто сталкиваются с понижением с третьего на второй. Третий этап требует написания огромного количества тестов, и пока они не будут созданы, нет уверенности в работоспособности функции. Разработчики браузеров даже не начинают имплементацию функций без тестов.
TC39 решила, что этот этап слишком объёмный, и ввела стадию stage 2.7. Эта стадия указывает на то, что предложение практически завершено и проходит валидацию. Все ключевые элементы (синтаксис, API, семантика) описаны, и больше не вносятся изменения без обратной связи от тестирования или практического использования. На этом этапе разрабатываются тесты для проверки совместимости и корректности.
Число 2.7 выбрано специально для обозначения того, что функции не хватает тестов, но она почти готова к третьему этапу.
Статья: https://thenewstack.io/inside-ecmascript-javascript-standard-gets-an-extra-stage/
PS: stage 2.7 был добавлен в феврале 2023 года, а я только узнал =)
На мой взгляд, в ECMAScript самый эффективный и наглядный процесс стандартизации среди всех браузерных технологий, особенно по сравнению с HTML и CSS.
Каждое новое предложение проходит этапы от 0 до 4:
Stage 0 (Strawman) — Идея находится на обсуждении, без чётких деталей.
Stage 1 (Proposal) — Формальное предложение с общей концепцией.
Stage 2 (Draft) — Конкретная спецификация и черновая реализация.
Stage 3 (Candidate) — Почти готово, тестируется для включения в стандарт.
Stage 4 (Finished) — Окончательное принятие, включено в стандарт.
При продвижении на новый этап крупные предложения часто сталкиваются с понижением с третьего на второй. Третий этап требует написания огромного количества тестов, и пока они не будут созданы, нет уверенности в работоспособности функции. Разработчики браузеров даже не начинают имплементацию функций без тестов.
TC39 решила, что этот этап слишком объёмный, и ввела стадию stage 2.7. Эта стадия указывает на то, что предложение практически завершено и проходит валидацию. Все ключевые элементы (синтаксис, API, семантика) описаны, и больше не вносятся изменения без обратной связи от тестирования или практического использования. На этом этапе разрабатываются тесты для проверки совместимости и корректности.
Число 2.7 выбрано специально для обозначения того, что функции не хватает тестов, но она почти готова к третьему этапу.
Статья: https://thenewstack.io/inside-ecmascript-javascript-standard-gets-an-extra-stage/
PS: stage 2.7 был добавлен в феврале 2023 года, а я только узнал =)
👍5
Браузерные новости
Вы не ждали, а они всё равно вышли. Все браузеры решили вдруг обновиться, а я решил вам рассказать про новиночки.
Safari 18.0
- Контроль отвлечения внимания. Теперь, с помощью браузера, можно выбрать любой элемент, например модальное окно или всплывающее окно про куки, и скрыть его. Есть функциональная возможность убрать скрытые элемент нажав "Показать скрытые элементы".
- Если на странице есть "заметный", видимо занимающий большую площадь, видеоэлемент, то его можно увеличить заполнив всё окно. Если переключить вкладку или видео другим окном, то видео перейдёт в режиме "картинка в картинке". Это всё работает в нативном теге
- Появилась возможность отлаживать сайты в веб-инспекторе вашего айфона. Условно вы подключаете телефон к ноутбуку. Отладка происходит на ноутбуке с инспектором, но отлаживаете вы сайта на телефоне. Всё это происходит через Safari.
- Добавили ещё больше возможностей веб-приложениям в macOS Sequoia:
- открытие ссылок непосредственно в веб-приложениях, без открытия в дефолтном Сафари;
- веб-расширения теперь будут работать в веб-приложениях. Всё что установлено в Safari, будет работать в веб-приложениях, например adblock
- Добавили API View Transitions
- Добавили выражения контейнера от стилей
-
- Акцентный цвета теперь могут быть прозрачными
- Анимация отображения:
-
Часть фишек пока что заработает только в Apple-устройствах, например предложение по написанию текста:
Остальное можно почитать и посмотреть в статье: https://webkit.org/blog/15865/webkit-features-in-safari-18-0/
Chrome 129
- добавили CSS interpolate-size и функция calc-size(). Свойство CSS interpolate-size позволяет странице использовать анимацию и переходы между ключевыми словами CSS для определения размера, такими как auto, min-content и fit-content, в тех случаях, когда эти ключевые слова могут быть анимированы.
- Переименовали
- Обновили работу
- Теперь WebGPU поддерживает HDR
И многое другое https://developer.chrome.com/release-notes/129
Firefox 130
- Атрибут
- В
- Свойство CSS
И много другое https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/130
Вы не ждали, а они всё равно вышли. Все браузеры решили вдруг обновиться, а я решил вам рассказать про новиночки.
Safari 18.0
- Контроль отвлечения внимания. Теперь, с помощью браузера, можно выбрать любой элемент, например модальное окно или всплывающее окно про куки, и скрыть его. Есть функциональная возможность убрать скрытые элемент нажав "Показать скрытые элементы".
- Если на странице есть "заметный", видимо занимающий большую площадь, видеоэлемент, то его можно увеличить заполнив всё окно. Если переключить вкладку или видео другим окном, то видео перейдёт в режиме "картинка в картинке". Это всё работает в нативном теге
<video>. Apple поощряет использование семантических тегов.- Появилась возможность отлаживать сайты в веб-инспекторе вашего айфона. Условно вы подключаете телефон к ноутбуку. Отладка происходит на ноутбуке с инспектором, но отлаживаете вы сайта на телефоне. Всё это происходит через Safari.
- Добавили ещё больше возможностей веб-приложениям в macOS Sequoia:
- открытие ссылок непосредственно в веб-приложениях, без открытия в дефолтном Сафари;
- веб-расширения теперь будут работать в веб-приложениях. Всё что установлено в Safari, будет работать в веб-приложениях, например adblock
- Добавили API View Transitions
- Добавили выражения контейнера от стилей
@container style(--background: black);-
currentcolor заработал в относительных цветах section { background: oklch(from currentcolor calc(L * 4) C H); }- Акцентный цвета теперь могут быть прозрачными
.form-control { accent-color: rgba(0,0,0,0.6); }- Анимация отображения:
@starting-style вместе с transition-behavior и display: none-
content-visibility для ускорения отрисовки страницы. Если элемент скрыт, то он не будет отрисован, пока не станет видимым.Часть фишек пока что заработает только в Apple-устройствах, например предложение по написанию текста:
<textarea writingsuggestions="true"> или свитчер <input type=checkbox switch>Остальное можно почитать и посмотреть в статье: https://webkit.org/blog/15865/webkit-features-in-safari-18-0/
Chrome 129
- добавили CSS interpolate-size и функция calc-size(). Свойство CSS interpolate-size позволяет странице использовать анимацию и переходы между ключевыми словами CSS для определения размера, такими как auto, min-content и fit-content, в тех случаях, когда эти ключевые слова могут быть анимированы.
- Переименовали
inset-area в positioned-area.- Обновили работу
backdrop-filter. Демо- Теперь WebGPU поддерживает HDR
И многое другое https://developer.chrome.com/release-notes/129
Firefox 130
- Атрибут
name элемента <details> теперь позволяет группировать элементы <details>, причем одновременно может быть открыт только один элемент внутри группы.- В
dir и lang глобальных атрибутах теперь улучшено наследование- Свойство CSS
hyphens теперь правильно поддерживается для чешского и словацкого языков.И много другое https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/130
👍6🔥4
Мы становимся свидетелями странного и прекрасного момента в истории CSS.
Уже точно решено, что будут ломать линии в гридах, чтобы иметь возможность построить masonry-раскладку, но пока не решили как именно это делать. Есть несколько вариантов:
- Грид-интегрированный вариант, который предполагает добавление новых значений для свойств
- Грид-независимый вариант, который предполагает добавление нового
- есть другие варианты, но пока всем кажется, что пора остановиться на первых двух
Всё это долго и упорно обсуждается в ишью на гитхабе, а буквально вчера выпустили CSS Grid Layout Level 3 в статусе First Public Working Draft, в котором как раз рассматриваются эти два варианта использования.
Уже точно решено, что будут ломать линии в гридах, чтобы иметь возможность построить masonry-раскладку, но пока не решили как именно это делать. Есть несколько вариантов:
- Грид-интегрированный вариант, который предполагает добавление новых значений для свойств
grid-template-columns и grid-template-rows: display: grid;
grid-template-columns: 1fr 2fr 3fr;
grid-template-rows: masonry;
- Грид-независимый вариант, который предполагает добавление нового
display и свойств masonry-tracks и masonry-direction, которые практически повторяют grid-template-*:display: masonry;
masonry-tracks: 1fr 2fr 3fr;
masonry-direction: column;
- есть другие варианты, но пока всем кажется, что пора остановиться на первых двух
Всё это долго и упорно обсуждается в ишью на гитхабе, а буквально вчера выпустили CSS Grid Layout Level 3 в статусе First Public Working Draft, в котором как раз рассматриваются эти два варианта использования.
🔥19
В этом году новых версий основных браузеров уже не ждём, поэтому я подвёл небольшие итоги по CSS-свойствам в браузерах за 2024 год.
https://shabalin.online/blog/css/outcomes-2024/
Делитесь комментариями, что знали, а что вообще впервые увидели?
https://shabalin.online/blog/css/outcomes-2024/
Делитесь комментариями, что знали, а что вообще впервые увидели?
❤13👍2