dr.Brain

@drbrain4dev

Мир глазами разработчика: обзоры, трюки, решения задач, примеры кода - рутина и не только... Front & Back

О нас: https://drbrain.pro/about/
Купить рекламу: https://telega.in/c/drbrain4dev

По всем вопросам: @gvastahov, @Pavel_A_G

dr.Brain (Russian)

Канал "dr.Brain" - это незаменимый ресурс для разработчиков, которые хотят увидеть мир через их глаза. Здесь вы найдете обзоры, трюки, решения задач, примеры кода и многое другое, что поможет вам в работе как Frontend, так и Backend разработчика. Этот канал не только о рутинной работе, но и об интересных и полезных материалах, которые помогут вам стать лучшим в своей области. Если вы хотите быть в курсе последних тенденций в мире разработки, то канал "dr.Brain" - идеальное место для вас. Присоединяйтесь к нам и узнавайте новое каждый день! Дополнительную информацию о нас вы можете найти здесь: https://drbrain.pro/about/ Для покупки рекламы обращайтесь сюда: https://telega.in/c/drbrain4dev Если у вас возникли какие-либо вопросы, не стесняйтесь обращаться к @gvastahov или @Pavel_A_G.

dr.Brain

02 Dec, 16:59

Создадим шедевр вместе!
Команда Skytec Games ищет проекты на издательство и талантливых разработчиков для совместных проектов.
Предоставим все необходимое для успеха.
Выкупим проект под доработки (не гк) и проинвестируем в сильные команды.

Покажите свой проект @Nick_Skytec
Подпишись @Publishing_gamedev

Посмотрите сайт

Реклама. ООО "СКАЙТЕК". ИНН 5408006590. erid: LjN8Jxj2H

148

dr.Brain

28 Nov, 17:57

CSS: align-content

Помните все эти мемы о центрировании div? В 2024 году они устарели. Новое свойство align-content работает напрямую в любой блочной разметке, не требуется flexbox или grid. Удивительно, что потребовалось 25 лет, чтобы реализовать эту фундаментальную функцию... Но лучше поздно, чем никогда.

.centered-content {
    align-content: center;  /* That's it! No flexbox or grid needed */
    block-size: 100vh;
}

#frontend #css

832

dr.Brain

23 Nov, 21:02

Tailwind: многоуровневый нумерованный список

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

Итак, допустим у нас есть следующая разметка HTML:

<ol>
 <li>Первый уровень
  <ol>
   <li>Второй уровень
    <ol>
     <li>Третий уровень. Первый элемент</li>
     <li>Третий уровень. Второй элемент</li>
    </ol>
   </li>
  </ol>
 </li>
</ol>

Нужно получить многоуровневую нумерацию вложенных элементов, соответствующую шаблону 1., 1.1., 1.1.1.

Для создания пользовательского класса list-nested добавим в файл main.css Tailwind проекта следующие строки:

@tailwind base;
@tailwind components;
@tailwind utilities;

/* многоуровневый нумерованный список */
@layer {
    ol.list-nested {
        counter-reset: item;
    }

    ol.list-nested li::before {
        counter-increment: item;
        content: counters(item, ".") ". ";
    }
}

Директива @layer помогает контролировать порядок объявления пользовательских классов, автоматически перемещая новые стили в соответствующую директиву @tailwind, и включает необходимые функции.

#frontend #css #tailwind

740

dr.Brain

21 Nov, 18:20

PHP: архив

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

Давайте разберемся, как программно создавать ZIP-файлы с помощью PHP...

#backend #php

506

dr.Brain

17 Nov, 20:58

Tailwind: футер у нижнего края страницы

Довольно часто, верстая страницы, можно обнаружить, что, если содержимое страницы недостаточно объемное, под футером остается ненужное пространство. Вот прием, который позволить оставлять футер внизу страницы при использовании Tailwind CSS:

<body class="flex flex-col min-h-screen">
 <!-- navigation component -->
 <Navigation />

 <!-- main content -->
 <main class="flex-grow">
  <!-- site content -->
 </main>

 <!-- footer component -->
 <Footer />
</body>

Эта структура использует модель flexbox для утилит Tailwind CSS, создавая гибкую разметку на всю высоту (в том числе минимальную высоту) экрана. Содержимое блока main увеличивается, заполняя доступное пространство, и сдвигает футер в нижнюю часть области просмотра, когда содержимого недостаточно для заполнения страницы.

