This media is not supported in your browser
VIEW IN TELEGRAM
Совет по CSS из будущего 🧑🎓
Ты когда-нибудь хотел больше контролировать стили :first-letter в тексте? Что ж,👏
Пока что экспериментальная фича, не для продакшена, работает только в Chrome Canary⛔️
MDN документация
Ты когда-нибудь хотел больше контролировать стили :first-letter в тексте? Что ж,
initial-letter позволит тебе это сделать! Пока что экспериментальная фича, не для продакшена, работает только в Chrome Canary
MDN документация
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥10❤🔥2❤1👍1
Делай фейки как профи с fakerjs 🧑🎓
Faker — библиотека, которая генерирует фейковые (но адекватные) данные, которые можно использовать для таких вещей, как:
1. Юнит и перфоманс тесты
2. Создание демок
3. Билдинг проекта без бэкенда
https://fakerjs.dev/
Faker — библиотека, которая генерирует фейковые (но адекватные) данные, которые можно использовать для таких вещей, как:
1. Юнит и перфоманс тесты
2. Создание демок
3. Билдинг проекта без бэкенда
https://fakerjs.dev/
Please open Telegram to view this post
VIEW IN TELEGRAM
fakerjs.dev
Generate massive amounts of fake (but reasonable) data for testing and development.
👍11❤🔥1❤1🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Зуминг фото на чистом CSS в пару строчек 🔥
https://codepen.io/jh3y/pen/QWQrVwj
img {
object-view-box: inset(var(--top) ...);
}
:root:has(#car:checked) {
--top: 61%;
...
}
Офигенно 🙈https://codepen.io/jh3y/pen/QWQrVwj
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥24👍3👎2👏2👀2❤🔥1
Сколько нужно времени, чтобы освоить востребованную профессию фронтенд-разработчика?
Всего 10 месяцев! Вы можете совмещать обучение с любым своим занятием. Главное условие - желание. В Xeкслете вы можете пройти онлайн-курс по профессии «Фронтенд-разработчик».
Во время программы вы:
✔️ Изучите JavaScript в связке с HTML и CSS.
✔️ Освоите React для создания сложных компонентов, которые легко поддерживать и использовать повторно.
✔️ Решите более 310 задач в браузере.
✔️ Создадите 4 проекта для портфолио на GitHubВыполните 150 тестовых заданий от наших партнёров.
✔️ Научитесь работать с чужим кодом и оформлять пул-реквесты в Open Source проектах.
Обучение построено так, что его невозможно «отсидеть» или «прослушать». Мы не сторонники подхода «повтори за учителем»: вы будете не просто писать код, а научитесь самостоятельно находить лучшие решения.
📌 Пройдите первые 10 бесплатных уроков из профессии и получите дополнительно скидку 10% !
Всего 10 месяцев! Вы можете совмещать обучение с любым своим занятием. Главное условие - желание. В Xeкслете вы можете пройти онлайн-курс по профессии «Фронтенд-разработчик».
Во время программы вы:
✔️ Изучите JavaScript в связке с HTML и CSS.
✔️ Освоите React для создания сложных компонентов, которые легко поддерживать и использовать повторно.
✔️ Решите более 310 задач в браузере.
✔️ Создадите 4 проекта для портфолио на GitHubВыполните 150 тестовых заданий от наших партнёров.
✔️ Научитесь работать с чужим кодом и оформлять пул-реквесты в Open Source проектах.
Обучение построено так, что его невозможно «отсидеть» или «прослушать». Мы не сторонники подхода «повтори за учителем»: вы будете не просто писать код, а научитесь самостоятельно находить лучшие решения.
📌 Пройдите первые 10 бесплатных уроков из профессии и получите дополнительно скидку 10% !
👎5👍3🔥2💩2
Please open Telegram to view this post
VIEW IN TELEGRAM
Хабр
Делаем свернутый контент доступным с помощью hidden=until-Found
Эта статья — перевод оригинальной статьи " Making collapsed content accessible with hidden=until-found " Также я веду телеграм канал “ Frontend по-флотски ”, где рассказываю про интересные вещи из...
🔥9👍2❤🔥1
Вышел Safari 16.3 🫡
Что там нового?
Да нифига там нового, куча всяких минорных фиксов и добавлена поддержка директивы prefetch-src😂
Для тех кто хочет подробнее: https://webkit.org/blog/13691/webkit-features-in-safari-16-3/
Что там нового?
Да нифига там нового, куча всяких минорных фиксов и добавлена поддержка директивы prefetch-src
Для тех кто хочет подробнее: https://webkit.org/blog/13691/webkit-features-in-safari-16-3/
Please open Telegram to view this post
VIEW IN TELEGRAM
MDN Web Docs
Content-Security-Policy: prefetch-src directive - HTTP | MDN
The HTTP Content-Security-Policy (CSP)
prefetch-src directive specifies valid resources that may
be prefetched or prerendered.
prefetch-src directive specifies valid resources that may
be prefetched or prerendered.
🤣7👍5💩2🌚1
Событие scrollEnd стали поддерживать Firefox и Chrome 🔥
Да-да, это именно то событие, которое поможет тебе определить, когда юзер перестал скроллить контент и остановился, уже совсем скоро можно будет заменить этот код:
https://developer.chrome.com/blog/scrollend-a-new-javascript-event/
Да-да, это именно то событие, которое поможет тебе определить, когда юзер перестал скроллить контент и остановился, уже совсем скоро можно будет заменить этот код:
document.onscroll = event => {
clearTimeout(window.scrollEndTimer)
window.scrollEndTimer = setTimeout(callback, 100)
}
На этот:document.onscrollend = event => {…}
Подробнее:https://developer.chrome.com/blog/scrollend-a-new-javascript-event/
Please open Telegram to view this post
VIEW IN TELEGRAM
Chrome for Developers
Scrollend, a new JavaScript event | Blog | Chrome for Developers
Delete your timeout functions and shake off their bugs, here's the event you really need: scrollend.
👍19🔥3❤1❤🔥1
Чем заняться в воскресенье? 🏋️♀️
Конечно же не расслабляться, а решать задачки!
Вот тебе пару сайтиков, где можно их порешать:
1. https://www.hackerrank.com/ — задачки на алгоритмы
2. https://www.frontendmentor.io/ — челенжи именно для фронтендеров
3. https://www.adaface.com/ — задачки и тесты для популярных языков
4. https://www.codewars.com/ — качалка для прогера
5. https://coderbyte.com/ — подготовка к собесу
6. https://www.codingame.com/ — изучаем прогерство играючи
7. https://leetcode.com/ — кодинг и ещё раз кодинг
8. https://www.topcoder.com/ — соло-гейминг для кодеров, качай птс'ы тут, а не в доте
Хорошего тебе воскресенья ❤️
Конечно же не расслабляться, а решать задачки!
Вот тебе пару сайтиков, где можно их порешать:
1. https://www.hackerrank.com/ — задачки на алгоритмы
2. https://www.frontendmentor.io/ — челенжи именно для фронтендеров
3. https://www.adaface.com/ — задачки и тесты для популярных языков
4. https://www.codewars.com/ — качалка для прогера
5. https://coderbyte.com/ — подготовка к собесу
6. https://www.codingame.com/ — изучаем прогерство играючи
7. https://leetcode.com/ — кодинг и ещё раз кодинг
8. https://www.topcoder.com/ — соло-гейминг для кодеров, качай птс'ы тут, а не в доте
Хорошего тебе воскресенья ❤️
Please open Telegram to view this post
VIEW IN TELEGRAM
Hackerrank
HackerRank - Online Coding Tests and Technical Interviews
HackerRank is the market-leading coding test and interview solution for hiring developers. Start hiring at the pace of innovation!
👍16🔥3❤2
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