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

Бесплатное IT-образование в 2024 Отобрали для вас полезные телеграм-каналы, которые помогут освоить IT-направления Выбирайте нужное и подписывайтесь: — Frontend: t.me/+qWPopdiaxVMzZDgy — Backend: t.me/+X-zQb-NgzGNhMzRi — GitHub: t.me/+3BVAmDixuO9lYTFi — Книги айти: t.me/+IG2NAVECUXs4MGYy — Python: t.me/+vBSA5zgB_gA0OWRi — Java: t.me/+3BRKfZ09ewg0NDJi — C#: t.me/+O3pnFY4bpF5hNTEy — С/С++: t.me/+PGxPXpZZczQxODcy — Базы Данных & SQL: t.me/+530qWWydM8ExZjk6 — Golang: t.me/+FvTd7F-O-NNmNGMy — PHP: t.me/+jBvbaet0vpplNDQy — Моб. разработка: t.me/+Ikx5H4MrPihlOWZi — Разработка игр: t.me/+Z34knEvL8P9lZTAy — DevOps: t.me/+3wSgqmP5NOBhZGUy — Data Science: t.me/+-CuoNNa6P7VjOTRi — ИБ: t.me/+4jo8N5jtGDs1NTli — Тестирование: t.me/+MvFXlXbmmPFkM2Ey — Маркетинг: t.me/+lgiFPJTYp8M0ZjRi — Дизайн: t.me/+gmflvDFPc_c1YmIy Получить предложение #реклама 16+ О рекламодателе

⚙️ Что такое addEventListener в JavaScript? addEventListener — это метод, который позволяет добавлять обработчики событий к элементам на странице. ➡️ Пример:

// Функция для обработки клика
function handleClick() {
  console.log('Кнопка нажата!');
}

// Добавляем обработчик к кнопке
const button = document.querySelector('button');
button.addEventListener('click', handleClick);

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

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

👩‍💻 Как реализовать наследование в JavaScript: 7 способов Исчерпывающий гайд по всем существующим способам организации наследования в JavaScript. Разберем сильные и слабые стороны каждого подхода и научимся выбирать оптимальный метод для твоих задач. Читать...

Бесплатное обучение HTML и CSS. Для начинающих. 14 дней На курсе вы: ✅ Освоите базу верстки сайтов — HTML и CSS ✅ Научитесь переводить дизайн в код для сайтов ✅ Получите поддержку от наставника в чате курса Подать заявку #реклама 16+ result.school О рекламодателе

📈 Подборка статей для вашей карьеры • Тримодальный характер зарплат разработчиков • Иллюзия прогресса: почему мне не удалось дать студентам-айтишникам реальный опыт • Из подземелья в QA: как и почему я перешёл в тестирование после 14 лет работы сисадмином в метрополитене • Interview copilots: как кандидаты используют ChatGPT на интервью • Моя история входа в IT: как я ломал стены своих ограничений

Помощь в трудоустройстве в IT-сфере! В России из-за дефицита айтишников запустили бесплатную программу по обучению IT-специалистов. Теперь любой желающий может попробовать себя в IT с полного нуля и начать обучение бесплатно! Узнайте про дальнейшее трудоустройство в ведущие IT-компании для восполнения кадрового дефицита. Для этого нужно: - Перейти по ссылке - Заполнить анкету и ответить на вопросы (занимает менее 3 минут) - На основании ваших ответов вы сразу узнаете, подходит ли вам сфера IT и сможете ли вы в ней работать Перейти на сайт #реклама 16+ urban-university.ru О рекламодателе

📝 Подборка вакансий для сеньоров Frontend-разработчик (React) • JavaScript, React, Node.js • Уровень дохода не указан | от 3 лет QA-инженер (frontend) • JavaScript, TypeScript, SQL • Уровень дохода не указан | от 2 лет Senior Fullstack Developer (Nest / React) • Node.js, RabbitMQ, TypeScript, MySQL, React, Redux, TypeORM, NestJS • от 3 000 до 4 000 $ | от 6 лет

👩‍💻 Multiple Glow effects Button Анимированная кнопка с различными эффектами свечения. Сделана на CSS, Svg и JavaScript. Открыть код...

ТОП-10 Курсов по Программированию ⚡Tutortop — маркетплейс курсов №1 по количеству школ-партнеров, курсов и реальных отзывов студентов. ✅Хотите стать программистом, но не знаете с какого языка начать? Помогаем разобраться в самых популярных и востребованных языках программирования. Подарок в конце подборки! Выбрать #реклама 16+ tutortop.ru О рекламодателе

👩‍💻 Эксперимент: Автоматическое включение View Transitions с MutationObserver Вместо того чтобы добавлять document.startViewTransition в различные места JS, используйте MutationObserver, следящий за мутациями DOM. В обратном вызове Observer'а отмените исходную мутацию и примените её снова, но на этот раз обернув во View Transition. Читать...

