Skip to content

Instantly share code, notes, and snippets.

View AllThingsSmitty's full-sized avatar

Matt Smith AllThingsSmitty

2.1k followers · 6 following
View GitHub Profile
@AllThingsSmitty
AllThingsSmitty / font-events.js
Last active October 22, 2021 20:37
Progressively loading fonts with font events
// Eliminate FOIT (Flash of Invisible Text) caused by web fonts loading slowly
// Using font events with Font Face Observer
var roboto = new FontFaceObserver('Roboto', {
weight: 400
});
observer.check().then(function () {
document.getElement.className += 'fonts-loaded';
});
// Load multiple fonts using a Promise
@AllThingsSmitty
AllThingsSmitty / dimensions.js
Last active October 7, 2021 16:06
Every possible way (pretty much) to get the dimensions of any image on a web page with JavaScript
var myImg = document.querySelector('img'),
op = document.querySelector('output');
op.innerHTML = "Computed width: " +
getComputedStyle(myImg).getPropertyValue('width') +
'<br>' + 'img.width: ' +
myImg.width +
'<br>' + 'getAttribute(width): ' +
myImg.getAttribute('width') +
'<br>' + 'img.naturalWidth: ' +
@AllThingsSmitty
AllThingsSmitty / accessible-menu.css
Last active October 1, 2021 14:42
Accessible dropdown menu
/* Top level nav */
.nav {
float: left;
margin: 20px 0;
}
/* Dropdowns */
.nav ul {
position: absolute;
top: 2.5em;
@AllThingsSmitty
AllThingsSmitty / script-loaded.js
Created May 5, 2015 13:25
Check if any given script has loaded
var myScript = document.createElement('script');
myScript.src = 'http://code.jquery.com/jquery-2.1.4.min.js';
myScript.onload = function() {
console.log('jQuery loaded.');
};
document.body.appendChild(myScript);
@AllThingsSmitty
AllThingsSmitty / flexslider.htm
Created February 1, 2015 03:45
Lazy loading images for FlexSlider
<section class="slider">
<div class="flexslider">
<ul class="slides">
<li><img src="http://imgur.com/..." alt=""></li>
<li><img class="lazy" data-src="http://imgur.com/..." alt=""></li>
<li><img class="lazy" data-src="http://imgur.com/..." alt=""></li>
<li><img class="lazy" data-src="http://imgur.com/..." alt=""></li>
<li><img class="lazy" data-src="http://imgur.com/..." alt=""></li>
</ul>
</div>
@AllThingsSmitty
AllThingsSmitty / toggle.js
Created October 13, 2016 19:24
Toggle show/hide password
function togglePassword() {
let passwordInput = document.getElementById('txtPassword');
if (passwordInput.type === 'password') {
passwordInput.type = 'text';
} else {
passwordInput.type = 'password';
}
}
(function () {
@AllThingsSmitty
AllThingsSmitty / system-fonts.css
Created July 12, 2017 14:28
Snippet for system fonts
body {
font-family: -apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Oxygen-Sans,
Ubuntu,
Cantarell,
"Helvetica Neue",
sans-serif;
@AllThingsSmitty
AllThingsSmitty / function-performance-test.js
Last active November 8, 2019 08:02
A quick JavaScript function performance test on the browser console
var i = performance.now();
yourFunction();
performance.now() - i;
//Or make a helper function, like this:
function performanceTest(testFunction, iterations) {
'use strict';
var sum = 0;
var start = performance.now();
for (var i = 0; i < iterations; i++) {
@AllThingsSmitty
AllThingsSmitty / preload.htm
Created February 12, 2016 15:21
Async CSS w/ link[rel=preload]
<link rel="preload" href="http://scottjehl.com/css-temp/slow.php" as="style" onload="this.rel='stylesheet'">
<!-- Ref: http://filamentgroup.github.io/loadCSS/test/preload.html -->
@AllThingsSmitty
AllThingsSmitty / css-not.scss
Last active November 28, 2018 16:16
Use CSS :not() instead of applying and unapplying borders on navigations
.nav-tab {
...
// instead of putting it on
border-right: 1px solid #424242;
&:last-child {
border-right: 0; // and then taking it off
}
// use CSS not() to only apply to the elements you want
&:not(:last-child) {
border-right: 1px solid #424242;