👩‍💻 Функция задержки выполнения

Напишите функцию throttle, которая ограничивает количество вызовов переданной функции. Функция должна вызываться не чаще, чем один раз в указанный временной интервал. Это полезно для оптимизации производительности, например, при обработке событий скроллинга или ресайза окна.

Пример кода:

log('Hello');  // Вызовется сразу
log('World');  // Игнорируется, т.к. прошло меньше 1000ms

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

function throttle(func, delay) {
let lastCall = 0;
return function(...args) {
const now = new Date().getTime();
if (now - lastCall >= delay) {
lastCall = now;
return func(...args);
}
};
}

// Примеры использования
const log = throttle(console.log, 1000);

log('Hello'); // Вызовется сразу
log('World'); // Игнорируется, т.к. прошло меньше 1000ms
setTimeout(() => log('Again'), 1500); // Вызовется через 1.5 секунды

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

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

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

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

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

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

👩‍💻 Neuro Noise (GLSL Shader)

Интерактивный фон с эффектом при перемещении курсора. Сделан на CSS и JavaScript.

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

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

Верстальщик Webflow и Tilda
🟢HTML, CSS, JavaScript, Figma
🟢Уровень дохода не указан | 3–6 лет

Senior HTML-верстальщик
🟢HTML5, Figma, Photoshop, jQuery, JavaScript
🟢от 70 000 до 90 000 ₽ | 3–6 лет

Графический дизайнер-верстальщик
🟢Photoshop
🟢от 150 000 до 250 000 ₽ | 3–6 лет

Дизайнер-верстальщик (гибрид)
🟢inDesign, Illustrator, Photoshop
🟢от 90 000 ₽ | 3–6 лет

Senior Frontend Developer (Vue.JS)
🟢Vue3, TypeScript, Git
🟢от 90 000 ₽ | Более 6 лет

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

• Названия должностей разработчиков почти потеряли свой смысл

• Три рецидива синдрома самозванца: из историка в системного аналитика

• 10 не самых очевидных причин, чтобы уволиться

• ИТ-пенсионеры и где они обитают

• Пресловутые софтскилы и карьера в IT

⚙️ Паттерн «Бэкенд для фронтенда»: преимущества, недостатки и лучшие практики для реализации

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

Читать...

⚙️ Как работает свойство z-index в CSS?

z-index управляет тем, как элементы накладываются друг на друга в трёхмерном пространстве веб-страницы. Элементы с большим значением z-index будут отображаться поверх тех, у которых значение меньше.

➡️ В этом примере элемент с z-index: 2 будет отображаться поверх элемента с z-index: 1:

.element1 {
  position: relative;
  z-index: 1;
}

.element2 {
  position: relative;
  z-index: 2;
}

🗣 Важно помнить, что свойство z-index работает только с элементами, у которых установлено позиционирование (position: relative, absolute, fixed или sticky).

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

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

Tech Lead Fullstack Developer (React.js + Node.js)
🟢TypeScript (99% кода), JavaScript, React.js, RxJS, Node.js, PostgreSQL, AWS, Electron.
🟢от 5 000 до 6 000 $ | Более 6 лет

Web Tech Lead (Full stack, TsNode, Vue/React)
🟢Уровень дохода не указан | 3–6 лет

Tech Lead (mobile)
🟢Android, Flutter, JavaScript, CI/CD
🟢до 500 000 ₽ | 3–6 лет

Tech Lead (Full stack, TsNode, Vue/React)
🟢JavaScript, Node.js, React, VueJS, TypeScript, CI/CD
🟢Уровень дохода не указан | 3–6 лет

Tech Lead (PHP/Laravel + Vue.js)
🟢PHP, Laravel, PostgreSQL, VueJS, Kafka, CI/CD
🟢Уровень дохода не указан | 3–6 лет

❓ Как быстро разобраться в Next.js 14: 5 советов опытного фронтендера

