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

🖇 Избегай зависимости от "чужого кода" Ты решил проблему через копипасту кода с форума или GitHub? Быстро, но опасно. 👉 Совет: всегда разбирайся, как работает решение, перед тем как внедрить его. Добавляй комментарии, чтобы объяснить себе и другим, почему этот код здесь. И не ленись дорабатывать его под нужды своего проекта.

👩‍💻 Проблема с new URL(), и как URL.parse() её решает Часто приходится анализировать множество URL-адресов. Частично для их проверки, а также для нормализации или извлечения определённых частей из URL. API URL в браузерах позволяет это делать, но его эргономика не идеальна. Читать...

📝 Подборка вакансий для лидов Руководитель группы разработки • 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, Управление разработкой, Управление людьми, Ведение переговоров • Уровень дохода не указан | Требуемый опыт не указан

⚡ Новые каналы с вакансиями и стажировками для джунов Друзья, мы запустили новые каналы, где публикуются все свежие вакансии и стажировки 🔺БИГТЕХ

Вакансии и стажировки в крупнейших IT-компаниях мира: NVidia, Apple, T-банк, Яндекс, Google и т. д.

👉 ПОДПИСАТЬСЯ 🔺СТАЖИРОВКИ

Стажировки для начинающих специалистов в IT независимо от возраста!

👉 ПОДПИСАТЬСЯ 🔺 ВАКАНСИИ

Горячие вакансии с привлекательными офферами для джуниор разработчиков, аналитиков, дизайнеров и QA-специалистов

.

👉 ПОДПИСАТЬСЯ

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

⚡️ В сети начали массово сливать курсы и книги известных онлайн школ Вот отсортированная база с тонной материала(постепенно пополняется): БАЗА (4687 видео/книг): (363 видео, 87 книги) — Python (415 видео, 68 книги) — Frontend (143 видео, 33 книги) — ИБ/Хакинг (352 видео, 89 книги) — С/С++ (343 видео, 87 книги) — Java (176 видео, 32 книги) — Git (293 видео, 63 книги) — C# (174 видео, 91 книги) — DevOps (167 видео, 53 книги) — PHP (227 видео, 83 книги) — SQL/БД (163 видео, 29 книги) — Linux (107 видео, 43 книги) — СисАналз (181 видео, 32 книги) — Go (167 видео, 43 книги) — Kotlin/Swift (112 видео, 24 книги) — Flutter (137 видео, 93 книги) — DS/ML (113 видео, 82 книги) — GameDev (183 видео, 37 книги) — UI/UX (129 видео, 73 книги) — QA (213 видео, 63 книги) — Rust (121 видео, 24 книги) — Ruby Скачивать ничего не нужно — все выложили в Telegram

🔎 Подборка вакансий для джунов 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 – разобрали плюсы каждого и объяснили, когда что использовать. Читать...