Skip to content

Instantly share code, notes, and snippets.

🎯
Focusing

Charis Theo charisTheo

🎯
Focusing
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
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;
document.body.appendChild(el);
el.select();
document.execCommand('copy');
document.body.removeChild(el);
alert('Link copied to clipboard!')
};
@charisTheo
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) {
navigator.share({
title: 'CharisTheo',
text: 'Look at this wonderful website!',
url: 'https://www.wonderful.website',
})
.then(() => console.log('Successful share'))
.catch((error) => console.log('Error sharing', error));
} else {
@charisTheo
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
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">
<script>
if ('loading' in HTMLImageElement.prototype) {
View restart-animation-jquery.js
$("#element").removeClass("animate");
$("#element").width(); // trigger a DOM reflow
$("#element").addClass("animate");
View restart-animation-vanilla.js
var element = document.getElementById("element");
element.classList.remove("animate");
void element.offsetWidth; // trigger a DOM reflow
element.classList.add("animate");
View trigger-reflow.js
// Vanilla JavaScript
void element.offsetWidth;
// or similarly
void element.offsetHeight;
// jQuery
$("#element").width();
// or similarly
$("#element").height();
View apply-css-optimised.js
element.style.cssText += "left: " + left + "px; top: " + top + "px;"; // triggers reflow once
View apply-css-unoptimised.js
element.style.left = left; // triggers reflow
element.style.top = top; // triggers reflow
View hide-edit-show-element.js
var element = document.getElementById('example-element');
element.style.display = 'none'; // hide the element, triggers reflow
element.style.opacity = '0.5';
element.style.padding = '20px 10px';
element.style.width = '200px';
element.style.display = 'block'; // show the element again, triggers reflow
You can’t perform that action at this time.