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

📝 Подборка вакансий для сеньоров Ведущий React Native разработчик • HTML, CSS, TypeScript, React, React Native • от 200 000 до 250 000 ₽ | от 1-3 лет React Native Senior Developer • Git, GitLab, iOS, React Native, JavaScript, TypeScript, Адаптивная верстка • от 200 000 до 300 000 ₽ | от 5 лет Senior FullStack Developer (TS, React.JS, Nest.JS) • Linux, Docker, Redis, MongoDB, React, NestJS, TypeScript • Уровень дохода не указан | от 4 лет Fullstack TypeScript Developer • TypeScript, Node.js, SQL, React, Git, Docker • Уровень дохода не указан | опыт не указан

👩‍💻 Text Illumination Сцена с анимированным появлением текста. Сделана на SVG и CSS. Открыть код...

👩‍💻 Паттерны для эффективного манипулирования DOM с ванильным JavaScript В руководстве рассматриваются такие шаблоны работы с DOM на JavaScript, как выбор правильного querySelector, кэширование элементов и улучшение обработки событий. Читать...

👩‍💻 Динамический поиск в списке Создайте текстовое поле и список элементов. При вводе текста в поле должны отображаться только те элементы списка, которые содержат введённый текст. Ожидаемое поведение: • При вводе текста список фильтруется по введённым данным. • Поиск нечувствителен к регистру. • Если текстовое поле пустое, отображается весь список. Решение задачи🔽

<input type="text" id="searchInput" placeholder="Введите текст для поиска"> <ul id="itemList"> <li>Apple</li> <li>Banana</li> <li>Orange</li> <li>Grapes</li> <li>Peach</li> </ul> const searchInput = document.getElementById('searchInput'); const itemList = document.getElementById('itemList'); const items = itemList.getElementsByTagName('li'); searchInput.addEventListener('input', () => { const filter = searchInput.value.toLowerCase(); Array.from(items).forEach((item) => { const text = item.textContent.toLowerCase(); item.style.display = text.includes(filter) ? '' : 'none'; }); });

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

📝 Подборка вакансий для джунов Frontend разработчик (React) • React, Redux, HTML, CSS, TypeScript, Webpack • Уровень дохода не указан | от 3 лет Frontend developer (Angular) • JavaScript, Angular, TypeScript, HTML5, CSS3, REST, Git, SASS, WebPack • Уровень дохода не указан | опыт не указан Frontend разработчик (React) • React, TypeScript, JavaScript, Node.js, Express, Git • Уровень дохода не указан | опыт не указан Frontend developer (Vue.js) • Vue.js, Nuxt.js, JavaScript, ES6, Git, REST, SASS, LESS, WebPack, Gulp, Grunt • от 140 000 до 180 000 ₽ | опыт не указан Frontend разработчик (Angular) • Angular 13+, TypeScript, JavaScript, RxJs, Git, Leaflet, Ionic, Chart.js, CI/CD • от 120 000 ₽ | опыт не указан

⚙️ Что такое 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 добавляет мягкую тень с чётким смещением и прозрачностью. Это свойство отлично подходит для выделения элементов интерфейса.

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

👩‍💻 Fluid Simulation Сцена с интересной симуляцией жидкости с текстом. Сделана на CSS и JavaScript. Открыть код...

📝 Подборка вакансий для джунов Junior React Разработчик • HTML, CSS, JavaScript (ES6), Git, Redux/MobX, styled-components/Less/Sass, TypeScript, Next.js, Docker, Webpack • от 60 000 до 90 000 ₽ | опыт не указан Разработчик Laravel и REACT в Scrum команду • Laravel, React, REST API, Git • от 50 000 до 1 000 000 ₽ | опыт не указан JavaScript Developer (NGFW) • JavaScript, React, TypeScript, Node.js • Уровень дохода не указан | от 2 лет Frontend разработчик (Vue.js) • JavaScript, TypeScript, Vue.js, SASS, Gulp, WebPack, HTML, CSS • от 50 000 до 90 000 ₽ | опыт не указан

👩‍💻 Анимация "пульсации" кнопки Создайте кнопку, которая при наведении начинает "пульсировать" — её размер плавно увеличивается и уменьшается в течение короткого времени. Ожидаемое поведение: • Кнопка остаётся статичной, пока на неё не навели мышь. • При наведении запускается бесконечная анимация "пульсации". • При убирании мыши анимация прекращается. Решение задачи🔽

