Endi mavjud! Telegram Tadqiqoti 2025 — yilning asosiy insaytlari 
Логово верстальщика
Kanalga Telegram’da o‘tish
Логово верстальщиков: HTML, CSS, JavaScript, практики современной верстки, вайбкодинг и использование ИИ в разработке. Личный блог автора - @just_genych По вопросам рекламы или разработки: @g_abashkin
Ko'proq ko'rsatish8 243
Obunachilar
-824 soatlar
-177 kunlar
+4330 kunlar
Postlar arxiv
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 раскладки — что такое и как готовить
