JavaScript Ready | Frontend

Как читать элементы массива с конца через at()! Раньше доступ к элементам с конца массива требовал ручных вычислений длины и это ухудшало читаемость кода. Например, чтобы получить последний и предпоследний элементы, обычно писали так. Традиционный способ:

    
        const arr = ["a", "b", "c", "d"];

const last = arr[arr.length - 1];
const prev = arr[arr.length - 2];

console.log(last); // "d"
console.log(prev); // "c"{}
    

При сложных выражениях или частых обращениях к последним элементам такой код становится менее читаемым. Современный метод at() позволяет обращаться к элементам массива с конца через отрицательные индексы:

    
        const arr = ["a", "b", "c", "d"];

arr.at(-1); // "d"
arr.at(-2); // "c"{}
    

Метод также поддерживает обычные положительные индексы:

    
        arr.at(0); // "a"
arr.at(2); // "c"{}
    

Если индекс выходит за пределы массива, метод возвращает undefined:

    
        arr.at(100);  // undefined
arr.at(-100); // undefined{}
    

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

    
        function peek(stack) {
  return stack.at(-1);
}{}
    

Метод работает не только с массивами, но и со строками:

    
        "hello".at(-1); // "o"{}
    

В отличие от charAt(), метод at() поддерживает отрицательные индексы. Он также доступен для TypedArray:

    
        const bytes = new Uint8Array([10, 20, 30]);

bytes.at(-1); // 30{}
    

🔥 Важно: at() не мутирует данные и не создаёт копий — это просто способ получить элемент по индексу. Метод поддерживается современными браузерами и современными версиями Node.js. 📣 JS Ready | #практика

Совет на 2026 год — освойте ВАЙБ-КОДИНГ. ИИ уже пишет код, чинит баги, генерит тесты и документацию быстрее и качественнее любой команды айтишников И те, кто научится вайбкодить сейчас, будут зарабатывать в разы больше тех, кто всё ещё делает всё вручную Разобраться в этом с нуля поможет канал Вайб-кодинг. Там простым языком разбирают, какие инструменты действительно стоит использовать, как собирать проекты от идеи до релиза и что сейчас актуально в вайбкодинге Подписывайтесь, нас уже 15 тысяч: @vibecoding_tg

📂 Напоминалка по объектам в JavaScript! Например, объект помогает хранить данные в формате ключ-значение, а через dot notation, bracket notation и destructuring можно быстро получать и использовать нужные свойства. На картинке — базовые приёмы работы с объектами: создание, доступ к свойствам, изменение значений, добавление новых полей, деструктуризация и методы. Сохрани, чтобы не забыть! 📣 JS Ready | #ресурс

matchMedia — проверка и отслеживание media queries! matchMedia() — Web API, позволяющий проверять и отслеживать media queries напрямую из JavaScript. Это помогает синхронизировать поведение JS-кода с CSS-адаптивностью. Функция возвращает объект MediaQueryList, содержащий результат проверки media query. Базовое использование:

    
        const media = window.matchMedia('(max-width: 768px)');

console.log(media.matches);{}
    

matches — boolean, показывающий соответствует ли текущий viewport заданному media query. Пример 1 — проверка условия:

    
        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
  document.body.classList.add('dark-theme');
}{}
    

Так можно адаптировать поведение интерфейса под системные настройки пользователя. Пример 2 — отслеживание изменения media query:

    
        const media = window.matchMedia('(max-width: 768px)');

media.addEventListener('change', e => {
  console.log('mobile:', e.matches);
});{}
    

Событие change срабатывает при изменении состояния media query. Это позволяет реагировать на изменение состояния media query без использования window.resize. Пример 3 — адаптация логики интерфейса:

    
        const media = window.matchMedia('(max-width: 600px)');

function updateLayout(mql) {
  if (mql.matches) {
    enableMobileLayout();
  } else {
    enableDesktopLayout();
  }
}

updateLayout(media);
media.addEventListener('change', updateLayout);{}
    

Обработчик сначала вызывается вручную для установки начального состояния, затем автоматически при изменении media query. Пример 4 — учет пользовательских настроек доступности:

    
        const motion = window.matchMedia('(prefers-reduced-motion: reduce)');

if (motion.matches) {
  disableAnimations();
}{}
    

