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

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

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

Читать...

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

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

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

Frontend-разработчик
🟢ReactJs, Redux Toolkit, Typescript, 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 года

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

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

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

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

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

Читать...

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

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

⚙️ Как работает свойство 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).

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

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

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

Читать...

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

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

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

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

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

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

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

Верстальщик 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 лет

👩‍💻 Neuro Noise (GLSL Shader)

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

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

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

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

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

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

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

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

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

Напишите функцию 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 секунды

👩‍💻 React и FormData

Узнайте о новейшем и одновременно старейшем стандарте React для доступа к данным формы, а также о том, как использовать его с TypeScript.

Читать...

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

HTML-верстальщик
🟢JavaScript, HTML, CSS, Photoshop
🟢от 250 до 250 $ | Без опыта

Frontend разработчик - верстальщик (HTML CSS)
🟢HTML5, CSS, JS, React.js / Vue.js, БЭМ
🟢от 60 000 до 100 000 ₽ | 1–3 года

Frontend-разработчик / верстальщик (Тула)
🟢HTML5 (PUG), CSS3 (SCSS/LESS), ES6, Vue.js, Nuxt.js, Git, Docker, Gitlab CI/CD, Webpack, Vite
🟢от 70 000 до 100 000 ₽ | 1–3 года

Web программист Битрикс, Bitrix24
🟢PHP, MySQL, API 1C-Bitrix, HTML, CSS, Javascipt + jQuery
🟢от 130 000 ₽ | 1–3 года

HTML-верстальщик / Junior Frontend-разработчик
🟢JavaScript, HTML5, Flex, CSS3, Git
🟢от 45 000 ₽ | Без опыта

👩‍💻 Что такое замыкания (closures) в JavaScript?

Замыкания позволяют функции запоминать переменные из своей внешней области видимости даже после завершения выполнения внешней функции.

function makeCounter() {
  let count = 0;
  return function() {
    return ++count;
  };
}

const counter = makeCounter();
console.log(counter()); // 1
console.log(counter()); // 2

🗣️ Замыкания полезны для создания функций с внутренним состоянием, например, счётчиков или настройки приватных данных.

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

👩‍💻 Very cool animated text

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

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

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

Frontend-разработчик / верстальщик (стажер, junior)
🟢Bootstrap SASS БЭМ React/Vue REST-бекенд
🟢от 40 000 до 80 000 ₽ | Без опыта

Верстальщик / Junior Frontend-разработчик
🟢HTML CSS JavaScript БЭМ CMS
🟢от 40 000 до 70 000 ₽ | Без опыта

Верстальщик HTML (Junior Frontend)
🟢HTML5 CSS3 SASS REST ES6 Webpack gulp JS jQuery
🟢до 45 000 ₽ | 1–3 года

HTML верстальщик / Junior Frontend разработчик
🟢HTML5 CSS3 JS PHP
🟢от 45 000 ₽ | 1–3 года

Разработчик веб-приложений / фронтенд / верстальщик HTML (Junior)
🟢HTML5 CSS3
🟢от 40 000 ₽ | Без опыта

👩‍💻 Сложение строк, представляющих большие числа

Даны строковые представления двух целых чисел. Напишите функцию, которая возвращает строковое представление суммы этих чисел. Необходимо, чтобы решение работало с очень большими числами, которые не помещаются в стандартные типы данных.

Пример:

sumStrings('123', '456'); // => '579'
sumStrings('999999999999999999', '1'); // => '1000000000000000000'

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

function sumStrings(a, b) {
let carry = 0, result = '';
a = a.padStart(Math.max(a.length, b.length), '0');
b = b.padStart(Math.max(a.length, b.length), '0');

for (let i = a.length - 1; i >= 0; i--) {
let sum = parseInt(a[i]) + parseInt(b[i]) + carry;
carry = Math.floor(sum / 10);
result = (sum % 10) + result;
}

if (carry) result = carry + result;
return result.replace(/^0+/, '');
}

➡️ Пара шаблонов кастомизированных элементов Handlebars для Apache Superset

Apache Superset — популярный инструмент для визуализации данных с открытым кодом. Но при его использовании можно столкнуться с ограничениями. В статье обсуждается, как с помощью шаблонов Handlebars и Jinja решать эти проблемы, включая интеграцию web-верстки в дашборды и обход ограничений системы.

Читать...

👩‍💻 Автоматическая караоке-система на основе React и Vercel

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

Читать...