WTF Diary Alive 2019. Спецквест

---

Время от времени у меня бывает желание сдуть пыль со своих плюсовых навыков, подновить и, быть может, даже делать какую-нибудь ненужную мелочёвку. А потом я вижу наскальную живопись с <::>*=0& и меня ненадолго отпускает…

---

GOG – promo OS selector

Ловкость рук и немного юзерскрипта и…

// ==UserScript==
// @name GOG - promo OS selector
// @namespace tenno-seremel
// @match https://www.gog.com/promo/*
// @version 1.0
// @grant none
// @run-at document-end
// @noframes
// ==/UserScript==
'use strict';

let ref = document.querySelector('.promo-columns > .column--left > .module-header');
if (ref) {
	let os_data = [
		{ label: '- все -', selector: '' },
		{ label: 'Linux', selector: '.icon-linux' },
		{ label: 'Mac', selector: '.icon-mac' },
		{ label: 'Windows', selector: '.icon-win' }
	];

	let select = document.createElement('select');
	for (const item of os_data) {
		let option = document.createElement('option');
		option.textContent = item.label;
		option.setAttribute('value', item.selector);
		select.appendChild(option);
	}
	select.addEventListener(
		'change', function (ev) {
			let selector = ev.currentTarget.value;
			let products = document.querySelectorAll('.product-row');
			for (let i = 0, len = products.length; i < len; ++i) {
				let product = products[i];
				product.style.display = (!selector || product.querySelector(selector)) ? '' : 'none';
			}
		},
		false
	);

	let wrapper = document.createElement('div');
	wrapper.setAttribute('class', 'module');
	wrapper.style.padding = '8px';
	wrapper.appendChild(select);

	ref.after(wrapper);
}

---

WTF Diary Alive 2019 R

---

На уровне с битвой с тенью в пещерах во Frontiers с героем Каз один из ящеров с плетьми пошёл не вниз, ко мне, а вверх — к кристаллу, где босс. И всё равно мне потери жизней засчитались. Это вообще как?

---

Tensei shitara slime datta ken — EP21

Волки в программе обучения трудных детей…

Тест.

Разношёрстная команда, всё как положено. Забавные

Хм, в манге как-то иначе эта битва была, помнится… Там было лучше :}

Бизнес, однако.

А потом к духам.

https://tenno-seremel.tumblr.com/post/183097190973/tensei-shitara-slime-datta-ken-ep21

---

Tensei shitara slime datta ken — EP20

Еда и металл сегодня добываются одинаково…

Ящерка и свинка братья навек?

В этот раз слайм на правильной стороне, ЕВПОЧЯ.

У вас вода коричневая, поменяйте :}

Двери то «импортные» :}

ОЯШ, очевидно же.

Внимание, сёненовстреча. Не выходите из укрытия.

Дорассказал историю, да… (^  ^)'

HEN-SHIN!

Не просто слайм, но копировальный автомат.

Погодите, мне кажется или я вижу Houseki no kuni? Не кажется

Пришло время ломать устои.

И ещё одна сёненовстреча.

Это явно была какая-то отсылочка, но слоупоки слоупочат…

https://tenno-seremel.tumblr.com/post/183095888553/tensei-shitara-slime-datta-ken-ep20

---

revert

The revert CSS keyword rolls back the cascade so that a property takes on the value it would have had if there were no styles in the current style origin (author, user, or user-agent). Thus, it resets the property to the default value established by the user-agent stylesheet (or by user styles, if any exist). It can be applied to any CSS property, including the CSS shorthand all.

Browser compatibility: только Сафари

Так и живём

https://developer.mozilla.org/en-US/docs/Web/CSS/revert

---

WTF Diary Alive 2019. Челлендж

---

Ziggurat

Щупаю свой халявный Ziggurat. Всё-таки эти ваши пиу-пиу это явно не моё. После 2D файтингов персонаж ощущается деревянным.

---

