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

Ir al canal en Telegram

Логово верстальщиков: HTML, CSS, JavaScript, практики современной верстки, вайбкодинг и использование ИИ в разработке. Личный блог автора - @just_genych По вопросам рекламы или разработки: @g_abashkin

Red:Frontender's notes [ru]Rusia77 032 Arte y diseño4 425

8 243

Suscriptores

-824 horas

-177 días

+4330 días

471

Visitas de la publicación

~ 24024 horas

~ 29748 horas

5.72%

Tasa de compromiso

~ 1

Mensajes por día

Ads index

beta

Archivo de publicaciones

8 242

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

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

8 242

👩‍💻 HTML элемент search HTML-элемент search — это контейнер, представляющий части веб-страницы с функциональностью поиска. Читать…

8 242

🔎 Подборка зарубежных вакансий Laravel/VUE разработчик (Middle+) 🟢Laravel, Vue.js, PostgreSQL, REST API, WebSocket, Git 🟢от 1 500 до 2 500 $ на руки | 3–6 лет Node.js Developer 🟢Node.js, TypeScript, Nest.js, Jest, PostgreSQL, AWS 🟢от 3 000 до 5 000 $ до вычета налогов | 3–6 лет Full Stack Developer 🟢Node.js, TypeScript, VueJS, React, PostgreSQL, Redis, AWS, DevOps 🟢Уровень дохода не указан | Более 6 лет

8 242

💬 Сокращай задержки на коммуникации Часто ждёшь часами, пока коллега ответит на простой вопрос? Это не только теряет время, но и ритм работы. 👉 Совет: формулируй вопросы так, чтобы не оставлять места для уточнений. Вместо «Как вызвать функцию?» пиши «Какие аргументы нужно передать в метод calculate() для обработчика X?». Чем точнее запрос, тем быстрее ответ.

8 242

💾 6 главных технологий для хранения данных в браузере Ведущий инженер RxDB провел комплексный анализ и сравнение шести основных технологий хранения данных в браузере – от классических Cookies до современных WASM SQLite, оценивая их функциональность, производительность и потенциал для оптимизации. Читать...

8 242

👀 От живых гайдлайнов к Documentation as Code. Как изменилась документация во фронтенд-разработке Статья анализирует изменения в подходах к документированию фронтенд-проектов за последние пять лет. Рассматриваются новые инструменты и методы, которые сделали процесс создания и поддержки документации более эффективным. Читать...

8 242

⚙️ Что такое Content Security Policy (CSP) и зачем она нужна? Content Security Policy (CSP) — это механизм безопасности, ограничивающий источники загружаемого контента на веб-странице. CSP помогает предотвращать атаки XSS и другие угрозы, задавая правила через HTTP-заголовок или <meta>. ➡️ Пример:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://apis.example.com;">
  <title>Пример CSP</title>
</head>
<body>
  <script src="https://apis.example.com/library.js"></script>
  <script>
    // Этот скрипт выполнится, так как он разрешен
    console.log("Скрипт из разрешенного источника работает.");
  </script>
  <script>
    // Этот скрипт нарушит политику CSP, так как он inline
    alert("Inline скрипт заблокирован!");
  </script>
</body>
</html>

🗣️ В этом примере политика CSP разрешает загрузку ресурсов только с того же домена ('self') и скриптов с определенного внешнего источника. Inline-скрипты и неразрешенные ресурсы будут заблокированы, повышая безопасность приложения.

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

8 242

👩‍💻 Вышел React v19 В нашем руководстве по обновлению React 19 мы поделились пошаговыми инструкциями по обновлению вашего приложения до React 19. В этом посте мы расскажем о новых возможностях React 19 и о том, как их можно использовать. Читать...

8 242

Курсы по копирайтингу и редактуре не работают Похоже на кликбейт, но рост числа пройденных курсов правда не равен профессиональному росту. Главный и чуть ли не единственный навык, который поможет стать уверенным в себе редактором, — это насмотренность. Развивайте её, оценивая как можно больше текстов, — хороших и не очень. Сотни реальных примеров собраны на канале Плохое/хорошее. Смотреть #реклама 16+ О рекламодателе

8 242

📈 Подборка статей для вашей карьеры • Базовое программирование, или Почему джуны не могут пройти к нам собеседование • Я стал аналитиком, потому что не смог быть программистом • Какие именно админы нужны на российском рынке и как получать больше разработчика • Рецензия на книгу «MySQL. Сборник рецептов. 4-е издание» • Чек-лист тестировщика в финансовой компании

8 242

