Skip to content

Commit be9265f

Browse files
committed
Lazy load images
1 parent 709bd60 commit be9265f

File tree

3 files changed

+54
-40
lines changed

3 files changed

+54
-40
lines changed

assets/lozad-1.14.0.min.js

+10
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

open-in-web-browser.html

+22-20
Original file line numberDiff line numberDiff line change
@@ -265,7 +265,7 @@ <h2>Chapter 2. The Practice of Front-end Development: Overview</h2>
265265
</section>
266266
<h3>2.1 - How Front-End Developers Are Made</h3>
267267
<p>How exactly does one become a front-end developer? Well, it's complicated. Just consider this road map:</p>
268-
<p><img alt="" src="assets/images/frontend.png" title="https://github.com/kamranahmedse/developer-roadmap"></p>
268+
<p><img alt="" data-src="assets/images/frontend.png" title="https://github.com/kamranahmedse/developer-roadmap"></p>
269269
<p><cite>Image source: <a href="https://github.com/kamranahmedse/developer-roadmap" target="_blank">https://github.com/kamranahmedse/developer-roadmap</a></cite></p>
270270
<p>Today, in general, one can't go to college and expect to graduate with a degree in front-end engineering. And, I rarely hear of or meet front-end developers who suffered through what is likely a deprecated computer science degree or graphic design degree to end up writing HTML, CSS, and JavaScript professionally. From my perspective, most of the people working on the front-end today generally seem to be self-taught from the ground up or cross over into the front-end space from design or computer science fields.</p>
271271
<p>If you were to set out today to become a front-end developer I would loosely strive to follow the process outlined below (Chapter 3 and Chapter 4 will dive into more details on learning resources).</p>
@@ -340,7 +340,7 @@ <h3>2.2 - Front-End Job Titles</h3>
340340
</ol>
341341
</div>
342342
<h3>2.3 - Baseline Web Technologies Employed by Front-End Developers</h3>
343-
<p><img alt="" src="assets/images/web-tech-employed.jpg" title="HTML CSS and JS"></p>
343+
<p><img alt="" data-src="assets/images/web-tech-employed.jpg" title="HTML CSS and JS"></p>
344344
<p>The following core web technologies are employed by front-end developers (consider learning them in this order):</p>
345345
<ol>
346346
<li>Hyper Text Markup Language (aka HTML)</li>
@@ -508,7 +508,7 @@ <h4 id="web-content-accessibility-guidelines-aka-wcag--accessible-rich-internet-
508508
</li>
509509
</ul>
510510
<h3>2.4 - Potential Front-end Developer Skills</h3>
511-
<p><img alt="" src="assets/images/front-end-skills.png" title="http://blog.naustud.io/2015/06/baseline-for-modern-front-end-developers.html"></p>
511+
<p><img alt="" data-src="assets/images/front-end-skills.png" title="http://blog.naustud.io/2015/06/baseline-for-modern-front-end-developers.html"></p>
512512
<p><cite>Image source: <a href="http://blog.naustud.io/2015/06/baseline-for-modern-front-end-developers.html" target="_blank">http://blog.naustud.io/2015/06/baseline-for-modern-front-end-developers.html</a></cite></p>
513513
<p>A basic to advanced understanding of HTML, CSS, DOM, JavaScript, HTTP/URL, and web browsers is assumed for any type of professional front-end developer role.</p>
514514
<p>Beyond the skills just mentioned, a front-end developer might also be specifically skilled in one or more of the following:</p>
@@ -598,7 +598,7 @@ <h3>2.5 - Front-End Developers Develop For...</h3>
598598
<a href="https://en.wikipedia.org/wiki/Internet_of_things" target="_blank">Things</a> (i.e., anything you can imagine, car, refrigerator, lights, thermostat, etc.)
599599
</li>
600600
</ul>
601-
<p><img alt="" src="assets/images/growth-iot.jpg" title="https://www.enterpriseirregulars.com/104084/roundup-internet-things-forecasts-market-estimates-2015/"></p>
601+
<p><img alt="" data-src="assets/images/growth-iot.jpg" title="https://www.enterpriseirregulars.com/104084/roundup-internet-things-forecasts-market-estimates-2015/"></p>
602602
<p><cite>Image source: <a href="https://www.enterpriseirregulars.com/104084/roundup-internet-things-forecasts-market-estimates-2015/" target="_blank">https://www.enterpriseirregulars.com/104084/roundup-internet-things-forecasts-market-estimates-2015/</a></cite></p>
603603
<p>Generally speaking, front-end technologies can run on the aforementioned operating systems and devices using the following run time web platform scenarios:</p>
604604
<ul>
@@ -632,11 +632,11 @@ <h3>2.6 - Front-End on a Team</h3>
632632
<li>QA Engineers / Testers</li>
633633
</ul>
634634
<h3>2.7 - Generalist/Full-Stack Myth</h3>
635-
<p><img alt="Full Stack Developer" src="assets/images/full-stack.jpg"></p>
635+
<p><img alt="Full Stack Developer" data-src="assets/images/full-stack.jpg"></p>
636636
<p>The term "Full-Stack" developer has come to take on several meanings. So many, that not one meaning is clear when the term is used. Just consider the results from the two surveys shown below. These results might lead one to believe that being a full-stack developer is commonplace. But, in my almost 20 years of experience, this is anything but the case in a professional context.</p>
637-
<p><img alt="" src="assets/images/fullstack1.png" title="https://medium.freecodecamp.com/we-asked-15-000-people-who-they-are-and-how-theyre-learning-to-code-4104e29b2781#.ngcpn8nlz"></p>
637+
<p><img alt="" data-src="assets/images/fullstack1.png" title="https://medium.freecodecamp.com/we-asked-15-000-people-who-they-are-and-how-theyre-learning-to-code-4104e29b2781#.ngcpn8nlz"></p>
638638
<p><cite>Image source: <a href="https://medium.freecodecamp.com/we-asked-15-000-people-who-they-are-and-how-theyre-learning-to-code-4104e29b2781#.ngcpn8nlz" target="_blank">https://medium.freecodecamp.com/we-asked-15-000-people-who-they-are-and-how-theyre-learning-to-code-4104e29b2781#.ngcpn8nlz</a></cite></p>
639-
<p><img alt="" src="assets/images/fullstack2.png" title="https://insights.stackoverflow.com/survey/2017#developer-profile-specific-developer-types"></p>
639+
<p><img alt="" data-src="assets/images/fullstack2.png" title="https://insights.stackoverflow.com/survey/2017#developer-profile-specific-developer-types"></p>
640640
<p><cite>Image source: <a href="https://insights.stackoverflow.com/survey/2018/#developer-profile" target="_blank">https://insights.stackoverflow.com/survey/2017#developer-profile-specific-developer-types</a></cite></p>
641641
<p>The roles to design and develop a website or web application require a deep set of skills and vast experience in the area of visual design, UI/interaction design, <a href="https://github.com/kamranahmedse/developer-roadmap#-front-end-roadmap" target="_blank">front-end development</a>, and <a href="https://github.com/kamranahmedse/developer-roadmap#-back-end-roadmap" target="_blank">back-end development</a>. Any person who can fill one or more of these 4 roles at a professional level is an extremely rare commodity.</p>
642642
<p>Pragmatically, you should seek to be, or seek to hire, an expert in one of these roles (i.e. Visual Design, Interaction Design/IA, Front-end Dev, Back-end Dev). Those who claim to operate at an expert level at one or more of these roles are exceptionally rare.</p>
@@ -758,7 +758,7 @@ <h3>3.1. - Learn Internet/Web</h3>
758758
</blockquote>
759759
<p>
760760
<a href="assets/images/how-the-internet-works.jpg">
761-
<img alt="How the internet works" src="assets/images/how-the-internet-works.jpg" title="https://www.helloitsliam.com/2014/12/20/how-the-internet-works-infographic/">
761+
<img alt="How the internet works" data-src="assets/images/how-the-internet-works.jpg" title="https://www.helloitsliam.com/2014/12/20/how-the-internet-works-infographic/">
762762
</a>
763763
</p>
764764
<p><cite>Image source: <a href="https://www.helloitsliam.com/2014/12/20/how-the-internet-works-infographic/" target="_blank">https://www.helloitsliam.com/2014/12/20/how-the-internet-works-infographic/</a></cite></p>
@@ -787,7 +787,7 @@ <h3>3.1. - Learn Internet/Web</h3>
787787
<a href="http://www.dontfeartheinternet.com/" target="_blank">Don’t Fear the Internet</a>
788788
</li>
789789
</ul>
790-
<p><img alt="" src="assets/images/who-runs-the-internet-infographic.jpg" title="http://www.bitrebels.com/technology/find-out-who-runs-the-internet-chart/"></p>
790+
<p><img alt="" data-src="assets/images/who-runs-the-internet-infographic.jpg" title="http://www.bitrebels.com/technology/find-out-who-runs-the-internet-chart/"></p>
791791
<p><cite>Image source: <a href="http://www.bitrebels.com/technology/find-out-who-runs-the-internet-chart/" target="_blank">http://www.bitrebels.com/technology/find-out-who-runs-the-internet-chart/</a></cite></p>
792792
<h3>3.2. - Learn Web Browsers</h3>
793793
<blockquote>
@@ -809,7 +809,7 @@ <h4 id="the-most-commonly-used-browsers-on-any-device-are">The <a href="https://
809809
<a href="https://www.apple.com/safari/" target="_blank">Safari</a> (engine: <a href="https://en.wikipedia.org/wiki/WebKit" target="_blank">Webkit</a> + <a href="https://trac.webkit.org/wiki/SquirrelFish" target="_blank">SquirrelFish</a>)
810810
</li>
811811
</ol>
812-
<p><img alt="" src="assets/images/statcounter.png" title="http://gs.statcounter.com/browser-market-share"></p>
812+
<p><img alt="" data-src="assets/images/statcounter.png" title="http://gs.statcounter.com/browser-market-share"></p>
813813
<p><cite>Image source: <a href="http://gs.statcounter.com/browser-market-share" target="_blank">http://gs.statcounter.com/browser-market-share</a></cite></p>
814814
<h4 id="evolution-of-browsers--web-technologies-ie-apis">Evolution of Browsers &amp; Web Technologies (i.e., APIs)</h4>
815815
<ul>
@@ -882,7 +882,7 @@ <h3 id="learn-domain-name-system-aka-dns">3.3 - Learn Domain Name System (aka DN
882882
<p>The Domain Name System (DNS) is a hierarchical distributed naming system for computers, services, or any resource connected to the Internet or a private network. It associates various information with domain names assigned to each of the participating entities. Most prominently, it translates domain names, which can be easily memorized by humans, to the numerical IP addresses needed for the purpose of computer services and devices worldwide. The Domain Name System is an essential component of the functionality of most Internet services because it is the Internet's primary directory service.</p>
883883
<p><cite><a href="https://en.wikipedia.org/wiki/Domain_Name_System" target="_blank">Wikipedia</a></cite></p>
884884
</blockquote>
885-
<p><img alt="" src="assets/images/how_dns_works.jpg" title="http://www.digital-digest.com/blog/DVDGuy/wp-content/uploads/2011/11/how_dns_works.jpg"></p>
885+
<p><img alt="" data-src="assets/images/how_dns_works.jpg" title="http://www.digital-digest.com/blog/DVDGuy/wp-content/uploads/2011/11/how_dns_works.jpg"></p>
886886
<p><cite>Image source: <a href="http://www.digital-digest.com/blog/DVDGuy/wp-content/uploads/2011/11/how_dns_works.jpg" target="_blank">http://www.digital-digest.com/blog/DVDGuy/wp-content/uploads/2011/11/how_dns_works.jpg</a></cite></p>
887887
<ul>
888888
<li>
@@ -1006,7 +1006,7 @@ <h4>General Learning:</h4>
10061006
<a href="https://www.udemy.com/web-hosting-101/" target="_blank">Web Hosting 101: Get Your Website Live on the Web in No Time</a> [video]
10071007
</li>
10081008
</ul>
1009-
<p><img alt="" src="assets/images/what-is-web-hosting-infographic.jpg" title="https://firstsiteguide.com/wp-content/uploads/2016/06/what-is-web-hosting-infographic.jpg"></p>
1009+
<p><img alt="" data-src="assets/images/what-is-web-hosting-infographic.jpg" title="https://firstsiteguide.com/wp-content/uploads/2016/06/what-is-web-hosting-infographic.jpg"></p>
10101010
<p><cite>Image source: <a href="https://firstsiteguide.com/wp-content/uploads/2016/06/what-is-web-hosting-infographic.jpg" target="_blank">https://firstsiteguide.com/wp-content/uploads/2016/06/what-is-web-hosting-infographic.jpg</a></cite></p>
10111011
<h3>3.6 - Learn General Front-End Development</h3>
10121012
<ul>
@@ -1321,7 +1321,7 @@ <h3>3.9 - Learn Search Engine Optimization</h3>
13211321
<p>Search engine optimization (SEO) is the process of affecting the visibility of a website or a web page in a search engine's unpaid results — often referred to as "natural," "organic," or "earned" results. In general, the earlier (or higher ranked on the search results page), and more frequently a site appears in the search results list, the more visitors it will receive from the search engine's users. SEO may target different kinds of search, including image search, local search, video search, academic search, news search and industry-specific vertical search engines.</p>
13221322
<p><cite><a href="https://en.wikipedia.org/wiki/Search_engine_optimization" target="_blank">Wikipedia</a></cite></p>
13231323
</blockquote>
1324-
<p><img alt="" src="assets/images/how-does-seo-work.jpg" title="https://visual.ly/community/infographic/computers/how-does-seo-work"></p>
1324+
<p><img alt="" data-src="assets/images/how-does-seo-work.jpg" title="https://visual.ly/community/infographic/computers/how-does-seo-work"></p>
13251325
<p><cite>Image source: <a href="https://visual.ly/community/infographic/computers/how-does-seo-work" target="_blank">https://visual.ly/community/infographic/computers/how-does-seo-work</a></cite></p>
13261326
<h4>General Learning:</h4>
13271327
<ul>
@@ -1837,7 +1837,7 @@ <h4>Standards/Specifications:</h4>
18371837
</li>
18381838
</ul>
18391839
<h3>3.15 - Learn Web/Browser APIs</h3>
1840-
<p><img alt="" src="assets/images/web-api.png" title="http://www.evolutionoftheweb.com/"></p>
1840+
<p><img alt="" data-src="assets/images/web-api.png" title="http://www.evolutionoftheweb.com/"></p>
18411841
<p><cite>Image source: <a href="http://www.evolutionoftheweb.com/" target="_blank">http://www.evolutionoftheweb.com/</a></cite></p>
18421842
<p>The BOM (Browser Object Model) and the DOM (Document Object Model) are not the only browser APIs that are made available on the web platform inside of browsers. Everything that is not specifically the DOM or BOM, but an interface for programming the browser could be considered a web or browser API (tragically in the past some of these APIs have been called HTML5 APIs which confuses their own specifics/standardize with the actual HTML5 specification specifying the HTML5 markup language). Note that web or browser APIs do include device APIs (e.g., <a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getBattery" target="_blank"><code>Navigator.getBattery()</code></a>) that are available through the browser on tablet and phones devices.</p>
18431843
<p>You should be aware of and learn, where appropriate, web/browser APIs. A good tool to use to familiarize oneself with all of these APIs would be to investigate the <a href="https://html5test.com/compare/browser/index.html" target="_blank">HTML5test.com results for the 5 most current browsers</a>.</p>
@@ -2605,7 +2605,7 @@ <h3>3.38 - Learn Web/Browser/App Security</h3>
26052605
</li>
26062606
</ul>
26072607
<h3>3.39 - Learn Multi-Device Development</h3>
2608-
<p><img alt="" src="assets/images/things.jpg" title="http://bradfrost.com/blog/post/this-is-the-web/"></p>
2608+
<p><img alt="" data-src="assets/images/things.jpg" title="http://bradfrost.com/blog/post/this-is-the-web/"></p>
26092609
<p><cite>Image source: <a href="http://bradfrost.com/blog/post/this-is-the-web/" target="_blank">http://bradfrost.com/blog/post/this-is-the-web/</a></cite></p>
26102610
<p>A website or web application can run on a wide range of computers, laptops, tablets and phones, as well as a handful of new devices (watches, thermostats, fridges, etc.). How you determine what devices you'll support and how you will develop to support those devices is called, "multi-device development strategy". Below, I list the most common multi-device development strategies.</p>
26112611
<ul>
@@ -2918,7 +2918,7 @@ <h4 id="shareable--runnable-code-editors">Shareable &amp; Runnable Simple Code E
29182918
</li>
29192919
</ul>
29202920
<p>I recommending using <a href="https://code.visualstudio.com/" target="_blank">Visual Studio Code</a> because of the quality of the tool and the continuous improvements made to the editor that likely won't stop or slow due to the fact that Microsoft is behind the tool. It is widely used:</p>
2921-
<p><img src="assets/images/vscode.png"></p>
2921+
<p><img data-src="assets/images/vscode.png"></p>
29222922
<p><cite>Image source: <a href="https://2018.stateofjs.com/other-tools/text_editors" target="_blank">https://2018.stateofjs.com/other-tools/text_editors</a></cite></p>
29232923
<h3>5.7 - Browser Tools</h3>
29242924
<h4 id="js-utilities-to-fix-browsers">JS Utilities to fix Browsers:</h4>
@@ -5313,11 +5313,13 @@ <h4>Front-End Communities</h4>
53135313
</div>
53145314
</div>
53155315
</div>
5316-
<script src="assets/slideout.min.js">
5317-
</script>
5318-
<script src="assets/jquery-3.3.1.slim.min.js">
5319-
</script>
5316+
<script src="assets/slideout.min.js"></script>
5317+
<script src="assets/jquery-3.3.1.slim.min.js"></script>
5318+
<script src="assets/lozad-1.14.0.min.js"></script>
53205319
<script>
5320+
var observer = lozad('[data-src]');
5321+
observer.observe();
5322+
53215323
// Create slide out TOC
53225324
var slideout = new Slideout({
53235325
panel: document.getElementById("panel"),

0 commit comments

Comments
 (0)