🎮 Untrusted - приключения доктора Эвала

Untrusted - это приключенческая игра, в которой вы сможете попрактиковаться и проверить свои знания JavaScript.
Вам предстоит управлять доктором Эвалом в машинном континууме и изменять его реальность, чтобы обрести свободу.

У вас будет доступ ко всем исходным кодам, но для спасения придётся вносить необходимые изменения в этот код!
Очень затягивает 🤩

🟢Ссылка на игру https://untrustedgame.com/

🚩 Подбор шрифтов

Интересный сервис, который подберёт пару для primary и secondary шрифтов для вашего интерфейса.
Ещё можно посмотреть, как все эти шрифты будут выглядеть, не отходя от кассы 🤩

✔️ Делюсь ссылочкой

👩‍💻 CSS support

Не многие знают, что в JavaScript есть встроенный метод, позволяющий проверить, поддерживает ли браузер определённое CSS-свойство или его значение. Этот метод - CSS.supports().

Рассмотрим примеры:
console.log(CSS.supports("display", "grid"));
// true (если браузер поддерживает grid)

console.log(CSS.supports("color", "blue"));
// true (почти всегда)

console.log(CSS.supports("position", "sticky"));
// true (если браузер поддерживает `position: sticky`)


Можно также проверять несколько условий с or и and:
console.log(CSS.supports("(display: grid) and (color: red)"));
// true, если обе поддержки есть

console.log(CSS.supports("(display: flex) or (display: grid)"));
// true, если хотя бы одно поддерживается


Еще важно заметить, что свойство можно использовать внутри CSS, с помощью @supports:
@supports (display: grid) {
.container {
display: grid;
}
}


❕Есть ограничения:
⚫️ Не проверяет поддержку нестандартных префиксированных свойств (например, -webkit-).
⚫️ Работает только с известными CSS-свойствами, если свойство неизвестно браузеру - всегда false.

🔗 Ссылка на доку

🧠 DeepSite - аналог Cursor ?

Вышел тут недавно новый эЙаЙ инструмент DeepSite (на базе DeepSeek V3), который работает прямо в браузере🤨

Что умеет:
- Писать и редактировать код
- Оптимизация и рефакторинг
- Можно создавать веб-приложения, сайты, лендинги
- Готовое решение можно деплоить
- и многое другое

⌨️ Попробовать можно здесь

👩‍💻 Делаем расширение для браузера

Недавно написал туториал про разработку простого расширения для браузера. Советую попробовать, а затем создать что-нибудь своё. Самое то на выходные 😉

➡️Ссылочка тут

Ставим в статье плюсики, а здесь - огонёчки 🔥

💅 Styled-components все 🥲

https://opencollective.com/styled-components/updates/thank-you

🎨 OffscreenCanvas

OffscreenCanvas - это объект в JavaScript, который позволяет работать с в веб-воркерах. Это полезно для выполнения графических операций в фоновом потоке, не блокируя основной поток браузера (UI).

➡️Подготовил вам пример, можно склонировать к себе и поиграться.

🔖Основные возможности

1. Рендеринг в фоновом потоке
🔵Можно использовать OffscreenCanvas внутри Web Worker'а для отрисовки графики без зависания UI.

2. Поддержка 2D и WebGL API
🔵Работает с 2d, webgl, webgl2 и webgpu контекстами.

3. Передача контекста между потоками
🔵Можно передавать OffscreenCanvas из основного потока в Web Worker с помощью postMessage().

4. Высокая производительность
🔵Позволяет обновлять анимации и графику без влияния на основной поток, что снижает задержки и делает интерфейс плавнее.

🔖Когда использовать?

🟢Игры и анимации - отрисовка в фоновом потоке позволяет избежать лагов в интерфейсе.
🟢Редакторы и обработка изображений - можно ускорить фильтрацию и рендеринг графики.
🟢Визуализация данных - графики и диаграммы будут обновляться без фризов UI.

🔖Ограничения

🔴Не работает в iOS Safari (по состоянию на 2024 год).
🔴Не поддерживает DOM API (например, canvas.toDataURL() не работает в Web Worker).
🔴Не все браузеры поддерживают WebGL/WebGPU в OffscreenCanvas.

