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

Контакт: @qmzik

Про жизнь: @nikita_alena_travel
Download Telegram
Обзор 2022 года от Google Chrome 🥳

Давай немного остановимся и глянем, что нового появилось за этот год и, соответственно, большинство из этого можно будет уже юзать в продакшене в 2023

https://www.youtube.com/watch?v=W9O4CuSUKb8
Please open Telegram to view this post
VIEW IN TELEGRAM
3👍2🔥2❤‍🔥1
Станьте востребованным фронтенд-разработчиком уже в 2023 году. Сделайте шаг в новую жизнь прямо сейчас.

Записывайтесь на курс от Хекслета и получайте скидку 10% и подарок на выбор: депозит 20 000 ₽, базовая подписка на 5 месяцев или премиум-подписка на 1 месяц.

Вы также можете порадовать не только себя, но и близкого человека. Воспользуйтесь уникальным предложением для двоих: купите вторую профессию со скидкой 40%.

На профессии «Фронтенд-разработчик» вы:

✔️Изучите JavaScript в связке с HTML и CSS и освоите React для создания сложных компонентов, которые легко поддерживать и использовать повторно.

✔️Решите более 420 задач в браузере и создадите 4 проекта для портфолио на GitHub и выполните 150 тестовых заданий от наших партнёров.

✔️Научитесь работать с чужим кодом и оформлять пул-реквесты в Open Sours проектах.

Оцените формат и решите, стоит ли продолжать. Вводные ознакомительные курсы профессии доступны бесплатно сразу после регистрации!

Шагните в новую профессию. Успейте оставить заявку до 31 декабря, чтобы получить новогодние подарки.
👍2🔥1
HTML inert — зачем он? 🧑‍🎓

Атрибут inert заставляет браузер «игнорировать» события пользовательского ввода, включая события фокуса. Браузер также может игнорировать поиск по странице и выделение текста в элементе. Это может быть полезно при создании модалок, где ты хочешь сделать фокус внутри модалки, когда она активна

Нифига не понял? Тогда лучше чекни ссылки ниже 🤪

MDN дока
Смотреть видео
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7🔥4❤‍🔥31
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