Делимся пятью советами, которые помогут быстро разобраться в тонкостях работы с изображениями, переменными окружения, кэшированием и управлением компонентами в Next.js.

Читать...

💡 Карьера — это не про «идеальную работу», а про опыт и умение адаптироваться

В мире, где всё меняется быстрее, чем ты успеваешь обновлять резюме, держаться за одну карьерную траекторию — всё равно что пытаться угнаться за горизонтом. Умение перестраиваться, пробовать новое и брать на себя задачи, которые немного пугают, — вот что реально важно. И это не про «выйди из зоны комфорта», а про осознанный выбор расти и не цепляться за привычное.

🎯 Что делать: пообщайся с коллегой из другой области, возьми на себя один проект вне своей зоны, попробуй новый инструмент или язык, устрой «ревизию» навыков — что сейчас реально работает на тебя, а что пора обновить? Простые шаги, но каждый — ключ к росту и новым возможностям.

🔎 Подборка валютных вакансий

HTML-верстальщик / Front-end разработчик
🟢PHP, jQuery, JavaScript, HTML5, CSS3
🟢от 500 до 500 $ | Без опыта

Учитель FrontEnd/Scratch
🟢HTML, CSS, React, Базовый уровень, JavaScript, Figma, Tilda
🟢от 100 000 ₸ | Без опыта

Frontend-разработчик
🟢ReactJs, Redux Toolkit, Typenoscript, Styled-components, React Router, git, Storybook
🟢от 1 200 до 2 000 $ | 3–6 лет

Frontend Developer Vue.js / Senior
🟢JavaScript, VueJS, Laravel, HTML, CSS, Figma, Git, MySQL, API, Atlassian Jira, React
🟢до 3 500 $ | Более 6 лет

Frontend-разработчик (React)
🟢React, RTK и RTK Query, TypeScript, соблюдение принципов DRY, KISS и SOLID, MUI, Git
🟢от 250 000 до 350 000 ₸ | 1–3 года

👩‍💻 Масштабируемый CSS с архитектурой ITCSS

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

Читать...

👩‍💻 Создание адаптивной сетки с переменными CSS

Создайте CSS-сетку, которая меняется в зависимости от размера экрана. Используйте CSS-переменные для задания отступов и ширины колонок, чтобы легко настраивать и менять их для разных разрешений экрана.

➡️ Пример: Создайте сетку с тремя колонками для больших экранов, двумя колонками для средних и одной колонкой для мобильных.

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

:root {
--column-gap: 20px;
--row-gap: 20px;
--column-count: 3;
}

.container {
display: grid;
grid-template-columns: repeat(var(--column-count), 1fr);
gap: var(--row-gap) var(--column-gap);
}

@media (max-width: 768px) {
:root {
--column-count: 2;
}
}

@media (max-width: 480px) {
:root {
--column-count: 1;
}
}

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

• Family Frontend Meetup #3

• Полезные рецепты ручного создания SVG

• Глассморфизм и SVG

• Генеративная графика — не только ИИ

• Мощь CSS-масок

👩‍💻 Пара шаблонов кастомизированных элементов Handlebars для Apache Superset — 2

Первая часть статьи даёт правила для Handlebars в Superset. Далее — готовый код HTML + CSS, который можно сразу использовать, и разбор CSS-элементов с объяснениями.

Читать...

👩‍💻 Адаптивная сетка карточек товаров с CSS Grid

Напишите разметку и стили для отображения карточек товаров в сетке. Сетка должна адаптироваться к размеру экрана: на больших экранах отображать карточки в три колонки, на планшетах — в две, а на мобильных устройствах — в одну колонку. Карточки должны иметь тень, отступы и закруглённые углы, чтобы выглядеть как отдельные блоки.

➡️ Пример: Для экрана шириной 1024px и выше, массив товаров должен отображаться в виде трёх колонок. При меньшем размере — перестраиваться автоматически.

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

