React обогнал Vue по звёздочкам на гитхабе 🧐

Начиная с 2019го года Vue держался на первом месте по звёздочкам на гитхабе среди JavaScript фреймворков, сегодня ситуация поменялась 🤯

В связи с этим событием, зацените исторический таймлайн звёздочек на гитхабе у JavaScript фреймворков

Пора снимать видосики?

Около месяца назад у меня появилась камера и микрофончик с пушинкой, вот я и задумался снять что-то для тебя, моя любимая макарошка 🫡

Создал канал и решил собрать интерес, как будет 100 подписчиков, то считаю, что интерес собран и начинаю пилить контент 🤩

https://www.youtube.com/@frontend-pasta

А пока отпиши какой контент ты хотел бы видеть на канале 👨‍💻

Что такое Style Queries? 🧑‍🎓

Новая переведённая статейка от Уны Кравец (работает в Google Chrome)

https://habr.com/ru/post/718930/

@layer что за покемон такой 🧑‍🎓

CSS @layer поможет тебе не переживать о проблемах специфичности стилей, разделяя стили на слои (в блоке @layer {}) ты можешь управлять специфичностью конкретного слоя меняя их местами или написать их порядок в строчку @layer myFirstLayer, mySecondLayer и т.д.

Он достиг уже 90% поддержки на caniuse и теперь его уже можно начинать использовать в свои проектиках

Документация MDN

Что нового в Chrome 111? 🧑‍🎓

— Добавили View Transitions API 🥳
— CSS Color Level 4 и devtools для них
— В CSS добавлены тригонометрические функции
— Расширен n-child псевдокласс

Впервые решил сделать перевод апдейта, зацени и прочитай на русском языке
https://habr.com/ru/post/721292/

Видео апдейта на английском
https://www.youtube.com/watch?v=cscwgzz85Og

Снова магия на чистом CSS 🧑‍🎓

CSS свойство animation-timeline: scroll() творит чудеса и позволяет избавиться от ненужного JS кода

CodePen

Бесплатный онлайн-фестиваль про AI-разработку от организаторов HolyJS 🧑‍🎓

Начало — 1 апреля в 11:00 GMT+3

Тема фестиваля — искусственный интеллект. А точнее, его использование в разработке и повседневной жизни. Будут и AI, и ML, и всё вокруг этого.

Там ты можешь узнать: как майнить клубнику, как писать виртуальные портреты маслом, как заставить ChatGPT делать аналитику

Программа еще в процессе, поэтому интересности ещё появятся

Читай подробности и регайся тут

Наши потомки будут делать бургер меню в 3 строчки 🤯

Мы сейчас о таком мечтать не можем, но если включить флаг "Experimental Web Platform Features" в Chrome Canary, то можно заглянуть в счастливое будущее

Вот как можно будет реализовать бургер меню:

HTML:

<button popovertarget="nav"></button>
<nav popover id="nav"></nav>

CSS:
body:has([id=nav]:open) {translate:-220px 0;}

CodePen (работает только в Chrome Canary с флагом экспериментальных фич)

Frontend по-флотски поймал Дзен 🙏

Мне написал скаут Дзена и позвал писать на их платформе, говорят хотят развивать IT аудиторию. Предложили пару сладких плюшек, ну я и поплыл 🥺

Сам сталкивался с платформой пару лет назад, когда она ещё принадлежала Яндексу, не заходило, но решил дать ей ещё шанс

Контент будет примерно одинаковый, подписываться есть смысл если тебе там будет удобнее или ты хочешь сделать мне приятно 😘

https://dzen.ru/frontend_pasta

GitHub анонсировал GitHub Co-pilot X 🥳

Сейчас версия Х находится в стадии "Technical preview" и пока её невозможно потестить, но нам уже рассказали, что там будет нового, и можно уже зарегаться в лист ожидания

1. Окно с чатом
Можно будет, например, выделить кусок кода и попросить сделать с ним что-нибудь, например, объяснить как он работает или отрефакторить

2. Кодинг голосом (о май гад, очень интересно попробовать) 🤯
Как думаешь это будет юзабельно?

3. Вопросы и ответы
Вместо стэк оверфлоу можно будет советоваться с co-pilot

4. Генерация пулл реквестов и автотестов
Co-pilot поможет сгенерить шаблон для PR и дописать пропущенные тесты

5. Подсказка bash команд
Забыл как снести продовую БД? Не переживать, co-pilot подскажет

Сайтик анонса
https://github.com/features/preview/copilot-x

Picture-in-Picture API это изи 🧑‍🎓

Picture-in-Picture это когда воспроизводимое юзером медиа, появляется поверх всех его приложений, думаю юзкейс понятен

MDN приводит простую функцию перехода/выхода в режим Picture-in-Picture

function togglePictureInPicture() {
if (document.pictureInPictureElement) {
document.exitPictureInPicture();
} else if (document.pictureInPictureEnabled) {
video.requestPictureInPicture();
}
}

Chrome Headless апдейт 🏋️‍♀️

Что там поменялось?
Самый главный апдейт заключается в том, что предыдущая headless версия хрома являлась независимой реализацией и был отдельным проектом, в связи с этим бывало такое, что в обычном хроме всё отлично работает, но стоит запустить в headless моде, то всё летело в тартарары. Теперь они унифицированы и работают в тандеме

Несколько новых команд:
--screenshot, --print-to-pdf, --timeout, --virtual-time-budget, --virtual-time-budget

Чтобы запустить хром в новом режиме, юзай эту команду:
chrome --headless=new

Подробнее:
https://developer.chrome.com/articles/new-headless/

WebStorm стал поддерживать TypeScript в Vue темплэйтах 🫡

В версии 2023.1 JetBrains добавили поддержку типов при установке атрибута lang="ts"

Теперь он предлагает приведение и улучшенное сужение типов

Также в новой версии добавили поддержку Astro

Подробнее по ссылке:
https://www.jetbrains.com/webstorm/whatsnew/

Вышел мощный Chrome 112 🍔

Что там нового?
— Можно юзать CSS nesting (это когда ты пишешь один селектор внутри другого для того для дочернего элемента, вместо создания длинной строки), прощай SCSS 🫡
— У тега <dialog> обновили алгоритм выбора элемента для фокуса, теперь элемент <dialog> будет получать фокус только, если у него установлен autofocus атрибут

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