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

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

@webdevlair

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

Личный блог автора - @just_genych
По вопросам рекламы или разработки: @g_abashkin
Open in Telegram
Subscribers
7.93K
Photos
1.2K
Videos
70
Links
2K

Showing posts older than #3851 · Back to latest

Older Posts 20 shown
Post #3850 1.06K
👩‍💻 5 HTML-атрибутов для улучшения пользовательского опыта и SEO

Разбираем мощные, но часто игнорируемые атрибуты HTML, способные значительно улучшить пользовательский опыт и SEO вашего сайта. От многоязычности до удобства заполнения форм – все, что нужно современному разработчику

Читать...
  • 👍 2
  • 🐳 1
Post #3849 1.04K
👩‍💻 Шаблон “Декоратор” в разработке на TypeScript

Овладейте полезным инструментом TS-разработчика - шаблоном проектирования "Декоратор". Он позволяет динамически расширять функциональность объектов, не усложняя читаемость кода.

Читать...
  • 👍 1
Post #3848 1.02K
🧨 Работа с куки-файлами хуже сапёрного дела

Статья разбирает особенности работы с HTTP-куки и неожиданные проблемы, которые могут возникнуть при их использовании. Рассматривается пример с сериализацией JSON, казалось бы, безобидный, но вызывающий интересные нюансы в обработке браузерами и серверами.

Читать...
Post #3847 1.04K
🪞 Читай свой код через день

Когда пишешь, всё кажется логичным. Но стоит отойти — и через сутки видишь хаос.

👉 Совет: откладывай код на ночь. Утром перечитай свежим взглядом — часто сам найдёшь то, что коллеги заметили бы на ревью. Это маленький хак для самопроверки.
  • 👍 6
Post #3846 1.13K
👩‍💻 Паттерны для эффективного манипулирования DOM с ванильным JavaScript

В руководстве рассматриваются такие шаблоны работы с DOM на JavaScript, как выбор правильного querySelector, кэширование элементов и улучшение обработки событий.

Читать...
  • 👍 2
Post #3844 1.05K
📊 10 методов SEO-оптимизации JavaScript, которые должен знать каждый фронтендер

Веб-приложения часто используют JavaScript для динамического создания контента и удобного взаимодействия с пользователем. Но поисковые роботы не всегда могут правильно прочитать и проиндексировать такой контент – в итоге сайт теряет посетителей. На помощь придут 10 способов SEO-оптимизации для JavaScript.

Читать...
Post #3840 971
👩‍💻 TypeScript в деталях: настраиваем tsconfig.json правильно

Один файл, который может изменить все: полное руководство по tsconfig.json. Разбираем каждый параметр и его влияние на разработку, сборку и поддержку TypeScript-проектов.

Читать...
  • ❤ 3
  • 👍 1
Post #3839 966
👩‍💻 Улучшение производительности с делегированием событий

Статья объясняет технику делегирования событий в веб-разработке, показывая, как использование одного слушателя на родительском элементе упрощает управление событиями и повышает производительность.

Читать...
  • 👍 1
Post #3838 951
👩‍💻 Решение головоломки судоку на JavaScript с помощью хэш-карт и рекурсий

Если вы погружены в мир судоку, то наверняка ищете варианты ускоренного решения задач по программированию. Предлагаем ознакомиться с одним из них. Использование в нем хэш-карт и рекурсий значительно ускоряет решение головоломки.

Читать...
Post #3837 992
👩‍💻 Переходите на сторону light-dark()

Статья раскрывает современные CSS-функции для создания адаптивного темного режима, заменяющие традиционные медиа-запросы. Рассматриваются подходы, упрощающие настройку цветовых схем под предпочтения пользователя.

Читать...
Post #3836 992
👩‍💻 Idea Form

Анимированная форма для ввода с появлением при нажатии. Сделана на SCSS и TypeScript.

Открыть код...
  • 👍 2
  • ❤ 1
Post #3835 990
👩‍💻 Кнопка с "волновым" эффектом

Создайте кнопку, при нажатии на которую появляется анимация "волн", расходящихся из точки клика.

Ожидаемое поведение:

