Логово верстальщика

🔝 Самые интересные статьи за последние дни: • HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 11 • Вы всё ещё устанавливаете display:none по таймауту? Тогда мы идём к вам • Парольная защита статичной HTML-страницы на JS • 9 open source библиотек для вашего следующего проекта • Модули CSS раскладки — что такое и как готовить

👩‍💻 Простой калькулятор с динамическим вводом Создайте калькулятор, который позволяет выполнять основные арифметические операции (сложение, вычитание, умножение, деление). Пользователь вводит два числа и выбирает операцию из выпадающего списка. Результат отображается автоматически. Требования: • Два текстовых поля для ввода чисел. • Выпадающий список для выбора операции. • Динамическое отображение результата при изменении любого из входных значений. Решение задачи🔽

<div> <input type="number" id="num1" placeholder="Введите первое число"> <select id="operation"> <option value="add">+</option> <option value="subtract">-</option> <option value="multiply">×</option> <option value="divide">÷</option> </select> <input type="number" id="num2" placeholder="Введите второе число"> </div> <div> <h3>Результат: <span id="result">0</span></h3> </div> const num1 = document.getElementById('num1'); const num2 = document.getElementById('num2'); const operation = document.getElementById('operation'); const result = document.getElementById('result'); function calculate() { const value1 = parseFloat(num1.value) || 0; const value2 = parseFloat(num2.value) || 0; let res = 0; switch (operation.value) { case 'add': res = value1 + value2; break; case 'subtract': res = value1 - value2; break; case 'multiply': res = value1 * value2; break; case 'divide': res = value2 !== 0 ? value1 / value2 : 'Ошибка (деление на 0)'; break; } result.textContent = res; } [num1, num2, operation].forEach(element => { element.addEventListener('input', calculate); });

⚙️ Кнопки с несколькими состояниями Как правило, кнопки либо нажаты, либо нет. Но при условии, что обеспечена доступность, можно сделать группу радиокнопок внешне похожей на кнопку с несколькими состояниями с помощью CSS-хитростей. Читать...

🔎 Подборка зарубежных вакансий Frontend Engineer - JavaScript 🟢React, TypeScript, styled-components, HTML5, CSS3, JavaScript (ES6+), MobX 🟢до 4 000 $ | более 6 лет опыта Angular Developer 🟢Angular 2+, MS SQL, EF Core, OAuth 2.0, JWT, RESTful APIs, Swagger, HTML, CSS/SCSS, Bootstrap, Visual Studio, GitHub 🟢Уровень дохода не указан | 3–6 лет опыта Angular Developer 🟢Angular, TypeScript, CSS, HTML, Intershop, Java 🟢Уровень дохода не указан | более 6 лет опыта

🎭 Меняй роли: тестируй свой код как чужой Когда долго работаешь над фичей, замыливается взгляд. Ошибки могут быть очевидными, но ты их просто не замечаешь. 👉 Совет: перед финальной проверкой представь, что это код не твой, а твоего коллеги. Пройди его с позиции ревьюера. Такой подход помогает находить баги и улучшать логику.

🛡 Парольная защита статичной HTML-страницы на JS Как защитить веб-страницы паролем без серверной поддержки? Инструменты StatiCrypt и Portable Secret помогут зашифровать HTML с использованием AES-256. Статические страницы остаются безопасными даже на публичном хостинге. Читать...

👩‍💻 CSS в 2025: какие фишки теперь доступны? Что нового в CSS появилось в 2024 году и уже поддерживается во всех браузерах? Быстрый обзор свежих фишек, которые можно начинать использовать в 2025 году. Читать...

⚙️ В чем разница между == и === в JavaScript? В JavaScript операторы == и === используются для сравнения, но ведут себя по-разному. == выполняет нестрогое сравнение, при котором JavaScript может преобразовать типы данных для сопоставления значений. В отличие от него, === выполняет строгое сравнение, проверяя как значение, так и тип данных, без приведения типов. ➡️ Пример:

console.log(5 == '5');   // true, так как '5' преобразуется к числу
console.log(5 === '5');  // false, так как разные типы данных

console.log(null == undefined);  // true, при нестрогом сравнении они считаются равными
console.log(null === undefined); // false, строгий оператор учитывает типы данных

🗣️ Использование === рекомендуется для избегания ошибок, связанных с преобразованием типов. Это помогает сделать код более предсказуемым и читаемым.

🖥 Подробнее тут

👩‍💻 Flutter: Создание расширения «Получение ссылок для онлайн-кинотеатров» для Chrome Рассказываю, как сделал расширение для Chrome, которое помогает получать ссылки для скачивания через yt-dlp. Поддерживается сайт friday.ru. Плюс гайд, как написать своё расширение на Flutter. Читать...

📈 Подборка статей для вашей карьеры • «Сбер» режет косты • Все, пора увольняться: что я поняла после работы в токсичных командах • Чем Cloud-инженер отличается от DevOps-инженера и что между ними общего • Правда или вымысел? Разоблачаем мифы о профессии технического писателя • 5 видов усталости в IT… и не только

