Рассказ фронтендера

🌐 Zen Браузер

Попробовал тут ✨Zen Browser✨ и он таки смог привлечь мое внимание...
Сам браузер основан на Firefox и написан на C++, JavaScript, CSS и ещё нескольких не таких популярных языков.

Ключевые особенности:

⚫️широкая кастомизация
⚫️открытая лицензия Mozilla Public License 2.0
⚫️кроссплатформенность (не удивительно)
⚫️параллельный просмотр (очень интересное решение)
⚫️супер-пупер боковая панель

Интерфейс прикольный. Есть интересный функционал. Так что пробуйте.

🔗 Ссылочка тут

🔋 Battery Status API – это интерфейс Web API, который позволяет веб-страницам получать информацию о состоянии батареи устройства пользователя. С его помощью можно узнать уровень заряда, подключено ли устройство к сети питания и оставшееся время работы.

📕 Дока на MDN

Какие возможности есть у Battery Status API:

🔖 level - проверка текущего уровня заряда батареи
🔖 charging - определение, подключено ли устройство к зарядке
🔖 chargingTime - оценка времени до полной зарядки
🔖 dischargingTime - оценка оставшегося времени работы от батареи

🛠 Пример использования

navigator.getBattery().then(battery => {
    console.log(`Заряд: ${battery.level * 100}%`);
    console.log(`Зарядка: ${battery.charging ? "Да" : "Нет"}`);
    console.log(`Время до полной зарядки: ${battery.chargingTime} сек.`);
    console.log(`Оставшееся время работы: ${battery.dischargingTime} сек.`);
});

🔄 Обновление данных в реальном времени

Можно подписаться на события изменения состояния батареи:

navigator.getBattery().then(battery => {
    function updateBatteryStatus() {
        console.log(`Заряд: ${battery.level * 100}%`);
        console.log(`Зарядка: ${battery.charging ? "Да" : "Нет"}`);
    }

    battery.addEventListener("levelchange", updateBatteryStatus);
    battery.addEventListener("chargingchange", updateBatteryStatus);
});

⚠️ Поддержка браузерами

Battery Status API поддерживается не во всех браузерах. Проверка поддержки в браузере:

if ("getBattery" in navigator) {
    console.log("Battery API поддерживается!");
} else {
    console.log("Battery API не поддерживается!");
}

💡Где может быть полезно?

- Оптимизация работы веб-приложений (например, уменьшение потребления ресурсов при низком заряде).

- Отображение уведомлений о разряде батареи пользователю.

- Автоматическое включение режима экономии энергии.

🥱 px,rem, em vh - набор букв...

Иногда очень сложно понять, какую единицу измерения использовать в CSS. Нашел интересную диаграмму, которая с этим поможет 🤩

⛓ Ссылочка тут

📕EbookFoundation - огромная бесплатная библиотека

В репозитории собрано очень много книг и ресурсов как на русском так и на других языках 🤓

Делюсь ссылкой без смс и регистрации 😉

😁 Suicide Linux

Одна ошибка в команде и система моментальное удаляется 😂
Просто прекрасно

Ссылка для ознакомления тут

Ерунда, конечно, но на серваки бы такой дистрибутив 🌚

📊 Отрисовка диаграмм

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

📊 Делюсь ссылочкой тут

🔔 Дорогие подписчики с Новым годом 🥂

😱Очень рад, что вы читаете и подписываетесь на мой канал, очень мотивирует на новые посты!

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

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


🍪Всем спасибо и С НОВЫМ ГОДОМ🥂

📚Что почитать на каникулах ?

Так как у многих начались новогодние каникулы🔥, делюсь с вами книжками, которые мне очень понравились. Они не совсем про разработку но, думаю, будут полезны для вас 🦌

Очень советую книжку по алгоритмам и с кабанчиком (если будете проходить секцию с system design, must read 😱)

🎄State of JS 2024

Результаты можно посмотреть здесь

