Frontend по-флотски 👨‍💻
4.51K subscribers
277 photos
61 videos
1 file
534 links
Новости, идеи и знания из мира разработки интерфейсов

Контакт: @qmzik

Про жизнь: @nikita_alena_travel
Download Telegram
CSS color-mix() 🫰

Думаю особо объяснять не надо 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 :)
👍6❤‍🔥2🔥1🤔1😱1🌚1
Вышел Chrome 110 🔥

Что нового?
— Добавлена поддержка псевдокласса :picture-in-picture
— Появилась возможность устанавливать как будет запускаться веб-приложение с помощью launch_handler в manifest файле
— Теперь можно использовать атрибут credentialless в iframe'ах для вставки стороннего контента, у которых нету Cross Origin Embedder Policy

Подробнее:
Читать
Смотреть
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7🔥2❤‍🔥1👏1
Анализ производительности с помощью Chrome DevTools 🧑‍🎓

Перевёл статью про оптимизацию твоего веб-приложения, прочитай, не поленись, не пожалеешь ☺️

https://habr.com/ru/post/715856/
Please open Telegram to view this post
VIEW IN TELEGRAM
❤‍🔥5🔥3👏3
7 дней бесплатного обучения frontend-разработке!

Организовали для тебя бесплатный онлайн-интенсив по 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. если какого-то не хватает, то ты можешь законтрибьютить на гитхабе
Please open Telegram to view this post
VIEW IN TELEGRAM
👍162❤‍🔥1🔥1
Не успел(а) подготовить подарок к 14 февраля?? Я тебя спасу 😎

Мы
ж фронтендеры, поэтому нужно решать проблему по своему!

Накопал на гитхабе для тебя два сайтиков-проектов, в которых нужно поменять лишь текст, а всё остальное уже готово

1. My Love StoryDemo
2. Valentine's WishDemo
Please open Telegram to view this post
VIEW IN TELEGRAM
❤‍🔥13👍6🤮2🔥1
Media is too big
VIEW IN TELEGRAM
React обогнал Vue по звёздочкам на гитхабе 🧐

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

В связи с этим событием, зацените исторический таймлайн звёздочек на гитхабе у JavaScript фреймворков
Please open Telegram to view this post
VIEW IN TELEGRAM
🤯20👍74👎2😱2😢2🔥1🤮1💩1
Пора снимать видосики?

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

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

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

А пока отпиши какой контент ты хотел бы видеть на канале 👨‍💻
Please open Telegram to view this post
VIEW IN TELEGRAM
5🔥3🤯2❤‍🔥1💩1
@layer что за покемон такой 🧑‍🎓

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

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

Документация MDN
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12🔥52❤‍🔥1💩1
Вспомни про Svelte и глянь как там всё просто в сравнении с реактом

https://react-hooks-in-svelte.vercel.app/

Как думаешь войдёт ли он в топ 3?
👍21🤡161💩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
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥10👍5❤‍🔥21👏1💩1
Бесплатный онлайн-фестиваль про AI-разработку от организаторов HolyJS 🧑‍🎓

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

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

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

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

Читай подробности и регайся тут
Please open Telegram to view this post
VIEW IN TELEGRAM
👍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 и серверных компонентов – Даниил Трофимов, разработчик интерфейсов, СберМаркет

Регистрируйтесь и приходите в гости! 🖖
🔥4👍21💩1
This media is not supported in your browser
VIEW IN TELEGRAM
Наши потомки будут делать бургер меню в 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 с флагом экспериментальных фич)
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥19👍3🤔3🤯3🤣31❤‍🔥1💩1