📝 Подборка вакансий для сеньоров Frontend-разработчик React (middle+/senior) • JavaScript, React, TypeScript, Node.js, CI/CD (GitLab), Unit-тестирование • Уровень дохода не указан | от 3 лет FullStack разработчик • React, TypeScript, JavaScript, HTML, CSS, Node.js, API, Git • Уровень дохода не указан | от 3 лет Senior Frontend Developer VUE.js • JavaScript, Vue.js, TypeScript, адаптивная верстка, дизайн мобильных приложений, Figma, Nuxt.js, веб-разработка • от 3 000 до 4 000 $ | от 5 лет

👩‍💻 Playbook CSS scroll animation w/ subgrid Сцена с интересной реализацией анимированного скролла. Сделана на Svg, CSS и JavaScript. Открыть код...

👩‍💻 TS Extend: полезная утилитарная функция для расширения type Статья объясняет ограничения TypeScript 5.7 в работе с расширением типов, демонстрирует проблему интерсекции с одинаковыми свойствами и предлагает утилиту Extend для корректной обработки таких случаев. Читать...

👩‍💻 Уникальные значения из массива Напишите функцию, которая принимает массив и возвращает новый массив, содержащий только уникальные значения из исходного массива. Пример:

const numbers = [1, 2, 2, 3, 4, 4, 5];
const uniqueNumbers = getUniqueValues(numbers);
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

Решение задачи🔽

function getUniqueValues(arr) { return [...new Set(arr)]; } // Пример использования const numbers = [1, 2, 2, 3, 4, 4, 5]; const uniqueNumbers = getUniqueValues(numbers); console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

⚙️ Vite 6.0: Новые возможности и будущее веб-разработки Новая мажорная версия Vite от 26 ноября 2024 года — первый релиз после анонса VoidZero. Рассмотрим ключевые изменения и будущие векторы развития инструмента для сборки приложений. Читать...

Бесплатный практический вебинар: Веб-разработчик: с нуля до мини-игры за 2 часа. ⏰ Когда: 20 февраля в  19:00 по мск. Погрузитесь в решение реальной задачи и напишите небольшую игру на HTML, JS и CSS, которая работает прямо в браузере 🎮 Расскажем, что ждут работодатели от джунов, какие есть грейды во фронтенд-разработке и на какую зарплату рассчитывать в перспективе. Какие JS фреймворки учить: Vue, React, а может, Angular? Задайте вопросы опытному спикеру, сделайте первый шаг в направлении новой профессии. 🎁 Всем, кто зарегистрировался - гайд «Как заговорить на сленге IT-специалистов», а каждому участнику -  карта компетенций начинающего Frontend-разработчика и гайд «Как опубликовать страницу в интернете при помощи GitHub Pages»

📝 Подборка вакансий для мидлов Middle Frontend Developer • React, JavaScript, TypeScript, Webpack, Git, Jira, Confluence • Уровень дохода не указан | 1–3 года React Native Developer • React Native, JavaScript, TypeScript, Redux, Git, CI/CD, GraphQL, REST API • до 300 000 ₽ на руки | 3–6 лет Фронтенд-разработчик (Vue.js / React) • JavaScript, TypeScript, Vue.js, React, Sass, Less, Git, Vite, Docker, CI/CD • от 190 000 ₽ на руки | 3–6 лет

⚙️ Что такое теневые DOM-деревья (Shadow DOM) и как они работают? Shadow DOM — это ключевая часть технологии Web Components, которая позволяет создавать инкапсулированные области DOM с собственным стилем и поведением. Теневые DOM-деревья изолированы от остального документа, что предотвращает конфликты стилей и упрощает создание переиспользуемых компонентов. ➡️ Пример:

// Создание элемента с Shadow DOM
const host = document.createElement('div');
const shadowRoot = host.attachShadow({ mode: 'open' });

// Добавление стилей и контента
shadowRoot.innerHTML = `
  <style>
    p {
      color: blue;
    }
  </style>
  <p>Это текст внутри Shadow DOM</p>
`;

document.body.appendChild(host);
console.log(document.querySelector('p')); // null (элемент скрыт из глобального DOM)

🗣️ В этом примере текст внутри Shadow DOM изолирован. Стили из Shadow DOM не влияют на остальную страницу, и наоборот. Shadow DOM полезен для создания самодостаточных UI-компонентов.

🖥 Подробнее тут

👩‍💻 Новые возможности CSS за 2024 год Центрирование без боли, улучшенный тёмный режим, анимация скрытых элементов и даже решения математических задач — меньше сложностей, больше возможностей. Читать...

🔎 Подборка вакансий для джунов Junior Frontend-разработчик Vue 🟢JavaScript, Vue.js, Git, HTML5, ES6, TypeScript 🟢от 60 000 до 90 000 ₽ | Без опыта Junior PHP Backend Developer Yii2 🟢PHP7.4, MySQL, Yii2, jQuery, Git, JavaScript 🟢от 50 000 ₽ | 1–3 года Младший фронтенд разработчик (JS/Vue) 🟢JavaScript, Vue3, Vuex, chart.js, Bootstrap, Git, HTML5, CSS3, SVG 🟢от 60 000 до 80 000 ₽ | 1–3 года опыта