Skip to content

Instantly share code, notes, and snippets.

View privatenumber's full-sized avatar

Hiroki Osame privatenumber

3.4k followers · 111 following
View GitHub Profile
@privatenumber
privatenumber / light-dark-image.svg
Last active October 22, 2024 05:40
Light/dark mode SVG image
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@privatenumber
privatenumber / line-height.md
Created September 22, 2020 22:04
CSS line-height

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.

@privatenumber
privatenumber / index.html
Created August 3, 2020 01:39
SVG referencing
<!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">
@privatenumber
privatenumber / test.js
Last active June 8, 2020 02:46
test
console.log(window.helloworld);
window.helloworld = (window.helloworld || 0) + 1;
@privatenumber
privatenumber / increaseConsoleGroupIndent.js
Created April 24, 2020 04:52
Increase console.group indentation
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);
@privatenumber
privatenumber / video-toolkit.js
Last active April 22, 2020 20:39
video-toolkit.js
alert(2);
@privatenumber
privatenumber / test.sh
Last active February 27, 2020 18:29
say "hellod";
say "bye bye3"
@privatenumber
privatenumber / releases.js
Last active April 2, 2019 00:04
{
"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 February 1, 2019 22:51
Planets Data for Orbit Demo
[
{
"planet": "Mercury",
"moons": 0,
"diameter": 4879,
"distanceFromSun": 57.9,
"icon": "https://img.icons8.com/color/48/000000/mercury-planet.png"
},
{
"planet": "Venus",
@privatenumber
privatenumber / VueLifecycleTap.js
Created January 18, 2019 16:13
Vue lifecycle tap
window.VueLifecycleTap = ['beforeCreate', 'created', 'beforeMount', 'mounted', 'beforeUpdate', 'updated', 'beforeDestroy', 'destroyed'].reduce((agg, curr) => {
agg[curr] = function() {
console.log(`uid: ${this._uid} -`, curr);
};
return agg;
}, {});