🌸 Typed Japanese

Для гиков: энтузиасты придумали учить языки через TypeScript.

Проект Typed Grammar учит грамматике (например, английского или японского) с помощью типов и структур программирования. И никаких зелёных сов!

🔗 GitHub

🖌️ LUME — создание 2D/3D-интерфейсов на HTML. Этот набор веб-компонентов превращает обычные HTML-элементы в полноценные носители графики — от CSS3D-преобразований до WebGL-рендеринга.

Под капотом используется AssemblyScript для компиляции в WebAssembly, что обещает стабильную производительность. А в примерах есть даже заготовка для FPS-игры на движке.

🤖 GitHub

@javascriptv

🎯 HTML attributes vs DOM properties

Разница между атрибутами и свойствами в HTML/DOM может быть запутанной, особенно когда названия совпадают. Кратко:

* Атрибут — часть HTML.
* Свойство — часть DOM-объекта.

Пример:

<input value="Hello">

const input = document.querySelector('input');
console.log(input.getAttribute('value')); // "Hello"
console.log(input.value);                 // "Hello"
input.value = 'World';
console.log(input.getAttribute('value')); // "Hello"

Значение атрибута остаётся неизменным, даже если свойство обновляется в JS. DOM-свойства могут не синхронизироваться с атрибутами после инициализации.

🔹Свойства могут отличаться от атрибутов

<input disabled>

input.hasAttribute('disabled'); // true
input.disabled;                 // true
input.removeAttribute('disabled');
input.disabled;                 // false

Свойство disabled — булево. Атрибут disabled работает как флаг: его наличие имеет значение, не важно, какое значение вы ему присвоили.

<input disabled="false">

Это всё равно disabled. Так работает HTML.

🔹Когда использовать атрибуты, а когда свойства?

* Используйте атрибуты, когда:

* Вам нужно установить начальное значение в HTML.
* Вы работаете с HTML-строкой.
* Вы хотите сохранить значение при сериализации (например, outerHTML).

* Используйте свойства, когда:

* Вы работаете с DOM в JS.
* Нужно прочитать или изменить текущее состояние элемента.

🔹Иногда стоит быть осторожнее

input.setAttribute('value', 'New');
console.log(input.value); // "New"

Иногда установка атрибута также влияет на свойство, но не всегда — зависит от элемента и конкретного атрибута/свойства.

https://jakearchibald.com/2024/attributes-vs-properties/

Заголовок: JavaScript Engineer (Browser Fingerprinting & Security R&D)

Формат: Удаленная работа, полный день
Зарплата: 80 000 - 180 000 руб. на руки (возможна оплата в USDT)

О проекте:
Мы ищем JS-разработчика, которому надоело "двигать кнопки" и хочется по-настоящему сложных задач. Наш проект — это система для anti-fraud, которая занимается низкоуровневым фингерпринтингом браузеров. Мы копаем глубоко: анализируем QUIC-хендшейки, вычисляем RTT, изучаем особенности WebRTC и DNS для выявления прокси.

Если вам интересно глубоко погружаться в сетевые протоколы, читать исходники Chromium и искать нетривиальные способы обойти защиту — эта вакансия для вас.

Чем предстоит заниматься:
• Разработка JS SDK: Написание модулей на чистом (vanilla) JavaScript для сбора уникальных отпечатков (WebRTC, Canvas/WebGL, DNS, QUIC).
• Frontend (React/Next.js): Разработка личного кабинета для визуализации данных и управления сервисом.
• R&D (Исследования и разработка): Поиск и реализация новых техник детектирования VPN/Proxy. Это значительная часть работы, требующая самостоятельности и умения вести задачу от гипотезы до готового решения.
• Защита кода: Применение обфускации и других техник для защиты нашего SDK от реверс-инжиниринга.
• Реверс-инжиниринг, деобфускация для поиска новых методик.

