<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><link type="application/atom+xml" href="/feed.xml" rel="alternate" title="Grumpy Website"/><link href="/static/favicons/apple-touch-icon-152x152.png" rel="apple-touch-icon-precomposed" sizes="152x152"/><link href="/static/favicons/favicon-196x196.png" rel="icon" sizes="196x196"/><link href="/static/favicons/favicon-32x32.png" rel="icon" sizes="32x32"/><title>Grumpy Website</title><style type="text/css">* { box-sizing: border-box; }

body {
font-family: sans-serif;
line-height: 140%;
padding: 0.25em 1em;
max-width: 652px; /* .post_img =>> 550px */
margin: 0 auto;
transition: 500ms ease-in-out;
}

.icon_rotate { width: 20px; height: 20px; display: inline-block; background: url("/static/rotate.svg"); margin: 5px 5px -5px -25px; }
@media (max-width: 679px) {
.icon_rotate { display: none; }
}

/* HEADER */

header { margin-bottom: 2em; }

.title { margin-bottom: 0; }
.title_back { position: absolute; margin-left: -1em; text-decoration: none; }
.title_back:hover { text-decoration: underline; }

.title_new { padding: 10px; margin: -10px 0 0 0; float: right; text-decoration: none; color: #c3c; }
.title_new:hover { color: #d4d; }
body.anonymous .title_new { display: none; }

.subtitle { margin-left: 0.09em;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.subtitle > span { cursor: pointer; }

/* POST */

.post { display: flex; justify-content: flex-start; margin-bottom: 2em; }
.post_side { margin-right: 20px; min-width: 50px; }
@media (max-width: 399px) {
.post_side { display: none; }
}
.post_avatar { width: 50px; height: 50px; }

.post_video_outer { position: relative; }
.post_video_overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; cursor: pointer; }
.post_video_overlay-paused { background-color: rgba(0,0,0,0.3); background-image: url("/static/play.svg"); background-size: contain; background-position: center center; background-repeat: no-repeat; }
.post_video_overlay-paused:hover { background-color: rgba(0,0,0,0.25); }
.post_img, .post_video { display: block; margin-bottom: 1em; }
.post_img-fix { display: block; background-size: 100%; position: relative; }
.post_img-fix > img { position: absolute; height: 100%; }
.post_video,
.post_img-flex > img { display: block; max-width: 100%; height: auto; max-height: 500px; }
.post_author { font-weight: bold; }
.post_content { width: 100%; }
.post_body > p { margin: 0 0 1em 0; }

.post_meta_edit { float: right; color: #c3c; }
.post_meta_edit:hover { color: #d4d; }
body.anonymous .post_meta_edit { display: none; }

/* FOOTER */
@keyframes rotating {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

.loader { margin: 0 0 3em 0; text-align: center; }
.loader > img { width: 76px; height: 76px; border: 2px solid #000; border-radius: 50%; }
.loader-loading > img { animation: rotating 1s ease-in-out infinite; }
.loader-error > img { cursor: pointer; border-color: red; }
.loader-error > img:hover { position: relative; top: -1px; }

footer {
padding: 1em 0 1em;
margin-top: 2em;
border-top: 1px solid #000;
}
</style><script>var subtitles =
[ 'Do you want to cancel? – YES / CANCEL',
'Select purchase to purchase for $0.00 – PURCHASE / CANCEL',
'This isn not text, this is a link. No not press.',
'Do not refresh this page, do not click Back',
'Error occured — OK',
'Password must be 8 characters including 1 uppercase letter and 1 number',
'Are you sure you want to exist? — YES / NO',
'Open in app',
'Warning: No pixels were selected',
'You need to be logged in to log out. Please log in to log out.',
// 'Cancel changes? – CANCEL / CHANGE',
'Cancel subscription? – YES / CANCEL',
'Please, try again later',
'You need to login to unsubscribe',
'Update Java Runtime?',
'Your PC will automatically restart in one minute',
'grumpy.website wants to: Show notifications',
'You are using an outdated browser',
'How likely are you to recommend grumpy.website to your friends?',
'The system has recovered from a serious error',
'Are you in Boston? — YES / SELECT ANOTHER',
'Hi Carol, thanks for signing up! My name is Kevin...',
'We use cookies on this website to make your browsing experience better',
'By using the site you agree to our use of cookies',
'[ ] Don\'t show this again',
'This page requires you to use a recent browser (Internet Explorer 5+ or Netscape Navigator 7.0)',
'Like failed',
'Add to Home Screen',
'In high demand—6 other people are looking at this page',
'You’ve read 9 stories this month. Let’s make things official',
'Medium follows Do Not Track but we track to personalize your experience and send data to select third-parties to make our features work',
'Plugin is ready to update',
'Part 2 of 3: Installing features and drivers. 50% complete',
'Don’t turn off your computer, this will take a while',
'Данный ресурс заблокирован! по решению Роскомнадзора',
'Already a member? Sign in.',
'Trust this computer?',
'Why am I seeing this?',
'Drop images here to send them in a quick way',
'Choose an account to continue',
'The operation can’t be completed because it isn’t supported',
'Are you sure you want to close all programs and shut down the computer?',
'Please take a moment to rate your experience',
'Would you like to save this file?',
',   ?',
'This app is using significant energy',
'The disk was not ejected properly',
'Trying to regain internet connection... Hide this message.',
'Loading...',
'Remind me tomorrow',
'Stop showing me this',
'Why am I seeing this?',
'See fewer posts like this',
'This content is not available in your country',
'This website wants to know your location',
'We’re sorry! You need to update your Flash Player.',
'You have one unread message',
'We are updating our privacy policy'],
subtitle_el,
subtitle_idx = subtitles.length;

function shuffle(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
}

function reload_subtitle() {
++subtitle_idx;
if (subtitle_idx >= subtitles.length) {
shuffle(subtitles);
subtitle_idx = 0;
}
subtitle_el.innerHTML = subtitles[subtitle_idx];
}

window.addEventListener("DOMContentLoaded", function() {
subtitle_el = document.querySelector('.subtitle-text');
subtitle_el.onclick = reload_subtitle;
reload_subtitle();
if (document.cookie.indexOf("grumpy_user=") >= 0) {
document.body.classList.remove("anonymous");
}
});

var rotate_angle_deg = 0;

function body_rotate() {
rotate_angle_deg += 180;
document.body.style.transform = "rotate(" + rotate_angle_deg + "deg)";
}

function toggle_video(wrapper, play) {
var video = wrapper.querySelector("video"),
overlay = wrapper.querySelector(".post_video_overlay");
if (play) {
overlay.classList.remove("post_video_overlay-paused");
} else if (video.paused) {
video.play();
overlay.classList.remove("post_video_overlay-paused");
} else {
video.pause();
overlay.classList.add("post_video_overlay-paused");
}
}
</script><script>var loader_status = "IDLE",
loader;

function load_posts() {
loader_status = "LOADING";
loader.classList.add("loader-loading");
loader.classList.remove("loader-error");
loader.querySelector("img").removeEventListener("click", load_posts);
var posts = document.querySelectorAll(".post"),
last_post = posts[posts.length - 1],
last_post_id = last_post.getAttribute("data-id");

var req = new XMLHttpRequest();

req.addEventListener("load", function() {
loader.classList.remove("loader-loading");
var resp = this;
if (resp.status !== 200) {
loader_status = "ERROR";
loader.classList.add("loader-error");
loader.querySelector("img").addEventListener("click", load_posts);
} else if (resp.responseText.length === 0) {
loader_status = "DONE";
loader.remove();
} else {
var div = document.createElement("div");
div.innerHTML = resp.responseText;
loader.parentNode.insertBefore(div, loader);
loader_status = "IDLE";
}
});

req.open("GET", '/after/' + last_post_id);
req.send();
}

function on_scroll(e) {
var cont = document.body,
full_height = cont.scrollHeight,
viewport_height = window.innerHeight,
scrolled = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,
scrolled_bottom = scrolled + viewport_height,
at_bottom = scrolled_bottom >= full_height - 200;

if ( at_bottom && loader_status === "IDLE" )
load_posts();
}

window.addEventListener("DOMContentLoaded", function() {
loader = document.querySelector(".loader");
on_scroll();
window.addEventListener("scroll", on_scroll);
});</script></head><body class="anonymous"><header><h1 class="title">Grumpy Website<a href="/new" class="title_new">+</a></h1><p class="subtitle"><span onclick="body_rotate()" class="icon_rotate"></span><span class="subtitle-text"> </span></p></header><div data-id="0TKG-CEA6" class="post"><div class="post_side"><img src="/static/nikitonsky.jpg" class="post_avatar"/></div><div class="post_content"><div class="post_video_outer"><video autoplay="" muted="" loop="" preload="auto" playsinline="" onplay="toggle_video(this.parentNode, true);" class="post_video"><source type="video/mp4" src="/post/0TKG-CEA6/M0wFFPm.orig.mp4"/></video><div onclick="toggle_video(this.parentNode);" class="post_video_overlay post_video_overlay-paused"></div></div><div class="post_body"><p><span class="post_author">nikitonsky: </span>Designers and developers, please stop fucking with scroll! There’s no way you can make it better and a million ways you can make it worse.</p><p>If I move my finger just a millimeter up or down, that means, normally, that content should also move a millimeter (stick to the finger). And that feels good! That’s the behaviour we all love.</p><p>If you try to be smart, like the app in the video, you ruin it! It scrolls too much, content jumps, random stuff moves under your finger, you feel you are no longer in control. Don’t do that.</p></div><p class="post_meta">February 25, 2020 // <a href="/post/0TKG-CEA6">Hyperlink</a><a href="/post/0TKG-CEA6/edit" class="post_meta_edit">Edit</a></p></div></div><div data-id="0TK5xiEtb" class="post"><div class="post_side"><img src="/static/nikitonsky.jpg" class="post_avatar"/></div><div class="post_content"><div style="max-width:436px"><a href="/post/0TK5xiEtb/M0tmRZ_.orig.png" target="_blank" style="padding-bottom:114.6788990825688%" class="post_img post_img-fix"><img src="/post/0TK5xiEtb/M0tmRZ_.fit.jpeg"/></a></div><div class="post_body"><p><span class="post_author">nikitonsky: </span>I hate to ask, but is there really no way to display more information in that column without scrolling? No way at all?</p><p>Even worse, if you try to enlarge the window, empty space around preview grows too (!!!), delaying the information reveal.</p></div><p class="post_meta">February 25, 2020 // <a href="/post/0TK5xiEtb">Hyperlink</a><a href="/post/0TK5xiEtb/edit" class="post_meta_edit">Edit</a></p></div></div><div data-id="0TJhjiqvh" class="post"><div class="post_side"><img src="/static/nikitonsky.jpg" class="post_avatar"/></div><div class="post_content"><div style="max-width:550px"><a href="/post/0TJhjiqvh/M0ne_Wo.orig.png" target="_blank" style="padding-bottom:48.36363636363636%" class="post_img post_img-fix"><img src="/post/0TJhjiqvh/M0ne_Wo.fit.jpeg"/></a></div><div class="post_body"><p><span class="post_author">nikitonsky: </span>Apparently new MS Office places same three icons in different locations depending on whether you hold the plus or tap it. I’m having hard time explaining why someone might think this is a good idea.</p><p>Also, hold mode has no labels. I have to say, two sheets of paper with a folded corner on different sides do not send a clear message.</p></div><p class="post_meta">February 23, 2020 // <a href="/post/0TJhjiqvh">Hyperlink</a><a href="/post/0TJhjiqvh/edit" class="post_meta_edit">Edit</a></p></div></div><div data-id="0TIwUAhRh" class="post"><div class="post_side"><img src="/static/nikitonsky.jpg" class="post_avatar"/></div><div class="post_content"><div style="max-width:281px"><a href="/post/0TIwUAhRh/M0bd8PX.orig.png" target="_blank" style="padding-bottom:177.9359430604982%" class="post_img post_img-fix"><img src="/post/0TIwUAhRh/M0bd8PX.fit.jpeg"/></a></div><div class="post_body"><p><span class="post_author">nikitonsky: </span>well put</p></div><p class="post_meta">February 21, 2020 // <a href="/post/0TIwUAhRh">Hyperlink</a><a href="/post/0TIwUAhRh/edit" class="post_meta_edit">Edit</a></p></div></div><div data-id="0TIbJLPwL" class="post"><div class="post_side"><img src="/static/nikitonsky.jpg" class="post_avatar"/></div><div class="post_content"><div style="max-width:281px"><a href="/post/0TIbJLPwL/M0XSXyS.orig.png" target="_blank" style="padding-bottom:177.9359430604982%" class="post_img post_img-fix"><img src="/post/0TIbJLPwL/M0XSXyS.fit.jpeg"/></a></div><div class="post_body"><p><span class="post_author">nikitonsky: </span>Text is not a button. Line is not a textbox. Empty space is not a text area. Minimalism can only go so far. If you remove essential elements, leaving people guessing what control element was “implied” here, it’s just bad design.</p></div><p class="post_meta">February 20, 2020 // <a href="/post/0TIbJLPwL">Hyperlink</a><a href="/post/0TIbJLPwL/edit" class="post_meta_edit">Edit</a></p></div></div><div data-id="0TIHroowW" class="post"><div class="post_side"><img src="/static/nikitonsky.jpg" class="post_avatar"/></div><div class="post_content"><div style="max-width:550px"><a href="/post/0TIHroowW/M0SThLK.orig.png" target="_blank" style="padding-bottom:57.6%" class="post_img post_img-fix"><img src="/post/0TIHroowW/M0SThLK.fit.jpeg"/></a></div><div class="post_body"><p><span class="post_author">nikitonsky: </span>Install Twitter app. It shows a “mention” — was that you? In the same app I just installed. What’s the point of this again?</p></div><p class="post_meta">February 19, 2020 // <a href="/post/0TIHroowW">Hyperlink</a><a href="/post/0TIHroowW/edit" class="post_meta_edit">Edit</a></p></div></div><div data-id="0THxo6jDx" class="post"><div class="post_side"><img src="/static/dmitriid.jpg" class="post_avatar"/></div><div class="post_content"><div class="post_video_outer"><video autoplay="" muted="" loop="" preload="auto" playsinline="" onplay="toggle_video(this.parentNode, true);" class="post_video"><source type="video/mp4" src="/post/0THxo6jDx/M0NJlPy.orig.mp4"/></video><div onclick="toggle_video(this.parentNode);" class="post_video_overlay post_video_overlay-paused"></div></div><div class="post_body"><p><span class="post_author">dmitriid: </span>Chose your mobile and mobile data plan.</p><p>Top row: minutes</p><p>Bottom row: gigabytes</p><p>Button at the bottom: "Chose for me"</p><p>It takes up to a minute to scroll from 500 to 400. Really, this needs no comments.</p><p>A few years back there was a competition of sorts for the "worst way to enter a phone number". Looks like Yota's designers looked at it and said, "what a great way to design a dark pattern". See for yourself: <a href="https://imgur.com/gallery/r102w" target="_blank">imgur.com/gallery/r102w</a></p><p>Many thanks to @pier for sending this gem.</p></div><p class="post_meta">February 18, 2020 // <a href="/post/0THxo6jDx">Hyperlink</a><a href="/post/0THxo6jDx/edit" class="post_meta_edit">Edit</a></p></div></div><div data-id="0THwqND8G" class="post"><div class="post_side"><img src="/static/nikitonsky.jpg" class="post_avatar"/></div><div class="post_content"><div style="max-width:310px"><a href="/post/0THwqND8G/M0N4fNB.orig.jpeg" target="_blank" style="padding-bottom:161.2903225806452%" class="post_img post_img-fix"><img src="/post/0THwqND8G/M0N4fNB.fit.jpeg"/></a></div><div class="post_body"><p><span class="post_author">nikitonsky: </span>Suppose I was listening to a podcast. And the episode is basically over. I know it’s over. But there’s still 40+ seconds of closing words, credits, outro music etc. What should I do?</p><p>If I just close it it will stay unfinished. File will be kept on a phone, it will be shown in the “In progress” list etc.</p><p>If I keep listening, it will start next episode, which I maybe want to choose? Or I don’t have enough time for starting another episode? And I don’t want to mark a next random thing as “Started” because it’s definitely not my intention.</p><p>In short, I want “I’m done with this” button.</p></div><p class="post_meta">February 18, 2020 // <a href="/post/0THwqND8G">Hyperlink</a><a href="/post/0THwqND8G/edit" class="post_meta_edit">Edit</a></p></div></div><div data-id="0THGrh25y" class="post"><div class="post_side"><img src="/static/nikitonsky.jpg" class="post_avatar"/></div><div class="post_content"><div style="max-width:550px"><a href="/post/0THGrh25y/M0C_mT1.orig.png" target="_blank" style="padding-bottom:35.33333333333333%" class="post_img post_img-fix"><img src="/post/0THGrh25y/M0C_mT1.fit.jpeg"/></a></div><div class="post_body"><p><span class="post_author">nikitonsky: </span>Livejournal mobile icons. My interpretation:</p><p>- A guy was thinking about doing some writing. About heavy machinery, I suppose.</p><p>- Nobody would publish his paper.</p><p>- He brought two friends.</p><p>- They wrote a book.</p><p>- It gets published.</p><p>- They receive a gift.</p><p>- He starts thinking about next book, but one of the friends didn’t like it, so he left.</p><p>- Some time later, second friend leaves too. He’s all alone again.</p></div><p class="post_meta">February 16, 2020 // <a href="/post/0THGrh25y">Hyperlink</a><a href="/post/0THGrh25y/edit" class="post_meta_edit">Edit</a></p></div></div><div class="loader"><img src="/static/favicons/apple-touch-icon-152x152.png"/></div><footer><a href="https://twitter.com/nikitonsky">Nikita Prokopov</a>, <a href="https://twitter.com/freetonik">Rakhim Davletkaliyev</a>, <a href="https://grishaev.me/">Ivan Grishaev</a>, <a href="https://twitter.com/dmitriid">Dmitrii Dimandt</a>, <a href="https://twitter.com/UlyanovskUI">Andrei Voronin</a>. 2019. All fights retarded.</footer></body></html>

···