CSS color-mix() 🫰
Думаю особо объяснять не надо color = цвет, mix = смешивать
Верно, эта функция смешивает цвета друг с другом
Она принимает 3 параметра:
1. Цветовое пространство (colorspace)
2 и 3 — цвет и процент этого цвета (процент опционально)
Пример на пикче🤓
Это свойство не прод-реди⛔️
MDN
Думаю особо объяснять не надо color = цвет, mix = смешивать
Верно, эта функция смешивает цвета друг с другом
Она принимает 3 параметра:
1. Цветовое пространство (colorspace)
2 и 3 — цвет и процент этого цвета (процент опционально)
Пример на пикче
Это свойство не прод-реди
MDN
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6❤🔥3🔥2
Что лучше: ChatGPT или GitHub Copilot; какие JS-фреймворки востребованы на рынке и что произошло с JavaScript за 2022 год?
Эти и другие темы из мира JavaScript разбирают в подкасте «Тяжелое утро с HolyJS» эксперты Программного комитета конференции HolyJS.
Вот что успели обсудить в прошлых выпусках:
Подкаст #21
Что нового в TypeScript 5.0, что лучше использовать — ESLint или Prettier и какие фреймворки наиболее востребованы на рынке.
Таки дойдем до доки React, уязвимости JWT и новое API
Cпойлер: так и не дошли до документации. Зато обсудили 10 лучших open source Node.js-проектов, сокращения в крупных IT-компаниях и обновление Bun.
State of JS, дока React, уязвимость JWT и новое API
Целых 3,5 часа обсуждали результаты исследования State of JS 2022.
Салат Фибоначчи
Размышляли о состоянии фронтенда, влиянии GitHub Copilot на продуктивность разработчиков и тестировали нашумевшую СhatGPT.
Разделить тяжесть субботнего утра вместе с HolyJS можно здесь.
Не пропусти выпуск 4 февраля в 13:00 по GMT+3 :)
Эти и другие темы из мира JavaScript разбирают в подкасте «Тяжелое утро с HolyJS» эксперты Программного комитета конференции HolyJS.
Вот что успели обсудить в прошлых выпусках:
Подкаст #21
Что нового в TypeScript 5.0, что лучше использовать — ESLint или Prettier и какие фреймворки наиболее востребованы на рынке.
Таки дойдем до доки React, уязвимости JWT и новое API
Cпойлер: так и не дошли до документации. Зато обсудили 10 лучших open source Node.js-проектов, сокращения в крупных IT-компаниях и обновление Bun.
State of JS, дока React, уязвимость JWT и новое API
Целых 3,5 часа обсуждали результаты исследования State of JS 2022.
Салат Фибоначчи
Размышляли о состоянии фронтенда, влиянии GitHub Copilot на продуктивность разработчиков и тестировали нашумевшую СhatGPT.
Разделить тяжесть субботнего утра вместе с HolyJS можно здесь.
Не пропусти выпуск 4 февраля в 13:00 по GMT+3 :)
👍6❤🔥2🔥1🤔1😱1🌚1
Общие шаблоны и нюансы использования React Query 🧑🎓
Чем заняться в воскресенье? Конечно же учиться!
https://habr.com/ru/post/714920/
Чем заняться в воскресенье? Конечно же учиться!
https://habr.com/ru/post/714920/
Please open Telegram to view this post
VIEW IN TELEGRAM
Хабр
Общие шаблоны и нюансы использования React Query
Эта статья — перевод оригинальной статьи " Common Patterns and Nuances Using React Query " Также я веду телеграм канал “ Frontend по-флотски ”, где рассказываю про интересные вещи из мира разработки...
👍8❤🔥3🔥3❤1
Вышел Chrome 110 🔥
Что нового?
— Добавлена поддержка псевдокласса :picture-in-picture
— Появилась возможность устанавливать как будет запускаться веб-приложение с помощью launch_handler в manifest файле
— Теперь можно использовать атрибут credentialless в iframe'ах для вставки стороннего контента, у которых нету Cross Origin Embedder Policy
Подробнее:
Читать
Смотреть
Что нового?
— Добавлена поддержка псевдокласса :picture-in-picture
— Появилась возможность устанавливать как будет запускаться веб-приложение с помощью launch_handler в manifest файле
— Теперь можно использовать атрибут credentialless в iframe'ах для вставки стороннего контента, у которых нету Cross Origin Embedder Policy
Подробнее:
Читать
Смотреть
Please open Telegram to view this post
VIEW IN TELEGRAM
YouTube
New in Chrome 110: picture-in-picture class, launch_handler and more!
Chrome 110 is rolling out now! Add custom style to your picture-in-picture elements with the new :picture-in-picture pseudo class, set your web app launch behavior with launch_handler, use the credentialless attribute in iframes to embed third party content…
👍7🔥2❤🔥1👏1
Анализ производительности с помощью Chrome DevTools 🧑🎓
Перевёл статью про оптимизацию твоего веб-приложения, прочитай, не поленись, не пожалеешь☺️
https://habr.com/ru/post/715856/
Перевёл статью про оптимизацию твоего веб-приложения, прочитай, не поленись, не пожалеешь
https://habr.com/ru/post/715856/
Please open Telegram to view this post
VIEW IN TELEGRAM
Хабр
Анализ производительности с помощью Chrome DevTools
Эта статья — перевод оригинальной статьи " Performance Analysis with Chrome DevTools " Также я веду телеграм канал “ Frontend по-флотски ”, где рассказываю про интересные вещи из мира разработки...
❤🔥5🔥3👏3
7 дней бесплатного обучения frontend-разработке!
Организовали для тебя бесплатный онлайн-интенсив по frontend-разработке с практикой, обратной связью и куратором.
За 7 дней ты:
- Сверстаешь веб-сайт на HTML + CSS;
- Реализуешь функционал на JavaScript;
- Используешь фронтенд-фреймворк Angular;
- Подключишь Backend и загрузишь сайт на хостинг.
В итоге ты сверстаешь качественный сайт, который не стыдно добавить в портфолио или продать, освоишь азы работы с фреймворком Angular и получишь море бесценного опыта в вёрстке сайтов.
Ухватить бесплатно такой ценный материал можешь по ссылке
👉 Frontend Start
После подтверждения участия мы вышлем тебе в подарок чек-лист: «45 мест для поиска работы», где собраны все ресурсы, на которых разработчики находят работу в престижных IT-компаниях.
Стартуем 15 февраля.
Организовали для тебя бесплатный онлайн-интенсив по frontend-разработке с практикой, обратной связью и куратором.
За 7 дней ты:
- Сверстаешь веб-сайт на HTML + CSS;
- Реализуешь функционал на JavaScript;
- Используешь фронтенд-фреймворк Angular;
- Подключишь Backend и загрузишь сайт на хостинг.
В итоге ты сверстаешь качественный сайт, который не стыдно добавить в портфолио или продать, освоишь азы работы с фреймворком Angular и получишь море бесценного опыта в вёрстке сайтов.
Ухватить бесплатно такой ценный материал можешь по ссылке
👉 Frontend Start
После подтверждения участия мы вышлем тебе в подарок чек-лист: «45 мест для поиска работы», где собраны все ресурсы, на которых разработчики находят работу в престижных IT-компаниях.
Стартуем 15 февраля.
👍4❤🔥1🔥1
Все Web API в одном месте 🧑🎓
Накопал для тебя сайтик, где собраны все Web API с удобным графическим описанием (цвета и значки всякие😄 )
https://webapicheck.com/
P.S. если какого-то не хватает, то ты можешь законтрибьютить на гитхабе
Накопал для тебя сайтик, где собраны все Web API с удобным графическим описанием (цвета и значки всякие
https://webapicheck.com/
P.S. если какого-то не хватает, то ты можешь законтрибьютить на гитхабе
Please open Telegram to view this post
VIEW IN TELEGRAM
👍16❤2❤🔥1🔥1
Не успел(а) подготовить подарок к 14 февраля?? Я тебя спасу 😎
Мы ж фронтендеры, поэтому нужно решать проблему по своему!
Накопал на гитхабе для тебя два сайтиков-проектов, в которых нужно поменять лишь текст, а всё остальное уже готово
1. My Love Story — Demo
2. Valentine's Wish — Demo
Мы ж фронтендеры, поэтому нужно решать проблему по своему!
Накопал на гитхабе для тебя два сайтиков-проектов, в которых нужно поменять лишь текст, а всё остальное уже готово
1. My Love Story — Demo
2. Valentine's Wish — Demo
Please open Telegram to view this post
VIEW IN TELEGRAM
GitHub
GitHub - Germey/ValentinesDay: My LOVE
My LOVE. Contribute to Germey/ValentinesDay development by creating an account on GitHub.
❤🔥13👍6🤮2🔥1
Что нового в Lighthouse 10? 🧑🎓
Читаем и берём на заметочку, господа погромисты
https://habr.com/ru/post/717476/
Читаем и берём на заметочку, господа погромисты
https://habr.com/ru/post/717476/
Please open Telegram to view this post
VIEW IN TELEGRAM
Хабр
Что нового в Lighthouse 10
Эта статья — перевод оригинальной статьи " What's new in Lighthouse 10 " Также я веду телеграм канал “ Frontend по-флотски ”, где рассказываю про интересные вещи из мира разработки интерфейсов....
👍5🔥3❤🔥1👨💻1
Media is too big
VIEW IN TELEGRAM
React обогнал Vue по звёздочкам на гитхабе 🧐
Начиная с 2019го года Vue держался на первом месте по звёздочкам на гитхабе среди JavaScript фреймворков, сегодня ситуация поменялась🤯
В связи с этим событием, зацените исторический таймлайн звёздочек на гитхабе у JavaScript фреймворков
Начиная с 2019го года Vue держался на первом месте по звёздочкам на гитхабе среди JavaScript фреймворков, сегодня ситуация поменялась
В связи с этим событием, зацените исторический таймлайн звёздочек на гитхабе у JavaScript фреймворков
Please open Telegram to view this post
VIEW IN TELEGRAM
🤯20👍7❤4👎2😱2😢2🔥1🤮1💩1
Пора снимать видосики?
Около месяца назад у меня появилась камера и микрофончик с пушинкой, вот я и задумался снять что-то для тебя, моя любимая макарошка🫡
Создал канал и решил собрать интерес, как будет 100 подписчиков, то считаю, что интерес собран и начинаю пилить контент🤩
https://www.youtube.com/@frontend-pasta
А пока отпиши какой контент ты хотел бы видеть на канале👨💻
Около месяца назад у меня появилась камера и микрофончик с пушинкой, вот я и задумался снять что-то для тебя, моя любимая макарошка
Создал канал и решил собрать интерес, как будет 100 подписчиков, то считаю, что интерес собран и начинаю пилить контент
https://www.youtube.com/@frontend-pasta
А пока отпиши какой контент ты хотел бы видеть на канале
Please open Telegram to view this post
VIEW IN TELEGRAM
❤5🔥3🤯2❤🔥1💩1
Что такое Style Queries? 🧑🎓
Новая переведённая статейка от Уны Кравец (работает в Google Chrome)
https://habr.com/ru/post/718930/
Новая переведённая статейка от Уны Кравец (работает в Google Chrome)
https://habr.com/ru/post/718930/
Please open Telegram to view this post
VIEW IN TELEGRAM
Хабр
Что такое Style Queries?
Эта статья — перевод оригинальной статьи " Getting Started with Style Queries " Также я веду телеграм канал “ Frontend по-флотски ”, где рассказываю про интересные вещи из мира разработки интерфейсов....
👍8🔥4❤🔥1💩1
@layer что за покемон такой CSS
@layer поможет тебе не переживать о проблемах специфичности стилей, разделяя стили на слои (в блоке @layer {}) ты можешь управлять специфичностью конкретного слоя меняя их местами или написать их порядок в строчку @layer myFirstLayer, mySecondLayer и т.д.Он достиг уже 90% поддержки на caniuse и теперь его уже можно начинать использовать в свои проектиках
Документация MDN
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12🔥5❤2❤🔥1💩1
Вспомни про Svelte и глянь как там всё просто в сравнении с реактом
https://react-hooks-in-svelte.vercel.app/
Как думаешь войдёт ли он в топ 3?
https://react-hooks-in-svelte.vercel.app/
Как думаешь войдёт ли он в топ 3?
👍21🤡16❤1💩1
Что нового в 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
— Добавили View Transitions API
— CSS Color Level 4 и devtools для них
— В CSS добавлены тригонометрические функции
— Расширен n-child псевдокласс
Впервые решил сделать перевод апдейта, зацени и прочитай на русском языке
https://habr.com/ru/post/721292/
Видео апдейта на английском
https://www.youtube.com/watch?v=cscwgzz85Og
Please open Telegram to view this post
VIEW IN TELEGRAM
Хабр
Что нового в Chrome 111?
Эта статья — перевод оригинальной статьи " New in Chrome 111 " Также я веду телеграм канал “ Frontend по-флотски ”, где рассказываю про интересные вещи из мира разработки интерфейсов. Вступление Я...
🔥10👍5❤🔥2❤1👏1💩1
Полное понимание асинхронности в браузере от Яндекса 🔥
https://habr.com/ru/company/yandex/blog/718084/
https://habr.com/ru/company/yandex/blog/718084/
Please open Telegram to view this post
VIEW IN TELEGRAM
Хабр
Полное понимание асинхронности в браузере
Про асинхронность JavaScript написано много статей, документации и книг. Но вся информация сильно распределена по интернету, поэтому сложно быстро и полностью разобраться, что к чему, и составить...
🔥13❤🔥4👍3💩1
Frontend по-флотски 👨💻
Совет по CSS из будущего 🧑🎓 Анимация на чистом CSS благодаря animation-timeline:scroll(root) и CSS, который позволяет делать анимашку на основе скролла Пока что экспериментальная фича, не для продакшена ⛔️ Кодпен 👇 https://codepen.io/jh3y/pen/RwBRyzb
This media is not supported in your browser
VIEW IN TELEGRAM
Снова магия на чистом CSS 🧑🎓
CSS свойство animation-timeline: scroll() творит чудеса и позволяет избавиться от ненужного JS кода
CodePen
CSS свойство animation-timeline: scroll() творит чудеса и позволяет избавиться от ненужного JS кода
CodePen
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥30👍7❤2❤🔥1💩1
Бесплатный онлайн-фестиваль про AI-разработку от организаторов HolyJS 🧑🎓
Начало — 1 апреля в 11:00 GMT+3
Тема фестиваля — искусственный интеллект. А точнее, его использование в разработке и повседневной жизни. Будут и AI, и ML, и всё вокруг этого.
Там ты можешь узнать: как майнить клубнику, как писать виртуальные портреты маслом, как заставить ChatGPT делать аналитику
Программа еще в процессе, поэтому интересности ещё появятся
Читай подробности и регайся тут
Начало — 1 апреля в 11:00 GMT+3
Тема фестиваля — искусственный интеллект. А точнее, его использование в разработке и повседневной жизни. Будут и AI, и ML, и всё вокруг этого.
Там ты можешь узнать: как майнить клубнику, как писать виртуальные портреты маслом, как заставить ChatGPT делать аналитику
Программа еще в процессе, поэтому интересности ещё появятся
Читай подробности и регайся тут
Please open Telegram to view this post
VIEW IN TELEGRAM
TechTrain 2024 Spring. Фестиваль по профессиональному росту в IT
TechTrain 2024 Spring — фестиваль по профессиональному росту в IT. О том, как пройти путь Junior → Middle → Senior и выбрать направление своего развития.
👍3🔥3❤🔥2👎1💩1🤗1
Приглашаем на Samokat.tech Meetup — безопасность, Next JS и микрофронтенды
Когда — 24 марта (пятница), 18:00 (по Мск)
Где — Москва, Старт Хаб на Красном Октябре и онлайн-трансляция
Рассказываем, как устроена технологическая сторона ритейла реального времени:
1️⃣ Путь к безопасному фронтенду. Через велосипеды к комплексной системе анализа кода – Олег Коровин, руководитель веб-разработки, Samokat.tech Быстрая доставка
2️⃣ Микрофронты: the way out monolith – Данил Чушко, ведущий специалист клиентской разработки, Samokat.tech Маркетплейс
3️⃣ Как устроена стилизация в контексте Next.js 13 и серверных компонентов – Даниил Трофимов, разработчик интерфейсов, СберМаркет
Регистрируйтесь и приходите в гости! 🖖
Когда — 24 марта (пятница), 18:00 (по Мск)
Где — Москва, Старт Хаб на Красном Октябре и онлайн-трансляция
Рассказываем, как устроена технологическая сторона ритейла реального времени:
1️⃣ Путь к безопасному фронтенду. Через велосипеды к комплексной системе анализа кода – Олег Коровин, руководитель веб-разработки, Samokat.tech Быстрая доставка
2️⃣ Микрофронты: the way out monolith – Данил Чушко, ведущий специалист клиентской разработки, Samokat.tech Маркетплейс
3️⃣ Как устроена стилизация в контексте Next.js 13 и серверных компонентов – Даниил Трофимов, разработчик интерфейсов, СберМаркет
Регистрируйтесь и приходите в гости! 🖖
🔥4👍2❤1💩1
This media is not supported in your browser
VIEW IN TELEGRAM
Наши потомки будут делать бургер меню в 3 строчки 🤯
Мы сейчас о таком мечтать не можем, но если включить флаг "Experimental Web Platform Features" в Chrome Canary, то можно заглянуть в счастливое будущее
Вот как можно будет реализовать бургер меню:
HTML:
Мы сейчас о таком мечтать не можем, но если включить флаг "Experimental Web Platform Features" в Chrome Canary, то можно заглянуть в счастливое будущее
Вот как можно будет реализовать бургер меню:
HTML:
<button popovertarget="nav"></button>CSS:
<nav popover id="nav"></nav>
body:has([id=nav]:open) {translate:-220px 0;}
CodePen (работает только в Chrome Canary с флагом экспериментальных фич)Please open Telegram to view this post
VIEW IN TELEGRAM
🔥19👍3🤔3🤯3🤣3❤1❤🔥1💩1