О книге про Билли Миллигана

Книга называется «Таинственная история Билли Миллигана». Она и вправду таинственная.

История о молодом человеке с необычным диагнозом — диссоциативное расстройство личности или проще — расщепление личности. Всего личностей было 24.

Это не то, о чем вы подумали, мол один милый, другой грубый, нет. Это совершенное разные люди. Один с славянским акцентом, который нельзя подделать и с невероятной силой, другой — англичанин, третий — подросток Томми с талантом к рисованию.

И таких 24 человека, есть несколько девушек и все личности разных возрастов от 3 до 30 лет.

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

Не буду раскрывать все карты и предлагаю прочитать книгу. Не буду раскрывать все карты и предлагаю прочитать книгу. Это невероятно интересная и печальная история. Советую для прочтения, читается на одном дыхании.

Кто когда выходил, кто этим управлял, кто за что отвечал, там много интересного.

Книгу можно купить за 149 рублей по акции на book24.ru

Таинственная история Билли Миллигана Дэниел Киз
Обложка. Источник: https://book24.ru/

Неправильный вопрос при удалении

Вчера я решил избавится от рубрики «Веб». Я знаю о том, что когда удаляешь рубрику в Wordpress, рубрика удаляется, а записи перемещаются в рубрику по-умолчанию.

При удалении показалось окно подтверждения, которое сбило меня с толку.

Окно подтверждения
Окно подтверждения

«Эти»? Я удаляю одну категорию. Если бы он написал «этот элемент» или «эту рубрику» — я бы не переживал. Но он указал «эти элементы», если рубрика у меня одна, а записей много, мой мозг подразумевает что удаляться мои записи. Вывод — нехорошее сообщение при удалении, не понятно что удалиться.

Мой вариант:

Вы собираетесь навсегда удалить рубрику «Веб». Это действие нельзя отменить Все записи из этой рубрики будут перемещены в рубрику «Заметки».

+7 книг в библиотеку

Затарился книгами:
— Харпер Ли — Убить пересмешника
— Эрих Мария Ремарк — Три товарища
— Эрнест Хемингуэй — Прощай оружие!
— Вы конечно шутите, мистер Фейнман
— Таинственная история Билли Миллигана
— Альберт Камю — Чума
— Ден Браун — Код да винчи

Всего 7 книг, обошлись мне в 1098 рублей. Магазин book24.ru

Стопка книг
Стопка книг

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

Прогресс-бар за 20 строк

Сегодня будем делать прогресс-бар. Он может помочь вашим пользователем понять, много ли осталось читать.

Все вместе решение занимает 20 строк. Демо на codepen.

Демо здесь:

Раз

Создаем HTML разметку:

 <div class="line" id="line"></div>

Добавили класс для оформления и id для связки с js.

Два

Накинем немного css оформления:

.line {
   width: 0;
   background-color: yellow;
   height: 5px;
   position: fixed;
   left: 0;
   top: 0;
   transition: .3s all;
}

body {
   min-height: 1000px;
   background-color: #333;
}

Линию сделали фиксированной с нулевой шириной и высотой в 5px, сделали желтый фон. body сделали минимальную высоту для проверки, чтобы не набивать бестолковым контентом. Сделали темный фон.

Если изменить ширину в css, мы увидим вот такую картину:

Прогресс-бар за 20 строк 1
Линия и темный body

Отлично, все работает как и планировалось.

Три

Прежде чем писать код нам ответить себе на 2 вопроса:

  1. Какие данные нам нужны?
  2. Когда будет обновляться линия

Какие данные нужны: высота браузера, высота документа, отступ от верха страницы.

Когда будет обновляться линия: при прокрутке и еще при посещении. Браузер умеет запоминать положение пользователя после обновления страницы, так что к этому нужно быть готовым.

Так как обновление будет происходить в нескольких местах, а код будет одинаковый, создадим функцию lineWidthSet (), но прежде объявим несколько переменных:

var line = document.querySelector('#line'),
    bodyHeight = document.body.clientHeight,
    doc = document.documentElement;

Line — наша линия,
bodyHeight — высота body,
doc — корневой элемент документа, нужен нам для расчета отступа от верха.