<div class="product-grid">
<div class="product-card">Товар 1</div>
<div class="product-card">Товар 2</div>
<div class="product-card">Товар 3</div>
<div class="product-card">Товар 4</div>
<div class="product-card">Товар 5</div>
<div class="product-card">Товар 6</div>
</div>

/* Основной контейнер */
.product-grid {
display: grid;
gap: 20px;
padding: 20px;
}

/* Стили карточек */
.product-card {
background-color: #f9f9f9;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
}

/* Три колонки на больших экранах */
@media (min-width: 1024px) {
.product-grid {
grid-template-columns: repeat(3, 1fr);
}
}

/* Две колонки на планшетах */
@media (min-width: 768px) and (max-width: 1023px) {
.product-grid {
grid-template-columns: repeat(2, 1fr);
}
}

/* Одна колонка на мобильных */
@media (max-width: 767px) {
.product-grid {
grid-template-columns: 1fr;
}
}

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

Full Stack JavaScript Developer (Junior/Middle)
🟢JavaScript, Node.js, PostgreSQL, React, HTML, CSS, SQL
🟢Уровень дохода не указан | от 1 года

Junior Frontend Developer
🟢JavaScript, Git, CSS, HTML, TypeScript, React, Next.js
🟢от 35 000 до 120 000 ₽ | Без опыта

Junior React Разработчик
🟢HTML, CSS, JavaScript (ES6), Git, Redux/MobX, styled-components/Less/Sass, TypeScript, Next.js, Docker, Webpack
🟢от 60 000 до 90 000 ₽ | 1–3 года

Frontend-разработчик (junior)
🟢React, JavaScript, TypeScript, Redux, CSS, Git, Webpack, Vite
🟢от 65 000 ₽ | 1–3 года

PHP-разработчик (junior/junior+) / backend / fullstack
🟢PHP 8, MySQL, MongoDB, Laravel, Vue.js, Nginx, RabbitMQ, Docker, AWS, Yandex Cloud, GitLab CI/CD
🟢от 45 000 до 90 000 ₽ | 1–3 года

👩‍💻 Profile Card UI

Стильная карточка-портфолио с анимированными кнопками. Сделан на Svg, SCSS и JavaScript.

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

👩‍💻 Как работает свойство object-fit в CSS?

Свойство object-fit позволяет управлять масштабированием содержимого (например, изображений или видео) внутри контейнера, не искажая его соотношение сторон. Это особенно полезно при создании адаптивных и аккуратных галерей.

➡️ В этом примере изображение заполняет контейнер, сохраняя пропорции, благодаря значению cover:

.container {
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

🗣 Свойство object-fit помогает контролировать отображение изображений в контейнерах, не растягивая и не искажая их.

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

Frontend-разработчик Middle
🟢HTML, CSS, SCSS, JavaScript, Vue 3, Vuex, Vue-router, Vite, JSON RPC, I18n
🟢Уровень дохода не указан | не требуется

Middle Frontend Developer
🟢JavaScript, TypeScript, React, Redux, Next.js, TailwindCSS
🟢Уровень дохода не указан | 1–3 года

Javanoscript middle frontend developer
🟢JavaScript, TypeScript, Vue.js, Git, HTML, CSS
🟢от 220 000 ₽ | 3–6 лет

Middle frontend-разработчик
🟢HTML, CSS, JavaScript, TypeScript, Vue.js, Nuxt.js, WebSocket, REST, GraphQL
🟢от 150 000 до 200 000 ₽ | 3–6 лет

Junior+/middle frontend разработчик
🟢JavaScript, TypeScript, CSS, React
🟢до 160 000 ₽ | 1–3 года

👩‍💻 Использование async и defer для управления скриптами

В мире веб-разработки оптимизация времени загрузки страниц имеет решающее значение. Два мощных атрибута тега <noscript> — async и defer — могут существенно повлиять на производительность сайта. Использование этих атрибутов без их глубокого понимания может негативно сказаться на производительности и привести к ошибкам. Давайте начнём с основ и узнаем, что делают эти атрибуты и когда их следует использовать.

Читать...