Skip to content

Instantly share code, notes, and snippets.

@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-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 / 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"
},
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 / 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 / mustard-test.js
Last active August 29, 2015 14:17
Cut the mustard with proxy browsers taken into consideration
var hasStorage = (function() {
try {
localStorage.setItem("test", "mod" );
localStorage.removeItem("test");
return true;
} catch (exception) {
// console.info(exception);
if (exception && exception.name=="QuotaExceededError" && localStorage.length == 0) {
//private
return true;
@tkadlec
tkadlec / results-table
Last active August 29, 2015 13:57
Sizer-Soze Results Table
<div class="fourth-content cf sizer-results">
<h1>Results for http://hugeinc.com</h1>
<table>
<thead>
<tr>
<th>Breakpoint</th>
<th>Original Weight</th>
<th>Lossless Savings</th>
<th>Lossy Savings</th>
@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 / 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'; }