This media is not supported in your browser
VIEW IN TELEGRAM
Изучаем новую крутую фичу — View Transitions API 🔥
Она позволяет сделать эту демку в пару строчек😎
https://habr.com/ru/post/710276/
Она позволяет сделать эту демку в пару строчек
https://habr.com/ru/post/710276/
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7👍4❤🔥1🐳1
Вышел Chrome 109 🔥
Чего там нового?
— Доступ к Origin Private File System (OPFS) на Android
— Новая единица измерения
— Появилось значение
— Добавлена поддержка MathML Core (штука для вёрстки математических формул), в связи с этим появилось новое значение у
https://www.youtube.com/watch?v=B4_vT99pBaM
https://developer.chrome.com/blog/new-in-chrome-109/
Чего там нового?
— Доступ к Origin Private File System (OPFS) на Android
— Новая единица измерения
lh, которая равна высоте одной строки текста— Появилось значение
auto у свойств font-weight, font-style, font-stretch внутри @font-face, теперь auto является значением по дефолту— Добавлена поддержка MathML Core (штука для вёрстки математических формул), в связи с этим появилось новое значение у
display: math
Подробнееhttps://www.youtube.com/watch?v=B4_vT99pBaM
https://developer.chrome.com/blog/new-in-chrome-109/
Please open Telegram to view this post
VIEW IN TELEGRAM
YouTube
New in Chrome 109: OPFS on Android, new css properties, MathML Core support
Chrome 109 is rolling out now! The Origin Private File System API is now available for Android,
there is a set of new properties in CSS, you can easily add math notations in your HTML with the support for MathML core, and there’s plenty more.
Adriana Jara…
there is a set of new properties in CSS, you can easily add math notations in your HTML with the support for MathML core, and there’s plenty more.
Adriana Jara…
👍10❤2❤🔥1🔥1
Что посмотреть в воскресенье вечером? 👨💻
Как раз проводили старый Новый год, пора и вспомнить старые добрые основы программирования и базовые алгоритмы
Легендарный гарвардский курс CS50 на русском
Алгоритмы сортировки
1. Сортировка пузырьком
2. Сортировка выбором
3. Сортировка вставками
4. Сортировка слиянием
5. Быстрая сортировка
6. Пирамидальная сортировка
Алгоритмы поиска
1. Линейный поиск
2. Двоичный поиск
3. Алгоритм Кнута-Морриса-Пратта
4. Поиск прыжками
5. Экспоненциальный поиск
Как раз проводили старый Новый год, пора и вспомнить старые добрые основы программирования и базовые алгоритмы
Легендарный гарвардский курс CS50 на русском
Алгоритмы сортировки
1. Сортировка пузырьком
2. Сортировка выбором
3. Сортировка вставками
4. Сортировка слиянием
5. Быстрая сортировка
6. Пирамидальная сортировка
Алгоритмы поиска
1. Линейный поиск
2. Двоичный поиск
3. Алгоритм Кнута-Морриса-Пратта
4. Поиск прыжками
5. Экспоненциальный поиск
Please open Telegram to view this post
VIEW IN TELEGRAM
YouTube
Основы программирования: Легендарный Гарвардский курс CS50
Весь курс CS50 - https://javarush.com/s/course_cs50
Первая лекция курса «Основы программирования» https://javarush.com/quests/lectures/questharvardcs50.level00.lecture00
Знаете, как называется самый популярный в мире университетский курс? Это CS50, «Основы…
Первая лекция курса «Основы программирования» https://javarush.com/quests/lectures/questharvardcs50.level00.lecture00
Знаете, как называется самый популярный в мире университетский курс? Это CS50, «Основы…
🔥12👍7❤🔥2👨💻1
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