❗️Альтернатива: Если OffscreenCanvas не поддерживается, можно использовать requestAnimationFrame() или WebGL в основном потоке.

Ссылка на доку.

✨ Интересная новость
TypeScript портируют на Go.
После этого скорость x10 🧐

https://devblogs.microsoft.com/typescript/typescript-native-port/

https://github.com/microsoft/typescript-go/discussions/categories/faqs

😎 Object.seal()

Этот метод запрещает добавление и удаление свойств, но разрешает изменять существующие свойства.

Что можно делать после Object.seal(obj)?
🟢Изменять значения существующих свойств
🔴Добавлять новые свойства
🔴Удалять свойства

Пример:

const obj = { name: "Alice" };
Object.seal(obj);

obj.name = "Bob"; // Можно изменить
delete obj.name; // Нельзя удалить
obj.age = 25; // Нельзя добавить
console.log(obj); // { name: "Bob" }


❓Когда использовать?

🔵Когда нужно сохранить структуру объекта, но разрешить обновление данных.
🔵Например, для объектов, представляющих сущности в системе (пользователь, заказ и т. д.).

🌐 Отправляем запрос через консоль браузера

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

1️⃣Откройте вкладку Network.
2️⃣Выберите фильтр Fetch/XHR.
3️⃣Найдите в списке нужный запрос.
5️⃣Кликните по нему правой кнопкой мыши, откройте меню и выберите Copy → Copy as fetch.
5️⃣Вставьте скопированный код в консоль, при необходимости измените параметры.

Не забываем ставить огонечки 🔥 и сердечки ❤️

А говорят React умирает 😎

Ирония: это админ самого крупного сообщества Vue.js в Twitter🗿

🦄 Object.preventExtensions()

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

Рассмотрим первый метод Object.preventExtensions(obj)

Этот метод запрещает добавление новых свойств в объект obj, но при этом не запрещает изменение или удаление существующих свойств.

⁉️ Что можно делать после Object.preventExtensions(obj)?
✅ Изменять значения существующих свойств
✅ Удалять существующие свойства
❌ Добавлять новые свойства

Пример:
const obj = { name: "Alice" };
Object.preventExtensions(obj);

obj.age = 25; // Ошибка в строгом режиме, иначе игнорируется
delete obj.name; // Удалится
obj.name = "Bob"; // Можно изменить
console.log(obj); // {}

❓Когда использовать?

- Когда объект уже сформирован, но возможны изменения существующих данных.

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

🔥 В след посте рассмотрим метод seal()

Кхм 🥲

🖼️ React, Svelte, Vue или Angular?

Прикольный сайт, где можно сравнить синтаксис разных фреймворков

➡️Делюсь ссылочкой

🤓 Повторно отправляем запрос в DevTools

Во вкладке Network мы можем повторно отправлять запросы без перезагрузки страницы.

💡 Для этого нужно выполнить следующие шаги:

1. Открыть Network.
2. В фильтре выбрать Fetch/XHR.
3. Выбрать запрос, который хотим отправить повторно.
4. В меню выбираем Replay XHR.
5. Повторный запрос появляется в списке

🔄 Как поменять две переменные местами?

В Python есть классный способ поменять значения двух переменных не создавая еще одну:

a = 5
b = 10

# Меняем значения
a, b = b, a

- А можно ли сделать так в JavaScript? 🧐
- Да! 🤩

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

let a = 5;
let b = 10;

// Меняем значения
[a, b] = [b, a];

Существует множество средств для разработки декстоп-приложений на языке JS/TS: Electron.js. Tauri, React Native Desktop и пр.

👀 Оказывается, в GNOME - графической оболочке, используемой в популярных дистрибутивах Linux, таких как Ubuntu и Fedora, - можно разрабатывать приложения😱 И все это благодаря GJS - среде выполнения JavaScript, основанной на движке SpiderMonkey от Firefox и библиотеках платформы GNOME. Подробнее можно узнать здесь.

