Skip to content

Instantly share code, notes, and snippets.

@JeroenVdb
JeroenVdb / mailfriend.html
Created September 16, 2014 09:13
Mail a friend
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>$contentTitle</title>
<style>
p {
line-height: 20px;
}
@JeroenVdb
JeroenVdb / gist:be9effdaf766863483d6
Last active August 29, 2015 14:06
ETags on Akamai
Date: 16/09/2014
File: http://static2.hln.be/static/photo/2014/17/13/0/20140909105316/media_xll_7096935.jpg
Remote address: 2.18.242.32:80
Response header:
HTTP/1.1 200 OK
Server: Apache
Last-Modified: Tue, 09 Sep 2014 08:53:13 GMT
ETag: "15acee4-5285-5029e10d29d13"
Accept-Ranges: bytes
@JeroenVdb
JeroenVdb / Front-end Conferences.md
Last active August 29, 2015 14:06
Front-end Conferences

Landyard Front-end: http://lanyrd.com/topics/front-end/

Conference Location 2014 2015 Topics Website
Fronteers Netherlands 8-10 Oktober Front-end https://fronteers.nl/congres
Coldfront Denmark 4 September Front-end http://coldfrontconf.com/
Front-Trends Poland 7-9 May 6-8 May Front-end http://front-trends.com/
WebPerfDays Netherlands 11 Oktober Web performance http://www.webperfdays.org/
WebPerfDays Spain 20 November Web performance http://www.webperfdays.org/
Velocity Spain 17-19 November Web Performance http://velocityconf.com/velocityeu2014

Notes

You can measure:

  • Usertimings (Real User Monitoring): gives you a set of timings from different users, browsers, connections,... about pageload, ?
    • Tools: Google Analytics, Gomez APM
  • Synthetic/Analitic testing: how many resources, how many DNS lookups,...
    • Tools: YSLOW, PageSpeed

Toughts

  • What can we measure with existing tools: GA and Gomez

1. Network

  1. Avoid 301, 302 redirects
  2. Reduce DNS lookups
  3. Reduce the number of HTTP requests
  4. No 404 errors
  • Always have a favicon.ico
  1. DNS Prefetching (?)

2. Caching

@JeroenVdb
JeroenVdb / SassMeister-input.scss
Created June 30, 2014 11:13
Generated by SassMeister.com.
// ----
// libsass (v2.0.0)
// ----
// Vertical Rhythm
$base-font-size : 16px !default;
$base-line-height : 1.5625; // ~ 25px @ 16px
$base-spacing-unit : $base-font-size;
$half-spacing-unit : $base-font-size/2;
{"authors":[{"name":"Anne Salomons","url":"/vk/nl/20002/author/7094/Anne--Salomons.dhtml"},{"name":"Anne van Driel","url":"/vk/nl/20002/author/5724/Anne--van-Driel.dhtml"},{"name":"Anne Boermans","url":"/vk/nl/20002/author/11221/Anne-Boermans.dhtml"},{"name":"Anne Dorst","url":"/vk/nl/20002/author/4531/Anne-Dorst.dhtml"},{"name":"Anne Hustache","url":"/vk/nl/20002/author/863/Anne-Hustache.dhtml"}]}
[
{
"hires": "http://placehold.it/1208x814&text=eerstegroot",
"lores": "http://placehold.it/1208x814&text=eersteklein",
"width": "1280",
"height": "814",
"caption": "Je hebt hier een rozebottel-theezakje in gestoken. <span class=\"credit\">Foto: ANP</span>"
},
{
"hires": "http://placehold.it/1208x814",
<!-- ankeiler-horz-offer.html -->
<article class="ankeiler ankeiler--horz ankeiler--aanbieding">
<a href="#">
<figure>
<img src="http://placehold.it/142x138&amp;text=offer" alt="">
<figcaption>Prijsvraag</figcaption>
</figure>
<div class="ankeiler__wrapper" itemprop="itemReviewed">
<header class="ankeiler__header">
<h2>win een weekendje Parijs voor twee</h2>
var htmlTag = document.getElementsByTagName('html')[0];
var hptoContainer = document.querySelectorAll('.hpto--container')[0];
var hptoClickbox = document.querySelectorAll('.hpto--clickbox')[0];
htmlTag.className = 'hpto ' + htmlTag.className;
hptoContainer.style.backgroundImage="url('http://lorempixel.com/output/nature-q-c-1920-1200-8.jpg')";
hptoContainer.style.backgroundColor="#FFFF00";
hptoClickbox.href = 'http://www.jeroenvdb.be'