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

👩‍💻 On-Scroll Fire Transition Красивая анимация горения страницы при скролле. Сделана на CSS и JavaScript. Открыть код...

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

🔎 Подборка вакансий для джунов Junior React Разработчик 🟢HTML, CSS, JavaScript, React, Redux, TypeScript, Docker, Webpack 🟢от 60 000 до 90 000 ₽ | 1–3 года Frontend-разработчик (удалённо) 🟢HTML5, CSS3, JavaScript, React, Vue.js, Tailwind CSS, Git, Webpack, Sass, Less, Figma 🟢от 50 000 до 80 000 ₽ | 1–3 года Разработчик (Frontend developer / Vue.js) junior+ 🟢Vue.js, JavaScript, HTML/CSS, Git, GraphQL, SPA, TypeScript 🟢от 120 000 ₽ | 1–3 года

👩‍💻 Динамическое создание таблицы из массива объектов Напишите функцию, которая принимает массив объектов и массив ключей. Функция должна возвращать HTML-строку, содержащую таблицу <table>, где каждая строка <tr> соответствует объекту из массива, а каждая ячейка <td> — значению указанных ключей. Пример использования:

const data = [
  { id: 1, name: "Alice", role: "Frontend Developer", experience: 2 },
  { id: 2, name: "Bob", role: "Backend Developer", experience: 5 },
  { id: 3, name: "Charlie", role: "DevOps Engineer", experience: 3 }
];

const columns = ["name", "role", "experience"];

const renderedTable = renderTable(data, columns);
console.log(renderedTable);
// Ожидаемый результат:
// "<table>
//   <tr><td>Alice</td><td>Frontend Developer</td><td>2</td></tr>
//   <tr><td>Bob</td><td>Backend Developer</td><td>5</td></tr>
//   <tr><td>Charlie</td><td>DevOps Engineer</td><td>3</td></tr>
// </table>"

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

function renderTable(array, keys) { const headers = `<tr>${keys.map(key => `<th>${key}</th>`).join("")}</tr>`; const rows = array .map(item => `<tr>${keys.map(key => `<td>${item[key]}</td>`).join("")}</tr>`) .join(""); return `<table>${headers}${rows}</table>`; }

➡️ Веб-приложения будущего: что нужно знать о WebAssembly Статья рассказывает о WebAssembly (Wasm) — мощном инструменте для запуска высокопроизводительных приложений в браузере. Обсуждается, как Wasm позволяет использовать языки вроде Rust и C++, решает задачи сложных вычислений, игр и анализа данных, а также его перспективы в веб-разработке. Читать...

🔝 Самые интересные статьи за последние дни: • HMPL — лучшая альтернатива HTMX • Как я получил 50000 + 0 долларов за уязвимость в Zendesk • Неизвестно полезный CSS. Часть 5 • База, которую нужно знать про JSON Schema • Магия CSS на практике: советы по вёрстке от гика. Часть 5

👩‍💻 Реализация кнопки с таймером блокировки Создайте кнопку, которая становится недоступной (disabled) на 5 секунд после каждого нажатия. Отображайте обратный отсчёт времени на кнопке, чтобы пользователь видел, когда её можно будет нажать снова. Ожидаемое поведение: • При нажатии на кнопку она становится недоступной. • На кнопке отображается обратный отсчёт времени: 5... 4... 3.... • Через 5 секунд кнопка снова становится активной и текст возвращается в исходное состояние. Решение задачи🔽

<button id="timer-button">Нажми меня</button> #timer-button { padding: 10px 20px; font-size: 16px; cursor: pointer; } #timer-button:disabled { background-color: #ccc; cursor: not-allowed; } const button = document.getElementById('timer-button'); button.addEventListener('click', () => { let countdown = 5; // Деактивируем кнопку и запускаем таймер button.disabled = true; const interval = setInterval(() => { button.textContent = `Ждите... ${countdown}`; countdown--; if (countdown < 0) { clearInterval(interval); button.disabled = false; button.textContent = 'Нажми меня'; } }, 1000); });

🧨 Работа с куки-файлами хуже сапёрного дела Статья разбирает особенности работы с HTTP-куки и неожиданные проблемы, которые могут возникнуть при их использовании. Рассматривается пример с сериализацией JSON, казалось бы, безобидный, но вызывающий интересные нюансы в обработке браузерами и серверами. Читать...

👩‍💻 5 HTML-атрибутов для улучшения пользовательского опыта и SEO Разбираем мощные, но часто игнорируемые атрибуты HTML, способные значительно улучшить пользовательский опыт и SEO вашего сайта. От многоязычности до удобства заполнения форм – все, что нужно современному разработчику Читать...

🔍 Развивай навык «поиска причин» Когда всё ломается, проще всего сказать: «Это сервер/библиотека/коллега виноват». Но это не решает проблему. 👉 Совет: тренируйся находить корневую причину. Используй технику «5 почему» — спрашивай «почему?» до тех пор, пока не дойдёшь до корня. Это не только поможет исправить баги, но и сделает тебя мастером в отладке.

