Frontend по-флотски 👨‍💻
4.5K 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
Доброе утро, наткнулся на классную анимашку от команды GSAP, поздравляющую с рождеством

Зацени 🫰
https://codepen.io/GreenSock/pen/wvxaWWK
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥14👍3
С наступающим Новым Годом, погромисты 👨‍💻

Ох, ну и годик у нас вышел тяжёлый, друзья, не могу поверить, что он подходит к концу...

Вчера был последний рабочий день и надеюсь, что все не забыли сделать последние в этом году коммиты, пуши и мерджи, при этом ничего не уронив на проде, дабы спокойненько отдохнуть в праздники 🍾

Паблик временами пустует из-за отсутствия каких-то интересных новостей во фронтенде или отсутствия у меня времени на их поиск, очень хочу исправить это в 2023 году, считайте ставлю себе цель!

Всех с наступающим Новым Год, желаю меньше багов в коде и жизни, и чтобы все ваши мечты компилировались без единой ошибки 🎄🎄🎄
Please open Telegram to view this post
VIEW IN TELEGRAM
23🎉7🍾3🎄3👍1
Команда Vue поздравляет с Новым Годом 😊😊

Vue подводит итоги 2022 года и рассказывает, что ожидать от 2023 года (в праздники совсем не до перевода, извините за мой английский)

https://blog.vuejs.org/posts/2022-year-in-review.html
Please open Telegram to view this post
VIEW IN TELEGRAM
❤‍🔥12👍2🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Совет по CSS из будущего 🧑‍🎓

Анимация на чистом CSS благодаря animation-timeline:scroll(root) и CSS, который позволяет делать анимашку на основе скролла

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

Кодпен 👇
https://codepen.io/jh3y/pen/RwBRyzb
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥17❤‍🔥3👍3
Хейтим JS в этом посте 🤬

Поделись с нами, что ты больше всего ненавидишь в JavaScript и отпиши в комменты🤢

Вот тебе видос настраивающий на хейт
https://www.youtube.com/watch?v=aXOChLn5ZdQ
Please open Telegram to view this post
VIEW IN TELEGRAM
🤣5😁21
Так, давай признавайся как прошёл твой первый рабочий день, дружок 🤨

Я лично еле собрался, кроватка не хотела отпускать меня с утра🤪
Please open Telegram to view this post
VIEW IN TELEGRAM
👍13🥱6🫡5😁3🔥2🤯2👌2🥰1🤨1
This media is not supported in your browser
VIEW IN TELEGRAM
Изучаем новую крутую фичу — View Transitions API 🔥

Она позволяет сделать эту демку в пару строчек 😎

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
— Новая единица измерения 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
👍102❤‍🔥1🔥1
Что посмотреть в воскресенье вечером? 👨‍💻

Как раз проводили старый Новый год, пора и вспомнить старые добрые основы программирования и базовые алгоритмы

Легендарный гарвардский курс CS50 на русском

Алгоритмы сортировки
1. Сортировка пузырьком
2. Сортировка выбором
3. Сортировка вставками
4. Сортировка слиянием
5. Быстрая сортировка
6. Пирамидальная сортировка

Алгоритмы поиска
1. Линейный поиск
2. Двоичный поиск
3. Алгоритм Кнута-Морриса-Пратта
4. Поиск прыжками
5. Экспоненциальный поиск
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥12👍7❤‍🔥2👨‍💻1
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