Media queries позволяют учитывать пользовательские настройки доступности. Пример 5 — отслеживание ориентации экрана:

    
        const orientation = window.matchMedia('(orientation: portrait)');

orientation.addEventListener('change', e => {
  console.log('portrait:', e.matches);
});{}
    

matchMedia используется для: адаптивной логики интерфейса, синхронизации JavaScript и CSS media queries, учета пользовательских настроек доступности и оптимизации поведения UI на разных устройствах. 🔥 matchMedia — удобный способ проверять и отслеживать media queries напрямую из JavaScript. 📣 Code Ready | #практика

Ищем новичков во фронтенд-разработке и вёрстке сайтов. Хотим показать, как получить реальный опыт в разработке сайтов и веб-приложений. А именно: - Сгенерировать сайт через Giga, DeepSeek, ChatGPT - Сверстать страницу на HTML + CSS по Figma макету - Оживить её логикой на JavaScript - Превратить сайт во фронтенд-приложение на Angular - Подключить backend и выложить проект на хостинг Чтобы в итоге ты своими руками всего за 7 дней разработал качественный сайт, который не стыдно добавить в портфолио или продать. Такой опыт можно получить на бесплатном практикуме с поддержкой от опытных кураторов на каждом этапе. 👉 Приходи на бесплатное обучение и зови с собой друзей Бонусом получишь гайд: «Фронтенд в 2026 году: стоит ли входить сейчас и что делать новичку в эпоху ИИ». Стартуем завтра.

📂 Напоминалка по сетевым портам! Например, порт 22 используется для SSH-подключений, а 443 — для защищённого HTTPS-трафика. Порты — основа любого взаимодействия между клиентом и сервером. На картинке — 18 основных портов. Сохрани, чтобы не забыть! 📣 JS Ready | #ресурс

📱 Работа с регулярными выражениями! Шпаргалка по базовым операциям с регулярными выражениями. Показано, как проверять наличие совпадений, извлекать найденные фрагменты и группы захвата, получать все совпадения в строке, а также выполнять поиск, замену и разделение строк по шаблону. Также кратко разобраны различия в поведении методов и влияние флагов регулярных выражений. 📣 JS Ready | #шпора

Изоляция рунета ближе, чем ты думаешь

Loading … ██████████████] 99%

Роскомнадзору дали карт-бланш на блокировки, а «белые списки» сайтов тестируют уже в десятках регионов. И гайки будут закручиваться только сильнее. Чтобы в одночасье не лишиться доступа к свободному Интернету, просто сохрани Only Hack. Тут профессиональный хакер делится фишками, с которыми доступ к глобальной сети у тебя будет даже в случае ядерного апокалипсиса. Не жди момента «Х». Перестрахуйся подпиской.

😎 JavaScript Algorithms — это большая коллекция алгоритмов и структур данных на чистом JS! От сортировок, поиска и рекурсии до графов, динамического программирования и даже криптографии - всё собрано в одном месте. Каждый алгоритм снабжён кодом и пояснениями, так что учиться и разбираться просто и интересно.

Оставляю ссылочку: GitHub 📱

📣 JS Ready | #репозиторий

Нативная группировка данных в JS! Частая задача — сгруппировать данные по какому-то полю. Обычно это делают через reduce:

    
        const byId = users.reduce((acc, u) => {
  (acc[u.id] ??= []).push(u);
  return acc;
}, {});{}
    

Но в современном JS есть нативный способ группировки — Object.groupBy():

    
        Object.groupBy(iterable, callback){}
    

Метод принимает итерируемую коллекцию и функцию, которая возвращает ключ группы:

    
        const byId = Object.groupBy(users, u => u.id);{}
    

Результат — объект, где ключи это группы, а значения — массивы элементов:

    
        {
  "1": [{ id: 1, name: 'Jane' }],
  "2": [{ id: 2, name: 'John' }]
}{}
    

Ключи в Object.groupBy() становятся свойствами объекта. Если нужны ключи любого типа без преобразования — можно использовать Map.groupBy():

    
        const grouped = Map.groupBy(users, u => u.id);{}
    

🔥 Это упрощает агрегацию данных: аналитика, таблицы, API-ответы, группировка логов, отчёты и подготовку данных для UI. 📣 JS Ready | #совет