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

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

Руководитель группы разработки
• Git, Docker, PHP, Laravel, React, CI/CD, Управление разработкой, Управление людьми, Ведение переговоров
• Уровень дохода не указан | Требуемый опыт не указан

Fullstack TeamLead
• PHP, Laravel, Python, CI/CD, Управление разработкой
• до 400 000 ₽ | от 6 лет опыта

Руководитель web-разработки
• Git, Docker, PHP, Laravel, React, CI/CD, Управление разработкой, Управление людьми, Ведение переговоров
• Уровень дохода не указан | Требуемый опыт не указан

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

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

👩‍💻 8 важнейших аспектов JavaScript, которые нужно освоить до изучения React

Изучение React без прочной базы JavaScript похоже на строительство дома без фундамента. В этой статье разберем 8 ключевых концепций, которые помогут тебе уверенно чувствовать себя в React-разработке и писать качественный код.

Читать...

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

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

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

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

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

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

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

Middle+ Frontend developer (React) СберНПФ
• TypeScript, JavaScript, React, Webpack
• Уровень дохода не указан | 2 года опыта

Senior Fullstack developer
• JavaScript, TypeScript, Node.js, React
• Уровень дохода не указан | Senior/Lead уровень

React.js Developer
• React, React Native, TypeScript, Redux, Sass, CSS, HTML, REST, JSON, Node.js
• от 5 000 $ | 5 лет опыта

👩‍💻 Toggle Pill

Набор переключателей с разными стилями анимаций. Сделан на чистом CSS.

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

👩‍💻 TypeScript в деталях: настраиваем tsconfig.json правильно

Один файл, который может изменить все: полное руководство по tsconfig.json. Разбираем каждый параметр и его влияние на разработку, сборку и поддержку TypeScript-проектов.

Читать...

👩‍💻 Подсчёт частоты элементов в массиве

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

Пример:

const input = [1, 2, 2, 3, 4, 3, 5, 3];
const result = countFrequency(input);
console.log(result); 
// Ожидаемый результат: {1: 1, 2: 2, 3: 3, 4: 1, 5: 1}

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

function countFrequency(array) {
return array.reduce((acc, item) => {
acc[item] = (acc[item] || 0) + 1;
return acc;
}, {});
}

// Пример использования:
const input = [1, 2, 2, 3, 4, 3, 5, 3];
const result = countFrequency(input);
console.log(result);
// Ожидаемый результат: {1: 1, 2: 2, 3: 3, 4: 1, 5: 1}

👩‍💻 Улучшение производительности с делегированием событий

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

Читать...

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

React разработчик
• TypeScript, WebSockets, React, Effector, Express
• от 150 000 до 250 000 ₽ | 3 года опыта

React Native разработчик
• React Native, React, Redux, Flutter, PHP, Laravel, Next.js, C#, TypeScript, JavaScript
• от 140 000 до 160 000 ₽ | 3 года опыта

Middle Fullstack Developer
• React, Vue.js, Webpack, TypeScript, Node.js, MongoDB
• от 3 800 до 5 500 $ | 5 лет опыта

⚙️ Что такое debounce и как он используется в JavaScript?

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

➡️ Пример:

function debounce(func, delay) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), delay);
  };
}

// Использование debounce
const handleResize = debounce(() => {
  console.log('Окно изменилось!');
}, 300);

window.addEventListener('resize', handleResize);

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

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

👩‍💻 Fancy Fading Footer

Стильный футер с эффектом блюра. Сделан на чистом CSS.

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

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

Frontend developer (React/crypto)
🟢React, NextJS, Tailwind, ethers.js, git, mongoDB, NestJS, SQL
🟢от 2 500 до 4 000 $ до вычета налогов | 1–3 года опыта

Frontend-разработчик
🟢JavaScript, TypeScript, HTML, CSS, Vue.js, Git, Docker
🟢от 200 000 до 230 000 ₽ до вычета налогов | 1–3 года опыта