Если кратко:
📍Webpack теряет позиции, vite уже почти догнал, дышит в спину

📍Jest - выросла популярность.
Все начали юнит-тесты писать?

📍React всё также популярен, кто бы что ни говорил

📍А вот Vue.js никакого роста в этом году не показал

📍Node.js также в роли лидера, никакие там Bun и Deno его не свергли

📍PNPM обогнал yarn 😱

Advent of TypeScript для меня все 😁
15 16 дней, думаю, достаточно. Буду готовиться к следующему 🦌

✨ Челлендж на 30 дней ✨

Краткое описание:

30 Day Vanilla JS Coding Challenge

Build 30 things in 30 days with 30 tutorials

❌No Frameworks ❌No Compilers ❌No Libraries ❌No Boilerplate

Готовы? То переходим ➡️➡️ сюда

⛄️ День 10 Advent of TypeScript

Сегодня стоит интересная задача: нужно использовать побитовые операции, такие как &, |, ~, <<, >> и другие, в Enum 😱. Необходимо получить такое перечисление, используя побитовые операции:

enum Gift {
  Coal = 0,
  Train = 1,
  Bicycle = 2,
  Traditional = 3,
  SuccessorToTheNintendoSwitch = 4,
  TikTokPremium = 8,
  Vape = 16,
  OnTheMove = 26,
  OnTheCouch = 28
};

🧑‍💻 Небольшой пример, как мы можем создать такой enum:

enum Permissions {
    None = 0,         // 0
    Read = 1 << 0,    // 1 (0001)
    Write = 1 << 1,   // 2 (0010)
    Execute = 1 << 2, // 4 (0100)
    Delete = 1 << 3   // 8 (1000)
}

🎄 Сначала попробуйте решить сами, а потом уже смотреть ответ

По традиции решение в коментариях 😉

9️⃣день Advent of TypeScript, а у нас опять практическая задачка 😱

Нам нужно задекларировать модуль с несколькими типами внутри, вроде изи 👋

Решение в комментах ⬇️

🔎 Меняем Google Yandex Bing и пр на Perplexity

🤩 Очень классная нейронка perplexity.ai (стильно, модно, молодежно 🔥 работает без VPN), где можно получить мгновенный ответ на вопрос. Нам не нужно фильтровать инфу, которую выдал поисковик.

😊 Но здесь, конечно, и минус, потому что, когда мы ищем какую-то информацию, мы можем наткнуться на другую и таким образом расширить свой кругозор, найти новые идеи и пр.

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

Шел 8️⃣день Advent Of Typescript и наконец-то практическая задачка - нам необходимо затипизировать process.env ! в Node JS. Кто еще не решил, переходим и решаем 🧑‍💻

⛄️ Оставлю решение в комментах 👇

🔄 Наш любимый Event Loop

Нашел на просторах интернета наглядную демонстрацию работу event loop. Можно вставить свой код или выбрать из списка и посмотреть, в каком порядке он будет выполняться. 👨🏻‍💻

Не забываем, что это просто ТОП 😂 тема на собесах (просто обожаю, когда мне задают эти вопросы на собесах 🤪)

➡️ Ссылочка здесь

Первая задачка очень легкая 😁 думаю все смогут решить 😅

❄️Advent of TypeScript ☃️

Сегодня начинается событие Advent of TypeScript. Если кто-то знаком с Advent of Code, то принцип здесь такой же: каждый день будут публиковаться задачи по TS, и с каждым разом они будут становиться сложнее 🔥

Думаю, что это прекрасная идея прокачать TS🎄

➡️Переходим сюда

🧑‍🎓 LeetCode для фронтов

Отличный ресурс для подготовки к интервью на позицию фронта.
Есть вопросы по CSS, JS/TS, System Design.

➡️ Переходим по ссылочке и готовимся

Самое то на выходные 🤣

👩‍💻 Vim, vim, vim

Если кто-то откладывал изучение Vim, то пора начать... 😅

