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

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

Онлайн-интенсив для ИТ-специалистов в Открытых школах Т1 Уже есть опыт работы в ИТ, но хочешь прокачать скилы и продвинуться в карьере? Тогда скорее залетай на бесплатный ИТ-интенсив в Открытых школах Т1. Открытые школы — это возможность усилить свои навыки и получить оффер в ИТ-холдинг Т1. И все это за месяц, онлайн и в удобное вечернее время. Что ты получишь? ✅ бесплатное обучение в гибком формате: по вечерам, онлайн, из любого города РФ и РБ. ✅ материалы от HR для прокачки резюме и подготовки к интервью в Т1. ✅ много практики и уникальный рыночный опыт. ✅ поддержку опытных преподавателей и карьерный фаст-трек до мидла в Т1 для лучших выпускников. ✅ реальный шанс получить оффер в Т1. Более 1000 специалистов уже прошли этот путь — теперь твоя очередь! Регистрация до 14 марта! Подать заявку #реклама 16+ t1.ru О рекламодателе

👩‍💻 Переключение видимости пароля Создайте поле для ввода пароля и кнопку "Показать/Скрыть". При нажатии на кнопку символы пароля должны переключаться между скрытым (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 год. Приводим мнение трех экспертов по ключевым трендам фронтенд‑разработки и фреймворков, которые будут актуальными в следующем году. Читать...

🔎 Подборка зарубежных вакансий Full Stack Developer (Node.js, React) 🟢Node.js, React, NestJS, TypeScript, MySQL, RabbitMQ, Redis, AWS 🟢Уровень дохода не указан | 3–6 лет Angular Developer 🟢Angular 2+, MS SQL, EF Core, OAuth 2.0, JWT, RESTful APIs, Swagger, HTML, CSS/SCSS, Bootstrap 🟢Уровень дохода не указан | 3–6 лет Full Stack Developer 🟢Node.js, TypeScript, VueJS, React, DevOps, PostgreSQL, Redis, AWS 🟢Уровень дохода не указан | 5+ лет

🔨 Ломай свои решения до того, как их сломает продакшен Ты уверен, что твоя фича работает идеально? Отлично. А что будет, если передать в неё неожиданные данные? 👉 Совет: тестируй свои решения агрессивно. Вводи странные значения, симулируй обрывы соединения, загружай систему до предела. Лучше пусть код сломается у тебя, чем у пользователей.

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

WebTolkRu - Канал о Joomla-разработке Joomla жива и с ней всё хорошо. Мало того, осенью 2025 года Joomla 5 перейдёт в режим тех.поддержки и выйдет Joomla 6. Joomla 3 с августа 2023 не получает обновлений даже безопасности, и в то же время многие видели Joomla в последний раз в 2010, во времена 2.5.х.  - Как разработчику обновить свои расширения до новой архитектуры, чтобы они проработали ещё долго? - Какие способы вёрстки и натяжки на Joomla существуют и какие нюансы следует учитывать? - Примеры кода и способы решения прикладных задач на Joomla - Новости русскоязычного Joomla-сообщества и расширений в канале Сергея Толкачева. Добро пожаловать на @WebTolkRu Реклама. Толкачев С.Ю. ИНН 645005070108.

🤔 Народный браузер — каким он мог бы быть? Статья раскрывает идеи и обсуждения, связанные с развитием сборки Хромиума Ultimatum. Автор стремится понять реальные запросы пользователей и обсудить востребованные функции. Читать...

⚙️ Что такое Intersection Observer в JavaScript и зачем он используется? Intersection Observer — это API, которое позволяет отслеживать, когда элемент появляется или исчезает из области видимости (viewport). Он полезен для ленивой загрузки изображений, бесконечной прокрутки и анимаций при прокрутке. ➡️ Пример:

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('Элемент видим:', entry.target);
    }
  });
});

// Наблюдаемый элемент
const target = document.querySelector('.observe-me');
observer.observe(target);

