В Golang (также известном как Golang) мы можем парсить JSON-данные с помощью потрясающего пакета encoding/json, который предоставляет функции для кодирования и декодирования JSON-данных. Вот пошаговое руководство о том, как парсить JSON в Go.

В среду MIDiA Research опубликовала новый отчет с глобальными данными о рынке услуг потоковой передачи музыки за второй квартал 2021 года. Хотя Apple Music является второй наиболее используемой музыкальной платформой, она все еще сильно отстает от Spotify.

Использование 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.

Одним из недостатков изпользования AJAX в вебе долго оставалось вот это - XMLHttpRequest - API не предназначенное для такого использования. Было много элегантных оберток вокруг XHR, но всегда казалось, что можно лучше.

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

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

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

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

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

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

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

Новый тренд в дизайне - милые цветные кружочки (квадратики) различного цвета с первой или двумя первыми буквами имени. Так сейчас делают все: браузер Сафари, почтовые клиенты, социальные сети.

Здесь я покажу как это сделать с помощью JavaScript. Главный вопрос – подбор цвета?

Цвет мы будет генерировать из строки с именем. На самом деле подойдет абсолютно любая строка, но так как и букву мы берем из имени, то и цвет будет генерировать из него же.

Вот так будет выглядеть наш HTML:

<div class="user-info">
    <div class="user-info-avatar" id="avatar"></div>
    <div class="user-info-name" id="name"></div>
</div>

Добавим немного CSS-стилей:

.user-info-avatar {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 15px;
    text-align: center;
    margin-right: 10px;
    color: white;
}
.user-info-name {
    display: inline-block;
}

А теперь JavaScript:

var stringToColor = function stringToColor(str) {
    var hash = 0;
    var color = '#';
    var i;
    var value;
    var strLength;

    if(!str) {
        return color + '333333';
    }

    strLength = str.length;

    for (i = 0; i < strLength; i++) {
        hash = str.charCodeAt(i) + ((hash << 5) - hash);
    }

    for (i = 0; i < 3; i++) {
        value = (hash >> (i * 8)) & 0xFF;
        color += ('00' + value.toString(16)).substr(-2);
    }

    return color;
};

var name = 'Михаил';
var letter = name.substr(0, 1);
var backgroundColor = stringToColor(name);
var elementAvatar = document.getElementById('avatar');
var elementName = document.getElementById('name');

elementName.innerHTML = name;
elementAvatar.innerHTML = letter;
elementAvatar.style.backgroundColor = backgroundColor;

За генерирование цвета отвечает функция stringToColor. Она принимает строку с именем (любую строку), переводит ее в биты и уже из них в HEX-цвет. Если мы не передадим в функцию ничего, то получим в ответ цвет по умолчанию – в данном примере, #333333.

Вот таким нехитрым образом можно делать такое модное нынче оформление при отсутствии аватара.