Ответы на ваши вопросы: про собеседовании на fullstack-разработчика, про программирование на Razer 14, про Fleet - новый редактор кода от Jetbrains.

Использование flex для центрирования в CSS - это, пожалуй, самый правильный вариант сегодня.

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}

Но это далеко не единственный вариант.

Давайте представим, что вам необходимо выровнять по горизонтали несколько inline-* элементов. text-align: center; сделает это буквально в одну строку.

See the Pen Centering Inline Elements by Chris Coyier (@chriscoyier) on CodePen.

А что, если вам надо отцентрировать эти же элементы относительно родительского элемента? Это легко сделать с помощью width: fit-content для родительского контейнера.

See the Pen Centering Unknown Width Parent by Chris Coyier (@chriscoyier) on CodePen.

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

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

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

Недавно у меня возникала необходимость показывать прелоадер каждый раз, когда в проекте отправляется запрос на удаленный сервер. Так как мы используем 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.

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

Однако иногда возникает необходимость иметь и пользовать глобальную переменную. Но как тогда быть? А если вдруг мы пишем для Node.js, там ведь нету глобального объекта window, там root? А если я хочу использовать свой код и во фронтенде и на сервере?

За сим предлагаю такое решение, которое знатно растиражированно, но никто о нем никогда не помнит.

var global = (function () {
    return this || (1, eval)('this');
}());

Теперь у нас есть глобальный объект global, который обладает всеми свойствами window / root. Элегантное и просто решение.

Придумал не я, украл вот тут.

Однажды один мой товарищ попросил сделать для одного его проекта кнопку удаления, которая содержала бы внутри себя подтверждение. Т.е. как это сделано обычно? Нажимаешь удалить - выскакивает окно с вопросом "Вы уверены, что ходите удалить то-то и то-то?" - нажимаешь "Да", после чего удаляется то, что надо. Так вот, он хотел чтобы нажимаешь "Удалить", внутри кнопки меняется текст на "Вы уверены?", нажимаешь еще раз и происходит удаление.

Идея показалась мне интересной, и я решил поделиться способом простой реализации.

Ниже несколько интересных CSS-хаков и свойств, о существовании которых забывают, а то и вовсе не знают.

html {
    overflow-y: scroll;
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

Вы знаете, что если для html жестко указать скролл по вертикали, то при динамическом добавлении контента у вас не будет неожиданного ресайза, когда скролл понадобиться, а мобильные браузеры не будут подстраивать размер шрифта если задать text-size-adjust.

Существует несколько популярных вариантов отображения иконок на веб-странице:

• картинки
• svg
• иконочные шрифты

В своей работе я, например, чаще всего использую картинки (png, в частности), но в последнее время стал уделять большое внимание иконочным шрифтам.

Их так же существует привеликое множество: FontAwesome, Entypo и другие.

Но в процессе тестирования на разных устройством были обнаружены некторое особенности отображения иконок. Самым интересным стало то, что браузер IE на Windows Phone 7.5 вдруг вместо иконок шрифта Entypo отрисовал свои иконки, которые вышлядели практически идентично.

Задавшись этим вопросом, мы с товарищем @pukhalski стали «читать» интернет.

В этом месте, следует уточнить, что для отрисовки иконок мы использовали следующую контрукцию:

.icon {
    display: inline-block;
    font-family: 'entypo';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon:before {
    content: "\2606";
}

В данном примере 2606 - Unicode для отображения здездочки. Т.е. вы должны увидеть примерно вот это: ☆.

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

Стоит также вспомнить о шрифтах Webdings, Wingdings, Wingdings 2, Windings 3, которые точно присутствуют в Windows и Mac OS и несут внутри себя сотник классных иконок.

Экономьте свои силы и траффик пользователей, используйте встроенные шрифты. Кстати, это очень кроссбраузерно и кросссистемно.

В PHP есть шикарная функция uniqid. Она позволяет сгенерировать случайный идентификатор состоящий из цифр и букв, основанный на текущем времени. Выглядит он примерно вот так 526439af76c56.

Я очень часто пользуюсь ей (функцией), когда делаю что-то на ПХП. Конечно же мне очень хватало этой функции в JavaScript, поэтому я поискал в интернете, нашел один неплохой вариант, немного его подправил и вуаля:

(function () {
    this.uniqid = function (pr, en) {
        var pr = pr || '', en = en || false, result, us;
    this.seed = function (s, w) {
        s = parseInt(s, 10).toString(16);
        return w < s.length ? s.slice(s.length - w) : 
                  (w > s.length) ? new Array(1 + (w - s.length)).join('0') + s : s;
    };

    result = pr + this.seed(parseInt(new Date().getTime() / 1000, 10), 8) 
                + this.seed(Math.floor(Math.random() * 0x75bcd15) + 1, 5);

    if (en) result += (Math.random() * 10).toFixed(8).toString();

    return result;
};
})();

Использовать можно:

• так uniquid() - результат 52643b81917b3
• или вот так uniqid('prefix_') - результат prefix_52643bb682821
• и даже вот так uniqid('prefix_', true) - результат prefix_52643bdf3b1fb7.38568327

Пользуйтесь на здоровье.

Тут ссылка на Gist.

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

Чтобы правильно использовать эти функции необходимо знать, какой браузер в данный момент использует пользователь. Единственный правильный способ определить браузер в JavaScript - Useragent. Вот небольшой скрипт, который возвращает объект с различными свойствами, в том числе - мобильный или нет браузер, а также версию Android (может оказаться полезным):

var uAgent = navigator.userAgent || '';
var browser = {
version : (uAgent.match( /.+(?:me|ox|on|rv|it|era|ie)\/: / ) || [0,'0'])[1],
opera : /opera/i.test(uAgent),
msie : (/msie/i.test(uAgent) && !/opera/i.test(uAgent)),
msie6 : (/msie 6/i.test(uAgent) && !/opera/i.test(uAgent)),
msie7 : (/msie 7/i.test(uAgent) && !/opera/i.test(uAgent)),
msie8 : (/msie 8/i.test(uAgent) && !/opera/i.test(uAgent)),
msie9 : (/msie 9/i.test(uAgent) && !/opera/i.test(uAgent)),
msie10 : (/msie 10/i.test(uAgent) && !/opera/i.test(uAgent)),
mozilla : /firefox/i.test(uAgent),
chrome : /chrome/i.test(uAgent),
safari : (!(/chrome/i.test(uAgent)) && /webkit|safari|khtml/i.test(uAgent)),
iphone : /iphone/i.test(uAgent),
ipod : /ipod/i.test(uAgent),
iphone4 : /iphone.OS 4/i.test(uAgent),
ipod4 : /ipod.OS 4/i.test(uAgent),
ipad : /ipad/i.test(uAgent),
ios : /ipad|ipod|iphone/i.test(uAgent),
android : /android/i.test(uAgent),
bada : /bada/i.test(uAgent),
mobile : /iphone|ipod|ipad|opera mini|opera mobi|iemobile/i.test(uAgent),
msie_mobile : /iemobile/i.test(uAgent),
safari_mobile : /iphone|ipod|ipad/i.test(uAgent),
opera_mobile : /opera mini|opera mobi/i.test(uAgent),
opera_mini : /opera mini/i.test(uAgent),
mac : /mac/i.test(uAgent),
webkit : /webkit/i.test(uAgent),
android_version: parseFloat(uAgent.slice(uAgent.indexOf("Android")+8)) || 0
};