Skip to content

Instantly share code, notes, and snippets.

View tkadlec's full-sized avatar

tkadlec

126 followers · 4 following
View GitHub Profile
@tkadlec
tkadlec / perf-diagnostics.css
Last active June 8, 2023 17:47
CSS used to highlight potential performance issues
:root {
--violation-color: red; /* used for clear issues */
--warning-color: orange; /* used for potential issues we should look into */
}
/* IMAGES */
/*
* Lazy-Loaded Images Check
* ====
@tkadlec
tkadlec / trigram.html
Last active September 16, 2021 11:22
Trigram for heaven icon
<!DOCTYPE html>
<html>
<head>
<title>Trigram for heaven icon</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
li {
list-style-type: none;
}
@tkadlec
tkadlec / crux-wpt.json
Created April 9, 2021 13:42
CrUX in WebPageTest JSON
{
...
"CrUX":{
"key":{
"formFactor":"DESKTOP",
"url":"https:\/\/techcrunch.com\/"
},
"metrics":{
"first_input_delay":{
"histogram":[
@tkadlec
tkadlec / perf.js
Created April 23, 2015 11:54
Super simple example of adding perf timing to the page display during dev work
(function () {
var perfBar = function(budget) {
window.onload = function() {
window.performance = window.performance || window.mozPerformance || window.msPerformance || window.webkitPerformance || {};
var timing = window.performance.timing,
now = new Date().getTime(),
output, loadTime;
@tkadlec
tkadlec / gist:3645415
Created September 5, 2012 21:44
"View Desktop Layout" link for responsive sites
<html>
<head>
<title>Mobile First "View Desktop" Link</title>
<meta id="vp" name="viewport" content="width=device-width" />
<style type="text/css">
body{
font-family: Helvetica, sans-serif;
}
#toggle{
text-decoration: underline;
@tkadlec
tkadlec / libs-to-npm.json
Created May 26, 2017 13:43
JSON Map between Library Detector libraries and NPM packages
{
"GWT": {
"url": "http://www.gwtproject.org/"
},
"Ink": {
"url": "http://ink.sapo.pt/"
},
"Vaadin": {
"url": "http://vaadin.com/home"
},
@tkadlec
tkadlec / Serverless-Post-Guy-Edits.md
Created November 3, 2016 17:48 — forked from guypod/Serverless-Post-Guy-Edits.md
title description date thumbnail layout authors
Introducing the Serverless Snyk Plugin
Using Serverless is a boon for security, as it greatly reduces the risk of unpatched servers. In this environment, vulnerable open source packages become the primary security risk. The new Serverless Snyk plugin addresses this issue.
2016-11-03
Post
FirstnameLastname
@tkadlec
tkadlec / mqListener.html
Created June 16, 2012 20:18
machMedia Listener Test
<html>
<head>
<title>MatchMedia Listener Test</title>
<meta name="viewport" content="width=device-width" />
<style type="text/css">
body{
font-family: Helvetica, sans-serif;
}
#colorMe{
padding: 1.5em 1em;
@tkadlec
tkadlec / imageCheck.js
Created August 10, 2012 18:53
Determine if image has been downloaded
var myImage = new Image();
myImage.src = "http://somedomain.com/image2.png";
if (myImage.complete) {
//already downloaded
} else {
//not yet downloaded
}
@tkadlec
tkadlec / ratio.js
Created July 15, 2012 18:47
Device Pixel Ratio Test
//Adapted from http://www.broken-links.com/2012/07/13/using-media-queries-to-test-device-resolution
var dpr = window.devicePixelRatio,
msg = '';
// devicePixelRatio property
if (dpr) { msg += 'devicePixelRatio: ' + dpr; }
// matchMedia method
if (window.matchMedia) {
// resolution feature & dpi unit
if (window.matchMedia('(min-resolution: 96dpi)').matches) { msg += '\ndpi: true'; }