«Ленивая загрузка изображений» – это практика, которая популярна уже около десятилетия, и на то есть веская причина: изображения, как правило, – самая тяжелая часть страницы, и возможность не отображать картинки, которые не видны на экране значительно ускоряет загрузку страницы. Есть плагины для ленивой загрузки изображений практически для каждого JavaScript-фреймворка, или же можно использовать Intersection Observer API. Сейчас такой функционал стал очень востребован и разработчики Chrome добавили встроенную поддержку lazy loading в браузер.

Сегодня очень модно показывать текущее положение прокрутки страницы вверху этой самой страницы. Кому-то из разработчиков пока недостаточным наличие «лифта справа» и, вот он новый элемента дизайна многих страниц в интернете. Ну да ладно, не стану пытаться искать причины столь наличия столь странного элемента, а лишь покажу как легко он делается.

Обновлено: поддержка множественных значений

Часто при написание кода на JavaScript возникает необходимость получить из адреса определенный параметр. Особенно это актуально сейчас, когда сплош и рядом все делают одностраничные приложения.

Представим, что адрес выглядит вот так http://site.com/?search=sometext&page=100&abc=1&abc=qwe. Нам необходимо получить значения параметров search, page и abc. В JavaScript мы можем взять строку параметров из window.location.search.

Все большее и большее количество людей предпочитай сидеть в интернете, используя мобильные устройства и планшеты. С недавних пор в некоторых браузерах появилась поддержка API батареи устройства для JavaScript. А в Хроме реализована поддержка в виде промисов. Давайте посмотрим как это работает...

Современный сайт трудно представить без запросов к серверу. Все большее и большее количество страниц не требуют перезагрузки страницы при переходе по ссылкам, а всего лишь получают новые данные и перерисовывают необходимые блоки. Использование XMLHttpRequest уже не «торт», так как большинство современных браузеров поддерживают fetch API.

Недавно у меня возникала необходимость показывать прелоадер каждый раз, когда в проекте отправляется запрос на удаленный сервер. Так как мы используем Babel для конвертации кода из ES6 в ES5, то fetch превращается в XMLHttpRequest. Это значит, что можно легко переписать два метода и задача будет решена.

var _oldSend = XMLHttpRequest.prototype.send;
XMLHttpRequest.prototype.send = function () {
  var _oldReadyStateChange = this.onreadystatechange;

  // Ваш код вначале Ajax-запроса

  _oldSend.apply(this, arguments);
  this.onreadystatechange = function () {
    if (this.readyState === 4) {

      // Ваш код, когда Ajax-запрос завершен

    }
    if (typeof _oldReadyStateChange === 'function') {
      _oldReadyStateChange.apply(this, arguments);
    }
  };
};

Для того, чтобы показать индикатор закгрузки, я переписал метод send, сохранив предварительно старую функцию в переменную _oldSend. Ну а onreadystatechange сообщает нам когда запрос завершен.

Этот способ отлично подойдет, если вы используете jQuery.

Видеозапись всех докладов с Girls Not Bombs #5. Мероприятие состоялось в субботу в минском коворкинге Imaguru. Список докладов:

1. Настя Рыбик: «Yeoman: пишем свой собственный генератор»
2. Machiko Yasuda: «Learn with friends: how to organize meetups around projects & code»
3. Jacob Lowe: «SVG: Such vector goodness»

Трехчасовое видео воркшопа по MeteorJS от Webnotbombs.

Текст – всему голова. Конечно, классно рассматривать картинки и смотреть видео в интернете, но, все же, большинство материалов в сети представляют из себя текст. Обращали ли вы внимание, что читать статьи на одном сайте удобнее, чем на другом? Это происходит от того, что один дизайнер (если он был) подумал об удобстве восприятия информации, а второй вовсе не задумывался об этом.