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 #лучшиепрактики

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

Забавно, но слеза является вариантом формы глаза

<div class="tear"></div>

Достаточно просто изменить радиус контура: увеличить radius в положениях top-right, botton-right, bottom-left, чтобы получить круглую форму, и привести его к нулю для top-left, чтобы он заканчивался точкой:

.tear {
  width: 300px;
  aspect-ratio: 1;
  background: black;
  rotate: 45deg;
  border-radius: 0 50% 50% 50%;
}

#frontend #css #shapes

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

Используйте строгий режим

Строгий режим use strict позволяет избегать небезопасных действий, выдавая ошибки при:

1. присвоении значений необъявленным переменным,
2. использовании устаревших функций.

"use strict";  

x = 10; // приводит к ошибке: x is not defined 

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

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

Всегда используйте === вместо ==

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

// Плохая практика: приведение типов  

console.log(5 == "5") // true

// Хорошая практика: строгое сравнение

console.log(5 === "5") // false

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

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

Обрабатывайте ошибки с помощью try-catch

Необработанные ошибки приводят к сбоям в работе приложения. Используйте try-catch для операций, несущих риски возникновения ошибок, таких как вызовы API.

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("Fetch failed:", error)
  }
} 

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

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

Избегайте ада обратных вызовов с помощью Promises и Async / Await

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

1. Promises
2. Async / Await

// Callback Hell. Плохая практика  

getUser(userId, (user) => {
  getPosts(user.id, (posts) => {
    getComments(posts[0].id, (comments) => {
      console.log(comments);
    });
  });
});  


// Async/Await. Хорошая практика

async function loadData() {
  const user = await getUser(userId);
  const posts = await getPosts(user.id);
  const comments = await getComments(posts[0].id);

  console.log(comments);
}  

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

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

Оптимизируйте циклы

Избегайте тяжелых вычислений внутри циклов. Кэшируйте длины массивов и используйте эффективные циклы, такие как for...of или Array methods

const items = [1, 2, 3, 4, 5];  

// Плохая практика: пересчет длины при каждой итерации

for (let i = 0; i < items.length; i++) {
  console.log(items[i]);
}  

// Хорошая практика: кэширование длины

for (let i = 0, len = items.length; i < len; i++) {
  console.log(items[i]);
}  

// Лучшая практика (modern JS)  

for (const item of items) {
  console.log(item);
}  

// Функциональный подход (map, filter, reduce)  
items.map(item => console.log(item));  

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

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

Используйте все возможности JavaScript

1. стрелочные функции
2. шаблонные литералы
3. деструктуризацию
4. spread и rest операторы

// Стрелочные функции  и шаблонные литералы
const greet = (name) => </span><span>Hello, </span><span><span>${</span>name<span>}</span></span><span>;  

// Деструктуризация
const { id, username } = user;  

// Spread  
const merged = [...arr1, ...arr2]; 

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

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

Используйте ESLint и Prettier для повышения качества кода

1. ESLint
2. Prettier

установите их через npm:

npm install eslint prettier --save-dev  

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

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

Разбивайте свой код на более мелкие, повторно используемые модули. Так Вы упростите разработку и

Используйте модули ES6 для эффективной организации кода.

// math.js
export function add(a, b) {
  return a + b;
}

// app.js
import { add } from './math.js';
console.log(add(2, 3)); // 5

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

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

Производительность имеет решающее значение для оптимального взаимодействия с пользователями:

1. избегайте ненужных манипуляций с DOM,
2. минимизируйте использование глобальных переменных,
3. оптимизируйте циклы и алгоритмы.

// Плохая практика
for (let i = 0; i < array.length; i++) {
  // какой-то код
}

// Хорошая практика
const length = array.length;
for (let i = 0; i < length; i++) {
  // какой-то код
}

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

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

Тестируйте свой код.

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

// sum.js
export function sum(a, b) {
  return a + b;
}

// sum.test.js
import { sum } from './sum';

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

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

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

CSS фигуры: круг

Создать круг с помощью CSS легко и просто

<div class="circle"></div>

Допустим у нас уже есть квадрат:

.circle {
  width: 300px;
  aspect-ratio: 1;
  background: black;
}

Теперь нужно задать округлую форму. Нам поможет свойство border-radius. Присвоим ему значение 50% или больше:

.circle {
  width: 300px;
  aspect-ratio: 1;
  background: black;
  border-radius: 50%;
}

#frontend #css #shapes