👩‍💻 Broken Glass Effect

Сцена с эффектом сломанного стекла в месте клика. Сделана на CSS и JavaScript.

Открыть код...

👩‍💻 CSS :has() — Псевдокласс, который давно ждали

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

Читать...

📈 Подборка статей для вашей карьеры

• Пришёл на вакансию дизайнера, а стал питонистом: как IT-специалисты нашли свою первую работу

• На сколько денег может рассчитывать ИТ-предприниматель в разных ветках развития

• Анализ задачи с собеседования в Google: конь и телефонные кнопки

• Быстрый старт в QA Fullstack: чем вооружиться будущему стажеру в Альфа-Банке

• Как убить самоорганизацию в команде: вредные советы для лидера

📊 10 методов SEO-оптимизации JavaScript, которые должен знать каждый фронтендер

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

Читать...

⚙️ Что такое псевдоэлементы в CSS и как они используются?

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

➡️ Пример:

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

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

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

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

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

📝 Подборка вакансий для сеньоров

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 лет

👩‍💻 Шаблон “Декоратор” в разработке на TypeScript

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

Читать...

🔍 Развивай навык «поиска причин»

Когда всё ломается, проще всего сказать: «Это сервер/библиотека/коллега виноват». Но это не решает проблему.

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

👩‍💻 5 HTML-атрибутов для улучшения пользовательского опыта и SEO

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

Читать...

🧨 Работа с куки-файлами хуже сапёрного дела

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

Читать...

👩‍💻 Реализация кнопки с таймером блокировки

Создайте кнопку, которая становится недоступной (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);
});

🔝 Самые интересные статьи за последние дни:

• HMPL — лучшая альтернатива HTMX

• Как я получил 50000 + 0 долларов за уязвимость в Zendesk

• Неизвестно полезный CSS. Часть 5

• База, которую нужно знать про JSON Schema

• Магия CSS на практике: советы по вёрстке от гика. Часть 5

➡️ Веб-приложения будущего: что нужно знать о WebAssembly

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

Читать...

👩‍💻 Динамическое создание таблицы из массива объектов

Напишите функцию, которая принимает массив объектов и массив ключей. Функция должна возвращать 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>`;
}

🔎 Подборка вакансий для джунов

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 года

👩‍💻 On-Scroll Fire Transition

Красивая анимация горения страницы при скролле. Сделана на CSS и JavaScript.

Открыть код...

⚙️ Что такое box-shadow в CSS и как оно работает?

box-shadow — это свойство CSS, которое добавляет тень к элементу. Оно позволяет задавать смещение, размытие, размер растушёвки и цвет тени.

➡️ Пример:

<div class="box">Я с тенью</div>

<style>
  .box {
    width: 200px;
    height: 100px;
    background: lightblue;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5); /* Смещение и размытие тени */
  }
</style>

🗣️ В этом примере box-shadow добавляет мягкую тень с чётким смещением и прозрачностью. Это свойство отлично подходит для выделения элементов интерфейса.

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

📝 Подборка вакансий для мидлов

Frontend Developer (брокерский бизнес)
• HTML, CSS, JavaScript, React, Redux, TypeScript, Webpack, Babel, REST API
• Уровень дохода не указан | 3+ года

Frontend-разработчик (React, Redux, TypeScript)
• React, Redux, TypeScript, LESS, SCSS, Ant Design, REST API
• от 120 000 ₽ | 1–3 года

Middle Frontend Developer Vue (Back-office)
• Vue3, JavaScript, TypeScript, Webpack, Pinia, Element Plus, Figma
• Уровень дохода не указан | 3+ года

👩‍💻 Обзор наследования в JavaScript

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

Читать...

👩‍💻 Проверка сбалансированных скобок

Напишите функцию, которая принимает строку, содержащую различные типы скобок ((), {}, []), и проверяет, являются ли они сбалансированными. Строка считается сбалансированной, если каждая открывающая скобка имеет соответствующую закрывающую в правильном порядке.

Пример: Для строки "{[()]}" функция должна вернуть true, а для строки "{[(])}" — false.

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

function isBalanced(str) {
const stack = [];
const pairs = { ')': '(', '}': '{', ']': '[' };

for (let char of str) {
if (['(', '{', '['].includes(char)) {
stack.push(char);
} else if ([')', '}', ']'].includes(char)) {
if (stack.pop() !== pairs[char]) return false;
}
}
return stack.length === 0;
}

// Пример использования
console.log(isBalanced("{[()]}")); // true
console.log(isBalanced("{[(])}")); // false

⚙️ Предзагрузка отзывчивых изображений

Статья объясняет, как правильно предзагружать отзывчивые изображения, чтобы ускорить загрузку страниц. Рассматривается взаимодействие предзагрузки с решениями браузера для выбора изображений под устройство.

Читать...