<html><head><style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
padding:1em;
margin:auto;
background:#fefefe;
}
h1, h2, h3, h4, h5, h6 {
font-weight: bold;
}
h1 {
color: #000000;
font-size: 28pt;
}
h2 {
border-bottom: 1px solid #CCCCCC;
color: #000000;
font-size: 24px;
}
h3 {
font-size: 18px;
}
h4 {
font-size: 16px;
}
h5 {
font-size: 14px;
}
h6 {
color: #777777;
background-color: inherit;
font-size: 14px;
}
hr {
height: 0.2em;
border: 0;
color: #CCCCCC;
background-color: #CCCCCC;
}
p, blockquote, ul, ol, dl, li, table, pre {
margin: 15px 0;
}
a, a:visited {
color: #4183C4;
background-color: inherit;
text-decoration: none;
}
#message {
border-radius: 6px;
border: 1px solid #ccc;
display:block;
width:100%;
height:60px;
margin:6px 0px;
}
button, #ws {
font-size: 12 pt;
padding: 4px 6px;
border-radius: 5px;
border: 1px solid #bbb;
background-color: #eee;
}
code, pre, #ws, #message {
font-family: Monaco;
font-size: 10pt;
border-radius: 3px;
background-color: #F8F8F8;
color: inherit;
}
code {
border: 1px solid #EAEAEA;
margin: 0 2px;
padding: 0 5px;
}
pre {
border: 1px solid #CCCCCC;
overflow: auto;
padding: 4px 8px;
}
pre > code {
border: 0;
margin: 0;
padding: 0;
}
#ws { background-color: #f8f8f8; }
.bloop_markdown table {
border-collapse: collapse;
font-family: Helvetica, arial, freesans, clean, sans-serif;
color: rgb(51, 51, 51);
font-size: 15px; line-height: 25px;
padding: 0; }
.bloop_markdown table tr {
border-top: 1px solid #cccccc;
background-color: white;
margin: 0;
padding: 0; }
.bloop_markdown table tr:nth-child(2n) {
background-color: #f8f8f8; }
.bloop_markdown table tr th {
font-weight: bold;
border: 1px solid #cccccc;
margin: 0;
padding: 6px 13px; }
.bloop_markdown table tr td {
border: 1px solid #cccccc;
margin: 0;
padding: 6px 13px; }
.bloop_markdown table tr th :first-child, table tr td :first-child {
margin-top: 0; }
.bloop_markdown table tr th :last-child, table tr td :last-child {
margin-bottom: 0; }
.bloop_markdown blockquote{
border-left: 4px solid #dddddd;
padding: 0 15px;
color: #777777; }
blockquote > :first-child {
margin-top: 0; }
blockquote > :last-child {
margin-bottom: 0; }
.send { color:#77bb77; }
.server { color:#7799bb; }
.error { color:#AA0000; }</style></head><body><p>Good morning and Happy Post Canada Day everyone!</p>
<p>I’ve been looking for plugin/add-ons for both Firefox and Chrome to test my blog and see how fast my blog will load and never really find any good way to test that until today I just open Chrome Canary (Firefox Nightly equivalent) and this just blow my mind!</p>
<figure>
<img src="https://dl.dropboxusercontent.com/spa/n5v3bx9nnjkdpzf/kj5_qd79.png" alt="" title="Chrome Canary Dev Tool">
</figure>
<p>What I want to share here with you guys is their updated Dev tool, specifically their new <strong>“Device mode”</strong>. As you can see from screenshot above, you can simulate your useragent/Device screen size (You can do this in Firefox too!) but, this new <strong>Network</strong> option which is the part blown my mind… I thought I want to try with GPRS with webmaker.org. I know you will think I’m crazy when talking about <strong>GPRS</strong> and you will think who still have GPRS? Well a lot of people in Asian countries, South America, Africa and many more they still do! and loading webmaker.org is really slow when trying with that option, but when changing it to <strong>EDGE</strong> of course it’s about three times better and I must say <strong>I’m very impressed about how fast webmaker.org</strong> can load with this slow internet connection!</p>
<p>So, I want people to give this a try and always keep in mind when developing something not only the size of the page matters, but all the dependencies and content of the page is very important too! Again, I think we’re doing really well here (Check file <strong>dependencies.min.js</strong>, Kate++ and to whoever contributed)</p>
<p>PS. If you can find an alternative for Firefox, do share!</p>
<p>Thanks,</p>
<p>——————<br>
Ali Al Dallal<br>
Twitter: @alicoding<br>
IRC: [:aali]<br>
blog: https://alicoding.com</p></body></html>