К тегу bodyприменяется class="flex flex-col min-h-screen" для создания гибкой компоновки блока.

1. flex: создает гибкую блочную flexbox модель,
2. flex-col: направляет поток элементов по вертикали,
3. min-h-screen: гарантирует, что минимальная высота элемента body будет составлять не менее 100% высоты области просмотра. Если содержимое элемента не заполняет высоту области просмотра, это правило гарантирует, что body растянется по вертикали, чтобы заполнить всю область просмотра, не давая нижнему колонтитулу всплывать.

Примененный к элементу main class="flex-grow" позволяет области основного содержимого увеличиваться и заполнять все доступное пространство. Если в области просмотра доступно больше места, чем занимает содержимое, flex-grow расширит область основного содержимого, используя свободное пространство и сдвигая футер в нижнюю часть области просмотра.

591

dr.Brain

16 Nov, 19:14

JavaScript: трюк с NaN

Почему NaN не равен NaN?

NaN (Not-a-Number) — это особое значение в JavaScript, и оно никогда не равно самому себе.

console.log(NaN === NaN); // false

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

Для проверки истинности NaN можно использовать Number.isNaN():

console.log(Number.isNaN(NaN)); // true

#frontend #js

438

dr.Brain

14 Nov, 20:47

Tailwind: интерактивность

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

Вот некоторые часто используемые псевдоклассы в Tailwind:

1. hover: для состояния наведения,
2. focus: для состояния фокуса,
3. active: для активного состояния,
4. group-hover: для стилизации с учетом состояния hover родительского элемента.

Например:

<button class="bg-blue-500 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 active:bg-blue-800">
  Click me
</button>

Tailwind также поддерживает псевдоэлементы before: и after:.

Например:

<div class="relative before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full before:bg-black before:opacity-50">
  This div has a semi-transparent overlay
</div>

#frontend #css #tailwind

448

dr.Brain

12 Nov, 10:07

JavaScript: почему parseInt(0.0000005) возвращает 5

Функция parseInt() довольно удобна для преобразования строк в целые числа, но иногда она дает неожиданные результаты:

parseInt(0.0000005) //  5

Попробуем разобраться: сначала parseInt() преобразует аргумент в строку. Поэтому число 0.0000005 JavaScript автоматически преобразует в строку 5e-7. Следующим шагом parseInt() читает полученную строку слева направо и останавливается на первом нечисловом символе. В 5e-7 он останавливается на цифре 5 и возвращает ее. Он не обрабатывает часть строки, начинающуюся с символа e и игнорирует десятичные знаки.

Таким образом, parseInt() обрабатывает числа как строки, считывая информацию до первого нецифрового символа, поэтому и результатом является целое число 5, находящееся до первого нецифрового символа.

562

dr.Brain

10 Nov, 19:51

CSS: центрируем по горизонтали

Рассмотрим несколько способов центрирования элемента по горизонтали с помощью CSS

Блок с фиксированной шириной

<p class="center-by-fixed-width">Centering</p>

.center-by-fixed-width {
  width: 70px;
  margin: 0 auto;
}

Текст

<p class="center-by-text-align">Centering</p>

.center-by-text-align {
  text-align: center;
}

Блок без фиксированной ширины

<div class="center-by-unfixed-width">
  <span>Centering</span>
</div>

.center-by-unfixed-width {
  text-align: center;
}

table

<p class="center-by-table">Centering</p>

.center-by-table {
  display: table;
  margin: 0 auto;
}

flex

<div class="center-by-flex">
  <p>Centering</p>
</div>

.center-by-flex {
  display: flex;
  justify-content: center;
}

grid

<div class="center-by-grid">
  <p>Centering</p>
</div>

.center-by-grid {
  display: grid;
  justify-content: center;
}

Относительно родителя

<div class="center-by-absolute-parent">
  <p class="center-by-absolute-child">Centering</p>
</div>

.center-by-absolute-parent {
  position: relative;
}

.center-by-absolute-child {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

calc

<p class="center-by-calc">Centering</p>

.center-by-calc {
  width: 70px;
  margin-left: calc(50% - 35px);
}

align-content

<div class="container-center-by-align-content">
 <div class="child-center-by-align-content"></div>
</div>

.container-center-by-align-content {
  display: flex;
  align-content: center;
}

.child-center-by-align-content {
 width: 100px;
 height: 100px; 
}

#frontend #css

473

dr.Brain

09 Nov, 19:56

CSS: центрируем по вертикали

Рассмотрим несколько способов вертикального центрирования элемента с помощью CSS

1. Абсолютное позиционирование

<p class="center-by-absolute-margin">Centering</p>

.center-by-absolute-margin {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
}

2. Псевдокласс ::before

<p class="center-by-pseudo-class">Centering</p>

.center-by-pseudo-class::before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

3. line-height

<p class="center-by-line-height">Centering</p>

.center-by-line-height {
  height: 200px;
  line-height: 200;
}

4. table

<p class="center-by-table">Centering</p>

.center-by-table {
  display: table-cell;
  vertical-align: middle;
}

5. Flex

<div class="center-by-flex">
  <p>Centering</p>
</div>

.center-by-flex {
  display: flex;
  align-items: center;
}

6. Grid

<div class="center-by-grid">
  <p>Centering</p>
</div>

.center-by-grid {
  display: grid;
  align-items: center;
}

7. Относительно родителя

<div class="center-by-absolute-parent">
  <p class="center-by-absolute-child">Centering</p>
</div>

.center-by-absolute-parent {
  position: relative;
}

.center-by-absolute-child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

8. calc

<p class="center-by-calc">Centering</p>

.center-by-calc {
  height: 70px;
  position: relative;
  top: calc(50% - 35px);
}

9. align-content

<div class="container-center-by-align-content">
  <div class="child-center-by-align-content"></div>
</div>

.container-center-by-align-content {
  display: flex;
  align-content: center;
}

.child-center-by-align-content {
  width: 100px;
  height: 100px; 
}

#frontend #css

367

dr.Brain

08 Nov, 12:34

Tailwind: пользовательские условия

Хорошо реализованная возможность кастомизации является одной из лучших особенностей Tailwind CSS. Вся магия происходит в файле tailwind.config.js. Давайте рассмотрим как создавать пользовательские условия для применения стилей на примере условия, при котором стили можно будет применять только в случае, когда родительский элемент имеет определенный класс:

module.exports = {
  variants: {
    extend: {
      backgroundColor: ['active', 'group-focus'],
    }
  }
}

Это решение позволяет использовать такие классы, как group-focus:bg-blue-500.

#frontend #css #tailwind

405

dr.Brain

07 Nov, 15:53

Laravel 11. Первый проект: 01. Установка

В первом уроке мы создадим новый проект для изучения Laravel. Официальной документация по установке Laravel содержит большой и исчерпывающий объем информации. Следует знать, что для установки Laravel существует несколько способов. Официальная документация Laravel преимущественно посвящена использованию инструмента командной строки Laravel Sail в сочетании с Docker. Но мы не будем использовать Sail в данном курсе. Так как для его использования требуется понимание принципов работы с Docker. А для новичков это может стать очередной преградой на пути освоения Laravel...

#backend #php #laravel #lesson

424

dr.Brain

06 Nov, 18:13

Tailwind: @apply

Немногие знают, что с помощью директивы @apply классы-утилиты можно объединять в пользовательские классы. И эта возможность кардинально меняет правила игры в Tailwind, когда дело касается чистоты HTML-кода и повторного использования стилей:

.btn-primary {
  @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
}

такой подход позволяет не загромождать HTML-структуру страницы, а просто написать:

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

Применяйте @apply для повторно используемых компонентов. Это позволит сделать HTML-разметку страницы более понятной и хорошо читаемой.

#frontend #css #tailwind

590

dr.Brain

06 Nov, 12:17

CSS: управление контуром SVG

С помощью CSS можно не только создавать эффект рисования контура изображения, но и динамически изменять саму картинку. Например: направление кривой контура...

#frontend #css #svg #animation

525

dr.Brain

05 Nov, 06:54

CSS: анимация SVG

Итак, с помощью CSS и SVG можно создать суперкрутой эффект рисования картинки по контуру...

#frontend #css #svg #animation

547

dr.Brain

04 Nov, 20:57

JavaScript: производительность

Многие из нас пишут на JavaScript. Создаваемый нами код влияет на производительность всего приложения и эффективность его взаимодействия с пользователями. Именно поэтому так важно оптимизировать код для обеспечения достаточной производительности...

#frontend #js

551

dr.Brain

03 Nov, 05:55

JavaScript: удаление гласных

Рассмотрим изящный способ удаления всех гласных в строке с помощью JavaScript. Идея состоит в том, чтобы, получить исходную строку и вернуть её без букв аоуэыияеёю:

const input = 'Регулярное выражение';
const removeVowels = input.replace(/[аоуэыияеёю]/gi, '');
console.log(removeVowels);

Это работает. И да, это весь код, который нужен, но давайте рассмотрим подробности:

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

Чтобы внести ясность рассмотрим более простой пример, в котором заменим букву пустой строкой:

const removeVowels = input.replace('a', '');

console.log(removeVowels);

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

1. регулярное выражение заключается в обратные слеши.
2. сопоставление шаблонов задается с помощью квадратных скобок, между которыми указываются сопоставляемые буквы.
3. в конце выражения пишем gi, что означает global ignore (global указывает на применение выражения к каждому случаю найденного совпадения, а не только к первому, ignore позволяет осуществлять поиск без учета регистра)

#frontend #interview #js

454

dr.Brain

02 Nov, 09:00

CSS: color-mix и color-contrast

В CSS появились новые возможности управления значением <color>: color-mix() и color-contrast()

Пока еще экспериментальная функциональная нотация color-contrast() берет указанное значение цвета и сравнивает его с остальным списком, выбирая наиболее контрастное значение:

color-contrast(wheat vs tan, sienna, #d2691e)
color-contrast(#008080 vs olive, var(--myColor), #d2691e)

Функциональная нотация color-mix() принимает два цветовых значения и возвращает результат их смешивания в заданном цветовом пространстве и количестве.

color-mix(in lab, plum 60%, #f00 50%)

#frontend #css

465

dr.Brain

01 Nov, 08:02

CSS: псевдокласс :has

В CSS псевдоклаcc :has дает возможность создавать правила для родительского HTML-элемента, содержащего определенный дочерний элемент. Например, такой фрагмент CSS:

p:has(a) {
    font-size: 40px;
}

будет работать только для p, имеющих вложенную ссылку a:

<p>Тут находится <a href="/">ссылка</a></p>

#frontend #css

432

dr.Brain

31 Oct, 08:09

HTML: submit за пределами формы

Далеко не всегда кнопка отправки формы должна находиться в пределах родительского блока form. Спецификация HTML позволяет размещать ее в любом месте на странице сайта. Для того чтобы кнопка submit корректно работала за пределами формы нужно для элемент button type="submit" указать атрибут form со значением равным id формы:

<form id="newsletterForm">
  <label for="email">Email:</label>
  <input type="email" name="email" placeholder="Email" />
</form>

<button type="submit" form="newsletterForm">Submit!</button>

Кнопка не является частью формы, но по-прежнему работает.

#frontend #html

433

dr.Brain

30 Oct, 08:27

CSS: @container

Правило @container позволяtт динамически управлять стилями дочернего HTML-элемента в зависимости от размера родительского контейнера, содержащего этот элемент. Запросы для контейнеров работают также как и медиа-запросы. Чтобы воспользоваться всеми преимуществами at-rule правила @container, в первую очередь, необходимо определить контекст контейнера родительского элемента, с помощью свойства container-type:

1. container-type: size;: это значение свойства позволяет выполнять запросы как по ширине, так и по высоте;
2. container-type: inline-size;: это значение свойства, позволяет выполнять запросы только по ширине.

<div class="post">
    <div class="card">
        <h2>Наименование</h2>
        <p>Описание товара</p>
    </div>
</div>

.post {
    container-type: size;
}

.card h2 {
    font-size: 1em;
    color: blue;
}

@container (min-width: 700px) {
    .card h2 {
        font-size: 5em;
        color: purple;
    }
}

#frontend #css

428

dr.Brain

29 Oct, 18:05

CSS: псевдокласс :scope

Селектор :scope появился в 2023 году и служит для определения области действия стилей в CSS. Если :scope относится к корневому уровню разметки страницы (обычно это блок html), он полностью заменяет :root. Например:

:scope {
  background-color: orange;
}

Использование :scope внутри блока @scope позволит применить стили четко и целенаправленно, опираясь на логику наименований классов. Например, для HTML-кода:

<div class="light">
  <p><a href="#">light</a></p>
</div>
<div class="dark">
  <p><a href="#">dark</a></p>
</div>

можно применить следующие стили:

@scope (.light) {
  :scope {
    background-color: black;
  }

  a {
    font-size : 2rem;
  }
}

@scope (.dark) {
  :scope {
    background-color: yellow;
    color: purple;
  }

  a {
   font-size : 4rem;
  }

#frontend #css

397

dr.Brain

29 Oct, 09:06

JavaScript: онлайн или офлайн

Читать

Порой пользователю веб-сервиса необходимо знать о потере подключения к Интернету. Например, он может работать с кэшированной информацией, думая, что сайт не обновляется администраторами, в то время как основной причиной такой ситуации является отсутствие подключения к Интернету. Хорошей практикой в таких случаях является уведомление пользователя о наличии соединения с Интернетом...

#frontend #js

411

dr.Brain

28 Oct, 17:10

CSS: вложенность

Читать

В CSS вложенность позвояяет размещать одни правила в других. Это особенно полезно для управления стилями, зависящими от контекста. Например, есть класс container и нужно стилизовать его дочерние элементы item. Теперь можно создать CSS-правила для item непосредственно внутри container.

В 2024 году вложенность стилей стала понятна непосредственно для браузеров.

Это означает, что для компиляции вложенных правил не нужен препроцессор. Например, для элемента ввода данных HTML-формы:

<form>
    <label for="name">Name:
        <input type="text" id="name">
    </label>
</form>

можно создать вложенные стили:

input {
    border: red 2px solid;
}

label {
    font-family: system-ui;
    font-size: 1.25rem;
    & input {
        border: purple 2px solid;
    }
}

#frontend #css

397

dr.Brain

26 Oct, 03:10

CSS: counter

Что такое CSS-счетчики? Их можно рассматривать, как переменные CSS, значения которых увеличиваются по определенным правилам.

Чтобы инициализировать счетчик нужно пройти процедуру его сброса counter-reset с указанием произвольного названия счетчика (пользовательского идентификатора) в качестве параметра. Сброс счетчика может быть CSS-свойством любого HTML-элемента.

Давайте создадим счетчик paragraph и посчитаем все элементы p страницы

body {
  counter-reset: paragraph;
}

p::before {
  counter-increment: paragraph;
  content: 'Параграф ' counter(paragraph) ': ';
}

429

dr.Brain

25 Oct, 11:58

Tailwind: центрирование элемента

Давайте разберем, как можно разместить HTML-элемент в центре родительского блока по горизонтали и по вертикали с помощью Tailwind CSS.
Для реализации такой задачи в Tailwind существует два метода:

1. центрирование с использованием Flexbox модели,
2. центрирование с использванием Grid модели.

Размещение элемента по центру с Grid CSS

<div class="grid h-screen place-items-center">
    <p>Centered using Tailwind Grid</p>
</div>

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

1. grid: применяет к div свойство display: grid,
2. place-items-center: отвечает за свойство place-item: center и центрирует вложенные элементы по горизонтали и по вертикали,
3. h-screen: позволяет элементу занять всю высоту области просмотра (viewport).

Размещение элемента по центру с Flexbox CSS

<div class="flex items-center justify-center h-screen">
  <p>Centered using Tailwind Flex</p>
</div>

Разберем используемые классы:

1. flex: добавляет CSS-свойство display: flex
2. justify-center: центрирует вложенные элементы по горизонтали
3. items-center: центрирует вложенные элементы по вертикали
4. h-screen: позволяет элементу занять всю высоту области просмотра (viewport).

#frontend #css #tailwind

410

dr.Brain

25 Oct, 08:02

Готовы получить уникальные знания, которые не найдёте даже на Stackoverflow?

Приглашаем вас на бесплатную IT-конференцию TerraTech MeetUp 31 октября!

Что вас ждёт:

— Презентации от ведущих специалистов на актуальные темы;

— Последние тренды из мира IT;

— Полезные знакомства;

— Ответы на все интересующие вопросы!

Посетить мероприятие может каждый — от начинающего разработчика до опытного специалиста, и абсолютно бесплатно!

Ждём вас 31 октября 2024 года! Сбор гостей начнется в 19:00 по адресу: Варшавское шоссе, 33с12, Megapolis Hall

Регистрация по ссылке

erid: LjN8K8miW

152

dr.Brain

25 Oct, 03:02

CSS: атрибуты данных

Атрибуты данных полезны не только в JavaScript. С их помощью можно менять и стили HTML-элементов. Создадим элементы <div>...</div>, которые будут содержать атрибуты data-raing с разными значениями:

<div data-rating="1">Rating</div>
<div data-rating="5">Rating</div>

Стилизуем элементы, используя только название пользовательского атрибута данных:

[data-rating] {
  color: indigo;
}

Текст элементов с атрибутом data-rating окраситься в фиолетовый цвет.
Но можно более тонко подойти к возможностям пользовательских атрибутов для CSS, и применить стили к их значениям:

[data-rating='1'] {
  color: red;
}
[data-rating='5'] {
  color: indigo;
}

Наконец, с помощью CSS можно вывести сами значения пользовательских атрибутов после основного текста:

[data-rating]::after {
  content: attr(data-rating);
}

#frontend #css

365

dr.Brain

24 Oct, 14:58

CSS: центрирование для Flexbox

Вспомним про быстрый и простой способ центрирования контента по вертикали и горизонтали с помощью Flexbox,

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

Если применить класс flex-center к контейнеру, все дочерние элементы отцентруются.

#frontend #css #flexbox

361

dr.Brain

24 Oct, 07:52

Tailwind: тень для png

Tailwind позволяет создавать тень, оборачивающую контур фигуры для файлов в формате png c прозрачным фоном.

Чтобы создать эффект тени, необходимо использовать изображение в формате png с прозрачным фоном.
Все, что остаётся сделать - применить к картинке класс drop-shadow:

<img src="https://i.imgur.com/q3SXJQf.png" class="filter drop-shadow">

Такой трюк не сработает в Tailwind CSS 2ой версии

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

<img src="https://i.imgur.com/q3SXJQf.png" class="filter shadow">

#frontend #tailwind #css

227

dr.Brain

23 Oct, 11:10

CSS: пользовательский скроллбар

С помощью псевдоэлементов ::-webkit-scrollbar, ::-webkit-scrollbar-track , ::-webkit-scrollbar-thumb можно переделать скроллбар в соответствии с требованиями к дизайну сайта:

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

Настраиваемая полоса прокрутки работает в браузерах на основе WebKit (например, Chrome и Safari). Можно настроить её цвет и размеры так, чтобы они идеально соответствовали общему стилю страниц.

Помните: несмтроя на то что этот CSS-трюк отлично подходит для WebKit, другие браузеры могут не поддерживать используемые псевдоэлементы. Чтобы достичь единообразия пользовательских интерфейсов, необходимо проверять такой код во всех браузерах.

#frontend #css

230

dr.Brain

22 Oct, 15:41

CSS: выравнивание элементов

Порой плавающие элементы могут быть очень изворотливыми. У них есть отвратительная привычка выходить за пределы родительских контейнеров и сеять хаос в макетах.

Но эту проблему можно решить с помощью небольшой хитрости, которую можно назвать clearfix-hack:

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Добавив таким образом класс clearfix к любому контейнеру с плавающими дочерними элементами, можно восстановить порядок. Псевдоэлемент ::after создает невидимый блок, следующий за содержимым контейнера, это позволяет очистить поток плавающих элементов и сохранить макет красивым и аккуратным.

#frontend #css

256

dr.Brain

22 Oct, 07:41

JavaScript: ограничения

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


function debounce(func, delay) {
  let timeoutId;
  return function (...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

// пример использования:
window.addEventListener('resize', debounce(() => {
  console.log('Window resized');
}, 500));

#frontend #js

265

dr.Brain

21 Oct, 16:48

Laravel: Valet

Laravel Valet является средой разработки для поклонников яблочной продукции и минимализма. Valet использует сервер Nginx, который включается на устройстве с mac OS в фоновом режиме при запуске машины. С помощью DnsMasq Valet перенаправляет запросы на локальный домен *.test, предоставляя доступ к сайтам, установленным на рабочем компьютере...

#dev #macos #php #laravel

291

dr.Brain

21 Oct, 03:02

HTML: прокрутка страницы

Автоматическую прокрутку страницы можно сделать более плавной и привлекательной с помощью псевдокласса :focus-within.

html:focus-within {
    scroll-behavior: smooth;
}

#frontend #html #css

338

dr.Brain

20 Oct, 15:49

HTML: градиентный текст

Чтобы создать градиентный текст можно использовать CSS-свойство background-clip.


h2 {
    background: linear-gradient(45deg, gold, lightblue);
    background-clip: text;
    text-fill-color: transparent;
}

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


<svg width="100%" height="100%">
  <defs>
    <linearGradient id="Gradient" x1="0" x2="1" y1="0" y2="0">
      <stop offset="0%" stop-color="orange">
      <stop offset="100%" stop-color="purple">
    </linearGradient>
  </defs>

  <text x="50%" y="50%" font-family="Verdana" font-size="35" text-anchor="middle" fill="url(#Gradient)">
    Gradient Text
  </text>
</svg>

#frontend #html #css

331

dr.Brain

20 Oct, 10:01

Homebrew: установка

Пакетный менеджер Homebrew для mac OS необходим для установки терминальных программ и утилит и является одним из важнейших инструментов, необходимых для настройки локальной среды разработки при программирования на Mac...

#dev #tutorial #homebrew #macos

323

dr.Brain

19 Oct, 17:19

HTML: capture

Атрибут capture HTML-элемента input позволяет захватить видеопоток со смартфона или планшета.

Значение environment включает доступ к видеопотоку с основной камеры смартфона:


<input type="file" capture="environment" accept="video/*"

Значение environment включает доступ к видеопотоку с фронтальной камеры смартфона:


<input type="file" capture="user" accept="image/*">

Кроме того, можно получить доступ и к аудиопотоку:


<input type="file" capture="environment" accept="audio/*">

#frontend #html

331

dr.Brain

19 Oct, 13:49

Установка React с Tailwind CSS

Читать

Tailwind CSS является неплохим инструментом для работы над стилями компонентов React-приложений. В этом руководстве рассматривается пошаговая установка Tailwind CSS с процессором PostCSS для React...

#frontend #css #tailwind #js #react

323

dr.Brain

18 Oct, 16:26

CSS: checkbox

Обычно создание пользовательских переключателей не обходится без изрядного количества JavaScript-кода. Но такую задачу можно решить, используя только HTML и CSS.

<label class="switch">
  <input type="checkbox" class="switch-input">
  <span class="switch-slider"></span>
</label>

/* контейнер для переключателя */
.switch { 
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* скрываем стоковый чекбокс */
.switch-input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* видимый бекграунд переключателя */
.switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
}

/* переключатель */
.switch-slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
}

/* псевдокласс для переключателя во включенном состоянии */
.switch-input:checked + .switch-slider {
  background-color: #2196F3;
}

/* перемещаем переключатель вправо во включенном состоянии */
.switch-input:checked + .switch-slider:before {
  transform: translateX(26px);
}

#frontend #html #css

325

dr.Brain

18 Oct, 06:11

CSS: user-select

Можно значительно упростить выбор текста с помощью CSS-свойства user-select.

Значение all, позволит включить быстрое выделение текста одним щелчком мыши. При этом выбираются в том числе и все дочерние элементы выбираемого элемента, содержащие текст.

Кроме того, с помощью user-select: none; можно отключить выделение текста.

#frontend #css

340

dr.Brain

17 Oct, 15:25

HTML: отключаем контекстное меню

Установив значение false для свойства обработчика событий oncontextmenu, обрабатывающего клик правой кнопкой мыши, можно изменить стандартное поведение браузера и отключить вызов контекстного меню

Так правый клик отключается для отдельного HTML-элемента:


<p oncontextmenu="return false">Hello</p>

А так контекстное меню отключается для всего содержимого страницы:


<body oncontextmenu="return false">....</body>

#frontend #html #js

330

dr.Brain

17 Oct, 07:20

CSS: inset

Обычно абсолютное позиционирование элемента выглядит так:


.some-element {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

Свойство inset значительно сокращает код:


.some-element {
    position: absolute;
    inset: 0;
}

Если нужно указать различные значения для сторон элемента, сокращение работает по тем же правилам, что и для margin:


.some-element {
    position: absolute;
    inset: 10px 0px -10px 0px;
}

#frontend #css

353

dr.Brain

16 Oct, 15:01

Tailwind: адаптивная сетка

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

Обращайте внимание на контрольные точки Tailwind:


<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
  <div class="bg-blue-100 p-4">Item 1</div>
  <div class="bg-blue-100 p-4">Item 2</div>
  <div class="bg-blue-100 p-4">Item 3</div>
  <div class="bg-blue-100 p-4">Item 4</div>
</div>

1. grid включает адаптивную сетку.
2. grid-cols-1 создает один столбец на маленьких экранах.
3. sm:grid-cols-2 создает два столбца экранах размером более 640 пикселей.
4. lg:grid-cols-4 создает четыре столбца на экранах размером больше 1024 пикселей.

При необходимости распределяйте элементы сетки:


<div class="grid grid-cols-3 gap-4">
  <div class="bg-green-100 p-4 col-span-2">Item 1 (Spans 2 columns)</div>
  <div class="bg-green-100 p-4">Item 2</div>
  <div class="bg-green-100 p-4 row-span-2">Item 3 (Spans 2 rows)</div>
  <div class="bg-green-100 p-4">Item 4</div>
  <div class="bg-green-100 p-4">Item 5</div>
</div>

1. col-span-2 располагает элемент в двух столбцах.
2. row-span-2 располагает элемент на двух строках.

Контролируйте поток:


<div class="grid grid-cols-3 grid-flow-row-dense gap-4">
  <div class="bg-red-100 p-4">Item 1</div>
  <div class="bg-red-100 p-4">Item 2</div>
  <div class="bg-red-100 p-4">Item 3</div>
  <div class="bg-red-100 p-4 col-span-2">Item 4 (Spans 2 columns)</div>
  <div class="bg-red-100 p-4">Item 5</div>
</div>

grid-flow-row-dense автоматически заполняет пустые ячейки сетки.

Выравнивайте элементы сетки:


<div class="grid grid-cols-2 gap-4 place-items-center">
  <div class="bg-yellow-100 p-4">Centered Item 1</div>
  <div class="bg-yellow-100 p-4">Centered Item 2</div>
</div>

place-items-center центрирует элементы сетки по вертикали и горизонтали

#frontend #css #tailwind

348

dr.Brain

16 Oct, 04:56

HTML: http-equiv

Для обновления или перенаправления по истечении определенного периода времени можно использовать атрибут http-equiv HTML-элемента meta.

Так можно обновлять страницу каждые 30 секунд:


  <meta http-equiv="refresh" content="30">

А это перенаправление на указанную страницу через 5 секунд:


  <meta http-equiv="refresh" content="5;https://google.com">

#frontend #html

344

dr.Brain

15 Oct, 16:00

Xcode: xcode-select

Читать

Рассмотрим, как установить Xcode CLT (Xcode Command Line Tools) напрямую, не прибегая к установке полного пакета XCode или Homebrew...

#dev #tutorial #xcode

340

dr.Brain

15 Oct, 08:44

HTML: множественный ввод

Читать

Для HTML-элемента input можно использовать атрибут multiple, чтобы указать несколько значений для файлов и адресов электронной почты. Возможно такой подход не является привычным для пользователей, но он работает:

<input type="email" placeholder="Email (список, через запятую)" multiple>

Если для атрибута type не задано значение email или file, возможность множественного ввода значений даже при указанном multiple игнорируется.

#frontend #html

358

dr.Brain

15 Oct, 03:02

CSS: лимит строк

Читать

Свойство -webkit-line-clamp позволяет ограничить содержимое блока указанным количеством строк:

p.intro {
    width: 300px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* обрезаем, если количество строк больше 3 */
    overflow: hidden;
}

Для того, чтобы результат соответствовал ожиданиям, должны быть соблюдены следующие правила:

1. свойство display имеет значение -webkit-box или -webkit-inline-box,
2. значение свойства -webkit-box-orient соответствует vertical
3. overflow содержит значение hidden

#frontend #css

360

dr.Brain

14 Oct, 17:44

Homebrew: установка Xcode CLT

Читать

Самый простой способ получить на рабочем месте Xcode Command Line Tools — это установить Homebrew, популярный менеджер пакетов для macOS. С Homebrew можно установить практически любой инструмент разработчика с открытым исходным кодом. Поскольку, с высокой степенью вероятности, Homebrew очень сильно пригодится в локальной среде разработки, будет разумным шагом установить Homebrew, а вместе с ним и Xcode Command Line Tools...

#dev #tutorial #macos

341