Миграция в облако? Это легко! Собственная инфраструктура устарела или не справляется с нагрузками? Используйте облачные ресурсы! Эксперты Yandex Cloud помогут перейти в облако быстро, легко и безопасно. ✅ Мы полностью сопровождаем процесс. ✅ От вас — только инженер с доступом к инфраструктуре. ✅ Архитектура под ваши задачи, миграция и поддержка на каждом шагу — всё включено. ⚡Переходите в Yandex Cloud и забудьте о старом железе. А если успеете подать заявку до 31 декабря, мы покроем расходы на инженеров и тестовую инфраструктуру. Подать заявку #реклама 16+ yandex.cloud О рекламодателе

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

<div> <button id="decreaseButton">Уменьшить</button> <span id="counter">0</span> <button id="increaseButton">Увеличить</button> </div> const counter = document.getElementById('counter'); const decreaseButton = document.getElementById('decreaseButton'); const increaseButton = document.getElementById('increaseButton'); let count = 0; decreaseButton.addEventListener('click', () => { if (count > 0) { count -= 1; counter.textContent = count; } }); increaseButton.addEventListener('click', () => { count += 1; counter.textContent = count; });

⚙️ Предзагрузка отзывчивых изображений Статья объясняет, как правильно предзагружать отзывчивые изображения, чтобы ускорить загрузку страниц. Рассматривается взаимодействие предзагрузки с решениями браузера для выбора изображений под устройство. Читать...

Курс по frontend-разработке с junior до middle Стань специалистом по frontend-разработке с помощью менторов. Оставь заявку! Узнать больше #реклама 16+ ykul.ru О рекламодателе

📝 Подборка вакансий для мидлов Frontend Developer (Middle+) • JavaScript (ES6+), React, TypeScript, Redux, Axios, Material UI, Ant Design, Tailwind CSS, i18n, HTML, CSS • Уровень дохода не указан | от 3 лет Fullstack-разработчик (.Net core, React) • React, .Net core, Docker, Kubernetes, Redis, EntityFramework, RabbitMQ, WebAPI, S3 • Уровень дохода не указан | от 3 лет Senior/middle React developer • React, TypeScript, Next.js, CSS, HTML, JavaScript, LESS, Redux, SSR, Babel, Webpack, Npm, Yarn, NodeJS • Уровень дохода не указан | от 3 лет PHP developer • PHP 7, Yii2, MySQL, MongoDB, PostgreSQL, REST, HTTP, Agile, фронтенд и бэкенд разработка • Уровень дохода не указан | от 3 лет

⚙️ Что такое свойство aspect-ratio в CSS и как оно используется? aspect-ratio — это свойство CSS, которое задаёт соотношение ширины к высоте элемента. Оно упрощает создание адаптивных контейнеров, таких как видео, изображения или карточки. ➡️ Пример:

<div class="box"></div>

<style>
  .box {
    width: 300px;
    aspect-ratio: 16 / 9; /* Соотношение сторон 16:9 */
    background: lightblue;
  }
</style>

🗣️ В этом примере элемент .box сохраняет соотношение сторон 16:9 независимо от ширины. Это свойство полезно для создания адаптивных сеток и медиа-контейнеров.

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

👩‍💻 Shiny call-to-action button Анимированная кнопка с эффектом при наведении. Сделана на чистом CSS. Открыть код...

🔎 Подборка вакансий для джунов Frontend developer (junior/middle) 🟢TypeScript, Angular 🟢Уровень дохода не указан | от 1 до 3 лет Frontend Developer Vue.js / Senior 🟢HTML, CSS, JavaScript, Vue.js, Inertia.js, UI/UX design, Adobe XD, Figma, Sketch, Git, RESTful API, MySQL, PostgreSQL 🟢до 3 500 $ на руки | более 6 лет Vue 3 frontend разработчик | Junior | Middle 🟢Vue 3, TypeScript 🟢от 90 000 до 130 000 ₽ на руки | от 1 до 3 лет Junior PHP разработчик (WordPress) 🟢WordPress, PHP, MySQL, HTML, CSS, JavaScript, REST API, Git 🟢Уровень дохода не указан | от 1 до 3 лет

👩‍💻 Проверка сбалансированных скобок Напишите функцию, которая принимает строку, содержащую различные типы скобок ((), {}, []), и проверяет, являются ли они сбалансированными. Строка считается сбалансированной, если каждая открывающая скобка имеет соответствующую закрывающую в правильном порядке. Пример: Для строки "{[()]}" функция должна вернуть true, а для строки "{[(])}" — false. Решение задачи🔽

function isBalanced(str) { const stack = []; const pairs = { ')': '(', '}': '{', ']': '[' }; for (let char of str) { if (['(', '{', '['].includes(char)) { stack.push(char); } else if ([')', '}', ']'].includes(char)) { if (stack.pop() !== pairs[char]) return false; } } return stack.length === 0; } // Пример использования console.log(isBalanced("{[()]}")); // true console.log(isBalanced("{[(])}")); // false

👩‍💻 Обзор наследования в JavaScript Статья изучает различные шаблоны наследования в JavaScript, основанные на прототипах. Обсуждаются их преимущества и применение в зависимости от задач для оптимального управления объектными отношениями. Читать...