Вот прекрасный курс, который вам поможет » здесь

Кстати, попробуйте написать :smile в vim и вы получите улыбающееся лицо 😁

👨🏻‍🔬 Accessibility в Inspect Element в DevTools

Все мы часто используем Inspect Element, но замечали ли вы такой раздел как Accessibility? Я раньше на него не обращал внимание, но тут решил узнать: а зачем же он нужен? Так вот, давайте рассмотрим поля которые там содержатся:

✅ Contrast - значение контрастности текста и это оказывается проблема доступности №1 в Интернете. Есть даже специальная обучалка для этого, вот здесь. Рекомендуемый параметр 4.5. Еще есть классный сайт для проверки контраста цвета, ссылка тут.

✅ Name - это текст который проговорит экранный диктор.

✅ Role - ARIA роль текущего тега. Больше инфы здесь.

✅ Keyboard-focusable - можно ли сфокусироваться на элементе с помощью клавиатуры.

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

🤓 Еще в Lighthouse можно выбрать Accessibility и проверить свой сайт на наличие проблем.

Прикол, в Android 15 появился Терминал для запуска Linux-программ😳.

Интересно, Docker контейнер можно запустить ? 😁

🌴 The end of the vacation

Вот и подошел к концу мой отпуск (поэтому и не было постов в канале).

Был в Китае 🇨🇳 и хотел бы рассказать о местном UI/UX в приложениях. Сразу хочу сказать, что все приложения сделаны под китайскую аудиторию, и для западного пользователя это что-то новое.

☑️ Некоторые приложения показались мне перегруженными, так как используются иероглифы, для которых действуют другие нормы размера текста, отступов и т. д.

☑️Всплывающих уведомлений очень много, и хотя принято считать, что они вредят пользовательскому опыту, у них это не так.

☑️Яркие цвета, мы же привыкли к более пастельным, и это сначала даже отталкивает.

☑️Большинство сервисов - это супераппы, которые предлагают другие приложения в одном приложении (у нас это тоже становится трендом). Самые популярные: Alipay, WeChat.

И самое главное - в некоторых приложениях нет даже английского языка, все на китайском, а понять иероглифы просто нереально🗿. Встроенный переводчик есть в их платежном приложении - Alipay и в мессенджере - WeChat (почему нельзя просто добавить английский язык ❔). Но если текст переводится, он не адаптируется под дизайн 😵‍💫: нет отступов, текст перекрывает другой текст, и это все становится нечитабельным. Понять что-то очень тяжело - тот еще квест.

Конечно, это не оценка всех приложений, а только тех, которые понадобятся обычному туристу.

😋 Добавляю скринчики приложух, чтоб насладиться интерфейсом 👇

🆓 Ну наконец-то !!! 🆓

https://blog.jetbrains.com/blog/2024/10/24/webstorm-and-rider-are-now-free-for-non-commercial-use/

🧠 State of AI

Вышел ежегодный отчёт State of AI о том, что произошло в сфере искусственного интеллекта (теперь без эйай никуда) за 12 месяцев. В докладе 200 страниц, читать много, но основное это: 

📍Почти все модели развиваются одиноко, и почти все они догоняют эталона на рынке GPT-4, но OpenAI сохраняет лидерство. 

📍Дальнейшее развитие нейросетей - это планировать и рассуждать. Сейчас этого модели не умеют.

📍Модели все больше становятся мультимодальными. 

📍NVIDIA остаётся самой влиятельной компанией, нет видеокарт - нет ваших этих нейросетей.

📍Крупные компании, которые разрабатывают модели, уже получают огромные выручки. 

📍Правительства многих стран обеспокоены стремительному развитию нейросетей и их безопасности.

И ещё много чего интересного, если будет время, почитайте. 

🧠 Как думаете, в следующем году AI оставит нас без работы?

😱 – да.
🌚 – нет, конечно, они даже форму нормальную сделать не могут.

