Трюки привычных инструментов

Хорошо знакомые инструменты умеют удивлять. В нашем октябрьском дайджесте мы сконцентрировались на методах вывода информации в консоль, технологии ленивой загрузки и полезной библиотеке SolidJS.

Изучая console.log

Если вам в жизни встретится хоть один фронтенд-разработчик, который ничего не слышал о console.log() — вы счастливчик. Шанс ничтожно мал, а этот метод используют все разработчики на JS. Есть только одна ложка дёгтя — вывод бывает таким громоздким, что его не прочитать.

Первый трюк по улучшению читаемости — запрашивать не переменные, а объекты. Вот первый пример, когда мы запрашиваем только переменные:

const name = 'Evrone'
const age = 35
const job = 'Front end development engineer'
const hobbies = 'eat, sleep, code'

console.log(name, age, job, hobbies)

Ответ будет просто одной строкой без разделителей и категорий:

Evrone 35 Front end development engineer eat, sleep, code

Но если вместо этого запросить объект console.log({name, age, job, hobbies}), то вывод примет красивый и легко воспринимаемый вид:

{
  name: 'Evrone',
  age: 35,
  job: 'Front end development engineer',
  hobbies: 'eat, sleep, code'
}

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

Ещё один способ однозначно выделить нужное сообщение — воспользоваться методом console.warn(), который вместе с выводом даст предупреждение в консоль.

Если вам и этого мало, то в статье It’s 2022, Please Don’t Just Use “console.log” Anymore найдёте ещё три отличных способа улучшить вывод консоли.

Lazy Loading images

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

В этой статье мы обнаружили полезный туториал. Для Lazy Loading есть два основных способа. Первый — использовать методы EventListener. В качестве триггера могут служить события прокрутки, изменения размеров окна браузера или же смена ориентации экрана:

document.addEventListener(“scroll”, lazyload);

window.addEventListener(“resize”, lazyload);

window.addEventListener(“orientationChange”, lazyload);

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

Второй, не менее эффективный способ — отслеживание видимости элементов с помощью API Intersection Observer. Это такой конструктор, позволяющий следить за областью просмотра и генерировать обратные вызовы. Задаём элементы, за которыми надо следить, и подгружаем изображение, когда будет определено, что оно вошло в поле видимости:

document.addEventListener(“DOMContentLoaded”, function() {

    var lazyloadImages;    
 
    if (“IntersectionObserver” in window) {
 
      lazyloadImages = document.querySelectorAll(“.lazy”);
 
      var imageObserver = new IntersectionObserver(function(entries, observer) {
 
        entries.forEach(function(entry) {
 
          if (entry.isIntersecting) {
 
            var image = entry.target;
 
            image.src = image.dataset.src;
 
            image.classList.remove(“lazy”);
 
            imageObserver.unobserve(image);
 
          }
 
        });
 
      });  

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

SolidJS для солидных господъ

Язык JavaScript не назовёшь привлекательным. В нём всегда было полно моментов, которые стоило бы улучшить или переработать. Этим активно пользовались разработчики фреймворков, привнося в JS приёмы и элементы из других языков, а также выполняя оптимизацию кода. Так, например, Svelte использует статистический анализ и умеет автоматически убирать неиспользуемый код. За счёт этого достигается значительный выигрыш по скорости.

Но SolidJS возводит идею о производительности и эргономичности в абсолют. Крошечный размер в 6.4 Кбайта, скачивающийся при 4G соединении всего за 7 мс, и обширные возможности впечатлили многих фронтенд-разработчиков. 22k звёздочек на GitHub, и почти 600 форков говорят сами за себя.

Автор библиотеки, Райан Карниато (Ryan Carniato) в статье на Medium скромно называет своё творение «Теслой в мире JavaScript UI-фреймворков». Это не простое хвастовство, SolidJS в бенчмарках демонстрирует очень высокую производительность. Реактивность — ещё одно важное качество, реализованное в библиотеке. Но довольно слов, предлагаем всего за 100 секунд познакомиться с SolidJS и определить для себя — стоит ли тратить на него своё время:

Митапы

Вакансии