Требования:
• Отличное знание нативного JavaScript и понимание асинхронности.
• Опыт работы с React.
• Подтвержденный интерес к кибербезопасности: участие в CTF, pet-проекты (браузерные расширения, сетевые утилиты), статьи, профильное образование в области ИБ, хакинг. (Это самое важное!)
• Хорошее понимание сетевого стека (TCP/IP, UDP, DNS, QUIC).
• Желание и способность самостоятельно разбираться в том, как работают браузеры "под капотом".

Желательно:
• Опыт работы с WebRTC, WebSocket.
• Умение читать C++ (для анализа кода браузерных движков).
• Опыт анализа трафика в Wireshark.
• Опыт работы с Next.js.

Мы предлагаем:
Работу над уникальными задачами, которые вы не найдете в 99% компаний. Сильную команду, свободу в принятии технических решений и возможность стать экспертом в узкой, но очень востребованной нише.


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

• Ссылки на ваши pet-проекты (GitHub и др.).
• Ваш никнейм и достижения на CTF-платформах.
• Ссылки на ваши статьи, доклады или заметки.
• Любой другой релевантный опыт, который показывает ваш интерес к этой сфере.

Отклики без этого пункта рассматриваться не будут. Мы ищем человека, который действительно "горит" этой темой.

Контакт: https://t.me/Siemons8

Совет по CSS 💡

Используйте табличные цифры для отображения таймеров ✅

https://www.codewithshripal.com/playground/css/use-tabular-number-for-timers

@javascriptv

🔥 Трюк с style в React, который упростит работу с динамическими стилями

Вместо создания длинных условий или классов, можно использовать spread-оператор и логические выражения прямо в объекте стилей:

<div
  style={{
    padding: '16px',
    ...(isError && { border: '1px solid red' }),
    ...(isActive ? { backgroundColor: '#def' } : { opacity: 0.5 }),
  }}
>
  Hello!
</div>

📌 Что тут происходит:

* ...(условие && { стиль }) добавит стиль, если условие true;
* Альтернатива classnames для inline-стилей;
* Чисто, читаемо и удобно при большом числе условий.

🧠 Подходит, когда используете inline-стили (например, в дизайн-системах или при генерации email-шаблонов).

💡 Можно комбинировать с memo-компонентами и кастомными хуками, чтобы минимизировать ререндеры и повысить производительность.

💡 HTML трюк

Используйте теги <details> и <summary>, чтобы сделать на странице сворачиваемый блок контента.

<details> — контейнер для скрытого содержимого.

<summary> — заголовок, по клику на который блок разворачивается или сворачивается.

Table tenniCSS

Создано на HTML и SCSS, без использования JS.

#css

https://codepen.io/amit_sheen/pen/PobQjMX

🌏 Осторожно, можно налипнуть на долгие часы: интерактивная карта, которая показывает, как слова мигрировали сквозь века 😊

Если тебе хоть раз было интересно, откуда взялось слово и как оно менялось по дороге - это прям находка. Проект визуализирует “путешествие” слов по миру: как корни кочевали вместе с торговлей, войнами, колонизацией и смешением культур.

Что внутри:
- Gemini помогает находить корни и родство слов (этимология без занудства)
- D3.js превращает всё это в красивую анимацию на карте
- ты просто вводишь слово - и видишь его историю как маршрут: страны, эпохи, переходы

Это не просто справочник, а настоящая “география языка”, в которой можно зависнуть на час.

https://wanderword-141284551734.us-west1.run.app/

JavaScript. Что будет выведено в консоль?

Ответ

🎨 Улучшаем веб-дизайн с AI

Этот репозиторий предлагает навык для AI-агентов, который преобразует стандартные веб-страницы в стильные и уникальные. Он включает правила против клише, систему дизайна и теорию цвета oklch, чтобы обеспечить высокое качество HTML/CSS/JavaScript.

🚀Основные моменты:
- Инъекция дизайнерского вкуса в AI-процессы
- Запрет на избитые шаблоны и клише
- Шестиступенчатый рабочий процесс от требований до проверки
- Подборка качественных шрифтов и цветовых сочетаний
- Примеры страниц с использованием и без использования навыка

📌 GitHub: https://github.com/ConardLi/web-design-skill

#javascript