Запустите рекламу в телеграм-каналах с Яндекс Директом Перфоманс-реклама теперь в телеграм-каналах ⚡ Яндекс Директ знает, как привлечь целевую аудиторию 💰👌 Попробовать #реклама yandex.ru О рекламодателе

8 242

📝 Подборка вакансий для сеньоров Senior Frontend Engineer • TypeScript, Next.js, React.js, Redux, Jest, React Testing Library, D3.js, Chart.js • до 5 000 $ на руки | Более 6 лет Frontend React разработчик • React, Next.js, StoryBook, TypeScript, Jest, REST, WebSocket • от 150 000 до 250 000 ₽ на руки | 3–6 лет Senior Frontend Developer VUE.js • Vue.js, TypeScript, Nuxt.js, Pinia, Telegram API, Google Analytics • от 3 000 до 4 000 $ на руки | Более 6 лет

8 242

👩‍💻 Dropdown Menu Effects Анимированное выпадающее меню с переливающимся эффектом. Сделано на SCSS и TypeScript. Открыть код...

8 242

📝 Подборка вакансий для мидлов Frontend разработчик • JavaScript, TypeScript, React, HTML5, CSS3 • от 60 000 до 160 000 ₽ на руки | Без опыта Frontend-разработчик • TypeScript, Vue.js, Webpack, GraphQL, REST API • до 200 000 ₽ на руки | 3–6 лет Frontend JS/React/TypeScript • JavaScript, React, TypeScript, REST API, Git, Agile, DevOps, Kanban, Scrum • Уровень дохода не указан | 3–6 лет

8 242

⚙️ Что такое clamp() в CSS и как его использовать? clamp() — это функция в CSS, которая задаёт значение с ограничениями: минимальное, предпочтительное и максимальное. Она позволяет адаптивно управлять размерами элементов или текстом, сохраняя их в заданных пределах. ➡️ Пример:

<div class="text">
  Адаптивный размер текста
</div>

<style>
  .text {
    font-size: clamp(1rem, 2.5vw, 2rem); /* Минимум 1rem, максимум 2rem, предпочтение — 2.5% ширины окна */
    text-align: center;
  }
</style>

🗣️ В этом примере текстовый блок изменяет размер шрифта в зависимости от ширины окна, оставаясь в пределах от 1rem до 2rem. Функция clamp() упрощает создание адаптивного дизайна без сложных медиа-запросов.

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

8 242

👩‍💻 <pixel-canvas> Web Component Сцена с стильно анимированными карточками. Сделана на CSS, SVG и JavaScript. Открыть код...

8 242

🔎 Подборка вакансий для джунов Frontend-разработчик Vue 🟢Vue.js, JavaScript, Git, Vuex/Pinia, Sass/Less, TypeScript, Nuxt.js, Docker, Webpack 🟢от 60 000 до 90 000 ₽ на руки | Без опыта Frontend-разработчик 🟢HTML5, CSS3, JavaScript (ES6+), Vue.js, Vue Router, Vuex/Pinia, Git, REST API 🟢от 70 000 до 120 000 ₽ на руки | 1–3 года Frontend Developer/Программист JS 🟢JavaScript, Vue.js, Bootstrap, HTML5, CSS3, .NET (C#), .Net Core, SQL 🟢от 80 000 до 150 000 ₽ на руки | 1–3 года

8 242

👩‍💻 Стилизация кнопки с эффектом наведения Создайте кнопку, которая меняет цвет фона и добавляет лёгкую тень при наведении. При обычном состоянии кнопка должна иметь закруглённые углы и немного увеличиваться при наведении для визуального акцента. Ожидаемое поведение: • Основной цвет фона кнопки — синий (#007BFF). • При наведении цвет фона становится темно-синим (#0056b3), добавляется тень, и кнопка слегка увеличивается. Решение задачи🔽

<button class="styled-button">Нажми меня</button> .styled-button { background-color: #007BFF; color: white; padding: 10px 20px; border: none; border-radius: 8px; cursor: pointer; font-size: 16px; transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s; } .styled-button:hover { background-color: #0056b3; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); transform: scale(1.05); }

8 242

👩‍💻 CSS единицы измерения: lh и rlh Изучение новых относительных единиц измерения CSS основанных на высоте строки и позволяющих отказаться от угадывания вертикального ритма. Смотреть…

8 242

🔝 Самые интересные статьи за последние дни: • HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 11 • Вы всё ещё устанавливаете display:none по таймауту? Тогда мы идём к вам • Парольная защита статичной HTML-страницы на JS • 9 open source библиотек для вашего следующего проекта • Модули CSS раскладки — что такое и как готовить