• При нажатии на кнопку из точки клика расходится круг, который исчезает через мгновение.
• Анимация должна быть плавной и не мешать повторным кликам.

Решение задачи🔽

<button class="ripple-button">Нажми меня</button>

.ripple-button {
position: relative;
overflow: hidden;
padding: 10px 20px;
font-size: 16px;
color: white;
background-color: #007BFF;
border: none;
border-radius: 4px;
cursor: pointer;
}

.ripple-button .ripple {
position: absolute;
border-radius: 50%;
transform: scale(0);
animation: ripple-animation 0.6s linear;
background-color: rgba(255, 255, 255, 0.6);
}

@keyframes ripple-animation {
to {
transform: scale(4);
opacity: 0;
}
}

document.querySelector('.ripple-button').addEventListener('click', function (event) {
const ripple = document.createElement('span');
const rect = this.getBoundingClientRect();

ripple.style.width = ripple.style.height = `${Math.max(rect.width, rect.height)}px`;
ripple.style.left = `${event.clientX - rect.left - ripple.offsetWidth / 2}px`;
ripple.style.top = `${event.clientY - rect.top - ripple.offsetHeight / 2}px`;

ripple.className = 'ripple';
this.appendChild(ripple);

ripple.addEventListener('animationend', () => ripple.remove());
});
  • 👍 1
Post #3834 1.04K
👩‍💻 10 лучших CSS-библиотек и фреймворков для быстрой разработки фронтенда

Запутался в CSS-фреймворках? Мы собрали ТОП-10 самых крутых инструментов, которые реально экономят время на фронтенде. От тяжеловеса Bootstrap до минималистичного Milligram – разобрали плюсы каждого и объяснили, когда что использовать.

Читать...
  • 👍 1
Post #3833 1.12K
👩‍💻 Стрелочная функция vs. обычная функция в JavaScript

Статья раскрывает ключевые отличия между стрелочными и обычными функциями в JavaScript, объясняя их влияние на выполнение кода. Рассматриваются ситуации, в которых предпочтителен каждый тип функций.

Читать...
  • 👍 3
Post #3832 1.02K
👩‍💻 7 советов по очистке кода React

В этой статье собраны семь практических рекомендаций, помогающих создавать чистый и поддерживаемый код React.

Читать...
  • 👍 1
Post #3831 1.07K
📊 Логи должны быть инструментом, а не шумом

Если в логах всё подряд, их никто не читает. А значит, в момент ЧП они бесполезны.

👉 Совет: пиши логи как историю: что произошло, почему и что дальше. Лог — это не «dump», а объяснение для будущего разработчика (и для тебя самого тоже).
  • 👍 1
Post #3830 1.11K
👩‍💻 Эта информация навсегда изменит ваше отношение к коду JavaScript

К концу этой статьи вы превратитесь из простого пользователя JavaScript в того, кто глубоко его понимает и кого не удивляют его уникальные возможности. Это открытие расширит ваши знания и навыки, а также позволит использовать такие "фишки" JS, которых нет в других популярных языках.

Читать...
Post #3829 1.02K
⚙️ Что такое псевдоэлементы в CSS и как они используются?

Псевдоэлементы в CSS — это инструменты, которые позволяют стилизовать определенные части элемента, такие как первая буква, первая строка, или добавлять контент до или после элемента. Они начинаются с :: (например, ::before или ::after) и не требуют изменения HTML-разметки.

➡️ Пример:

<p class="text">Это пример текста.</p>

<style>
  .text::before {
    content: "👉 "; /* Добавляем символ перед текстом */
    color: red;
  }

  .text::after {
    content: " ✔️"; /* Добавляем символ после текста */
    color: green;
  }
</style>


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


🖥 Подробнее тут
  • 👍 2
Post #3828 983
⚙️ PHP 8.4: exit/die изменены из языковых конструкций в функции

Ключевое слово exit и его псевдоним die — языковые конструкции, выводящие сообщение и завершающие текущий сценарий. В CLI-приложениях exit/die можно использовать для завершения работы приложения с заданным кодом выхода.

Читать...
Older posts →
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →