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

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

#frontend #js

CSS: анимация SVG

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

#frontend #css #svg #animation

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

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

#frontend #css #svg #animation

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

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

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

#backend #php #laravel #lesson

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

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

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

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

#frontend #css #tailwind

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

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

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

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

parseInt(0.0000005) //  5

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

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

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

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

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 расширит область основного содержимого, используя свободное пространство и сдвигая футер в нижнюю часть области просмотра.

PHP: архив

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

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

#backend #php

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

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

Mac OS: ip сайта

Для того чтобы узнать ip-адрес веб-ресурса, необходимо открыть терминал и ввести команду ping в сочетании с адресом внешнего сайта без http:// или https://. Название сайта можно вводить как с www, так и без него

ping drbrain.net

В ответе мы увидим адрес сайта:

64 bytes from 35.185.44.232: icmp_seq=0 ttl=59 time=152.740 ms
64 bytes from 35.185.44.232: icmp_seq=1 ttl=59 time=153.467 ms
64 bytes from 35.185.44.232: icmp_seq=2 ttl=59 time=153.011 ms

Чтобы прервать исполнение команды ping нужно ввести сочетание клавиш Ctrl и C. С помощью параметра -c можно ограничить количество передаваемых пакетов:

ping -c 1 drbrain.net

В таком случае выполнение команды прекратится после передачи количества пакетов, указанных после параметра -c

#dev #terminal #macos

JavaScript: Лучшие практики

Используйте const и let вместо var

В ES6 предусмотрены директивы conat и let, определяющие блочную область видимости. Они позволяют избежать многих ошибок, связанных с использованием var

1. const используется для неизменяемых значений
2. var используется для переменных, значения которых будут изменяться

// Плохая практика  
var name = "John";
var age = 21;  

// Хорошая практика  
const name = "John";
let age = 21;

Избегайте использования var, так как для этой директивы не существует блочной области видимости. Ее область видимости ограничивается функцией или скриптом. Переменная, объявленная таким образом, будет доступна за пределами блока.

#js #лучшиепрактики

Tailwind без Tailwind

Знаете ли вы, что можно использовать все преимущества Tailwind CSS, не прибегая к использованию самой библиотеки?

Как любая система дизайна, Tailwind имеет токены дизайна.

Токены дизайна (design tokens)
это жестко закодированные значения, такие как, например, цвета, интервалы, размеры границ.

Токены дизайна можно извлечь как простые переменные CSS и использовать следующим образом:

border-radius: var(--rounded-lg);
background-color: var(--white);
padding: var(--s8);
width: var(--s60);
box-shadow: var(--shadow-lg);
text-align: center;

Все основные токены дизайна можно найти в GitHub Gist у SidKH/tailwind-css-variables.css

#css #tailwind

CSS фигуры: глаз

Глаз - одна из базовых форм CSS, требующих небольшого поворота

Создадим квадрат, затем установим радиус границы для двух противоположных углов, оставив два других угла на нуле. Лучше начинать с верхнего левого угла, добавив поворот на 45 градусов, но можно выбрать любой другой угол и настроить поворот соответствующим образом.

<div class="eye"></div>

Можно использовать свойство rotate: 45deg или transform: rotate(45deg). Оба варианта будут работать.

.eye {
    width: 200px;
    aspect-ratio: 1;
    background: black;
    rotate: 45deg;
    border-radius: 80% 0;
}

Что касается border-radius: чем больше значение, тем мягче будет передаваться кривизна глаза. Можно поэкспериментировать со значениями, чтобы одна сторона стала выше другой, например: border-radius: 80% 0 100% 0.

#frontend #css #shapes

JavaScript: Лучшие практики

Следуйте правилам именования сущностей в JavaScript

1. camelCase для переменных и функций
2. PascalCase для конструкторов функций и классов
3. UPPER_SNAKE_CASE для констант

// Плохая практика
let firstname = "John";
function getuser() {} 
const MAXUSERS = 100;  

// Хорошая практика
let firstName = "John";
function getUser() {}   
const MAX_USERS = 100; 

#js #лучшиепрактики

JavaScript: Лучшие практики

Избегайте глобальных переменных

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

// Плохая практика: загрязняет глобальную область видимости
let counter =  0 ;  

// Хорошая практика: инкапсулировано   
( function(){ 
  let counter = 0 ;
  function  increment(){
    counter ++ ; 
  }
})(); 

#js #лучшиепрактики