Skip to content

Instantly share code, notes, and snippets.

Avatar
💫

hiroki osame privatenumber

💫
View GitHub Profile
@privatenumber
privatenumber / light-dark-image.svg
Last active Sep 11, 2021
Light/dark mode SVG image
View light-dark-image.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View line-height.md

CSS line-height

What's the default value?

line-height has a initial value of normal. What normal means depends on the user agent (browser). Desktop browsers (including Firefox) use a default value of roughly 1.1~1.2, depending on the element's font-family. It's best set a line-height for consistent behavior across browsers.

What unit should be used?

Using a unitless value is the preferred way to set line-height to avoid unexpected results due to inheritance. Unitless values are multipliers against the font-size (eg. a 1.5 line-height on a 16px font-size yields a 24px line-height) and behave the same way a percentage line-height does if there is no inheritence.

How is the unitless value different from a percentage?

They're both multipliers, but behave differently when inherited.

View index.html
<!doctype html>
<html>
<body>
<svg style="display: none">
<defs>
<svg id="plus">
<path d="M8 2V14M2 8H14" stroke="black" stroke-width="2"/>
</svg>
<svg id="circle">
View test.js
console.log(window.helloworld);
window.helloworld = (window.helloworld || 0) + 1;
@privatenumber
privatenumber / increaseConsoleGroupIndent.js
Created Apr 24, 2020
Increase console.group indentation
View increaseConsoleGroupIndent.js
const kGroupIndent = Object.getOwnPropertySymbols(console).find(s => s.description === 'kGroupIndent');
function increaseConsoleGroupIndent(increaseIndentBy = ' ') {
const { group, groupEnd } = console;
console.group = function () {
group.apply(this, arguments);
this[kGroupIndent] += increaseIndentBy;
};
console.groupEnd = function () {
groupEnd.apply(this, arguments);
View test.sh
say "hellod";
say "bye bye3"
View releases.js
{
"version": "v3.28.0", // Latest release
"assets": [
{ "version": "v3.28.0" },
{ "version": "v3.27.7" },
{ "version": "v3.26.0" },
...
{ "version": "v2.13.1" },
{ "version": "v2.13.0" },
...
@privatenumber
privatenumber / planets.json
Last active Feb 1, 2019
Planets Data for Orbit Demo
View planets.json
[
{
"planet": "Mercury",
"moons": 0,
"diameter": 4879,
"distanceFromSun": 57.9,
"icon": "https://img.icons8.com/color/48/000000/mercury-planet.png"
},
{
"planet": "Venus",
View VueLifecycleTap.js
window.VueLifecycleTap = ['beforeCreate', 'created', 'beforeMount', 'mounted', 'beforeUpdate', 'updated', 'beforeDestroy', 'destroyed'].reduce((agg, curr) => {
agg[curr] = function() {
console.log(`uid: ${this._uid} -`, curr);
};
return agg;
}, {});