CSS :autofill селектор 🤪
Тебе когда-нибудь приходилось бороться с нативной браузерной автоподстановкой текста в инпутах?
Если твой ответ да, то тогда ты познал эту боль😔
Лови лёгкий обезбол от этой головной боли🔥
https://habr.com/ru/post/695194/
Тебе когда-нибудь приходилось бороться с нативной браузерной автоподстановкой текста в инпутах?
Если твой ответ да, то тогда ты познал эту боль
Лови лёгкий обезбол от этой головной боли
https://habr.com/ru/post/695194/
Please open Telegram to view this post
VIEW IN TELEGRAM
Хабр
CSS :autofill селектор
Эта статья — перевод оригинальной статьи Sunkanmi Fafowora " :autofill " Также я веду телеграм канал “ Frontend по-флотски ”, где рассказываю про интересные вещи из мира разработки интерфейсов....
👍6❤🔥3🔥2👏1💋1
Вышел Safari 16.1 🧐
Я что-то эгоистично игнорил апдейты Webkit и Safari, буду исправляться
Вернёмся на версию назад и глянем, что было в Safari 16.0:
1. Container Queries
2. Subgrid
3. Улучшение инспектора для флексбокса и разработки расширений
4. CSS offset-path
5. Overscroll Behavior
6. Shared Workers
7. ShadowRealm API
8. media query: resolution
9. CSS :has() селектор
10. text-align-last
11. animation-composition
12. Улучшение работы display: contents
Что всё-таки нового в Safari 16.1?
1.Web Push для macOS Ventura (их реально не было? Я что-то не в курсах)
2. Анимированные AVIF картинки
3. Passkeys
4. Scroll to Text Fragment
5. Улучшение захвата экрана
6. Пара улучшение для iPadOS
Подробнее тут
Я что-то эгоистично игнорил апдейты Webkit и Safari, буду исправляться
Вернёмся на версию назад и глянем, что было в Safari 16.0:
1. Container Queries
2. Subgrid
3. Улучшение инспектора для флексбокса и разработки расширений
4. CSS offset-path
5. Overscroll Behavior
6. Shared Workers
7. ShadowRealm API
8. media query: resolution
9. CSS :has() селектор
10. text-align-last
11. animation-composition
12. Улучшение работы display: contents
Что всё-таки нового в Safari 16.1?
1.Web Push для macOS Ventura (их реально не было? Я что-то не в курсах)
2. Анимированные AVIF картинки
3. Passkeys
4. Scroll to Text Fragment
5. Улучшение захвата экрана
6. Пара улучшение для iPadOS
Подробнее тут
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥4❤🔥1
Осенняя конференция для JavaScript-разработчиков HolyJS 🧑🎓
🌐 10–11 ноября — онлайн
👥 20 ноября — офлайн (Москва)
Как разрабатывать сложные веб-приложения для дисплеев с высокой частотой обновления? Или как можно строить приложение любой сложности на основе библиотеки в два килобайта и как правильные абстракции могут уменьшать сложность кода? Ответы на эти вопросы и не только — на HolyJS!
Программа конференции почти готова🔥
Если ты хочешь на несколько часов отвлечься и побыть среди единомышленников, то приходи на HolyJS.
Подробности и билеты — holyjs.ru
P.S. промокод
🌐 10–11 ноября — онлайн
👥 20 ноября — офлайн (Москва)
Как разрабатывать сложные веб-приложения для дисплеев с высокой частотой обновления? Или как можно строить приложение любой сложности на основе библиотеки в два килобайта и как правильные абстракции могут уменьшать сложность кода? Ответы на эти вопросы и не только — на HolyJS!
Программа конференции почти готова
Если ты хочешь на несколько часов отвлечься и побыть среди единомышленников, то приходи на HolyJS.
Подробности и билеты — holyjs.ru
P.S. промокод
frontendpasta2022JRGpc даст скидку от 20% на билеты из категории «Для частных лиц».Please open Telegram to view this post
VIEW IN TELEGRAM
HolyJS 2023 Autumn. Конференция для JavaScript‑разработчиков
Расписание — HolyJS 2023 Autumn. Конференция для JavaScript‑разработчиков
Расписание конференции HolyJS 2023 Autumn.
❤🔥5👍3🔥2🤮1
Самое главное с Next Conf 2022 🤓
Команда Vercel анонсировали Next.js 13 с кучей апдейтов
Один из самых ярких и спорных (имхо) это переход с вебпака на новый аналог Turbopack
Чекай запись этого доклада по ссылке ниже, а я обещаю, что сделаю перевод полного ченжлога на следующей неделе😊
https://youtu.be/NiknNI_0J48
Команда Vercel анонсировали Next.js 13 с кучей апдейтов
Один из самых ярких и спорных (имхо) это переход с вебпака на новый аналог Turbopack
Чекай запись этого доклада по ссылке ниже, а я обещаю, что сделаю перевод полного ченжлога на следующей неделе
https://youtu.be/NiknNI_0J48
Please open Telegram to view this post
VIEW IN TELEGRAM
YouTube
Next.js Conf Keynote: Introducing Next.js 13 and Turbopack
Watch the keynote from Next.js Conf 2022 live from San Francisco.
◆ http://nextjs.org/13
◆ https://vercel.com/blog/turbopack
◆ https://vercel.com/blog/vercel-acquires-splitbee
◆ http://nextjs.org/13
◆ https://vercel.com/blog/turbopack
◆ https://vercel.com/blog/vercel-acquires-splitbee
👍7🔥2❤🔥1❤1
This media is not supported in your browser
VIEW IN TELEGRAM
CSS offset-path — топ штука для анимации 🔥
Совсем недавно вышел Safari 16, он добавил поддержку offset-path, таким образом сейчас все современные версии браузеров поддерживают это свойство и вполне можно начинать его юзать в своих проектиках (если твоя целевая аудитория не динозавры🙏 )
Пока что лучше всего поддерживается только функция🏋️♀️
https://codepen.io/danwilson/details/MWErdKL
Совсем недавно вышел Safari 16, он добавил поддержку offset-path, таким образом сейчас все современные версии браузеров поддерживают это свойство и вполне можно начинать его юзать в своих проектиках (если твоя целевая аудитория не динозавры
Пока что лучше всего поддерживается только функция
path()
Чекай пример ниже, поймёшь, что всё супер просто https://codepen.io/danwilson/details/MWErdKL
Please open Telegram to view this post
VIEW IN TELEGRAM
❤🔥9👍4🔥2
Как быстро открывать девтулзы в хроме? 🤭
Я думаю для многих не секрет, что девтулзы можно открыть через кнопочку F12👏
Кто-то скажет, что мне этого достаточно и перестанет читать, но для тебя любопытного напишу ещё пару вариантов, удобнее чем F12
Открыть вкладку JavaScript консоль:
MacOS:
MacOS:
MacOS:
Я думаю для многих не секрет, что девтулзы можно открыть через кнопочку F12
Кто-то скажет, что мне этого достаточно и перестанет читать, но для тебя любопытного напишу ещё пару вариантов, удобнее чем F12
Открыть вкладку JavaScript консоль:
MacOS:
Cmd + Option + J
Windows: Ctrl + Shift + J
Открыть вкладку Elements с уже выбранным селектором элементов:MacOS:
Cmd + Option + C
Windows: Ctrl + Shift + C
Открыть последнюю открытую вкладку:MacOS:
Cmd + Option + I
Windows: Ctrl + Shift + IPlease open Telegram to view this post
VIEW IN TELEGRAM
👍13🔥2❤🔥1❤1🤮1
Бесплатный Community Day HolyJS 2022 Autumn — 11 ноября, онлайн 🔥
Community Day — это второй день конференции HolyJS 2022 Autumn со свободным доступом для всех желающих.
На Community Day такая же насыщенная программа, как и в другие дни конференции. Там будут:
✔️ 7️⃣ докладов с дискуссиями
✔️ 2️⃣ воркшопа: улучшаем доступность маркетплейса для незрячих и пишем игру на React
✔️ BoF-сессия про микрофронтенды
Бесплатная регистрация — holyjs.ru
Community Day — это второй день конференции HolyJS 2022 Autumn со свободным доступом для всех желающих.
На Community Day такая же насыщенная программа, как и в другие дни конференции. Там будут:
✔️ 7️⃣ докладов с дискуссиями
✔️ 2️⃣ воркшопа: улучшаем доступность маркетплейса для незрячих и пишем игру на React
✔️ BoF-сессия про микрофронтенды
Бесплатная регистрация — holyjs.ru
🔥5❤2👍2
JetBrains Aqua Preview — IDE для тестирования 🧑🎓
Знаю, что не совсем в тему, но эта штука стоит внимания!
Видосик с фичами
https://www.youtube.com/watch?v=z7Yjl2Agrwg
Статья из блога JetBrains
https://blog.jetbrains.com/qa/2022/11/introducing-aqua-a-powerful-ide-for-test-automation-by-jetbrains/
Знаю, что не совсем в тему, но эта штука стоит внимания!
Видосик с фичами
https://www.youtube.com/watch?v=z7Yjl2Agrwg
Статья из блога JetBrains
https://blog.jetbrains.com/qa/2022/11/introducing-aqua-a-powerful-ide-for-test-automation-by-jetbrains/
Please open Telegram to view this post
VIEW IN TELEGRAM
YouTube
JetBrains Aqua Preview
Introducing Aqua - A Powerful IDE for Test Automation by JetBrains!
Check out the Aqua product page: https://jb.gg/AquaProductPage
You can download the latest preview build here: https://jb.gg/AquaDownload
Please tell us what you think about JetBrains Aqua…
Check out the Aqua product page: https://jb.gg/AquaProductPage
You can download the latest preview build here: https://jb.gg/AquaDownload
Please tell us what you think about JetBrains Aqua…
👍6🔥3❤1
Что нового в Next.js 13?
Моё обещание задержалось на недельку, но главное сдержалось, и статья получилась очень полезной😊
Бегом читать🧑🎓 🧑🎓 🧑🎓
https://habr.com/ru/post/698966/
Моё обещание задержалось на недельку, но главное сдержалось, и статья получилась очень полезной
Бегом читать
https://habr.com/ru/post/698966/
Please open Telegram to view this post
VIEW IN TELEGRAM
Хабр
Что нового в Next.js 13?
Эта статья — перевод оригинальной статьи " Next.js 13 " Также я веду телеграм канал “ Frontend по-флотски ”, где рассказываю про интересные вещи из мира разработки интерфейсов. Новая директория app...
👍11🔥4❤🔥2❤2
This media is not supported in your browser
VIEW IN TELEGRAM
Nuxt 3.0 теперь stable 😇
Команда Nuxt наконец-то сделала релиз с пометкой stable, грац друзья🔥 🔥 🔥
Немного подробнее по ссылке ниже
https://nuxt.com/v3
Команда Nuxt наконец-то сделала релиз с пометкой stable, грац друзья
Немного подробнее по ссылке ниже
https://nuxt.com/v3
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10❤9🔥4💩3❤🔥2
Что нового в Angular v15? 🧑🎓
Вышла новая мажорная версия, изменений много, брейкинг ченжей мало😍
https://habr.com/ru/post/701334/
Вышла новая мажорная версия, изменений много, брейкинг ченжей мало
https://habr.com/ru/post/701334/
Please open Telegram to view this post
VIEW IN TELEGRAM
Хабр
Что нового в Angular v15?
Эта статья — перевод оригинальной статьи " Angular v15 is now available! " Также я веду телеграм канал “ Frontend по-флотски ”, где рассказываю про интересные вещи из мира разработки интерфейсов....
👍3🔥3❤🔥2
Все самое необходимое для Pinia собрано в одном месте 🏖️
Сохрани эту памятку Pinia, чтобы всегда иметь под рукой важную информацию🧑🎓
Про Pinia можно почитать тут
Сохрани эту памятку Pinia, чтобы всегда иметь под рукой важную информацию
Про Pinia можно почитать тут
Please open Telegram to view this post
VIEW IN TELEGRAM
👍13❤4❤🔥2🔥2🥱1
Привет, это HTML Academy!
Принесли вам скидку 50% на чёрную пятницу — это отличная возможность самостоятельно научиться веб-разработке и сменить профессию.
Если интересно — оставьте заявку по ссылке и мы с вами свяжемся.
Принесли вам скидку 50% на чёрную пятницу — это отличная возможность самостоятельно научиться веб-разработке и сменить профессию.
Если интересно — оставьте заявку по ссылке и мы с вами свяжемся.
🤮3❤🔥2👍2👎2🔥1
Frontend по-флотски 👨💻
Пишу фуллстэк Pet-project — мои технологии 🚽 На выходных решил написать маленький фуллстэк проектик и задался вопросом по поводу дев стэка Frontend 💃 1. Фреймворк — тут я особо не выбирал, так как в голове сразу был Next или Nuxt, но выбрал Next просто из…
Supabase за 100 секунд 🫡
Не так давно я писал про свой пет-прожект с использованием Supabase, нашёл для тебе краткий видосик про эту штуку🧑🎓
https://www.youtube.com/watch?v=zBZgdTb-dns
Не так давно я писал про свой пет-прожект с использованием Supabase, нашёл для тебе краткий видосик про эту штуку
https://www.youtube.com/watch?v=zBZgdTb-dns
Please open Telegram to view this post
VIEW IN TELEGRAM
Supabase
Supabase | The Postgres Development Platform.
Build production-grade applications with a Postgres database, Authentication, instant APIs, Realtime, Functions, Storage and Vector embeddings. Start for free.
❤3👍3🤔2❤🔥1🔥1
Что за магия у Svelte? 📈
Каким-то образом, Svelte обогнал по скачивания в ноябре Vue, Angular и стремительно догоняет React🤯
Как думаешь, в чём причина?🤨
Каким-то образом, Svelte обогнал по скачивания в ноябре Vue, Angular и стремительно догоняет React
Как думаешь, в чём причина?
Please open Telegram to view this post
VIEW IN TELEGRAM
🤯12💩5🔥3😁2🥰1🤔1
6 декабря в Айтилогии стартует 7-дневный бесплатный интенсив по frontend-разработке, на котором ты с нуля без знаний создашь фронтенд-проект на Angular 🔥
На интенсиве ты:
– Сверстаешь лендинг на HTML + CSS
– Реализуешь функционал на JavaScript
– Используешь фронтенд-фреймворк Angular
– Подключишь Backend и загрузишь сайт на хостинг
🎁 Будет общий чат, проверка домашек от экспертов, различные бонусы!
А в конце автор подарит своё резюме Senior-разработчика, с помощью которого устроился на ЗП 3500$
Первые 100 мест бесплатно, потом 6 990 руб. Не упусти👇🏻
Frontend Start
На интенсиве ты:
– Сверстаешь лендинг на HTML + CSS
– Реализуешь функционал на JavaScript
– Используешь фронтенд-фреймворк Angular
– Подключишь Backend и загрузишь сайт на хостинг
🎁 Будет общий чат, проверка домашек от экспертов, различные бонусы!
А в конце автор подарит своё резюме Senior-разработчика, с помощью которого устроился на ЗП 3500$
Первые 100 мест бесплатно, потом 6 990 руб. Не упусти👇🏻
Frontend Start
👎4🔥3👍2❤1
Релиз Chrome 108 🔥
Что нового дал нам релиз?
— Новые динамичные переменные для вьюпорта (dvw, dvh, dvi, dvb, dvmin, dvmax) - топ штука и мастхев в следующих проекта
— Шрифты с переменными теперь поддерживаются в COLRv1
— Методы
Смотреть подробнее
Читать подробнее
Что нового дал нам релиз?
— Новые динамичные переменные для вьюпорта (dvw, dvh, dvi, dvb, dvmin, dvmax) - топ штука и мастхев в следующих проекта
— Шрифты с переменными теперь поддерживаются в COLRv1
— Методы
FileSystemSyncAccessHandle стали синхроннымиСмотреть подробнее
Читать подробнее
Please open Telegram to view this post
VIEW IN TELEGRAM
YouTube
New in Chrome 108: New viewport size units, COLRv1 support for variable fonts, and more!
Chrome 108 is rolling out now! It is easier to create adaptive UIs with new viewport size units.Color vector fonts now include support for variable fonts. The methods in the interface FileSystemSyncAccessHandle, part of the file system Access API, are now…
🔥5❤🔥2👍2
Бесплатный онлайн митап для фронтендеров 🤓
Тема: "Дизайн-система: подходы к организации и поддержке"
Время: 8 декабря в 18:00 (GMT+3)
https://superjob-it-meetup.timepad.ru/event/2253648/
Тема: "Дизайн-система: подходы к организации и поддержке"
Время: 8 декабря в 18:00 (GMT+3)
https://superjob-it-meetup.timepad.ru/event/2253648/
Please open Telegram to view this post
VIEW IN TELEGRAM
superjob-it-meetup.timepad.ru
Дизайн-система: подходы к организации и поддержке / События на TimePad.ru
8 декабря в 18:00 (по Москве) состоится онлайн-митап SuperJob Tech Experience. Обсудим главные вопросы вокруг дизайн-систем, а также поделимся опытом их построения и сопровождения. В программе: доклады и дискуссия SuperJob, Skyeng, Ростелеком и Контур.
❤2🔥2❤🔥1👍1
Обзор 2022 года от Google Chrome 🥳
Давай немного остановимся и глянем, что нового появилось за этот год и, соответственно, большинство из этого можно будет уже юзать в продакшене в 2023
https://www.youtube.com/watch?v=W9O4CuSUKb8
Давай немного остановимся и глянем, что нового появилось за этот год и, соответственно, большинство из этого можно будет уже юзать в продакшене в 2023
https://www.youtube.com/watch?v=W9O4CuSUKb8
Please open Telegram to view this post
VIEW IN TELEGRAM
YouTube
2022 year in review!
What a year! Check out the progress we made together on the web from new features landing across all browsers to the latest tools and guidance.
Read the year end edition of Chrome Dev Insider featuring Parisa Tabriz, VP of Chrome → https://goo.gle/3j3ivWC…
Read the year end edition of Chrome Dev Insider featuring Parisa Tabriz, VP of Chrome → https://goo.gle/3j3ivWC…
❤3👍2🔥2❤🔥1
Станьте востребованным фронтенд-разработчиком уже в 2023 году. Сделайте шаг в новую жизнь прямо сейчас.
Записывайтесь на курс от Хекслета и получайте скидку 10% и подарок на выбор: депозит 20 000 ₽, базовая подписка на 5 месяцев или премиум-подписка на 1 месяц.
Вы также можете порадовать не только себя, но и близкого человека. Воспользуйтесь уникальным предложением для двоих: купите вторую профессию со скидкой 40%.
На профессии «Фронтенд-разработчик» вы:
✔️Изучите JavaScript в связке с HTML и CSS и освоите React для создания сложных компонентов, которые легко поддерживать и использовать повторно.
✔️Решите более 420 задач в браузере и создадите 4 проекта для портфолио на GitHub и выполните 150 тестовых заданий от наших партнёров.
✔️Научитесь работать с чужим кодом и оформлять пул-реквесты в Open Sours проектах.
Оцените формат и решите, стоит ли продолжать. Вводные ознакомительные курсы профессии доступны бесплатно сразу после регистрации!
Шагните в новую профессию. Успейте оставить заявку до 31 декабря, чтобы получить новогодние подарки.
Записывайтесь на курс от Хекслета и получайте скидку 10% и подарок на выбор: депозит 20 000 ₽, базовая подписка на 5 месяцев или премиум-подписка на 1 месяц.
Вы также можете порадовать не только себя, но и близкого человека. Воспользуйтесь уникальным предложением для двоих: купите вторую профессию со скидкой 40%.
На профессии «Фронтенд-разработчик» вы:
✔️Изучите JavaScript в связке с HTML и CSS и освоите React для создания сложных компонентов, которые легко поддерживать и использовать повторно.
✔️Решите более 420 задач в браузере и создадите 4 проекта для портфолио на GitHub и выполните 150 тестовых заданий от наших партнёров.
✔️Научитесь работать с чужим кодом и оформлять пул-реквесты в Open Sours проектах.
Оцените формат и решите, стоит ли продолжать. Вводные ознакомительные курсы профессии доступны бесплатно сразу после регистрации!
Шагните в новую профессию. Успейте оставить заявку до 31 декабря, чтобы получить новогодние подарки.
👍2🔥1
HTML inert — зачем он? 🧑🎓
Атрибут inert заставляет браузер «игнорировать» события пользовательского ввода, включая события фокуса. Браузер также может игнорировать поиск по странице и выделение текста в элементе. Это может быть полезно при создании модалок, где ты хочешь сделать фокус внутри модалки, когда она активна
Нифига не понял? Тогда лучше чекни ссылки ниже🤪
MDN дока
Смотреть видео
Атрибут inert заставляет браузер «игнорировать» события пользовательского ввода, включая события фокуса. Браузер также может игнорировать поиск по странице и выделение текста в элементе. Это может быть полезно при создании модалок, где ты хочешь сделать фокус внутри модалки, когда она активна
Нифига не понял? Тогда лучше чекни ссылки ниже
MDN дока
Смотреть видео
Please open Telegram to view this post
VIEW IN TELEGRAM
MDN Web Docs
HTMLElement: inert property - Web APIs | MDN
The HTMLElement property inert reflects the value of the element's inert attribute. It is a boolean value that, when present, makes the browser "ignore" user input events for the element, including focus events and events from assistive technologies. The…
👍7🔥4❤🔥3❤1