{"id":1309,"date":"2020-01-29T23:27:22","date_gmt":"2020-01-30T04:27:22","guid":{"rendered":"http:\/\/newmediaproduction.mynmi.net\/?page_id=1309"},"modified":"2020-01-29T23:27:22","modified_gmt":"2020-01-30T04:27:22","slug":"caching","status":"publish","type":"page","link":"https:\/\/nmi.cool\/webdev\/caching\/","title":{"rendered":"Caching"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/nmi.cool\/webdev\/wp-content\/uploads\/sites\/14\/2022\/01\/cache.jpeg\" alt=\"Photo of gray, metal storage lockers. \" \/><figcaption>Photo by <a href=\"https:\/\/unsplash.com\/@lazycreekimages\">Michael Dziedzic<\/a>.<\/figcaption><\/figure>\n\n\n\n<p>Cache is pronounced like <em>cash<\/em>, but the similarities stop there.<\/p>\n\n\n\n<p>A cache is a collection of items stored somewhere hidden or inaccessible.  Sort of like a secret stash. Here&#8217;s some examples:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>The smugglers hid a <strong>cache <\/strong>of stolen goods in an undisclosed warehouse. This was determined to more efficient than carrying the goods with them.<\/li><li>In their days, explorers placed <strong>caches <\/strong>of supplies on their routes. This was more efficient than having supplies shipped from home.<\/li><\/ul>\n\n\n\n<p>When it comes to computing and Internet-ing, caches operate pretty much the same.<\/p>\n\n\n\n<p>Your computer stores copies of files in a temporary location known as a\u2014yup, <strong>cache<\/strong>\u2014so operations can run efficiently. Basically, it&#8217;s so a recently accessed file can be accessed again as quickly as possible. Technically, a cache can be any temporary storage location.<\/p>\n\n\n\n<p>Instead of your computer running the operations to pull up that file fresh every time, your computer pulls up the one in the cache. It saves time.<\/p>\n\n\n\n<p>Here&#8217;s how it works on the Internet. Content delivery networks (CDN)\u2014the networks responsible for pushing webpages, images, and videos to users on browsers\u2014<em>caches<\/em> Internet content to deliver it again quickly.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.keycdn.com\/img\/support\/web-cache.png\" alt=\"\" \/><figcaption>Photo by <a href=\"https:\/\/www.keycdn.com\/support\/web-cache\">keycdn<\/a>.<\/figcaption><\/figure>\n\n\n\n<p>Think about it. If you&#8217;re asking for index.html over and over again, eventually, your browser will just push out the version of the file you just looked at\u2014and this is the cache (pun-intended): that might <strong>not<\/strong> be the most recent of that file. <\/p>\n\n\n\n<p>Instead of taking the long, long route back to the server to get that file, your browser is pulling up the version of the file it saved in the cache. It&#8217;s quicker that way. It cuts down on load time to pull the cached version of a file.<\/p>\n\n\n\n<p>Google, in its infinite wisdom, lets you select the cached version when you search:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1348\" height=\"498\" src=\"https:\/\/nmi.cool\/newmediaproduction\/wp-content\/uploads\/sites\/14\/2020\/01\/Screen-Shot-2020-01-29-at-10.56.32-PM.png\" alt=\"A Google search result for the University of Georgia on Wikipedia.\" class=\"wp-image-1314\" srcset=\"https:\/\/nmi.cool\/webdev\/wp-content\/uploads\/sites\/14\/2020\/01\/Screen-Shot-2020-01-29-at-10.56.32-PM.png 1348w, https:\/\/nmi.cool\/webdev\/wp-content\/uploads\/sites\/14\/2020\/01\/Screen-Shot-2020-01-29-at-10.56.32-PM-300x111.png 300w, https:\/\/nmi.cool\/webdev\/wp-content\/uploads\/sites\/14\/2020\/01\/Screen-Shot-2020-01-29-at-10.56.32-PM-1024x378.png 1024w, https:\/\/nmi.cool\/webdev\/wp-content\/uploads\/sites\/14\/2020\/01\/Screen-Shot-2020-01-29-at-10.56.32-PM-768x284.png 768w\" sizes=\"auto, (max-width: 1348px) 100vw, 1348px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2644\" height=\"248\" src=\"https:\/\/nmi.cool\/newmediaproduction\/wp-content\/uploads\/sites\/14\/2020\/01\/Screen-Shot-2020-01-29-at-10.56.54-PM.png\" alt=\"\" class=\"wp-image-1315\" srcset=\"https:\/\/nmi.cool\/webdev\/wp-content\/uploads\/sites\/14\/2020\/01\/Screen-Shot-2020-01-29-at-10.56.54-PM.png 2644w, https:\/\/nmi.cool\/webdev\/wp-content\/uploads\/sites\/14\/2020\/01\/Screen-Shot-2020-01-29-at-10.56.54-PM-300x28.png 300w, https:\/\/nmi.cool\/webdev\/wp-content\/uploads\/sites\/14\/2020\/01\/Screen-Shot-2020-01-29-at-10.56.54-PM-1024x96.png 1024w, https:\/\/nmi.cool\/webdev\/wp-content\/uploads\/sites\/14\/2020\/01\/Screen-Shot-2020-01-29-at-10.56.54-PM-768x72.png 768w, https:\/\/nmi.cool\/webdev\/wp-content\/uploads\/sites\/14\/2020\/01\/Screen-Shot-2020-01-29-at-10.56.54-PM-1536x144.png 1536w, https:\/\/nmi.cool\/webdev\/wp-content\/uploads\/sites\/14\/2020\/01\/Screen-Shot-2020-01-29-at-10.56.54-PM-2048x192.png 2048w\" sizes=\"auto, (max-width: 2644px) 100vw, 2644px\" \/><figcaption>When you select the cached version of a Google search result, a disclaimer appears at the top, explaining results may have changed in the meantime. <\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Are you being cache-fished? <\/h3>\n\n\n\n<p>Caching can happen to anyone, even you. You&#8217;ll notice it particularly in your new role as web developer. When working on your own webpages, ask yourself these questions: <\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Did I make changes to a webpage that appeared when I previewed it?<\/li><li>Did I upload that webpage and all associated files (stylesheets, images, etc.) to the server, in the correct places? <\/li><li>When pulling up that webpage on the browser, was I unable to see any recent changes? <\/li><li>Did refresh (\u2318R on a Mac or &#8220;Control + R&#8221; on a PC) not show any changes?<\/li><\/ol>\n\n\n\n<p>If you answered yes to all of the questions, congrats! You&#8217;re likely being <a href=\"https:\/\/en.wikipedia.org\/wiki\/Catfish:_The_TV_Show\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"cachefished (opens in a new tab)\">cachefished<\/a>. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The solution<\/h3>\n\n\n\n<p>To get out of those murky, cache-filled waters, you&#8217;ll need to clear your cache or perform a hard refresh. <\/p>\n\n\n\n<p>A hard refresh shows you the most recent version of that particular webpage. On Chrome, here&#8217;s how to perform a hard refresh: <\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">Hold down&nbsp;\u2318 cmd&nbsp;and&nbsp;\u21e7 shift&nbsp;key and then press&nbsp;R<\/pre>\n\n\n\n<p>If you&#8217;d like to clear the cache for your entire browser, rather that one specific webpage, select the three dots in the top right corner of Chrome, and navigate to More Tools &gt; Clear Browsing Data:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1018\" height=\"950\" src=\"https:\/\/nmi.cool\/newmediaproduction\/wp-content\/uploads\/sites\/14\/2020\/01\/Screen-Shot-2020-01-29-at-11.14.06-PM.png\" alt=\"A screenshot of Chrome's clear browsing data tool, with browsing history, cookies and other site data, and cached images and files checked off.\" class=\"wp-image-1316\" srcset=\"https:\/\/nmi.cool\/webdev\/wp-content\/uploads\/sites\/14\/2020\/01\/Screen-Shot-2020-01-29-at-11.14.06-PM.png 1018w, https:\/\/nmi.cool\/webdev\/wp-content\/uploads\/sites\/14\/2020\/01\/Screen-Shot-2020-01-29-at-11.14.06-PM-300x280.png 300w, https:\/\/nmi.cool\/webdev\/wp-content\/uploads\/sites\/14\/2020\/01\/Screen-Shot-2020-01-29-at-11.14.06-PM-768x717.png 768w\" sizes=\"auto, (max-width: 1018px) 100vw, 1018px\" \/><figcaption>By checking off the &#8220;Cached images and files,&#8221; you can clear the cache for all of your webpages, rather than just one webpage at a time. <\/figcaption><\/figure><\/div>\n\n\n\n<p>Throughout the duration of this course, I&#8217;d bet cache money you&#8217;ll need to perform one of these operations, especially the hard refresh,<strong> <\/strong>on a regular basis. Pretty soon, you&#8217;ll be able to recognize when you&#8217;re being cached, and know how to clear it immediately.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Not on a Mac? ?<\/h3>\n\n\n\n<p>No worries\u2014you can still perform hard refresh. This handy dandy diagram shows you a variety of hard refresh shortcuts, as well as how to perform a hard fresh on different browsers <a href=\"#footnote-1-1309\" id=\"note-1-1309\" rel=\"footnote\">1<\/a>. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/fabricdigital.co.nz\/assets\/How-to-hard-refresh-browser-infographic.jpg\" alt=\"\" \/><figcaption>Graphic by <a href=\"https:\/\/fabricdigital.co.nz\/blog\/how-to-hard-refresh-your-browser-and-clear-cache\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Ryan Mitchell, Fabric Digital (opens in a new tab)\">Ryan Mitchell, Fabric Digital<\/a>.<\/figcaption><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-background has-blue-gray-background-color has-blue-gray-color\" \/>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/pics.me.me\/the-joy-of-tech-by-nitrozac-snaggy-in-your-minds-33340277.png\" alt=\"A very cheesy comic about a geeky meditation session, involving clearing the cache in your mind's browser and deleting your history, and finally navigating to a blank web page. Four people sit in meditative poses on the floor, legs crossed, eyes closed.\" \/><\/figure><\/div>\n<div class=\"footnotes\"><hr \/><ol><li id=\"footnote-1-1309\" class=\"footnote\"><p> although you should be using Chrome for this course! <a href=\"#note-1-1309\" class=\"footnote-return\">&#8617;<\/a><\/p><\/li><!--\/#footnote-1.footnote--><\/ol><\/div><!--\/#footnotes-->","protected":false},"excerpt":{"rendered":"<p>Cache is pronounced like cash, but the similarities stop there. A cache is a collection of items stored somewhere hidden or inaccessible. Sort of like a secret stash. Here&#8217;s some examples: The smugglers hid a cache of stolen goods in an undisclosed warehouse. This was determined to more efficient than carrying the goods with them. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1309","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/pages\/1309","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/comments?post=1309"}],"version-history":[{"count":0,"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/pages\/1309\/revisions"}],"wp:attachment":[{"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/media?parent=1309"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}