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

Контакт: @qmzik

Про жизнь: @nikita_alena_travel
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
Совет по CSS из будущего 🧑‍🎓

Ты когда-нибудь хотел больше контролировать стили :first-letter в тексте? Что ж, initial-letter позволит тебе это сделать! 👏

Пока что экспериментальная фича, не для продакшена, работает только в Chrome Canary ⛔️

MDN документация
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥10❤‍🔥21👍1
Делай фейки как профи с fakerjs 🧑‍🎓

Faker
— библиотека, которая генерирует фейковые (но адекватные) данные, которые можно использовать для таких вещей, как:

1. Юнит и перфоманс тесты
2. Создание демок
3. Билдинг проекта без бэкенда

https://fakerjs.dev/
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11❤‍🔥11🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Зуминг фото на чистом CSS в пару строчек 🔥

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% !
👎5👍3🔥2💩2
Вышел 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