🥺 AI без СМС, регистрации и VPN

В DuckDuckGo появились AI-модели, пока в бета-версии.

Доступны следующие:

☑️ GPT-4o mini - все о ней знают.
☑️ Claude 3 - говорят, что хорошо пишет код, но это не точно.
☑️ Llama 3.1 - какая-то открытая модель, ни разу о ней не слышал.
☑️ Mistral - аналогично.

🏖 Все мы знаем, что DuckDuckGo - это конфиденциальность, поэтому все чаты с моделью не хранятся, и никто не знает, что вы у нее спрашивали. С одной стороны, это хорошо, с другой - плохо, но весь диалог можно скачать в простом текстовом формате.

💻 Переходим сюда и пользуемся

Это я так понимаю, чтобы нам скучно не было ? 😁

💃 https://www.npmjs.com/package/girlfriend

💁🏻‍♂️ https://www.npmjs.com/package/boyfriend

🔄 DevOps для всех

Если кто-то хочет окунуться в мир DevOps 🐬, то есть классная репа на гитхаб, которая с этим поможет.

90 дней - и вы тот самый чел, который программируют yaml файлы 😁

🔗 Ссылочка тут

Ребята, кто не знал, ставим лайк 🗿

✨ CheatSheets

Огромное количество шпаргалок 🔥

🟡JS
🟡Java
🟡Python
🟡Go
🟡Bash

и т.д.

📍 Ссылочка https://cheatsheets.zip/

🌚 Серьезно, теперь еще один этап добавился?

А в ваших компаниях уже практикуют ТАКОЕ 🤣

😱 Посетил Frontend Conf

Эти два дня был на конференции Frontend Conf❗️ На такой конфе был впервые, давно хотел на неё попасть. Было несколько интересных докладов, так что ждите новых постов в канале🔥

В первый день послушал про архитектуру, оптимизацию, PWA (Progressive Web Application, если кто не знает), узнал, что Service Worker могут ухудшать метрики (неожиданно 🤔) и о психологии дизайна.

На второй день было много докладов про микрофронты, кажется, посетил все😁. Также был интересный доклад про сравнение Node.js и Bun. Как-то так.

В общем, было круто, но не все доклады понравились 😔 думаю это нормально.

❓ Кто был на конференции? Как вам? Поделитесь в комментах, интересные ли были доклады👇

Может бросить все фреймворки и вернуться к истокам 😂

Кстати, книга 2024 года. 🤔
Интересно, есть здесь люди, которые, может, пишут или еще поддерживают проекты, где есть jQuery? 🙃

✨ Windows 98 в браузере

Нашел проект на JavaScript, который эмулирует Windows 98 в браузере 😱
Выглядит интересно, есть заставки чтобы понастольгировать, даже скрепка есть (без всякого AI). Еще есть Pinball 😍, Сапер, Paint в котором многие зависали, Winamp и возможность открытия старых сайтов в браузере... Крч прикольно 🥰

⛓Ссылка вот

🖥 Исходный код проекта на гитхаб здесь

Ну что, фронтендеры и не только, с праздником 🎉🍬 с днем ПроГраМмИсТа 🧑‍💻

Покидайте в комменты друг другу пожелания ♥️

Пояснение к задаче 👆

Очень много тех, кто ответитл, что updatedUser === user - это false значение 🫢, давайте разберемся, почему это не так.

🤨 Функция updateUser() обновляет свойства email и password пользователя, если новые значения переданы в функцию. В результате функция возвращает объект user.

🧐 Значение updatedUser ссылается на тот же объект user, что делает выражение updatedUser === user истинным, вот и все 💡

Что получим в консоли? 💊

😐 Вся правда про React Compiler

В этой статье автор рассказывает, как RC оптимизирует простые примеры, но на реальных задачах всё довольно плачевно 😫

В итоге, к сожалению, не стоит забывать про ручную мемоизацию (может допилят 🥲)

📕Почитать можно здесь