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

Контакт: @qmzik

Про жизнь: @nikita_alena_travel
Download Telegram
Вышел 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
🤣7👍5💩2🌚1
Событие scrollEnd стали поддерживать Firefox и Chrome 🔥

Да-да, это именно то событие, которое поможет тебе определить, когда юзер перестал скроллить контент и остановился, уже совсем скоро можно будет заменить этот код:

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
👍19🔥31❤‍🔥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/ — соло-гейминг для кодеров, качай птс'ы тут, а не в доте

Хорошего тебе воскресенья ❤️
Please open Telegram to view this post
VIEW IN TELEGRAM
👍16🔥32
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