React Frontend-разработчик (на верстку креативных сайтов)
🟢React, Next.js, JavaScript, TypeScript, HTML, CSS, GSAP, Framer Motion, Git, Figma
🟢от 80 000 до 120 000 ₽ на руки | 1–3 года опыта

👩‍💻 Find the missing letter

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

Вы всегда получите действительный массив. И в нем всегда будет отсутствовать ровно одна буква. Длина массива всегда будет составлять не менее 2.

Пример кода:

['a','b','c','d','f'] -> 'e'
['O','Q','R','S'] -> 'P'

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

function findMissingLetter(array) {
for (let i = 0; i < array.length - 1; i++) {
// Если разница в кодах символов между текущей и следующей буквой больше 1
if (array[i].charCodeAt(0) + 1 !== array[i + 1].charCodeAt(0)) {
// Возвращаем пропущенную букву
return String.fromCharCode(array[i].charCodeAt(0) + 1);
}
}
throw new Error("No missing letter found");
}

// Примеры использования:
console.log(findMissingLetter(['a','b','c','d','f'])); // 'e'
console.log(findMissingLetter(['O','Q','R','S'])); // 'P'

🪄 25 CSS-трюков, которые должен знать каждый разработчик

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

Читать...

👩‍💻 10 лучших CSS-библиотек и фреймворков для быстрой разработки фронтенда

Запутался в CSS-фреймворках? Мы собрали ТОП-10 самых крутых инструментов, которые реально экономят время на фронтенде. От тяжеловеса Bootstrap до минималистичного Milligram – разобрали плюсы каждого и объяснили, когда что использовать.

Читать...

👩‍💻 Динамическое создание списка задач

Создайте поле ввода и кнопку, которые позволяют добавлять задачи в список. Каждая задача в списке должна иметь кнопку для её удаления.

Ожидаемое поведение:

• Введите текст задачи в поле ввода и нажмите кнопку "Добавить".
• Задача появляется в списке ниже с кнопкой "Удалить" рядом с ней.
• Нажатие на кнопку "Удалить" удаляет соответствующую задачу из списка.

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

<div>
<input type="text" id="taskInput" placeholder="Введите задачу">
<button id="addTaskButton">Добавить</button>
</div>
<ul id="taskList"></ul>

const taskInput = document.getElementById('taskInput');
const addTaskButton = document.getElementById('addTaskButton');
const taskList = document.getElementById('taskList');

addTaskButton.addEventListener('click', () => {
const taskText = taskInput.value.trim();
if (taskText === '') return; // Не добавляем пустую задачу

const li = document.createElement('li');
li.textContent = taskText;

const deleteButton = document.createElement('button');
deleteButton.textContent = 'Удалить';
deleteButton.style.marginLeft = '10px';
deleteButton.addEventListener('click', () => li.remove());

li.appendChild(deleteButton);
taskList.appendChild(li);

taskInput.value = ''; // Очищаем поле ввода
});

👩‍💻 HTML элемент search

HTML-элемент search — это контейнер, представляющий части веб-страницы с функциональностью поиска.

Читать…

🔎 Подборка зарубежных вакансий

Laravel/VUE разработчик (Middle+)
🟢Laravel, Vue.js, PostgreSQL, REST API, WebSocket, Git
🟢от 1 500 до 2 500 $ на руки | 3–6 лет

Node.js Developer
🟢Node.js, TypeScript, Nest.js, Jest, PostgreSQL, AWS
🟢от 3 000 до 5 000 $ до вычета налогов | 3–6 лет

Full Stack Developer
🟢Node.js, TypeScript, VueJS, React, PostgreSQL, Redis, AWS, DevOps
🟢Уровень дохода не указан | Более 6 лет

💬 Сокращай задержки на коммуникации

Часто ждёшь часами, пока коллега ответит на простой вопрос? Это не только теряет время, но и ритм работы.

👉 Совет: формулируй вопросы так, чтобы не оставлять места для уточнений. Вместо «Как вызвать функцию?» пиши «Какие аргументы нужно передать в метод calculate() для обработчика X?». Чем точнее запрос, тем быстрее ответ.