davidbgk
/
larlet-fr-david-cache
Suivre 1
Ajouter aux favoris 0
Bifurcation 0
Code Versions 0 Activité
A place to cache linked articles (think custom and personal wayback machine)
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.
203 Révisions
1 Branche
Aborescence: a75443a807
Branches Tags
${ item.name }
Créer la branche ${ searchTerm }
de 'a75443a807'
${ noResults }
larlet-fr-david-cache/cache/72a6f5871b8860e3066f9e598e9.../index.html

index.html 25KB
Brut Annotations Historique

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606 
  1. <!doctype html><!-- This is a valid HTML5 document. -->

  2. <!-- Screen readers, SEO, extensions and so on. -->

  3. <html lang=fr>

  4. <!-- Has to be within the first 1024 bytes, hence before the <title>

  5.   See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->

  6. <meta charset=utf-8>

  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->

  8. <!-- The viewport meta is quite crowded and we are responsible for that.

  9.   See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->

  10. <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">

  11. <!-- Required to make a valid HTML5 document. -->

  12. <title>Throttled Thursdays (archive) — David Larlet</title>

  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->

  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">

  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">

  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">

  17. <link rel="manifest" href="/manifest.json">

  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">

  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">

  20. <meta name="apple-mobile-web-app-title" content="David Larlet">

  21. <meta name="application-name" content="David Larlet">

  22. <meta name="msapplication-TileColor" content="#da532c">

  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">

  24. <meta name="theme-color" content="#f0f0ea">

  25. <!-- That good ol' feed, subscribe :p. -->

  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  27. 

  28.   <meta name="robots" content="noindex, nofollow">

  29.   <meta content="origin-when-cross-origin" name="referrer">

  30.   <!-- Canonical URL for SEO purposes -->

  31.   <link rel="canonical" href="http://fourword.fourkitchens.com/article/throttled-thursdays">

  32. 

  33. <style>

  34. /* http://meyerweb.com/eric/tools/css/reset/ */

  35. html, body, div, span,

  36. h1, h2, h3, h4, h5, h6, p, blockquote, pre,

  37. a, abbr, address, big, cite, code,

  38. del, dfn, em, img, ins,

  39. small, strike, strong, tt, var,

  40. dl, dt, dd, ol, ul, li,

  41. fieldset, form, label, legend,

  42. table, caption, tbody, tfoot, thead, tr, th, td,

  43. article, aside, canvas, details, embed,

  44. figure, figcaption, footer, header, hgroup,

  45. menu, nav, output, ruby, section, summary,

  46. time, mark, audio, video {

  47.   margin: 0;

  48.   padding: 0;

  49.   border: 0;

  50.   font-size: 100%;

  51.   font: inherit;

  52.   vertical-align: baseline;

  53. }

  54. /* HTML5 display-role reset for older browsers */

  55. article, aside, details, figcaption, figure,

  56. footer, header, hgroup, menu, nav, section { display: block; }

  57. body { line-height: 1; }

  58. blockquote, q { quotes: none; }

  59. blockquote:before, blockquote:after,

  60. q:before, q:after {

  61.   content: '';

  62.   content: none;

  63. }

  64. table {

  65.   border-collapse: collapse;

  66.   border-spacing: 0;

  67. }

  68. 

  69. /* http://practicaltypography.com/equity.html */

  70. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */

  71. /* https://www.filamentgroup.com/lab/js-web-fonts.html */

  72. @font-face {

  73.   font-family: 'EquityTextB';

  74.   src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),

  75.        url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');

  76.   font-weight: 300;

  77.   font-style: normal;

  78.   font-display: swap;

  79. }

  80. @font-face {

  81.   font-family: 'EquityTextB';

  82.   src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),

  83.        url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');

  84.   font-weight: 300;

  85.   font-style: italic;

  86.   font-display: swap;

  87. }

  88. @font-face {

  89.   font-family: 'EquityTextB';

  90.   src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),

  91.        url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');

  92.   font-weight: 700;

  93.   font-style: normal;

  94.   font-display: swap;

  95. }

  96. 

  97. @font-face {

  98.   font-family: 'ConcourseT3';

  99.   src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),

  100.        url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');

  101.   font-weight: 300;

  102.   font-style: normal;

  103.   font-display: swap;

  104. }

  105. 

  106. 

  107. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */

  108. body {

  109.   /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */

  110.   font-family: "EquityTextB", Palatino, serif;

  111.   background-color: #f0f0ea;

  112.   color: #07486c;

  113.   font-kerning: normal;

  114.   -moz-osx-font-smoothing: grayscale;

  115.   -webkit-font-smoothing: subpixel-antialiased;

  116.   text-rendering: optimizeLegibility;

  117.   font-variant-ligatures: common-ligatures contextual;

  118.   font-feature-settings: "kern", "liga", "clig", "calt";

  119. }

  120. pre, code, kbd, samp, var, tt {

  121.   font-family: 'TriplicateT4c', monospace;

  122. }

  123. em {

  124.   font-style: italic;

  125.   color: #323a45;

  126. }

  127. strong {

  128.   font-weight: bold;

  129.   color: black;

  130. }

  131. nav {

  132.   background-color: #323a45;

  133.   color: #f0f0ea;

  134.   display: flex;

  135.   justify-content: space-around;

  136.   padding: 1rem .5rem;

  137. }

  138.   nav:last-child {

  139.     border-bottom: 1vh solid #2d7474;

  140.   }

  141.   nav a {

  142.     color: #f0f0ea;

  143.   }

  144.   nav abbr {

  145.     border-bottom: 1px dotted white;

  146.   }

  147. 

  148. h1 {

  149.   border-top: 1vh solid #2d7474;

  150.   border-bottom: .2vh dotted #2d7474;

  151.   background-color: #e3e1e1;

  152.   color: #323a45;

  153.   text-align: center;

  154.   padding: 5rem 0 4rem 0;

  155.   width: 100%;

  156.   font-family: 'ConcourseT3';

  157.   display: flex;

  158.   flex-direction: column;

  159. }

  160.   h1.single {

  161.     padding-bottom: 10rem;

  162.   }

  163.   h1 span {

  164.     position: absolute;

  165.     top: 1vh;

  166.     left: 20%;

  167.     line-height: 0;

  168.   }

  169.     h1 span a {

  170.       line-height: 1.7;

  171.       padding: 1rem 1.2rem .6rem 1.2rem;

  172.       border-radius: 0 0 6% 6%;

  173.       background: #2d7474;

  174.       font-size: 1.3rem;

  175.       color: white;

  176.       text-decoration: none;

  177.     }

  178. h2 {

  179.   margin: 4rem 0 1rem;

  180.   border-top: .2vh solid #2d7474;

  181.   padding-top: 1vh;

  182. }

  183. h3 {

  184.   text-align: center;

  185.   margin: 3rem 0 .75em;

  186. }

  187. hr {

  188.   height: .4rem;

  189.   width: .4rem;

  190.   border-radius: .4rem;

  191.   background: #07486c;

  192.   margin: 2.5rem auto;

  193. }

  194. time {

  195.   display: bloc;

  196.   margin-left: 0 !important;

  197. }

  198. ul, ol {

  199.   margin: 2rem;

  200. }

  201. ul {

  202.   list-style-type: square;

  203. }

  204. a {

  205.   text-decoration-skip-ink: auto;

  206.   text-decoration-thickness: 0.05em;

  207.   text-underline-offset: 0.09em;

  208. }

  209. article {

  210.   max-width: 50rem;

  211.   display: flex;

  212.   flex-direction: column;

  213.   margin: 2rem auto;

  214. }

  215.   article.single {

  216.     border-top: .2vh dotted #2d7474;

  217.     margin: -6rem auto 1rem auto;

  218.     background: #f0f0ea;

  219.     padding: 2rem;

  220.   }

  221.   article p:last-child {

  222.     margin-bottom: 1rem;

  223.   }

  224. p {

  225.   padding: 0 .5rem;

  226.   margin-left: 3rem;

  227. }

  228.   p + p,

  229.   figure + p {

  230.     margin-top: 2rem;

  231.   }

  232. 

  233. blockquote {

  234.   background-color: #e3e1e1;

  235.   border-left: .5vw solid #2d7474;

  236.   display: flex;

  237.   flex-direction: column;

  238.   align-items: center;

  239.   padding: 1rem;

  240.   margin: 1.5rem;

  241. }

  242.   blockquote cite {

  243.     font-style: italic;

  244.   }

  245.   blockquote p {

  246.     margin-left: 0;

  247.   }

  248. 

  249. figure {

  250.   border-top: .2vh solid #2d7474;

  251.   background-color: #e3e1e1;

  252.   text-align: center;

  253.   padding: 1.5rem 0;

  254.   margin: 1rem 0 0;

  255.   font-size: 1.5rem;

  256.   width: 100%;

  257. }

  258.   figure img {

  259.     max-width: 250px;

  260.     max-height: 250px;

  261.     border: .5vw solid #323a45;

  262.     padding: 1px;

  263.   }

  264. figcaption {

  265.   padding: 1rem;

  266.   line-height: 1.4;

  267. }

  268. aside {

  269.   display: flex;

  270.   flex-direction: column;

  271.   background-color: #e3e1e1;

  272.   padding: 1rem 0;

  273.   border-bottom: .2vh solid #07486c;

  274. }

  275.   aside p {

  276.     max-width: 50rem;

  277.     margin: 0 auto;

  278.   }

  279. 

  280. /* https://fvsch.com/code/css-locks/ */

  281. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  282.   font-size: 1rem;

  283.   line-height: calc( 1.5em + 0.2 * 1rem );

  284. }

  285. h1 {

  286.   font-size: 1.9rem;

  287.   line-height: calc( 1.2em + 0.2 * 1rem );

  288. }

  289. h2 {

  290.   font-size: 1.6rem;

  291.   line-height: calc( 1.3em + 0.2 * 1rem );

  292. }

  293. h3 {

  294.   font-size: 1.35rem;

  295.   line-height: calc( 1.4em + 0.2 * 1rem );

  296. }

  297. @media (min-width: 20em) {

  298.   /* The (100vw - 20rem) / (50 - 20) part

  299.      resolves to 0-1rem, depending on the

  300.      viewport width (between 20em and 50em). */

  301.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  302.     font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );

  303.     line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );

  304.     margin-left: 0;

  305.   }

  306.   h1 {

  307.     font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  308.     line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );

  309.   }

  310.   h2 {

  311.     font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  312.     line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );

  313.   }

  314.   h3 {

  315.     font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  316.     line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );

  317.   }

  318. }

  319. @media (min-width: 50em) {

  320.   /* The right part of the addition *must* be a

  321.      rem value. In this example we *could* change

  322.      the whole declaration to font-size:2.5rem,

  323.      but if our baseline value was not expressed

  324.      in rem we would have to use calc. */

  325.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  326.     font-size: calc( 1rem + .6 * 1rem );

  327.     line-height: 1.5em;

  328.   }

  329.   p, li, pre, details {

  330.     margin-left: 3rem;

  331.   }

  332.   h1 {

  333.     font-size: calc( 1.9rem + 1.5 * 1rem );

  334.     line-height: 1.2em;

  335.   }

  336.   h2 {

  337.     font-size: calc( 1.5rem + 1.5 * 1rem );

  338.     line-height: 1.3em;

  339.   }

  340.   h3 {

  341.     font-size: calc( 1.35rem + 1.5 * 1rem );

  342.     line-height: 1.4em;

  343.   }

  344.   figure img {

  345.     max-width: 500px;

  346.     max-height: 500px;

  347.   }

  348. }

  349. 

  350. figure.unsquared {

  351.   margin-bottom: 1.5rem;

  352. }

  353.   figure.unsquared img {

  354.     height: inherit;

  355.   }

  356. 

  357. 

  358. 

  359. @media print {

  360.   body { font-size: 100%; }

  361.   a:after { content: " (" attr(href) ")"; }

  362.   a, a:link, a:visited, a:after {

  363.     text-decoration: underline;

  364.     text-shadow: none !important;

  365.     background-image: none !important;

  366.     background: white;

  367.     color: black;

  368.   }

  369.   abbr[title] { border-bottom: 0; }

  370.   abbr[title]:after { content: " (" attr(title) ")"; }

  371.   img { page-break-inside: avoid; }

  372.   @page { margin: 2cm .5cm; }

  373.   h1, h2, h3 { page-break-after: avoid; }

  374.   p3 { orphans: 3; widows: 3; }

  375.   img {

  376.     max-width: 250px !important;

  377.     max-height: 250px !important;

  378.   }

  379.   nav, aside { display: none; }

  380. }

  381. 

  382. ul.with_columns {

  383.   column-count: 1;

  384. }

  385. @media (min-width: 20em) {

  386.   ul.with_columns {

  387.     column-count: 2;

  388.   }

  389. }

  390. @media (min-width: 50em) {

  391.   ul.with_columns {

  392.     column-count: 3;

  393.   }

  394. }

  395. ul.with_two_columns {

  396.   column-count: 1;

  397. }

  398. @media (min-width: 20em) {

  399.   ul.with_two_columns {

  400.     column-count: 1;

  401.   }

  402. }

  403. @media (min-width: 50em) {

  404.   ul.with_two_columns {

  405.     column-count: 2;

  406.   }

  407. }

  408. 

  409. .gallery {

  410.   display: flex;

  411.   flex-wrap: wrap;

  412.   justify-content: space-around;

  413. }

  414.   .gallery figure img {

  415.     margin-left: 1rem;

  416.     margin-right: 1rem;

  417.   }

  418.   .gallery figure figcaption {

  419.     font-family: 'ConcourseT3'

  420.   }

  421. 

  422. footer {

  423.   font-family: 'ConcourseT3';

  424.   display: flex;

  425.   flex-direction: column;

  426.   border-top: 3px solid white;

  427.   padding: 4rem 0;

  428.   background-color: #07486c;

  429.   color: white;

  430. }

  431.   footer > * {

  432.     max-width: 50rem;

  433.     margin: 0 auto;

  434.   }

  435.   footer a {

  436.     color: #f1c40f;

  437.   }

  438.   footer .avatar {

  439.     width: 200px;

  440.     height: 200px;

  441.     border-radius: 50%;

  442.     float: left;

  443.     -webkit-shape-outside: circle();

  444.     shape-outside: circle();

  445.     margin-right: 2rem;

  446.     padding: 2px 5px 5px 2px;

  447.     background: white;

  448.     border-left: 1px solid #f1c40f;

  449.     border-top: 1px solid #f1c40f;

  450.     border-right: 5px solid #f1c40f;

  451.     border-bottom: 5px solid #f1c40f;

  452.   }

  453. </style>

  454. 

  455. <h1>

  456.   <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>

  457.   Throttled Thursdays (archive)

  458.   <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>

  459. </h1>

  460. <section>

  461.   <article>

  462.     <h3><a href="http://fourword.fourkitchens.com/article/throttled-thursdays">Source originale du contenu</a></h3>

  463.     <p>I really enjoy the process of making websites faster. It’s my job, so I bring it up whenever I can. But it’s not everyone’s job. It can be a tough problem to keep at the top of your mind when fast internet is always available. It’s easy to forget when you have broadband at home, blazing pipes at the office, and <span class="caps">LTE</span> walking around town. But not everyone has these luxuries, and for the Open Web to truly succeed on a global scale the majority of the web producers need to experience the web the way the majority of people consume it.</p>

  464. 

  465. <h2>Embrace the pain</h2>

  466. 

  467. <p>There’s been a lot of lively discussion lately about creating a culture of performance within organizations. The biggest news was Facebook’s Instant Articles, which some see as a blatant admission by many major sites that they’d rather let Facebook host their content than prioritize frontend performance for their products. It’s been called a failure of our industry to evangelize <a href="http://bradfrost.com/blog/post/performance-as-design/">performance as a basic feature of the web</a>.</p>

  468. 

  469. <p>We have the means to make this happen. It’s simply a matter of <a href="http://timkadlec.com/2015/05/choosing-performance/">choosing performance</a>, including it within every decision as we build sites and apps, and sticking to <a href="http://timkadlec.com/2013/01/setting-a-performance-budget/">performance budgets</a>. And the only way to really keep it top of mind is to experience bad performance for yourself.</p>

  470. 

  471. <blockquote><p><strong>I propose that web developers <em>everywhere</em> start taking at least one day of their week to throttle their internet connections.</strong></p>

  472. </blockquote>

  473. 

  474. <p>See how your day goes with a throttled connection. Loading sites, running <code>npm install</code>, pushing to GitHub, and even downloading GIFs in chat will immediately be more painful. And it should be painful, to remind all of us lucky broadband users how most people view our work.</p>

  475. 

  476. <p>Tim Kadlec has mentioned on many occasions that we need to <a href="http://24ways.org/2012/responsive-responsive-design/">embrace the pain</a> of slow connections rather than avoid it, leading our web creations to be leaner and more robust. I can think of no better way than to experience a mobile connection on a device that is normally much faster.</p>

  477. 

  478. <h2>System-level tools</h2>

  479. 

  480. <p>Here’s a list of tools to help you experience the web in slo-mo:</p>

  481. 

  482. <h3>Charles (Win/<span class="caps">OSX</span>/Linux)</h3>

  483. 

  484. <p><strong>Charles</strong> is a professional-grade proxy that does many things including throttle your connection. It is cross-platform and if you do significant amounts of mobile development I highly recommend it. It even allows importing/exporting of preferences if you want your team to use identical settings. To enable throttling, go to <em>Proxy » Throttle settings</em> and configure to your liking. It offers common presents but you can also manually  configure the bandwidth, latency, <span class="caps">MTU</span> (packet size), and even whitelist which hosts get throttled. Once you’re configured, you can simply toggle throttling from the menu bar icon (it looks like a pitcher of water). In the general preferences you can set it to automatically enable throttling on startup.</p>

  485. 

  486. <p><a class="green button" href="http://www.charlesproxy.com">Get Charles</a> (free trial, $50 per license)</p>

  487. 

  488. <h3>Fiddler (Windows 7, 8, 8.1, 10)</h3>

  489. 

  490. <p><strong>Fiddler</strong>, similar to Charles, is a developer-oriented web debugging proxy. It is an add-on for .<span class="caps">NET</span>2 and .<span class="caps">NET</span>4, and it features a few other useful features for web development, such as remote debugging, performance testing, and session manipulation.</p>

  491. 

  492. <p><a class="green button" href="http://www.telerik.com/fiddler">Get Fiddler</a> (free)</p>

  493. 

  494. <h3>Android and iOS</h3>

  495. 

  496. <p><img class="right" src="http://fourword.fourkitchens.com/sites/default/files/blog/inline-images/network-throttle-android.jpg" width="288" height="278" alt="Screenshot of Android settings to control which cellular network is used."/><br/><strong>Android</strong> allows you to choose which cellular chip the phone will use as a user setting. Change it by going to one of the following:</p>

  497. 

  498. <ul><li><em>Settings » Mobile Networks » Preferred Network Type</em></li>

  499. <li><em>Settings » Wireless <span class="amp">&amp;</span> networks » More » Cellular <span class="amp">&amp;</span> networks » Preferred Network Type</em></li>

  500. </ul>

  501. 

  502. <p><strong>iOS 8.3</strong> recently followed suit, allowing you to pick which cellular chip the phone uses. On any recent iPhone this means <span class="caps">LTE</span>, 3G, or 2G. Enable the setting by going to <em>Settings » Cellular » Voice <span class="amp">&amp;</span> Data</em>. You must have an iPhone; the iOS Simulator does not surface this particular setting.</p>

  503. 

  504. <h3>Network Link Conditioner (<span class="caps">OSX</span>)</h3>

  505. 

  506. <p><strong>Network Link Conditioner</strong> is a more refined method of throttling your iPhone. You must connect the phone to your computer and enable the setting via <span class="caps">XC</span>ode. This is an easy one to forget about, so remember to switch it off when you’re done… or don’t if you really want to live the slow web!</p>

  507. 

  508. <p><a class="green button" href="http://nshipster.com/network-link-conditioner/">Read about Network Link Conditioner</a> (free, bundled with <span class="caps">XC</span>ode)</p>

  509. 

  510. <h3>NetLimiter (Windows <span class="caps">XP</span>, Vista, 7, 8, 8.1, 10)</h3>

  511. 

  512. <p><strong>NetLimiter</strong> has been around a while, and provides a simple, highly configurable interface for system-wide throttling within Windows. Like Charles, it allows you to isolate individual apps or even connections, and is a good tool for more advanced users wishing to control the connection a bit more.</p>

  513. 

  514. <p><a class="green button" href="http://www.netlimiter.com/">Get NetLimiter</a> (free trial, $19.95 for Lite, $29.95 for Pro)</p>

  515. 

  516. <h3>Slowy (<span class="caps">OSX</span>)</h3>

  517. 

  518. <p><strong>Slowy</strong> is a simple app that gives you quick access to system-wide throttle controls. Just click the icon in your menu bar and pick your speed. <strong>Slowy is not supported in Yosemite and newer</strong> but is a hassle-free option on older versions of <span class="caps">OS</span> X.</p>

  519. 

  520. <p><a class="green button" href="http://slowyapp.com">Download Slowy</a> (free, must use <span class="caps">OS</span> X Mavericks or older)</p>

  521. 

  522. <h2>Web development tools</h2>

  523. 

  524. <p>These tools allow you to adjust the network during development of your sites or apps, to more accurately paint a picture of the real-world consumption:</p>

  525. 

  526. <h3>Chrome DevTools (Win/<span class="caps">OSX</span>/iOS/Android/Linux)</h3>

  527. 

  528. <p><strong>Chrome DevTools</strong> now supports network throttling when you enable device emulation (that little mobile device icon next to <em>Elements</em>). At the time of posting it is a blue-colored drop-down. You can set both a <abbr title="user agent"><span class="caps">UA</span></abbr> and a network speed, and it is a great way to instantly demo a slow connection, especially when developing locally. Local development is an easy way to gain false confidence in a site, because there’s no network latency. Bonus points: try testing with a cold cache by enabling <em>Disable cache (while DevTools is open)</em> in devtools settings.</p>

  529. 

  530. <p><a class="green button" href="https://developer.chrome.com/devtools/docs/device-mode#network-conditions">Read about throttling in DevTools</a> (free, included with Chrome)</p>

  531. 

  532. <h3>WebPageTest.org</h3>

  533. 

  534. <p><strong>WebPageTest.org</strong> is primarily a testing tool as opposed to all the development tools listed above. You might use many of the default settings when running tests, but I encourage you to be a bit harder on yourself and try a slower connection by selecting <em>Advanced Settings » Test Settings » Connection</em>. Like Charles, it offers some sensible, common defaults along with a Custom option which lets you throttle downloads, uploads, latency, and packet loss.</p>

  535. 

  536. <p><a class="green button" href="http://www.webpagetest.org/">Test on <abbr title="Web Page Test"><span class="caps">WPT</span></abbr></a></p>

  537. 

  538. <h1>Get throttling!</h1>

  539. 

  540. <p>Starting tomorrow, I will be <a href="https://twitter.com/search?src=typd&amp;q=%23throttledthursdays">throttling every Thursday</a> along with others at Four Kitchens. See if you can get others within your organization to do the same! Once we all embrace the pain of a slow web, we’ll be more motivated to make it fast. If you know of other good tools please drop them in the comments and I’ll keep this post updated with the best ones.</p>

  541. 

  542. <p><em>Special thanks to both <a href="https://twitter.com/andydavies">Andy Davies</a> and <a href="https://twitter.com/paul_irish">Paul Irish</a> for suggesting tools and other links contained within this blog post.</em></p>

  543.   </article>

  544. </section>

  545. 

  546. 

  547. <nav id="jumpto">

  548.   <p>

  549.     <a href="/david/blog/">Accueil du blog</a> |

  550.     <a href="http://fourword.fourkitchens.com/article/throttled-thursdays">Source originale</a> |

  551.     <a href="/david/stream/2019/">Accueil du flux</a>

  552.   </p>

  553. </nav>

  554. 

  555. <footer>

  556.   <div>

  557.     <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">

  558.     <p>

  559.       Bonjour/Hi!

  560.       Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>

  561.       Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).

  562.     </p>

  563.     <p>

  564.       Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.

  565.     </p>

  566.     

  567.     <p>

  568.       Voici quelques articles choisis :

  569.       <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,

  570.       <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,

  571.       <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,

  572.       <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,

  573.       <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,

  574.       <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,

  575.       <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,

  576.       <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,

  577.       <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,

  578.       <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,

  579.       <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,

  580.       <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,

  581.       <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,

  582.       <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,

  583.       <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,

  584.       et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>

  585.     </p>

  586.     <p>

  587.       On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.

  588.     </p>

  589.     <p>

  590.       Je ne traque pas ta navigation mais mon

  591.       <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>

  592.       conserve des logs d’accès.

  593.     </p>

  594.   </div>

  595. </footer>

  596. <script type="text/javascript">

  597.   ;(_ => {

  598.     const jumper = document.getElementById('jumper')

  599.     jumper.addEventListener('click', e => {

  600.       e.preventDefault()

  601.       const anchor = e.target.getAttribute('href')

  602.       const targetEl = document.getElementById(anchor.substring(1))

  603.       targetEl.scrollIntoView({behavior: 'smooth'})

  604.     })

  605.   })()

  606. </script>