<button class="pulse-button">Наведи на меня</button> .pulse-button { padding: 10px 20px; font-size: 16px; color: white; background-color: #28a745; border: none; border-radius: 8px; cursor: pointer; transition: transform 0.2s ease; } .pulse-button:hover { animation: pulse 1s infinite; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }

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

Мастер-класс по Python для школьников. Бесплатно! Онлайн-урок от ведущего ИТ ВУЗа страны - Университета Иннополис для учеников 6-11 классов. 👍Бесплатно! ✅Познакомим с профессией тестировщика. ✅Научим проверять программы, находить баги. ✅На практике отработаем использование инструментов и методов тестирования. ⚡Ваш ребёнок за один час создаст автоматический тест на языке программирования Python и сможет использовать полученные знания в дальнейшем! Для участия важно знание основ программирования на Python. Помогите ребёнку освоить востребованную профессию. Регистрируйтесь! Зарегистрироваться #реклама 16+ progmatica.innopolis.university О рекламодателе

🔝 Самые интересные статьи за последние дни: • Упрощаем CSS-анимации с помощью свойств display и размеров элемента • 5 полезных фреймворков и библиотек для начинающего фронтенд-разработчика на конец 2024 года • Возможности поля HTML-документа, часть 2. Внедряем CSS и JS • Ошибки, которые я совершил, пытаясь быть «слишком правильным» в разработке • Разработка Task Manager с нуля до полнофункционального продукта

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

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 Native Developer Middle • React Native, JavaScript, TypeScript, REST API, Git • от 1000 до 1500 $ | опыт не указан Fullstack Developer • React, Vue.js, Webpack, TypeScript, Node.js, MongoDB • от 3800 до 6500 $ | от 5 лет React.js Developer • React.js, React Native, TypeScript, Redux, Sass, CSS, HTML, REST, JSON, Node.js • от 5000 $ | от 5 лет Fullstack разработчик (JavaScript, PHP, SQL), веб программист • PHP, JavaScript, HTML, CSS, jQuery, Node.js, React, SQL • от 1800 $ | опыт не указан

🔧 Баги — это не твой враг Увидел баг — разозлился, потратил кучу времени, но всё равно ничего не понял? Это нормально. Баги не для того, чтобы раздражать тебя, они для того, чтобы ты учился. ✔️ Совет: раздели проблему на маленькие части и ищи, где что ломается. Включай логи, добавляй отладку, тестируй гипотезы. Это как пазл: с каждым шагом всё становится яснее.

👩‍💻 Решение головоломки судоку на JavaScript с помощью хэш-карт и рекурсий Если вы погружены в мир судоку, то наверняка ищете варианты ускоренного решения задач по программированию. Предлагаем ознакомиться с одним из них. Использование в нем хэш-карт и рекурсий значительно ускоряет решение головоломки. Читать...

5 причин, почему вам нужен Битрикс24 Мессенджер + AI 1) Ничего личного. Никаких Алена-ноготочки и любимая жена 2) Только рабочее. Общение с коллегами в чатах, каналах и тредах. 3) Слова становятся делами. Задачи и встречи ставятся прямо из переписки в чате. 4) Синки. Мгновенные видеоколлы до 100 человек из чата в один клик. 5) Нейросеть. Можно прямо в групповом чате штурмить идеи с AI-помощником. А, последняя причина – пользоваться можно бесплатно. Забирайте бесплатный мессенджер для работы компании — Битрикс24 Попробовать #реклама 16+ bitrix24.ru О рекламодателе

📝 Подборка вакансий для лидов Senior/Lead Frontend-разработчик • TypeScript, React, Next.js, TailwindCSS, React Query, Redux Toolkit, eCharts, React Flow • Уровень дохода не указан | от 6 лет Frontend Teamlead (React JS) • TypeScript, JavaScript, React, Git • Уровень дохода не указан | от 3 лет FrontEnd Разработчик в стартап Bolsta (за опцион) • React, Vue.js, HTML, CSS, JavaScript • Уровень дохода не указан | опыт не указан Team Lead Frontend (Управление перспективных проектов) • React, TypeScript, HTML, CSS, SCSS, JavaScript, React Router Dom, axios, Fluent UI, final-form, i18next, Jotai, Mitt, React Query, Tanstack Table, Vite • Уровень дохода не указан | от 4 лет Senior Frontend Developer (React) • JavaScript, TypeScript, React, Redux, React Hook Form, Vite, SCSS, CSS Modules • Уровень дохода не указан | от 5 лет