В GNOME из коробки уже есть несколько приложений написаных на JS - это карты, менеджер шрифтов, диктофон.

☑️Есть специальный шаблон с помощью которого можно начать разработку.

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

😎 Позже, возможно, напишу статейку о создании какого-нибудь приложения..

▶️ Подборка каналов для роста

Собрал для вас подборку каналов, которые помогут быстрее развиваться во фронтенд-разработке. Здесь люди делятся опытом, рабочими советами и кейсами. Подписывайтесь! 🚀

⚫️Solvery — канал, где Senior и Middle+ разработчики делятся реальным опытом без воды. Как пройти путь из Макдональдса в IT и вырасти с 22К до 320К? Разбираем реальный кейс. Как не провалить собеседование? 80+ ключевых вопросов, которые вас точно спросят. Как пополнять портфолио без заказчиков? Держите готовый план действий. Ну, а если вы все еще боитесь идти на собес, то вот 30+ моковых интервью для прокачки навыков. Делимся всем, что помогает развиваться в IT, выходить на новый уровень и не топтаться на месте.

⚫️Счастливый тимлид — блог про управление без страданий, про наём со всех сторон, про работу без выгорания и про реальную жизнь без глянцевых фильтров. Иногда жёстко, иногда смешно, но всегда по делу. У меня в блоге разбираемся: Фронтенд усложняется! Или нет? Расскажу, какие навыки самые важные для разработчика. А если вас пугают алгоритмы, но базу подтянуть хочется, этот материал для вас.

⚫️Frontend вдохновляет — авторский канал, в котором разработчик с 12-летним стажем делится секретами во frontend, реальными задачами с работы, а также дает порцию мотивацию развиваться и быть на шаг впереди остальных.

⚫️Ilnur Ryazhapov Frontend — блог Ильнура Ряжапова, фронтенд-сеньор-разработчика с 6-летним опытом. Здесь он рассказывает про жизнь программиста в Саудовской Аравии, Если ребятам нравится фронтенд и разработка на фреймворке ангуляр, то он берёт их к себе на менторинг, где обучает и выдает компетенции мидл-разработчика, даже если человек полный ноль во фронтенде. Заглядывайте в канал, чтобы узнать 1) какие навыки сейчас востребованы на рынке, 2) как добавить опыт в резюме без накрутки, или 3) что отличает тех, кто смог построить крутую карьеру.

💙 Если знаете ещё годные каналы по фронтенду — делитесь в комментариях!

♥️

https://codepen.io/atrapeznikov/pen/emYNmOZ

🐞 Баг как часть языка

В JavaScript выражение typeof null === 'object' возвращает true из-за исторической ошибки в реализации языка.

Когда в ранних версиях JavaScript разрабатывался оператор typeof, значения в памяти хранились в виде тегов типа. null представлялся как нулевой указатель (0x00), а объекты имели специальный тег (например, 0x00 в некоторых реализациях). Из-за этого typeof null начал ошибочно интерпретироваться как 'object'.

⚫️Почему ошибку не исправили?

Хотя это признанная ошибка, исправление сломало бы обратную совместимость со старым кодом, который полагался на такое поведение. Поэтому разработчики ECMAScript решили оставить этот баг в стандарте.

⚫️Как правильно проверять null?

Чтобы избежать ошибки, рекомендуется проверять null с помощью строгого сравнения:

if (value === null) {
console.log('Это null');
}

или (что не очень)

console.log(Object.prototype.toString.call(null)); // [object Null]

🌐 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 не поддерживается!");
}

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

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

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

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

🧠 AI ai ai

Вышла новая LLM модель DeepSeek R1. Made in China 🇨🇳

Небольшая китайская компания совершила прорыв. Они создали думающую модель всего за $6 млн (очень, очень дешево). Она не уступает OpenAI o1, являясь при этом открытой и доступной по цене.

🤔И что еще интересно:
DeepSeek обрушил стоимость американских технологических компаний на $1 трлн за один день
🚀 Вот теперь будет гонка...

Переходим и пользуемся https://www.deepseek.com/
Есть и приложение на телефон

И ВСЕ БЕЗ VPN 🤘

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

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

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