Skip to content

Instantly share code, notes, and snippets.


Charis Theo charisTheo

Block or report user

Report or block charisTheo

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
charisTheo / copy-to-clipboard.js
Created Oct 15, 2019
A utility function for copying a string to the clipboard
View copy-to-clipboard.js
const copyToClipboard = function(str) {
const el = document.createElement('textarea');
el.value = str;
alert('Link copied to clipboard!')
charisTheo / web-share-api.js
Created Oct 15, 2019
A button click event listener for opening the Web Share API natively on mobile web
View web-share-api.js
function shareButtonClickListener(event) {
if (navigator.share) {
title: 'CharisTheo',
text: 'Look at this wonderful website!',
url: '',
.then(() => console.log('Successful share'))
.catch((error) => console.log('Error sharing', error));
} else {
charisTheo / sw-new-version-notification.js
Created Oct 14, 2019
Check if a new version of the website is available and show a notification to the user for reloading the page in order to see the new website
View sw-new-version-notification.js
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js', {scope: '/'})
.then(function(registration) {
registration.onupdatefound = () => {
const newServiceWorker = registration.installing;
newServiceWorker.onstatechange = () => {
switch (newServiceWorker.state) {
case 'installing':
if (navigator.serviceWorker.controller) {
document.getElementById('new-version-banner').innerHTML('A new version of the website is available 🙋. <a onclick="window.location.reload()">Reload</a> to see all the new goodness 💠');
charisTheo / lazy-image-loading.html
Created Sep 26, 2019
Native Image lazy loading with a polyfill
View lazy-image-loading.html
<!-- Let's load this in-viewport image normally -->
<img src="hero.jpg" alt="">
<!-- Let's lazy-load the rest of these images -->
<img data-src="unicorn.jpg" alt="" loading="lazy" class="lazyload">
<img data-src="cats.jpg" alt="" loading="lazy" class="lazyload">
<img data-src="dogs.jpg" alt="" loading="lazy" class="lazyload">
if ('loading' in HTMLImageElement.prototype) {
View restart-animation-jquery.js
$("#element").width(); // trigger a DOM reflow
View restart-animation-vanilla.js
var element = document.getElementById("element");
void element.offsetWidth; // trigger a DOM reflow
View trigger-reflow.js
// Vanilla JavaScript
void element.offsetWidth;
// or similarly
void element.offsetHeight;
// jQuery
// or similarly
View apply-css-optimised.js += "left: " + left + "px; top: " + top + "px;"; // triggers reflow once
View apply-css-unoptimised.js = left; // triggers reflow = top; // triggers reflow
View hide-edit-show-element.js
var element = document.getElementById('example-element'); = 'none'; // hide the element, triggers reflow = '0.5'; = '20px 10px'; = '200px'; = 'block'; // show the element again, triggers reflow
You can’t perform that action at this time.