Skip to content

Instantly share code, notes, and snippets.

@tkadlec
tkadlec / crux-wpt.json
Created April 9, 2021 13:42
CrUX in WebPageTest JSON
View crux-wpt.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
View perf-diagnostics.css
: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
View libs-to-npm.json
{
"GWT": {
"url": "http://www.gwtproject.org/"
},
"Ink": {
"url": "http://ink.sapo.pt/"
},
"Vaadin": {
"url": "http://vaadin.com/home"
},
View 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 / perf.js
Created April 23, 2015 11:54
Super simple example of adding perf timing to the page display during dev work
View perf.js
(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
View mustard-test.js
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
View 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
View gist:3645415
<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
View imageCheck.js
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
View ratio.js
//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'; }