Skip to content

Latest commit

 

History

History
153 lines (113 loc) · 3.04 KB

til.md

File metadata and controls

153 lines (113 loc) · 3.04 KB
Raw
title layout styles
TIL – Today I learned
layout
/static/css/prism.css

TIL – Today I learned

TIL #9

Aliases for git commands can be defined from .gitconfig.

[alias]
a = add
c = commit -S -e
s = status
p = push origin master
l = log --oneline --decorate --graph
…

TIL #8

CSS variables can be used in style attributes.

<style>
  p {
    color: var(--color);
  }
</style>

<p style="--color: red">Red text</p>

TIL #7

A horizontal bar of variable height can be animated through background-size when using a linear gradient background.

#til-7 + label {
  background-image: linear-gradient(transparent 60%, #6ea 60%);
  background-repeat: no-repeat;
  background-size: 0;
  transition: all 0.6s;
}

#til-7:checked + label {
  background-size: 100%;
}
<input id="til-7" type="checkbox" hidden /><label for="til-7">Tap me</label>
<style> #til-7 + label { background-image: linear-gradient(transparent 60%, var(--accent) 60%); background-repeat: no-repeat; background-size: 0; transition: all 0.6s; font-weight: bold; } #til-7:checked + label { background-size: 100%; } </style>

The result looks like this: Tap me.

TIL #6

When using your OpenPGP keys with a smartcard (like YubiKey) remember to do a backup before executing keytocard! Keys are not written but moved and will be irretrievable.

TIL #5

In his post The Simplest Way to Load CSS Asynchronously Scott Jehl uses the media and onload attributes to lazy load CSS.

<link
  rel="stylesheet"
  href="style.css"
  media="print"
  onload="this.media='all'"
/>

This can be combined with link preloading:

<link rel="preload" href="style.css" as="style" />

Make sure to have a fallback for loading without JavaScript!

<noscript>
  <link rel="stylesheet" href="style.css" />
</noscript>

TIL #4

Vim's r modifier suffix from the expand command can be used to strip the file extension of a file name which comes in handy when converting files.

:! pandoc % -o %:r.pdf

TIL #3

The :placeholder-shown pseudo class selects input elements currently showing a placeholder.

In Possibly the Most Useful CSS Trick Fred Adams is using it to show a search button only when an input field has been filled.

<input placeholder="Search …" />
<button>Search!</button>
input + button {
  display: none;
}

input:not(:placeholder-shown) + button {
  display: block;
}

Note: The ::placeholder pseudo element styles the placeholder text.

TIL #1

CSS box-shadow values are animatable.

a {
  box-shadow: inset 0 -0.4em 0 #00ff00;
  transition: box-shadow 0.3s;
}

a:hover {
  box-shadow: inset 0 -1.2em #00ffff;
}