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

🔎 Подборка вакансий для сеньоров Senior Frontend разработчик 🟢JavaScript, TypeScript, Angular, React, jQuery, RxJS, HTML5, CSS, SCSS, Docker, Git 🟢от 150 000 ₽ до вычета налогов | 3–6 лет Senior Frontend Developer 🟢TypeScript, React, Redux, MobX, Sass, Less, Ant Design, Material UI, Webpack, Git, Jira 🟢до 360 000 ₽ на руки | 3–6 лет Frontend-разработчик 🟢HTML, CSS, JavaScript, jQuery, TypeScript, React, Vue, Webpack, Git 🟢от 220 000 ₽ на руки | 3–6 лет Senior Frontend-разработчик JavaScript/React 🟢JavaScript, TypeScript, React, Redux, Redux RTK, ViteJS, Docker, GitLab CI/CD, WebRTC 🟢от 300 000 до 400 000 ₽ на руки | 3–6 лет

👩‍💻 Broken Glass Effect Сцена с эффектом сломанного стекла в месте клика. Сделана на CSS и JavaScript. Открыть код...

👩‍💻 Новые возможности CSS за 2024 год Центрирование без боли, улучшенный тёмный режим, анимация скрытых элементов и даже решения математических задач — меньше сложностей, больше возможностей. Читать...

👩‍💻 Фильтрация списка через поле ввода Создайте поле ввода и список элементов. При вводе текста в поле должны отображаться только те элементы списка, которые содержат введённый текст. Игнорируйте регистр символов. Требования: • При вводе текста выполняется фильтрация: сравниваем введённую строку с каждым элементом списка. • Элементы, соответствующие фильтру, остаются видимыми, остальные скрываются. Решение задачи🔽

<input type="text" id="filterInput" placeholder="Фильтр..."> <ul id="items"> <li>Яблоко</li> <li>Банан</li> <li>Апельсин</li> <li>Груша</li> </ul> const input = document.getElementById('filterInput'); const listItems = document.querySelectorAll('#items li'); input.addEventListener('input', () => { const filter = input.value.toLowerCase(); listItems.forEach(li => { li.style.display = li.textContent.toLowerCase().includes(filter) ? '' : 'none'; }); });

👩‍💻 Как мы мигрируем с JQuery на React Обсуждаем миграцию с jQuery на React. В статье — реальный опыт, причины перехода, основные шаги и способы преодоления сложностей. Читать...

Хочешь узнать все самые интересные фишки в DevOps? Подписывайся на Telegram-канал DevOps Bootcamp от учебного центра Слёрм и забирай подарок! Для тех, кто собирается в DevOps ы разработали свой Roadmap на основе опыта спикеров Слёрма. Он сделан с учётом российских реалий, разбит на уровни, фокусирует внимание на том, что в первую очередь понвдобится для старта и роста в профессии, и содержит ссылки на дополнительные источники. Подписаться #реклама 16+ slurm.io О рекламодателе

📝 Подборка вакансий для мидлов Middle Frontend Developer • React, JavaScript, TypeScript, Webpack, Git, Jira, Confluence • Уровень дохода не указан | 1–3 года React Native Developer • React Native, JavaScript, TypeScript, Redux, Git, CI/CD, GraphQL, REST API • до 300 000 ₽ на руки | 3–6 лет Фронтенд-разработчик (Vue.js / React) • JavaScript, TypeScript, Vue.js, React, Sass, Less, Git, Vite, Docker, CI/CD • от 190 000 ₽ на руки | 3–6 лет

Школьник + бесплатные курсы по ИТ = новые возможности Хотите прокачать мышление, научиться решать задачи по математике и информатике и познакомиться с ИТ? Бесплатные курсы для школьников в этом помогут. Занятия включают теорию и практические задачи, а само обучение не будет отнимать много времени - нужно 2-3 часа в неделю. После успешного прохождения одного из курсов вам выдадут сертификат - им можно пополнить портфолио. Чтобы начать учиться, выберите подходящую программу и оставьте заявку на сайте Т-Образования. Подать заявку #реклама 16+ education.tbank.ru О рекламодателе

⚙️ Что такое event delegation в JavaScript и зачем его использовать? Event delegation — это техника, позволяющая обрабатывать события на родительском элементе вместо установки обработчиков на каждый дочерний элемент. Это особенно полезно, если дочерние элементы динамически добавляются или их много. ➡️ Пример:

// Родительский элемент
const parent = document.querySelector('#parent');

// Используем делегирование
parent.addEventListener('click', (event) => {
  if (event.target.matches('.child')) {
    console.log(`Клик по элементу: ${event.target.textContent}`);
  }
});

// Динамическое добавление дочерних элементов
const newChild = document.createElement('div');
newChild.className = 'child';
newChild.textContent = 'Новый элемент';
parent.appendChild(newChild);

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

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

👩‍💻 Confetti Button Кнопка с вылетающими конфетти при нажатии. Сделана на CSS и JavaScript. Открыть код...

Попробуйте себя в мобильной разработке и аналитике Студенты, готовы прокачивать навыки программирования вместе с опытными преподавателями Т-Банка? Узнайте, как создавать приложения, анализировать данные и автоматизировать рутинные задачи, на одном из онлайн-курсов Т-Образования. Для учебы нужно 2—3 часа в неделю. Подайте заявку сейчас. Подать заявку #реклама 16+ education.tbank.ru О рекламодателе

