Useful Stuff
Tenets
We should just archive everything, because we don't get to choose what future generations find interesting.
- Jason ScottNoise is a symptom of imperfect engineering.
- Bart HughesHere lies a man who knew how to enlist in his service better men than himself.
- Andrew CarnegieThe way we do anything is the way we do everything.
- Martha BeckHave faith in other people. No one is faultless, but nearly everyone has virtues (often hidden) and potential (often unrealised)
- Dame Steve ShirleyGames are the aesthetic form of interactive systems
- Frank LantzYou can’t procrastinate on something if you trick yourself into believing you’ve already started.
Some links I can't do without
- Make your own Hashnode account
- Create a new Hashnode article
- Backblaze, back up your data and forget about it
- XPath reference sheet
- Codepoints, valid Python variable name start characters
- Codepoints, valid Python variable name continuation characters
- boltons, an excellent Python library
- iCloud for Windows MSI
Other things
Put a file into your My Computer folder
TYPE NUL>"%AppData%\Microsoft\Windows\Network Shortcuts\Text File.txt"
Amazon - Print only return labels
@media print
{
#return-deadline-display,#post-send-snail-mail-section,
.printable-section> div:nth-child(2),
.printable-section> div:nth-child(3)>*
{display:none}
.printable-section> div:nth-child(3) .a-text-left+div,
.printable-section> div:nth-child(3) .a-text-left+hr+div
{display:block}
}
My Blog Custom CSS
@charset "utf-8";
/* Variables */
:root {
--header-color: #00c473;
--complementary-color: #0b1a1d;
--link-graphic: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg"\
width="16" height="16">\
<polyline points="16,0 8,16 8,8 0,8"></polyline></svg>');
}
/* Dark mode colour */
html.dark div[data-reactroot]>div
{background-color:var(--complementary-color) !important}
/* Font size adjustments */
.blog-page-content, #post-content-wrapper{font-size:1rem;max-width:70ch}
.blog-page-content pre{font-size: calc((180vw - 6em)/80) !important}
@media (min-width: 768px){
.blog-page-content pre{margin-left: -5em;margin-right: -5em;
font-size:.77rem !important}
section.blog-content-main{grid-column: span 6/span 6; grid-column-start: 2}
}
/* Sidebar and table of contents adjustments */
.blog-content-sidebar{zoom:.75}
div>div#toc>div{line-height: 1rem}
/* Comment VIP highlighter */
#comments-list div>div>a[href$="@BREN"]{
height: calc(2.5rem + 3px * 2); width: auto;
margin: -3px; padding: 1px;
border: 2px solid var(--header-color); border-radius: 100%;
}
#comments-list div>p>a[href$="@BREN"]>span::after {
margin-left: 0.5em; font-size: .75em; vertical-align: text-bottom;
color: var(--header-color); content: "Author";
}
/* Email subscription restyle */
.blog-subscription-form-wrapper>div{justify-content:center}
.blog-subscription-form-wrapper>div>div:first-child{display:none}
.blog-subscription-form-wrapper>div>div:nth-child(2)
{flex-direction:column;flex-grow: .5}
button.blog-subscription-form-button{font-size:0}
button.blog-subscription-form-button::before {
font-size: initial;visibility: visible;
content: "Get more chaos in your inbox"}
/* Footer copyright restyle */
.blog-footer-credits>div:first-child>p{font-size: 0;visibility: hidden}
.blog-footer-credits>div:first-child>p::before {
font-size: initial;visibility: visible;
content: "Copyright 2022 Marat Bren"}
/* External link icon, https://stackoverflow.com/a/42317014 */
.blog-page-content a[href^="//"]::before,
.blog-page-content a[href^="http://"]::before,
.blog-page-content a[href^="https://"]::before{
content:'';display:inline-block;width:16px;height:16px;
zoom:.8;margin-right:.3em;vertical-align:middle;
background-color: currentColor;
mask:var(--link-graphic);
-o-mask:var(--link-graphic);
-ms-mask:var(--link-graphic);
-webkit-mask:var(--link-graphic);
}
/* External link addendum */
.blog-page-content a::after{
font-style:normal;display: inline-block;
margin-left:.3em;font-size:.5em;vertical-align:text-top;
text-decoration:underline;text-underline-offset: 0.3em;
content:"[external link]"}
.blog-page-content a[href^="/"]::after,
.blog-page-content a[href^="./"]::after,
.blog-page-content a[href^="../"]::after{content:none}
.blog-page-content a[href^="//"]::after{content:"[external link]"}
/* Custom external links */
.blog-page-content a[href^="//hn.new"]::after{
content:"[hn.new]"}
.blog-page-content a[href^="//devhints.io"]::after{
content:"[devhints.io]"}
.blog-page-content a[href^="//hashnode.com"]::after{
content:"[hashnode.com]"}
.blog-page-content a[href^="//backblaze.com"]::after{
content:"[backblaze.com]"}
.blog-page-content a[href^="//codepoints.net"]::after{
content:"[codepoints.net]"}
.blog-page-content a[href^="//boltons.readthedocs.io"]::after{
content:"[boltons.readthedocs.io]"}
/*
hl.js Monokai for non-articles too
https://github.com/highlightjs/highlight.js
/blob/51806aa677f86786142a3db93a5c98fd02116c9f/src/styles/monokai.css
Monokai style - ported by Luigi Maselli - http://grigio.org
*/
.hljs
{background:#272822;color:#ddd}
.hljs-tag,.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-strong,.hljs-name
{color:#f92672}
.hljs-code
{color:#66d9ef}
.hljs-attribute,.hljs-symbol,.hljs-regexp,.hljs-link
{color:#bf79db}
.hljs-string,.hljs-bullet,.hljs-subst,.hljs-title,.hljs-section,.hljs-emphasis,
.hljs-type,.hljs-built_in,.hljs-selector-attr,.hljs-selector-pseudo,
.hljs-addition,.hljs-variable,.hljs-template-tag,.hljs-template-variable
{color:#a6e22e}
.hljs-title.class_,.hljs-class .hljs-title
{color:white}
.hljs-comment,.hljs-quote,.hljs-deletion,.hljs-meta
{color:#75715e}
.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-doctag,.hljs-title,
.hljs-section,.hljs-type,.hljs-selector-id
{font-weight:bold}
CSS I use to make the editor more bearable
#__next>div>div:nth-child(1){
position: fixed;
width: 100vw;
z-index: 10;
background-color: white;
}
#__next>div>div:nth-child(2)>div{
margin-top: calc(16px + 34px + 16px);
grid-column: span 12/span 12;
}
textarea {
font-size:.8rem;
line-height: 1em;
max-width: unset;
}
grammarly-editor-plugin {zoom:.7}