[css-selectors] Reconsider removing selector list invalidation
RESOLVED: kick the can down the road and think about this for Selectors 5

---

Идея вкладывать CSS правила друг в друга для уменьшения повторения звучит здраво только пока не начнёшь этим активно пользоваться, используя какой-нибудь препроцессор…

---

Бэкаплю некоторые игрушки с GOG. На всякий случай

---

Kingdom rush: Frontiers наконец-то всё

---

Русский язык в меню GOG всё время отваливается…

---

“Dancing mad” cover by Grissini Project

---

Заходишь на кухню, а там на столе вкусности просто валяются. Лепота. И мне за это ничего не будет

---

To aru majutsu no Index III — EP20

SONO MASAKA ©

Осторожно, возможны ангелы.

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

В третьей стороне война обычных людей.

Актриса :}

А какие ещё разрешения запросить можно?

Ещё одна с мечом.

Кнопка ВЫКЛ отсутствует. Требуется внешняя помощь.

Удачно мина упала.

Каким образом он там пробежал сквозь снег?

И тут Акселератор такой: у меня претензия по поводу своего геройства…

Геройская мораль от Томы, специально для Акселератора.

Акселератор няша :3

Сабы, ааааааа.

Микото увидела Тому в кадре и тут же бросилась собирать шмот. Такими методами Куроко тут каши не сварит.

Ласт Ордер в капюшоне, 1 шт.!

https://tenno-seremel.tumblr.com/post/182989320208/to-aru-majutsu-no-index-iii-ep20

---

А представьте, что при создании вашего персонажа в игре нужно выбрать двух предков: бога и историческую личность (существовали ли они на самом деле неважно). Кого бы выбрали?

---

Галопом по CSS

Не очень понимаю почему этот пост в таком виде, а не с объяснениями, но…

border-radius, box-shadow, box-sizing, display: inline-block, padding

<span style="display: inline-block;box-sizing: border-box;width: 100px;height: 100px;border-radius: 0 25px 5px 10px;background: #ffc57e;color: #000;border: 1px solid #d8a76b;padding: 10px;box-shadow: 3px 8px 8px 0 rgba(0,0,0,.2);">ABC</span><span style="display: inline-block;box-sizing: border-box;width: 100px;height: 100px;border-radius: 0 25px 5px 10px;background: #ffc57e;color: #000;border: 1px solid #d8a76b;padding: 10px;box-shadow: 3px 3px 0 0 rgba(0,0,0,.3);margin-left: 20px;">DEF</span>

ABCDEF

background, color, text-shadow

<span style="background: #ffc57e;color: #000;text-shadow: 1px 1px 1px rgba(0,0,0,0.3);">Lorem ipsum dolor sit amet,</span>

<span style="background: #ffc57e;color: #000;">consectetur adipiscing elit…</span>

Lorem ipsum dolor sit amet,

consectetur adipiscing elit…

max-width, margin-left/right: auto

<div style="width: 800px;max-width: 100%;box-sizing: border-box;border: 1px solid #ccc;padding: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

text-align

<div style="text-align: right;">Lorem ipsum dolor sit amet…</div>
<div style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

Lorem ipsum dolor sit amet…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

linear-gradient, vertical-align

<span style="display: inline-block;vertical-align: middle;box-sizing: border-box;width: 100px;height: 100px;background: linear-gradient(to bottom, #ffc57e, #000);border: 1px solid #000;padding: 10px;"></span><span style="display: inline-block;vertical-align: middle;box-sizing: border-box;width: 120px;height: 120px;background: linear-gradient(to right, #ffc57e, #000);border: 1px solid #000;padding: 10px;margin-left: 20px;"></span> <span style="display: inline-block;vertical-align: middle;box-sizing: border-box;width: 100px;height: 100px;background: linear-gradient(20deg, #ffc57e, #000);border: 1px solid #000;padding: 10px;margin-left: 20px;"></span>