Логово верстальщика – Telegram
Логово верстальщика
8K subscribers
996 photos
48 videos
4 files
1.74K links
Канал для верстальщиков с инфой о HTML и CSS, а так же JavaScript на уровне верстальщиков.

Канал на бирже - https://telega.in/c/webdevlair

По вопросам рекламы или разработки: @g_abashkin
Download Telegram
​​🥎Создаем мини-игру с капельным эффектом и движущимися кружками. Часть 2. Финал

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

Читать...
​​😍Как сделать эффект Parallax с помощью CSS

В этой статье мы рассмотрим, в каких ситуациях оправдано использование параллакс-скроллинга, разберем, как реализовать его с помощью CSS, и почему для этого стоит использовать именно CSS, а не JavaScript.

Читать...
​​😉Advanced Custom Fields: Полное руководство

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

Читать...
​​😼API для создания рандомных аватаров пользователей

В статье рассмотрим простые и доступные API для генерации аватарок на свой сайт.

Читать...
​​🔍Добавление масштабирования страницы при ширине экрана меньше чем body min-width в браузерах Firefox и Safari

В этом туториале я расскажу вам о том, как решить проблему отсутствия масштабирование страницы при ширине экрана меньше чем значение body min-width, в браузерах Firefox и Safari.

Читать...
​​😶‍🌫️Tailwind не только для MVP

В этой статье я распишу плюсы и минусы Tailwind и как можно минусы превратить в плюсы.

Читать...
​​🤝Svelte: Знакомство с рунами

В этой статье автор расскажет про фреймворк для создания веб-интерфейса, который использует компилятор для превращения декларативного кода компонентов.

Читать...
​​🧐Подключение Twig шаблонов в WordPress: Как избежать конфликтов

В этой статье автор расскажет про шаблонизатор, позволяющий создавать простые и выразительные шаблоны для фронтенда.

Читать...
​​📁6 простых правил хорошего alt-текста

В этой статье мы расскажем о том, как написать хорошее описание фотографий в атрибуте alt.

Читать...
​​🎧Создание музыкального инструмента с помощью Web Audio API

В этой статье автор расскажет как создать веб-приложение, которое имеет открытый исходный код.

Читать...
​​🧑‍💻Почему разработчики любят Bulma?

В этой статье, я расскажу о пяти причинах, почему разработчики любят Bulma.

Читать...
​​📱Фонетический словарь. Пет-проект в полезное приложение

В этой статье я расскажу как адаптировать интерфейс под мобильные устройства, и сделать быстрый отклик сервера.

Читать...
​​🧑‍💻Почему для проекта стоит прибегать к готовым UI-компонентам

В этой статье автор расскажет что такое библиотека компонентов пользовательского интерфейса, и какие преимущества использования готовых компонентов библиотеки.

Читать...
​​🔒Безопасный CSS, или как писать универсальные стили

В этой статье автор рассмотрит примеры универсальных CSS-стилей.

Читать...
​​🙌Клонирование объектов JS

В этой статье поговорим о глубоком и поверхностном клонировании объекта, посмотрим различные примеры и способы как это можно реализовать, а также разберём отличия, плюсы и минусы данного подхода.

Читать...
​​📐Простейшее решение калькулятора на js без eval();

В этой статье автор рассмотрит написания калькулятора, который будет составлять строку а позже считать её.

Читать...
​​👨‍🔬Встраиваем JS- скрипты в PDF для социальной инженерии — пошаговое руководство

В этой статье мы рассмотрим структуру PDF-файла, как и куда в него внедрять JavaScript, а также способы маскировки факта внедрения скрипта.

Читать...
​​🔥Как дебажить код на JavaScript: примеры ошибок и советы новичкам

В этой статье расскажу о привычках, которые нужны самостоятельному разработчику для дебага.

Читать...
CSS псевдокласс :has()

Алоха товарищи! Сегодня будет небольшой пост про один из новых псевдоклассов CSS.

Что он делает: позволяет создать CSS селектор для элемента в зависимости от того есть ли у него тот или иной дочерний элемент.

Примеры:

// Выбираем элемент section который содержит h2
section:has(h2) {
  background: lightgray;
}

// Выбираем img только в том случае если его родительский элемент содержит h2
section:has(h2) img {
  border: 5px solid lime;
}

Собственно вот интересная такая штука.

❗️ Но как это часто случается есть нюанс. Согласно ресурсу caniuse этот псевдокласс на данный момент не поддерживает Firefox, но учитывая что месяца 3 назад его еще не поддерживал хром то думаю это вопрос недолгого времени.
​​😉Расширенные концепции JavaScript для написания качественного, поддерживаемого кода

В этой статье автор рассмотрит некоторые из продвинутых концепций JavaScript, которые должны быть известны каждому опытному разработчику.

Читать...
​​🦾Как создать монорепозиторий с несколькими сервисами, используя Lerna и Yarn?

В этой статье автор расскажет о начальной настройке, структуре каталогов, управлении зависимостями, тестировании и развёртывании.

Читать...