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
Изучаем новую крутую фичу — 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
Что лучше: 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