🗣️ В этом примере Intersection Observer отслеживает элемент .observe-me и выполняет код, когда элемент появляется в области видимости. Это позволяет избежать постоянного использования события scroll, улучшая производительность.

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

➡️ Выкинь свой RoadMap: что на самом деле нужно знать начинающему фронтендеру Сколько бы раз я ни смотрел RoadMap для начинающих фронтендеров, всегда натыкаюсь на одну проблему: RoadMap, как правило, — просто свалка технологий, которую можно описать одной фразой: "Учи всё, что есть". Но так ли это? Нужно ли учить всё это в самом начале? Давайте отбросим большую схему с технологиями в сторону и поговорим начистоту. Читать...

📈 Подборка статей для вашей карьеры • Мои Red-Flags при устройстве в IT-компании: Как не стать гребцом. Часть 2 • Циничные заметки о карьере в IT от «гейткипера» • Язык как проект: как продакт-менеджеру учить английский • Всероссийский рейтинг IT-брендов работодателей 2024 • Моя петиция EB-1A на грин-карту талантов, одобренная с первой попытки

📝 Подборка вакансий для сеньоров React Native разработчик • React Native, TypeScript, HTML, CSS, React • от 150 000 до 200 000 ₽ | 1–3 года Web Разработчик / Fullstack • PHP8, MySQL, JavaScript, Node.js, Git, Linux • от 300 000 до 700 000 ₽ | 5+ лет Tech Lead (Senior PHP-разработчик) • PHP, Yii framework, Symfony, PostgreSQL, JSON, Git, ООП, Docker, CI/CD • Уровень дохода не указан | 5+ лет

👩‍💻 Gooey SVG Filter Button Анимированная кнопка с эффектом при наведении. Сделана на SVG, CSS и JavaScript. Открыть код...

🗓 Как написать Google Calendar на коленке? Обзор FullCallendar Статья рассказывает о создании раздела с календарем и задачами с использованием библиотеки FullCalendar. Разбираются её возможности, преимущества и опыт интеграции для внутренних проектов. Читать...

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

<div> <input type="text" id="taskInput" placeholder="Введите задачу" /> <button id="addButton">Добавить</button> </div> <ul id="taskList"></ul> const taskInput = document.getElementById('taskInput'); const addButton = document.getElementById('addButton'); const taskList = document.getElementById('taskList'); addButton.addEventListener('click', () => { const taskText = taskInput.value.trim(); if (taskText === '') return; // Не добавляем пустые задачи const listItem = document.createElement('li'); listItem.textContent = taskText; const deleteButton = document.createElement('button'); deleteButton.textContent = 'Удалить'; deleteButton.style.marginLeft = '10px'; deleteButton.addEventListener('click', () => { taskList.removeChild(listItem); }); listItem.appendChild(deleteButton); taskList.appendChild(listItem); taskInput.value = ''; // Очищаем поле ввода });

⚙️ Ultimatum — еще один форк хромиума, с претензией… Статья анонсирует сборку браузера Chromium — Ultimatum. Браузер обходит техники трекинга, позволяет устанавливать расширения с любых сайтов и перехватывать сетевые запросы для их полной подмены. Читать...

📝 Подборка вакансий для мидлов Frontend-разработчик React / Vue.js / Nuxt.js (Middle-Senior) 🟢React, React Native, Vue.js, Nuxt.js, RESTful API, HTML, CSS, Git 🟢от 200 000 ₽ | от 2 лет Системный аналитик на frontend и mobile в Т-Инвестиции 🟢SOAP, базы данных, REST, RabbitMQ, SQL, BPMN, системный анализ, Apache Kafka, UML, разработка решений по интеграции 🟢Уровень дохода не указан | от 3 лет Frontend-разработчик 🟢TypeScript, Vue.js, Webpack, GraphQL 🟢до 200 000 ₽ | от 3 лет

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

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

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

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

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

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