Журнал «Доктайп» — фронтенд, айти, обучение

Работа с Git через консоль

Как сделать форк вашего репозитория в GitHub, создать ветку и начать работу через консоль.

7 августа 2023

Свежие статьи

Как в 2025 году вибрануть сайтом

Шутки в сторону, на кону серьёзная задача — нужно вибрануть сайтом. К счастью, в 2025 году это не очень сложно и нужна поддержка есть. Vibration API поддерживается почти везде, кроме Safari. Конечно, ещё нужно устройство с вибромотором, но тут подойдут почти все телефоны, если есть нужный браузер.

Не будем растягивать эту инструкцию и давайте начнём с базовой страницы (это будет просто кнопка, выровненная по центру.)

<html>
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Кнопка по центру</title>
</head>
<body>
 <button>Нажми меня</button>
</body>
</html>

Ну или ладно, сначала она вообще не по центру. Добавим стили, чтобы кнопка получила цвет и оказалась там, где мы хотим. Вставьте весь этот тег <style> куда-нибудь внутри <head>.

<style>
   body {
     margin: 0;
     height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: #f0f0f0;
   }
   button {
     padding: 15px 30px;
     font-size: 18px;
     background-color: #007bff;
     color: white;
     border: none;
     border-radius: 5px;
     cursor: pointer;
   }
   button:hover {
     background-color: #0056b3;
   }
 </style>

Чтобы добавить поддержку вибрации, слегка изменим код внутри <body> — добавим скрипт, который проверяет поддержку вибрации и вибрирует.

<body>
 <button id="vibrateButton">Нажми меня</button>
 <p id="status">Проверка поддержки вибрации...</p>

 <script>
   const vibrateButton = document.getElementById('vibrateButton');
   const statusText = document.getElementById('status');

   if ('vibrate' in navigator) {
     statusText.textContent = 'Vibration API поддерживается!';
     vibrateButton.addEventListener('click', () => {
       navigator.vibrate(200); // Вибрация на 200 мс
       statusText.textContent = 'Устройство завибрировало!';
     });
   } else {
     vibrateButton.disabled = true;
     statusText.textContent = 'Vibration API не поддерживается.';
   }
 </script>
</body>

И всё!

Есть, конечно, нюанс. В теории с поддержкой всё хорошо, а на практике при проверке у редакции на Андроид-смартфоне вибрация поддерживается в Chrome и Яндекс-браузере, а в Firefox не работает (хотя на CanIUse и написано обратное).

Но теперь, если вы хотите клёво вибрануть телефоном в ответ на реакцию в каком-нибудь чатике, вы точно знаете, что делать.

3 октября 2025

Как найти элемент в массиве по индексу на JS

Метод at() возвращает элемент массива по индексу. Отрицательные индексы позволяют отсчитывать элементы с конца массива.

const numbers = [10, 20, 30, 40, 50];

// Получаем элемент по индексу
console.log(numbers.at(0));   // 10
console.log(numbers.at(2));   // 30

// С конца массива
console.log(numbers.at(-1));  // 50
console.log(numbers.at(-3));  // 30

Здесь показано, что at() работает как обычный доступ по индексу, но с преимуществом: отрицательные числа позволяют легко получать элементы с конца массива. Это особенно удобно, когда размер массива заранее неизвестен.

// Использование с типизированными массивами
const typedArr = new Uint8Array([1, 2, 3, 4]);
console.log(typedArr.at(1));   // 2
console.log(typedArr.at(-2));  // 3

Метод одинаково хорошо работает и с типизированными массивами (TypedArray), что делает его универсальным инструментом для работы с любыми последовательностями чисел.

// Безопасный доступ
console.log(numbers.at(10));   // undefined
console.log(numbers.at(-10));  // undefined

Если индекс выходит за границы массива, метод возвращает undefined. Это безопаснее, чем напрямую обращаться к элементу через квадратные скобки, так как код остаётся читаемым и предсказуемым.

Метод at() делает код чище и удобнее, особенно когда нужно работать с элементами с конца массива или с переменной длиной массива.

3 октября 2025

Как защитить VPS от взлома: 10 простых правил

Если вы новичок и впервые работаете с VPS на Ubuntu, важно сразу настроить базовую защиту. Эти 10 правил помогут снизить риск взлома без сложной конфигурации.

Свежие статьи

Вход

Регистрация

Восстановление доступа