🔎 Подборка вакансий для джунов Начинающий Typescript Fullstack разработчик (NestJS, React) 🟢TypeScript, Node.js, NestJS, React, Redux, MongoDB, PostgreSQL, Docker, Kubernetes, HTML5, CSS3 🟢до 90 000 ₽ на руки | Без опыта Frontend-разработчик 🟢Nuxt 3, Vue 3, Tailwind CSS, SCSS/SASS, Pinia, Vite, Docker, Git 🟢от 6 000 000 сом на руки | Без опыта Frontend-разработчик React, Canvas, WebGL, Pixi.js, Skia 🟢TypeScript, React, WebGL, Canvas, Skia, Pixi.js 🟢Уровень дохода не указан | Без опыта JavaScript-разработчик 🟢JavaScript, Angular, REST API, Agile 🟢Уровень дохода не указан | 3–6 лет

👩‍💻 Анимация загрузочного индикатора Создайте кнопку, при нажатии на которую появляется анимация загрузочного индикатора (спиннера) на 3 секунды. После завершения загрузки спиннер исчезает, а на кнопке отображается текст "Готово!". Решение задачи🔽

<button id="loadButton">Начать загрузку</button> <div id="spinner" class="spinner" style="display: none;"></div> button { padding: 10px 20px; font-size: 16px; cursor: pointer; } .spinner { margin-top: 10px; width: 30px; height: 30px; border: 4px solid #ccc; border-top: 4px solid #007bff; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } const button = document.getElementById('loadButton'); const spinner = document.getElementById('spinner'); button.addEventListener('click', () => { button.disabled = true; button.textContent = 'Загрузка...'; spinner.style.display = 'block'; setTimeout(() => { button.textContent = 'Готово!'; spinner.style.display = 'none'; button.disabled = false; }, 3000); });

⚙️ Как устроен Next.js: разбираем ключевые особенности фреймворка на примере небольшого pet-проекта Статья знакомит с фреймворком Next.js, рекомендованным командой React для новых проектов. На примере pet-проекта рассматриваются базовые возможности и преимущества использования Next.js. Читать...

Большая кладовая онлайн-курсов Stepik – незаменимый спутник для тех, кто работает удаленно и любит путешествовать, так как помогает учиться в любой точке мира. Это отличная альтернатива чтению книги и просмотру фильма: позволит вам скоротать время в дороге, осваивая полезный навык или подтягивая иностранный язык, особенно удобно это делать в мобильном приложении. У Stepik есть свой телеграм-канал, в котором они рассказывают об авторских курсах (как платных, так и бесплатных), а также публикует полезные статьи и ссылки. У них есть такие подборки курсов: - Разработка на Python - Дизайн и графика - Тестирование ПО - Работа с данными Подпишитесь на stepik_courses и найдите интересующий курс для себя! Подписаться #реклама 16+ О рекламодателе

🔝 Самые интересные статьи за последние дни: • Как устроен Next.js: разбираем ключевые особенности фреймворка на примере небольшого pet-проекта • Всего несколько строк CSS для плавных переходов между страницами • 5 полезных фреймворков и библиотек для начинающего фронтенд-разработчика на конец 2024 года. Часть 2 • Проектная работа «Оно тебе надо» от Яндекс практикума • Готовимся к вопросам по вёрстке на интервью Frontend-разработчика: «Какие знаешь псевдо-классы?»

👩‍💻 Переключение видимости пароля Создайте поле для ввода пароля и кнопку "Показать/Скрыть". При нажатии на кнопку символы пароля должны переключаться между скрытым (type="password") и видимым (type="text") состоянием. Требования: • Кнопка переключает тип поля ввода пароля между "password" и "text". • Текст кнопки меняется в зависимости от текущего состояния видимости пароля. Решение задачи🔽

<input type="password" id="password" placeholder="Введите пароль"> <button id="toggleBtn">Показать</button> const password = document.getElementById('password'); const toggleBtn = document.getElementById('toggleBtn'); toggleBtn.addEventListener('click', () => { const isHidden = password.type === 'password'; password.type = isHidden ? 'text' : 'password'; toggleBtn.textContent = isHidden ? 'Скрыть' : 'Показать'; });

➡️ Frontend в 2025 году: тренды, которые изменят разработку В этой статье мы подводим итоги 2024 года и делимся нашими прогнозами на 2025 год. Приводим мнение трех экспертов по ключевым трендам фронтенд‑разработки и фреймворков, которые будут актуальными в следующем году. Читать...

🔎 Подборка зарубежных вакансий Frontend Developer 🟢React, JavaScript, HTML, CSS 🟢Уровень дохода не указан | 3–6 лет Senior Frontend Developer (Vue.JS) 🟢Vue3, TypeScript, Git 🟢Уровень дохода не указан | Более 6 лет Senior Frontend Engineer 🟢React, Redux, Redux-Saga, TypeScript, MUI, Electron, Node.js 🟢Уровень дохода не указан | Более 6 лет Senior Next.js Developer 🟢Next.js, React.js, TypeScript, Elasticsearch, Azure, Kubernetes, Terraform 🟢от 2 500 до 5 000 $ до вычета налогов | Более 6 лет

Курс графического дизайна с нуля. Бесплатное обучение! Выбери свое направление в дизайне: графический дизайн, веб-дизайн, UX/UI-дизайн. И изучи бесплатно основы дизайна с личным наставником! 3 работы в портфолио. Узнать больше #реклама 16+ yudaevschool24.online О рекламодателе