Теперь приступим к написанию функции lineWidthSet ():

  1. Получаем отступ от верха страницы.
  2. Прибавляем к нему высоту окна браузера.
  3. Высчитываем процентное соотношение позиции от высоты страницы.
  4. Устанавливаем ширину линии.

(2) Почему мы прибавляем высоту браузера?. Когда вы на находитесь на странице, вы уже видите то, что в области окна вашего браузера, то есть вы уже это прочитали.

В соответствии с списком действий, пишем функцию:

function setWidthLine() {
   var scrollTop = (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0) // (1),
       percent;
   scrollTop += doc.clientHeight; //(2)
   
   percent = scrollTop / bodyHeight * 100; //(3)
   line.style.width = percent + '%'; //(4)
}

(1) Здесь мы используем несколько проверок, для кроссбраузерности. Получили отступ от верха страницы.

(2) Добавили высоту окна браузера

(3) Рассчитали по формуле процентное соотношение и конкатенировали знак «%» для указания того, что это проценты.

(4) Установили ширину линии

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

setWidthLine();

document.addEventListener('scroll', function() {
   setWidthLine();
});

Для обновления ширины при изменении ширины окна браузера есть событий resize. Когда происходит resize документа, вызываем функцию, она будет перерассчитывать ширину линии.

document.addEventListener('resize', function() {
   setWidthLine();
});

Все вместе:

HTML:

<div class="line" id="line"></div>

CSS:

.line {
   width: 0;
   background-color: yellow;
   height: 5px;
   position: fixed;
   left: 0;
   top: 0;
   transition: .3s all;
}

body {
   min-height: 1000px;
   background-color: #333;
}

Javascript:

var line = document.querySelector('#line'),
    bodyHeight = document.body.clientHeight,
    doc = document.documentElement;

setWidthLine();

document.addEventListener('scroll', function() {
   setWidthLine();
});

document.addEventListener('resize', function() {
   setWidthLine();
});

function setWidthLine() {
   var scrollTop = (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0),
       percent;
   scrollTop += doc.clientHeight;
   
   percent = scrollTop / bodyHeight * 100;
   line.style.width = percent + '%';
}

Есть вопросы, замечания — в комментарии.

Список песен под гитару для изучения

После изучения каждой песни буду прикреплять видео. Играть научиться не проблема, вот петь, вопрос номер два 🙂

Песни для выполнения цели:

  • Моя любовь сменила цвет
  • Ю. Лоза и группа «Примус» — У меня мал папа
  • ДДТ — осень
  • Чиж — о любви
  • Беспечный ангел
  • Гарри Поттер на одной струне
  • Пираты карибского моря на одной струне
  • Жаль нет ружья — Киш
  • Красивая мелодия от Паши

Остальные песни:

  • Валентин Стрыкало — Наше лето
  • Noize MC — Мое море
  • Жуки — влечение
  • Жуки — хочется
  • Сплин — Выхода нет
  • Дорожная песня — Высоцкий
  • Ю.Лоза — Плот
  • Ю.Лоза — Ах, какие ножки
  • Кравц — обнуляй
  • Корж — Армия
  • Жуки — Батарейка
  • 5’nizza — Я солдат
  • Корж — Жить в кайф
  • Harry Potter на гитаре на одной струне (в процессе)
  • Пираты Карибского Моря на гитаре на одной струне (в процессе)
  • Eminem — not afraid
  • Гречка — люби меня люби
  • Linkin Park — In the end
  • Звери — такая сильная любовь
  • Likn Park — NUMB
  • The Cranberries — Zombie
  • OneRepublic — Apologize
  • Noize MC — Из окна
  • Сергей Бабкин — Забери
  • Pink — Fuckin’ perfect
  • Jessie J — Price Tag
  • RHCP californication
  • nirvana smells like teen spirit
  • deep purple smoke on the water
  • depeche mode personal jesus
  • scorpions still loving you
  • sting shape of my heart

Отдельным списком идет мой любимый «Король и Шут»:

  • Смельчак и ветер
  • Счастье (ария Тодда)
  • Свой среди чужих
  • Мария
  • Кукла колдуна
  • Камнем по голове
  • Представляю я
  • Писатель Гудвин
  • Отец и маски
  • От женщин кругом голова
  • Два вора
  • Два друга
  • Валет и дама