👩‍💻 Шаблон “Декоратор” в разработке на TypeScript Овладейте полезным инструментом TS-разработчика - шаблоном проектирования "Декоратор". Он позволяет динамически расширять функциональность объектов, не усложняя читаемость кода. Читать...

📝 Подборка вакансий для сеньоров Frontend-разработчик • React.js, TypeScript, JavaScript, CSS, Sass, Webpack, Git, Docker, REST • Уровень дохода не указан | от 3 лет Frontend Developer (VueJS) • Vue.js, TypeScript, JavaScript, HTML5, CSS3, SASS, SCSS, LESS, Stylus, Babel, Webpack, Npm, Yarn, Jest, Mocha, REST API • Уровень дохода не указан | от 5 лет Middle/Senior frontend dev • Vue.js, Nuxt.js, TypeScript, JavaScript, CSS, SASS, Tailwind, GraphQL, REST, WebSocket, Git • от 200 000 до 280 000 ₽ | от 3 лет Senior Frontend Engineer • Next.js, TypeScript, JavaScript, React.js, D3.js, Chart.js, Redux, Zustand, Jest, React Testing Library, REST API • до 5 000 $ | от 6 лет Frontend разработчик Angular • Angular, JavaScript, HTML, CSS, REST API • Уровень дохода не указан | от 3 лет

⚙️ Что такое псевдоэлементы в CSS и как они используются? Псевдоэлементы в CSS — это инструменты, которые позволяют стилизовать определенные части элемента, такие как первая буква, первая строка, или добавлять контент до или после элемента. Они начинаются с :: (например, ::before или ::after) и не требуют изменения HTML-разметки. ➡️ Пример:

<p class="text">Это пример текста.</p>

<style>
  .text::before {
    content: "👉 "; /* Добавляем символ перед текстом */
    color: red;
  }

  .text::after {
    content: " ✔️"; /* Добавляем символ после текста */
    color: green;
  }
</style>

🗣️ В этом примере с помощью псевдоэлементов ::before и ::after добавляются символы перед и после текста. Это удобный способ дополнить стиль без изменения HTML.

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

📊 10 методов SEO-оптимизации JavaScript, которые должен знать каждый фронтендер Веб-приложения часто используют JavaScript для динамического создания контента и удобного взаимодействия с пользователем. Но поисковые роботы не всегда могут правильно прочитать и проиндексировать такой контент – в итоге сайт теряет посетителей. На помощь придут 10 способов SEO-оптимизации для JavaScript. Читать...

📌Есть только 2 способа стать JavaScript Senior: 1. Часами просматривать видео на YouTube, документацию и решать сложные задачи, так и не достигнув ощутимого прогресса. 2. Следить за каналом «JavaScript Senior» и сократить 70% времени на подготовку к собеседованиям и улучшение навыков! Получай полезные сниппеты, актуальные вопросы с собеседований и будь в курсе последних новинок – подпишись @JavaScriptSenior!

📈 Подборка статей для вашей карьеры • Пришёл на вакансию дизайнера, а стал питонистом: как IT-специалисты нашли свою первую работу • На сколько денег может рассчитывать ИТ-предприниматель в разных ветках развития • Анализ задачи с собеседования в Google: конь и телефонные кнопки • Быстрый старт в QA Fullstack: чем вооружиться будущему стажеру в Альфа-Банке • Как убить самоорганизацию в команде: вредные советы для лидера

👩‍💻 CSS :has() — Псевдокласс, который давно ждали Преобразуйте свой CSS с помощью псевдокласса :has(), позволяющего стилизовать элементы на основе их дочерних элементов. Читать...

👩‍💻 Broken Glass Effect Сцена с эффектом сломанного стекла в месте клика. Сделана на CSS и JavaScript. Открыть код...

👩‍💻 Переходите на сторону light-dark() Статья раскрывает современные CSS-функции для создания адаптивного темного режима, заменяющие традиционные медиа-запросы. Рассматриваются подходы, упрощающие настройку цветовых схем под предпочтения пользователя. Читать...

👩‍💻 Создание адаптивной карточки с изображением и текстом Создайте карточку, которая содержит изображение сверху и текст ниже. Карточка должна быть адаптивной: на больших экранах занимать 25% ширины контейнера, а на мобильных устройствах — всю ширину. Ожидаемое поведение: • Изображение всегда занимает всю ширину карточки. • Текст расположен под изображением. • Карточка адаптируется к размеру экрана. Решение задачи🔽

<div class="card"> <img src="https://via.placeholder.com/300x200" alt="Image" class="card-image"> <div class="card-text"> <h3>Заголовок</h3> <p>Описание карточки. Это адаптивная карточка с текстом и изображением.</p> </div> </div> /* Контейнер карточки */ .card { display: flex; flex-direction: column; width: 25%; /* Для больших экранов */ border: 1px solid #ccc; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: transform 0.3s; } .card:hover { transform: scale(1.05); } /* Изображение в карточке */ .card-image { width: 100%; height: auto; display: block; } /* Текст карточки */ .card-text { padding: 16px; text-align: center; background-color: #f9f9f9; } /* Адаптивность для мобильных устройств */ @media (max-width: 768px) { .card { width: 100%; /* Занимает всю ширину на маленьких экранах */ } }