Skip to content

Instantly share code, notes, and snippets.

View nfreear's full-sized avatar

Nick Freear nfreear

71 followers · 193 following
View GitHub Profile
@nfreear
nfreear / i18n-translation.js.html
Created November 29, 2021 19:51
i18n / Localisation / Translation of HTML using Javascript
<!doctype html><html lang="en"><meta charset="utf-8"> <title> Translation test </title>
<style>
body { margin: 1rem auto; max-width: 36rem; padding: 0 .3rem; }
pre { font-size: x-small; }
</style>
<header>
<h1> My translation test </h1>
</header>
@nfreear
nfreear / my-map.web-component.js.html
Created November 28, 2021 11:40
<my-map> Web Component
<!doctype html> <title> My-map </title>
<h1> my-map Web Component </h1>
<my-map lat="51.505" long="-0.09" zoom="13" caption="A map showing London landarks."></my-map>
<template id="geojson">
{
@nfreear
nfreear / lang-menu.js.html
Last active February 13, 2022 16:11
A language-switch menu based on radio buttons.
<!doctype html><html lang="en"><title> Language menu </title>
<meta charset="utf-8" />
<style>
body > * { margin: 1rem auto; max-width: 32rem; }
main { font: 1.1rem/1.6 sans-serif; }
button { cursor: pointer; font: inherit; }
ul { list-style: none; padding: 0; }
@nfreear
nfreear / IAAP-logo-disc.svg
Created November 20, 2021 18:06
IAAP logo (disc) / 18-Nov-2021.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@nfreear
nfreear / pure-css-spinner.html
Last active November 13, 2021 17:26
Pure CSS Spinner
<!doctype html> <title> Pure CSS spinner </title>
<style>
/*
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl()
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#fully_saturated_colors
https://colordesigner.io/convert/hextohsl
https://una.im/css-color-theming/
*/
:root {
@nfreear
nfreear / add-to-pinboard.bookmarklet.js
Created September 6, 2021 15:40
"Add to Pinboard" bookmarklet | © Nine Fives Software. | https://pinboard.in
/*! Copyright © Nine Fives Software. | https://pinboard.in/tos/
*/
javascript:q=location.href;if(document.getSelection){d=document.getSelection();}else{d='';};p=document.title;void(open('https://pinboard.in/add?url='+encodeURIComponent(q)+'&description='+encodeURIComponent(d)+'&title='+encodeURIComponent(p),'Pinboard','toolbar=no,width=700,height=350'));
/* End. */
@nfreear
nfreear / navbar-toggle.css.html
Created July 22, 2021 18:23
Nav-bar toggler / hamburger button :~ uses <hr> !
<!doctype html> <title> Hamburger button </title>
<style>
:root {
--toggler-bg-color: #D5FFFF;
--toggler-hover-color: #B5D9D9;
--toggler-color: #32A8A8;
--toggler-size: 3rem;
}
@nfreear
nfreear / ReverseArrayIterator.php
Last active July 12, 2021 10:16
A forward or reverse array iterator, with a test (PHP).
<?php
/**
* A forward or reverse array iterator, with a test (PHP).
*
* @copyright Nick Freear, 12-July-2021.
*
* @see https://doc.wikimedia.org/mediawiki-core/master/php/ReverseArrayIterator_8php_source.html
* @see https://github.com/wikimedia/mediawiki/blob/master/includes/libs/ReverseArrayIterator.php
*/
@nfreear
nfreear / chat-and-bot-icons.svg.html
Created July 4, 2021 17:27
Chat and Bot SVG icons
<!doctype html> <title> Chat &amp; Bot icons </title>
<style>
body { margin: 1rem auto; max-width: 30rem; }
svg { display: block; margin: 2rem auto; max-width: 125px; }
.fa path,
.icons8 path { fill: #014d4e; } /* Dark teal */
</style>
<h1> Chat &amp; Bot icons </h1>
@nfreear
nfreear / bg-alarm-notification.js.html
Created July 1, 2021 12:06
Sending a alarm / notification when in the background (Javascript)
<!doctype html> <title> Alarm / notification in the background / JS </title>
<style>
body { margin: 1rem auto; max-width: 32rem; padding: 0 .5rem; }
button { font-size: 1.5rem; padding: .5rem 3rem; }
</style>
<h1> Sending a notification when in background </h1>