├── .eleventy.js ├── .gitignore ├── README.md ├── cloudcannon.config.yml ├── package.json ├── siteicon.png └── src ├── _data ├── googlefonts.js └── metadata.json ├── _includes └── layout.liquid ├── _schemas └── site.md ├── feed.njk ├── index.html ├── logo.png ├── sites ├── a-comprehensive-guide-to-web-font-loading.md ├── ajax.md ├── atomic.md ├── axiomatic.md ├── bad-browsers.md ├── bake.md ├── bem.md ├── choose-boring-technology.md ├── css.md ├── cutting-the-mustard.md ├── dao.md ├── divide.md ├── ems.md ├── everything-you-know-about-web-design-just-changed-intrinsic-web-design.md ├── fast.md ├── frameworks.md ├── grain.md ├── grid.md ├── how-smashing-magazine-manages-content-migration-from-wordpress-to-jamstack.md ├── html.md ├── improving-ux-through-front-end-performance.md ├── introducing-the-new-responsive-designed-bostonglobe-com.md ├── journey.md ├── lemons.md ├── mentor.md ├── mindset.md ├── old-css.md ├── oocss.md ├── page-weight-matters.md ├── pantsuit.md ├── pe.md ├── personal.md ├── progressive-enhancement-is-still-important.md ├── react-performance.md ├── researching-the-performance-costs-of-javascript-mvc-frameworks.md ├── resilient.md ├── rwd.md ├── sites.json ├── sliding-doors.md ├── smacss.md ├── solar.md ├── ssg.md ├── textual.md ├── the-unreasonable-effectiveness-of-simple-html.md ├── tools.md ├── truncation.md ├── uris.md ├── veil.md └── zen.md ├── style.css └── uploads ├── aaron-swartz-profile.jpg ├── mrmrs-logo.svg ├── w3c-logo.svg └── zengardenicon.png /.eleventy.js: -------------------------------------------------------------------------------- 1 | const path = require("node:path"); 2 | const pluginRss = require("@11ty/eleventy-plugin-rss"); 3 | const Image = require("@11ty/eleventy-img"); 4 | 5 | module.exports = function(eleventyConfig) { 6 | eleventyConfig.ignores.add("src/_schemas/*"); 7 | 8 | eleventyConfig.addPassthroughCopy("./src/*.{css,png}"); 9 | 10 | eleventyConfig.addPassthroughCopy({ 11 | "node_modules/@11ty/is-land/is-land.js": "public/is-land.js", 12 | "node_modules/lite-youtube-embed/src/lite-yt-embed.js": "public/lite-yt-embed.js", 13 | "node_modules/lite-youtube-embed/src/lite-yt-embed.css": "public/lite-yt-embed.css", 14 | "node_modules/@zachleat/filter-container/filter-container.js": "public/filter-container.js", 15 | "node_modules/@zachleat/browser-window/browser-window.js": "public/browser-window.js", 16 | }); 17 | 18 | eleventyConfig.addPlugin(pluginRss); 19 | 20 | eleventyConfig.setLiquidOptions({ 21 | jsTruthy: true 22 | }); 23 | 24 | eleventyConfig.addFilter("toSlugList", (subject) => { 25 | return subject.filter(key => key !== "sites") 26 | .map(key => eleventyConfig.getFilter("slugify")(key)) 27 | .join(","); 28 | }); 29 | 30 | eleventyConfig.addFilter("keys", (subject) => { 31 | return Object.keys(subject).filter(key => { 32 | return key !== "all" && key !== "sites"; 33 | }); 34 | }); 35 | 36 | eleventyConfig.addFilter("normalize", (subject, delimiter) => { 37 | if(Array.isArray(subject)) { 38 | return subject.join(delimiter || ", "); 39 | } 40 | return subject; 41 | }); 42 | 43 | eleventyConfig.addFilter("toDateFormat", date => { 44 | return date.getFullYear(); 45 | }); 46 | 47 | async function remoteImage(url, title, isLCP = false, useOpenGraph = false) { 48 | let remoteUrl = `https://v1.${useOpenGraph ? "opengraph" : "screenshot"}.11ty.dev/${encodeURIComponent(url)}/opengraph/` 49 | let metadata = await Image(remoteUrl, { 50 | widths: [400, 800], 51 | formats: ["webp", "jpeg"], 52 | outputDir: "./_site/screenshots/", 53 | urlPath: "/screenshots/", 54 | }); 55 | 56 | let imageAttributes = { 57 | alt: `Screenshot of ${title}`, 58 | class: "site-screenshot", 59 | sizes: "(min-width: 37.5em) 50vw, 100vw", 60 | loading: isLCP ? "eager" : "lazy", 61 | fetchpriority: isLCP ? "high" : "auto", 62 | decoding: "async", 63 | }; 64 | 65 | // You bet we throw an error on a missing alt (alt="" works okay) 66 | return Image.generateHTML(metadata, imageAttributes); 67 | } 68 | 69 | eleventyConfig.addShortcode("embedScreenshot", (url, title, isLCP) => remoteImage(url, title, isLCP)); 70 | eleventyConfig.addShortcode("embedOpenGraph", (url, title, isLCP) => remoteImage(url, title, isLCP, true)); 71 | 72 | eleventyConfig.addShortcode("embedFavicon", async function(filepath, title) { 73 | let metadata = await Image(path.join("./src/", filepath), { 74 | widths: [64], 75 | formats: ["png"], 76 | outputDir: "./_site/img/", 77 | urlPath: "/img/", 78 | }); 79 | 80 | let imageAttributes = { 81 | alt: `Favicon for ${title}`, 82 | class: "site-favicon", 83 | loading: "lazy", 84 | decoding: "async", 85 | }; 86 | 87 | // You bet we throw an error on a missing alt (alt="" works okay) 88 | return Image.generateHTML(metadata, imageAttributes); 89 | }); 90 | 91 | eleventyConfig.addShortcode("embedYouTube", function(slug, label) { 92 | let fallback = `https://i.ytimg.com/vi/${slug}/maxresdefault.jpg`; 93 | 94 | return ` 95 | 102 | `; 103 | }); 104 | 105 | return { 106 | dir: { 107 | input: "src", 108 | }, 109 | }; 110 | }; -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | _site 2 | node_modules 3 | package-lock.json 4 | .cache -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # educational-sensational-inspirational-foundational 2 | 3 | A website dedicated to a history of foundational web development blog posts. 4 | 5 | ## Usage 6 | 7 | Start the development server: 8 | 9 | ``` 10 | npm start 11 | ``` 12 | 13 | Run a production build: 14 | 15 | ``` 16 | npm run build 17 | ``` -------------------------------------------------------------------------------- /cloudcannon.config.yml: -------------------------------------------------------------------------------- 1 | _inputs: 2 | date: 3 | type: date 4 | label: Published on 5 | comment: The blog post or site was published on this day. 6 | layout: 7 | hidden: true 8 | tags: 9 | type: multiselect 10 | options: 11 | allow_create: true 12 | empty_type: array 13 | values: 14 | - Accessibility 15 | - CSS 16 | - HTML 17 | - JavaScript 18 | - Performance 19 | - Progressive Enhancement 20 | - Responsive Web Design 21 | - Web Design 22 | collections_config: 23 | sites: 24 | icon: link 25 | preview: 26 | gallery: 27 | text: " " 28 | _enabled_editors: 29 | - data 30 | schemas: 31 | default: 32 | path: src/_schemas/site.md 33 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@zachleat/educational-sensational-inspirational-foundational", 3 | "private": true, 4 | "version": "1.0.0", 5 | "description": "A historical record of foundational web development blog posts.", 6 | "scripts": { 7 | "start": "npx @11ty/eleventy --serve", 8 | "build": "npx @11ty/eleventy" 9 | }, 10 | "author": { 11 | "name": "Zach Leatherman", 12 | "email": "zachleatherman@gmail.com", 13 | "url": "https://zachleat.com/" 14 | }, 15 | "license": "MIT", 16 | "engines": { 17 | "node": ">=14" 18 | }, 19 | "devDependencies": { 20 | "@11ty/eleventy": "^2.0.1", 21 | "@11ty/eleventy-fetch": "^4.0.0", 22 | "@11ty/eleventy-img": "^3.1.1", 23 | "@11ty/eleventy-plugin-rss": "^1.2.0" 24 | }, 25 | "dependencies": { 26 | "@11ty/is-land": "^4.0.0", 27 | "@zachleat/browser-window": "^1.0.12", 28 | "@zachleat/filter-container": "^3.0.4", 29 | "lite-youtube-embed": "^0.2.0" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /siteicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zachleat/educational-sensational-inspirational-foundational/f8b90123435d40ace2a3fb62a3c76322c8eb7e79/siteicon.png -------------------------------------------------------------------------------- /src/_data/googlefonts.js: -------------------------------------------------------------------------------- 1 | const EleventyFetch = require("@11ty/eleventy-fetch"); 2 | 3 | module.exports = async function() { 4 | try { 5 | let css = await EleventyFetch("https://fonts.googleapis.com/css2?family=Poppins:wght@500;900&display=swap", { 6 | duration: "1d", 7 | type: "text", 8 | directory: ".cache/eleventy-fetch/", 9 | fetchOptions: { 10 | headers: { 11 | "user-agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36" 12 | } 13 | } 14 | }); 15 | return css; 16 | } catch(e) { 17 | console.log( "Failed getting Google Fonts CSS, returning ''" ); 18 | return ""; 19 | } 20 | }; 21 | -------------------------------------------------------------------------------- /src/_data/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Educational Sensational Inspirational Foundational", 3 | "subtitle": "A historical record of foundational web development blog posts.", 4 | "language": "en", 5 | "url": "https://esif.dev/" 6 | } -------------------------------------------------------------------------------- /src/_includes/layout.liquid: -------------------------------------------------------------------------------- 1 | --- 2 | title: Educational Sensational Inspirational Foundational 3 | --- 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | {{ title }} 13 | 14 | 15 | 16 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | {{ content }} 39 | 40 | -------------------------------------------------------------------------------- /src/_schemas/site.md: -------------------------------------------------------------------------------- 1 | --- 2 | url: "" 3 | title: "" 4 | author: "" 5 | date: null 6 | skip_screenshot: false 7 | use_opengraph: false 8 | favicon_override_image_path: "" 9 | tags: [] 10 | --- -------------------------------------------------------------------------------- /src/feed.njk: -------------------------------------------------------------------------------- 1 | ---json 2 | { 3 | "permalink": "feed.xml", 4 | "eleventyExcludeFromCollections": true 5 | } 6 | --- 7 | 8 | 9 | 10 | {{ metadata.title }} 11 | {{ metadata.url }} 12 | 13 | {{ metadata.subtitle }} 14 | {{ metadata.language }} 15 | {%- for post in collections.sites | reverse %} 16 | {%- set id = post.inputPath | absoluteUrl(metadata.url) %} 17 | 18 | {{ post.data.title }} 19 | {{ post.data.url }} 20 | 21 | {{ post.date | dateToRfc822 }} 22 | {{ post.data.author | normalize }} 23 | {{ id }} 24 | 25 | {%- endfor %} 26 | 27 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: Educational Sensational Inspirational Foundational 3 | layout: layout.liquid 4 | video: 5 | url: https://www.youtube.com/watch?v=yXcxvBJuULU 6 | title: From Zero to CMS in 2 Minutes with CloudCannon and Eleventy 7 | poster: https://i.ytimg.com/vi/yXcxvBJuULU/maxresdefault.jpg 8 | --- 9 |
10 |

11 | Educational Sensational Inspirational Foundational 12 |

13 |
14 |
15 |
16 |

A historical record of foundational web development blog posts. Favicon of {{ video.url }}Watch From Zero to CMS in 2 Minutes with CloudCannon and Eleventy (on YouTube) to learn how this web site was made.

17 |

This collection of ×{{ collections.sites | size }} blog posts and web sites is ordered chronologically. Subscribe to the RSS feed.

18 |
19 | 20 |
21 |
22 | Filters 23 | 24 | {%- assign taglist = collections | keys | sort %} 25 | {%- for tag in taglist %} 26 | 27 | {%- endfor %} 28 |
29 |
30 | {%- for site in collections.sites %} 31 | {%- if forloop.first %} 32 |
33 | {%- endif %} 34 |
35 | 36 | {%- if site.data.favicon_override_image_path %} 37 | {% embedFavicon site.data.favicon_override_image_path, site.data.title %} 38 | {%- else -%} 39 | Favicon of {{ site.data.url }} 40 | {%- endif -%} 41 | {{ site.data.title }} 42 | 43 |

44 | {%- if site.data.author %}{{ site.data.author | normalize }}{% endif %} 45 | {%- if site.date %} (){% endif %} 46 | Edit 47 |

48 |
49 |
50 | {%- if not site.data.skip_screenshot %} 51 | 52 | 53 | 54 | {%- if site.data.use_opengraph %} 55 | {%- embedOpenGraph site.data.url, site.data.title, forloop.first %} 56 | {%- else %} 57 | {%- embedScreenshot site.data.url, site.data.title, forloop.first %} 58 | {%- endif %} 59 | 60 | 61 | 62 | {%- endif %} 63 |
64 | {%- assign showVideo = forloop.length | divided_by: 2 | floor %} 65 | {%- if showVideo == forloop.index %} 66 |
67 |
68 | 69 | 70 | Favicon of {{ video.url }} 71 | Learn how this was built: {{ video.title }} 72 | 73 | {% embedScreenshot video.poster, video.title %} 74 | 75 |
76 | {%- if not forloop.last %} 77 |
78 | {%- endif %} 79 | {%- endif %} 80 | {%- if forloop.last %} 81 |
82 | {%- endif %} 83 | {%- endfor %} 84 | 85 |
86 | 96 | -------------------------------------------------------------------------------- /src/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zachleat/educational-sensational-inspirational-foundational/f8b90123435d40ace2a3fb62a3c76322c8eb7e79/src/logo.png -------------------------------------------------------------------------------- /src/sites/a-comprehensive-guide-to-web-font-loading.md: -------------------------------------------------------------------------------- 1 | --- 2 | _schema: default 3 | url: https://www.zachleat.com/web/comprehensive-webfonts/ 4 | title: A Comprehensive Guide to Font Loading Strategies 5 | author: Zach Leatherman 6 | date: 2016-07-12T00:00:00Z 7 | skip_screenshot: false 8 | use_opengraph: true 9 | favicon_override_image_path: '' 10 | tags: 11 | - Web Fonts 12 | - CSS 13 | - Performance 14 | --- 15 | -------------------------------------------------------------------------------- /src/sites/ajax.md: -------------------------------------------------------------------------------- 1 | --- 2 | _schema: default 3 | url: >- 4 | https://web.archive.org/web/20150910072359/https://adaptivepath.org/ideas/ajax-new-approach-web-applications/ 5 | title: 'Ajax: A New Approach to Web Applications' 6 | author: Jesse James Garrett 7 | date: 2005-02-18T00:00:00Z 8 | skip_screenshot: false 9 | use_opengraph: false 10 | favicon_override_image_path: '' 11 | tags: 12 | - JavaScript 13 | --- 14 | -------------------------------------------------------------------------------- /src/sites/atomic.md: -------------------------------------------------------------------------------- 1 | --- 2 | _schema: default 3 | url: https://bradfrost.com/blog/post/atomic-web-design/ 4 | title: Atomic Web Design 5 | author: Brad Frost 6 | date: 2013-06-10T00:00:00Z 7 | skip_screenshot: false 8 | use_opengraph: true 9 | favicon_override_image_path: '' 10 | tags: 11 | - Web Design 12 | --- 13 | -------------------------------------------------------------------------------- /src/sites/axiomatic.md: -------------------------------------------------------------------------------- 1 | --- 2 | _schema: default 3 | url: https://alistapart.com/article/axiomatic-css-and-lobotomized-owls/ 4 | title: Axiomatic CSS and Lobotomized Owls 5 | author: Heydon Pickering 6 | date: 2014-10-21T00:00:00Z 7 | skip_screenshot: false 8 | favicon_override_image_path: '' 9 | tags: 10 | - CSS 11 | --- 12 | -------------------------------------------------------------------------------- /src/sites/bad-browsers.md: -------------------------------------------------------------------------------- 1 | --- 2 | _schema: default 3 | url: https://alistapart.com/article/tohell/ 4 | title: To Hell With Bad Browsers 5 | author: Jeffrey Zeldman 6 | date: 2001-02-16T00:00:00Z 7 | skip_screenshot: false 8 | favicon_override_image_path: '' 9 | tags: 10 | - Web Standards 11 | - Progressive Enhancement 12 | --- 13 | -------------------------------------------------------------------------------- /src/sites/bake.md: -------------------------------------------------------------------------------- 1 | --- 2 | _schema: default 3 | url: http://www.aaronsw.com/weblog/000404 4 | title: Bake, Don’t Fry 5 | author: Aaron Swartz 6 | date: 2002-07-09T00:00:00Z 7 | skip_screenshot: false 8 | favicon_override_image_path: /uploads/aaron-swartz-profile.jpg 9 | tags: 10 | - Jamstack 11 | --- 12 | -------------------------------------------------------------------------------- /src/sites/bem.md: -------------------------------------------------------------------------------- 1 | --- 2 | _schema: default 3 | url: >- 4 | https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/ 5 | title: MindBEMding – getting your head ’round BEM syntax 6 | author: Harry Roberts 7 | date: 2013-01-25T00:00:00Z 8 | skip_screenshot: false 9 | favicon_override_image_path: '' 10 | tags: 11 | - CSS 12 | --- 13 | -------------------------------------------------------------------------------- /src/sites/choose-boring-technology.md: -------------------------------------------------------------------------------- 1 | --- 2 | _schema: default 3 | url: https://mcfunley.com/choose-boring-technology 4 | title: Choose Boring Technology 5 | author: Dan McKinley 6 | date: 2015-03-30T00:00:00Z 7 | skip_screenshot: false 8 | favicon_override_image_path: '' 9 | --- 10 | -------------------------------------------------------------------------------- /src/sites/css.md: -------------------------------------------------------------------------------- 1 | --- 2 | _schema: default 3 | url: https://thoughtbot.com/blog/tailwind-and-the-femininity-of-css 4 | title: Tailwind and the Femininity of CSS 5 | author: Elaina Natario 6 | date: 2021-12-15T00:00:00Z 7 | skip_screenshot: false 8 | favicon_override_image_path: '' 9 | tags: 10 | - CSS 11 | --- 12 | -------------------------------------------------------------------------------- /src/sites/cutting-the-mustard.md: -------------------------------------------------------------------------------- 1 | --- 2 | _schema: default 3 | url: https://responsivenews.co.uk/post/18948466399/cutting-the-mustard 4 | title: Cutting the Mustard 5 | author: BBC News 6 | date: 2012-03-08T00:00:00Z 7 | skip_screenshot: false 8 | use_opengraph: false 9 | favicon_override_image_path: '' 10 | tags: 11 | - JavaScript 12 | - Progressive Enhancement 13 | --- 14 | -------------------------------------------------------------------------------- /src/sites/dao.md: -------------------------------------------------------------------------------- 1 | --- 2 | _schema: default 3 | url: https://alistapart.com/article/dao/ 4 | title: A Dao of Web Design 5 | author: John Allsopp 6 | date: 2000-04-07T00:00:00Z 7 | skip_screenshot: false 8 | favicon_override_image_path: '' 9 | tags: 10 | - Web Design 11 | --- 12 | -------------------------------------------------------------------------------- /src/sites/divide.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: The Great Divide 3 | url: https://css-tricks.com/the-great-divide/ 4 | author: Chris Coyier 5 | date: "2019-01" 6 | use_opengraph: true 7 | --- -------------------------------------------------------------------------------- /src/sites/ems.md: -------------------------------------------------------------------------------- 1 | --- 2 | _schema: default 3 | url: https://clagnut.com/blog/348/ 4 | title: How to size text using ems 5 | author: Richard Rutter 6 | date: 2004-05-18T00:00:00Z 7 | skip_screenshot: false 8 | favicon_override_image_path: '' 9 | tags: 10 | - CSS 11 | - Accessibility 12 | --- 13 | -------------------------------------------------------------------------------- /src/sites/everything-you-know-about-web-design-just-changed-intrinsic-web-design.md: -------------------------------------------------------------------------------- 1 | --- 2 | _schema: default 3 | url: https://talks.jensimmons.com/jugbbe 4 | title: Everything You Know About Web Design Just Changed (Intrinsic Web Design) 5 | author: Jen Simmons 6 | date: 2018-12-10T00:00:00Z 7 | skip_screenshot: false 8 | favicon_override_image_path: '' 9 | tags: 10 | - Web Design 11 | - CSS 12 | --- 13 | -------------------------------------------------------------------------------- /src/sites/fast.md: -------------------------------------------------------------------------------- 1 | --- 2 | _schema: default 3 | url: https://dev.to/tigt/making-the-worlds-fastest-website-and-other-mistakes-56na 4 | title: Making the world’s fastest website, and other mistakes 5 | author: Taylor Hunt 6 | date: 2022-05-15T00:00:00Z 7 | skip_screenshot: false 8 | use_opengraph: true 9 | favicon_override_image_path: '' 10 | tags: 11 | - Performance 12 | --- 13 | -------------------------------------------------------------------------------- /src/sites/frameworks.md: -------------------------------------------------------------------------------- 1 | --- 2 | _schema: default 3 | url: https://timkadlec.com/remembers/2020-04-21-the-cost-of-javascript-frameworks/ 4 | title: The Cost of Javascript Frameworks 5 | author: Tim Kadlec 6 | date: 2020-04-21T00:00:00Z 7 | skip_screenshot: false 8 | favicon_override_image_path: '' 9 | tags: 10 | - Performance 11 | --- 12 | -------------------------------------------------------------------------------- /src/sites/grain.md: -------------------------------------------------------------------------------- 1 | --- 2 | _schema: default 3 | url: https://frankchimero.com/blog/2015/the-webs-grain/ 4 | title: The Web’s Grain 5 | author: Frank Chimero 6 | date: 2015-02-18T00:00:00Z 7 | skip_screenshot: false 8 | favicon_override_image_path: '' 9 | tags: 10 | - Web Design 11 | --- 12 | -------------------------------------------------------------------------------- /src/sites/grid.md: -------------------------------------------------------------------------------- 1 | --- 2 | _schema: default 3 | url: https://css-irl.info/video-building-complex-layouts-future-sync/ 4 | title: Building Complex Layouts with CSS Grid 5 | author: Michelle Barker 6 | date: 2019-06-15T00:00:00Z 7 | skip_screenshot: false 8 | use_opengraph: true 9 | favicon_override_image_path: '' 10 | tags: 11 | - CSS 12 | --- 13 | -------------------------------------------------------------------------------- /src/sites/how-smashing-magazine-manages-content-migration-from-wordpress-to-jamstack.md: -------------------------------------------------------------------------------- 1 | --- 2 | _schema: default 3 | url: https://www.smashingmagazine.com/2020/01/migration-from-wordpress-to-jamstack/ 4 | title: 'How Smashing Magazine Manages Content: Migration From WordPress To JAMstack' 5 | author: Sarah Drasner 6 | date: 2020-01-28T00:00:00Z 7 | skip_screenshot: false 8 | use_opengraph: true 9 | favicon_override_image_path: '' 10 | tags: 11 | - Jamstack 12 | - Performance 13 | --- 14 | -------------------------------------------------------------------------------- /src/sites/html.md: -------------------------------------------------------------------------------- 1 | --- 2 | _schema: default 3 | url: https://www.w3.org/TR/html-design-principles/ 4 | title: HTML Design Principles 5 | author: '' 6 | date: 2007-11-26T00:00:00Z 7 | skip_screenshot: false 8 | favicon_override_image_path: /uploads/w3c-logo.svg 9 | tags: 10 | - HTML 11 | --- 12 | -------------------------------------------------------------------------------- /src/sites/improving-ux-through-front-end-performance.md: -------------------------------------------------------------------------------- 1 | --- 2 | _schema: default 3 | url: https://alistapart.com/article/improving-ux-through-front-end-performance/ 4 | title: Improving UX Through Front-End Performance 5 | author: Lara Hogan 6 | date: 2013-03-12T00:00:00Z 7 | skip_screenshot: false 8 | favicon_override_image_path: '' 9 | tags: 10 | - Performance 11 | --- 12 | -------------------------------------------------------------------------------- /src/sites/introducing-the-new-responsive-designed-bostonglobe-com.md: -------------------------------------------------------------------------------- 1 | --- 2 | _schema: default 3 | url: >- 4 | https://www.filamentgroup.com/lab/introducing-the-new-responsive-designed-bostonglobecom 5 | title: Introducing the new responsive-designed BostonGlobe.com 6 | author: Patty Toland 7 | date: 2011-09-12T00:00:00Z 8 | skip_screenshot: false 9 | favicon_override_image_path: '' 10 | tags: 11 | - Responsive Web Design 12 | --- 13 | -------------------------------------------------------------------------------- /src/sites/journey.md: -------------------------------------------------------------------------------- 1 | --- 2 | _schema: default 3 | url: https://alistapart.com/article/journey/ 4 | title: 'From Table Hacks to CSS Layout: A Web Designer’s Journey' 5 | author: Jeffrey Zeldman 6 | date: 2001-02-16T00:00:00Z 7 | skip_screenshot: false 8 | favicon_override_image_path: '' 9 | tags: 10 | - CSS 11 | --- 12 | -------------------------------------------------------------------------------- /src/sites/lemons.md: -------------------------------------------------------------------------------- 1 | --- 2 | _schema: default 3 | url: https://infrequently.org/2023/02/the-market-for-lemons/ 4 | title: The Market for Lemons 5 | author: Alex Russell 6 | date: 2023-02-04T00:00:00Z 7 | skip_screenshot: false 8 | use_opengraph: true 9 | favicon_override_image_path: '' 10 | tags: 11 | - Performance 12 | --- 13 | -------------------------------------------------------------------------------- /src/sites/mentor.md: -------------------------------------------------------------------------------- 1 | --- 2 | _schema: default 3 | url: https://buildexcellentwebsit.es/ 4 | title: Be the browser’s mentor, not its micromanager. 5 | author: Andy Bell 6 | date: 2022-01-01T00:00:00Z 7 | skip_screenshot: false 8 | favicon_override_image_path: '' 9 | tags: 10 | - Web Design 11 | --- 12 | -------------------------------------------------------------------------------- /src/sites/mindset.md: -------------------------------------------------------------------------------- 1 | --- 2 | _schema: default 3 | url: https://mxb.dev/blog/the-css-mindset/ 4 | title: The CSS Mindset 5 | author: Max Böck 6 | date: 2019-06-05T00:00:00Z 7 | skip_screenshot: false 8 | favicon_override_image_path: '' 9 | tags: 10 | - CSS 11 | --- 12 | -------------------------------------------------------------------------------- /src/sites/old-css.md: -------------------------------------------------------------------------------- 1 | --- 2 | _schema: default 3 | url: https://eev.ee/blog/2020/02/01/old-css-new-css/ 4 | title: Old CSS, new CSS 5 | author: Evelyn Woods 6 | date: 2020-02-01T00:00:00Z 7 | skip_screenshot: false 8 | favicon_override_image_path: '' 9 | tags: 10 | - CSS 11 | --- 12 | -------------------------------------------------------------------------------- /src/sites/oocss.md: -------------------------------------------------------------------------------- 1 | --- 2 | _schema: default 3 | url: https://www.slideshare.net/stubbornella/object-oriented-css 4 | title: Object Oriented CSS 5 | author: Nicole Sullivan 6 | date: 2009-02-16T00:00:00Z 7 | use_opengraph: true 8 | favicon_override_image_path: '' 9 | tags: 10 | - CSS 11 | --- 12 | -------------------------------------------------------------------------------- /src/sites/page-weight-matters.md: -------------------------------------------------------------------------------- 1 | --- 2 | _schema: default 3 | url: https://blog.chriszacharias.com/page-weight-matters 4 | title: Page Weight Matters 5 | author: Chris Zacharias 6 | date: 2012-12-21T00:00:00Z 7 | skip_screenshot: false 8 | favicon_override_image_path: '' 9 | tags: 10 | - Performance 11 | --- 12 | -------------------------------------------------------------------------------- /src/sites/pantsuit.md: -------------------------------------------------------------------------------- 1 | --- 2 | _schema: default 3 | url: https://mina.codes/posts/pantsuit-the-hillary-clinton-ui-pattern-library/ 4 | title: 'Pantsuit: The Hillary Clinton UI pattern library' 5 | author: Mina Markham 6 | date: 2016-08-31T00:00:00Z 7 | skip_screenshot: false 8 | favicon_override_image_path: '' 9 | tags: 10 | - Design Systems 11 | --- 12 | -------------------------------------------------------------------------------- /src/sites/pe.md: -------------------------------------------------------------------------------- 1 | --- 2 | _schema: default 3 | url: https://alistapart.com/article/understandingprogressiveenhancement/ 4 | title: Understanding Progressive Enhancement 5 | author: Aaron Gustafson 6 | date: 2008-10-07T00:00:00Z 7 | skip_screenshot: false 8 | favicon_override_image_path: '' 9 | tags: 10 | - Progressive Enhancement 11 | --- 12 | -------------------------------------------------------------------------------- /src/sites/personal.md: -------------------------------------------------------------------------------- 1 | --- 2 | _schema: default 3 | url: https://matthiasott.com/articles/into-the-personal-website-verse 4 | title: Into the Personal-Website-Verse 5 | author: Matthias Ott 6 | date: 2019-05-12T00:00:00Z 7 | skip_screenshot: false 8 | use_opengraph: true 9 | favicon_override_image_path: '' 10 | tags: 11 | - IndieWeb 12 | --- 13 | -------------------------------------------------------------------------------- /src/sites/progressive-enhancement-is-still-important.md: -------------------------------------------------------------------------------- 1 | --- 2 | _schema: default 3 | url: https://jakearchibald.com/2013/progressive-enhancement-still-important/ 4 | title: Progressive Enhancement is Still Important 5 | author: Jake Archibald 6 | date: 2013-07-03T00:00:00Z 7 | skip_screenshot: false 8 | favicon_override_image_path: '' 9 | tags: 10 | - Progressive Enhancement 11 | --- 12 | -------------------------------------------------------------------------------- /src/sites/react-performance.md: -------------------------------------------------------------------------------- 1 | --- 2 | _schema: default 3 | url: https://aerotwist.com/blog/react-plus-performance-equals-what/ 4 | title: React + Performance = ? 5 | author: Paul Lewis 6 | date: 2015-07-03T00:00:00Z 7 | skip_screenshot: false 8 | favicon_override_image_path: '' 9 | tags: 10 | - Performance 11 | --- 12 | -------------------------------------------------------------------------------- /src/sites/researching-the-performance-costs-of-javascript-mvc-frameworks.md: -------------------------------------------------------------------------------- 1 | --- 2 | _schema: default 3 | url: https://www.filamentgroup.com/lab/mv-initial-load-times 4 | title: Researching the Performance costs of JavaScript MVC Frameworks 5 | author: John Bender 6 | date: 2014-12-12T00:00:00Z 7 | skip_screenshot: false 8 | favicon_override_image_path: '' 9 | tags: 10 | - Performance 11 | --- 12 | -------------------------------------------------------------------------------- /src/sites/resilient.md: -------------------------------------------------------------------------------- 1 | --- 2 | _schema: default 3 | url: https://resilientwebdesign.com/ 4 | title: Resilient Web Design 5 | author: Jeremy Keith 6 | date: 2016-12-13T00:00:00Z 7 | skip_screenshot: false 8 | favicon_override_image_path: '' 9 | tags: 10 | - Web Design 11 | --- 12 | -------------------------------------------------------------------------------- /src/sites/rwd.md: -------------------------------------------------------------------------------- 1 | --- 2 | _schema: default 3 | url: https://alistapart.com/article/responsive-web-design/ 4 | title: Responsive Web Design 5 | author: Ethan Marcotte 6 | date: 2010-05-25T00:00:00Z 7 | skip_screenshot: false 8 | favicon_override_image_path: '' 9 | tags: 10 | - Responsive Web Design 11 | - Web Design 12 | --- 13 | -------------------------------------------------------------------------------- /src/sites/sites.json: -------------------------------------------------------------------------------- 1 | { 2 | "permalink": false, 3 | "tags": "sites" 4 | } -------------------------------------------------------------------------------- /src/sites/sliding-doors.md: -------------------------------------------------------------------------------- 1 | --- 2 | _schema: default 3 | url: https://alistapart.com/article/slidingdoors/ 4 | title: Sliding Doors of CSS 5 | author: Douglas Bowman 6 | date: 2003-10-20T00:00:00Z 7 | skip_screenshot: false 8 | favicon_override_image_path: '' 9 | tags: 10 | - CSS 11 | --- 12 | -------------------------------------------------------------------------------- /src/sites/smacss.md: -------------------------------------------------------------------------------- 1 | --- 2 | _schema: default 3 | url: https://smacss.com/ 4 | title: Scalable and Modular Architecture for CSS 5 | author: Jonathan Snook 6 | date: 2011-01-01T00:00:00Z 7 | skip_screenshot: false 8 | favicon_override_image_path: '' 9 | tags: 10 | - CSS 11 | --- 12 | -------------------------------------------------------------------------------- /src/sites/solar.md: -------------------------------------------------------------------------------- 1 | --- 2 | _schema: default 3 | url: https://solar.lowtechmagazine.com/2018/09/how-to-build-a-low-tech-website/ 4 | title: How to Build a Low-tech Website? 5 | author: '' 6 | date: 2018-09-01T00:00:00Z 7 | skip_screenshot: false 8 | favicon_override_image_path: '' 9 | tags: 10 | - Web Design 11 | --- 12 | -------------------------------------------------------------------------------- /src/sites/ssg.md: -------------------------------------------------------------------------------- 1 | --- 2 | _schema: default 3 | url: >- 4 | https://www.smashingmagazine.com/2015/11/modern-static-website-generators-next-big-thing/ 5 | title: Why Static Site Generators Are The Next Big Thing 6 | author: Matt Biilmann 7 | date: 2015-11-02T00:00:00Z 8 | skip_screenshot: false 9 | use_opengraph: false 10 | favicon_override_image_path: '' 11 | tags: 12 | - Performance 13 | - Jamstack 14 | --- 15 | -------------------------------------------------------------------------------- /src/sites/textual.md: -------------------------------------------------------------------------------- 1 | --- 2 | _schema: default 3 | url: https://seirdy.one/posts/2020/11/23/website-best-practices/ 4 | title: Best practices for inclusive textual websites 5 | author: Rohan Kumar 6 | date: 2020-11-23T00:00:00Z 7 | skip_screenshot: false 8 | favicon_override_image_path: '' 9 | tags: 10 | - Accessibility 11 | --- 12 | -------------------------------------------------------------------------------- /src/sites/the-unreasonable-effectiveness-of-simple-html.md: -------------------------------------------------------------------------------- 1 | --- 2 | _schema: default 3 | url: >- 4 | https://shkspr.mobi/blog/2021/01/the-unreasonable-effectiveness-of-simple-html/ 5 | title: The unreasonable effectiveness of simple HTML 6 | author: Terence Eden 7 | date: 2021-01-26T00:00:00Z 8 | skip_screenshot: false 9 | use_opengraph: false 10 | favicon_override_image_path: '' 11 | tags: 12 | - HTML 13 | - Performance 14 | --- 15 | -------------------------------------------------------------------------------- /src/sites/tools.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: When Our Tools Hold Us Back 3 | url: https://www.oddbird.net/2022/11/11/platform-tools/ 4 | date: "2022-11-11" 5 | author: Miriam Suzanne 6 | use_opengraph: true 7 | --- -------------------------------------------------------------------------------- /src/sites/truncation.md: -------------------------------------------------------------------------------- 1 | --- 2 | _schema: default 3 | url: https://www.braintraffic.com/insights/what-does-a-content-strategist-do 4 | title: What does a Content Strategist Do? 5 | author: Kristina Halvorson 6 | date: 2019-07-01T00:00:00Z 7 | skip_screenshot: false 8 | favicon_override_image_path: '' 9 | tags: 10 | - Content Strategy 11 | --- 12 | -------------------------------------------------------------------------------- /src/sites/uris.md: -------------------------------------------------------------------------------- 1 | --- 2 | _schema: default 3 | url: https://www.w3.org/Provider/Style/URI 4 | title: Cool URIs don’t change 5 | author: Tim Berners-Lee 6 | date: 1998-01-01T00:00:00Z 7 | skip_screenshot: false 8 | favicon_override_image_path: /uploads/w3c-logo.svg 9 | --- 10 | -------------------------------------------------------------------------------- /src/sites/veil.md: -------------------------------------------------------------------------------- 1 | --- 2 | _schema: default 3 | url: https://mrmrs.cc/writing/the-veil-of-ignorance/ 4 | title: The Veil of Ignorance 5 | author: Adam Morse 6 | date: 2016-03-23T00:00:00Z 7 | skip_screenshot: false 8 | favicon_override_image_path: /uploads/mrmrs-logo.svg 9 | tags: 10 | - Accessibility 11 | --- 12 | -------------------------------------------------------------------------------- /src/sites/zen.md: -------------------------------------------------------------------------------- 1 | --- 2 | _schema: default 3 | url: https://www.csszengarden.com/ 4 | title: CSS Zen Garden 5 | author: Dave Shea 6 | date: 2003-01-01T00:00:00Z 7 | skip_screenshot: false 8 | use_opengraph: false 9 | favicon_override_image_path: /uploads/zengardenicon.png 10 | tags: 11 | - CSS 12 | --- 13 | -------------------------------------------------------------------------------- /src/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --primary: #074ad2; 3 | --primary-light: #c3d4fa; 4 | --gutter: 1rem; 5 | --rhythm: 2em; 6 | --shadow-hsl: 0deg 0% 75%; 7 | } 8 | @media (min-width: 37.5em) { /* 600px */ 9 | :root { 10 | --rhythm: 4em; 11 | } 12 | } 13 | * { 14 | box-sizing: border-box; 15 | } 16 | html, body { 17 | margin: 0; 18 | padding: 0; 19 | } 20 | html { 21 | font-family: system-ui, sans-serif; 22 | margin: 0 auto; 23 | } 24 | body { 25 | display: grid; 26 | grid-template-columns: auto var(--gutter) 1fr var(--gutter) auto; 27 | overflow-y: scroll; 28 | } 29 | body > * { 30 | grid-column-start: 3; 31 | width: 100%; 32 | max-width: 50em; /* 800px /16 */ 33 | margin: 0 auto; 34 | } 35 | header { 36 | background-color: var(--primary); 37 | color: #fff; 38 | grid-column: 1/6; 39 | max-width: 100%; 40 | margin: auto auto var(--rhythm); 41 | } 42 | details { 43 | padding: .5em; 44 | background-color: var(--primary-light); 45 | border-radius: .5em; 46 | width: min-content; 47 | } 48 | details[open] { 49 | min-width: 18em; 50 | } 51 | @media (max-width: 37.4375em) { 52 | details[open] { 53 | width: auto; 54 | } 55 | } 56 | 57 | details summary { 58 | white-space: nowrap; 59 | padding: 0 .25em; 60 | } 61 | .callout { 62 | display: block; 63 | padding: 1em; 64 | border: .1em solid var(--primary); 65 | background-color: var(--primary-light); 66 | border-radius: .5em; 67 | margin-bottom: var(--rhythm); 68 | } 69 | 70 | :link, 71 | :visited { 72 | color: var(--primary); 73 | } 74 | h1, h2, h3, h4, h5 { 75 | font-family: Poppins, system-ui, sans-serif; 76 | } 77 | p:first-child { 78 | margin-top: 0; 79 | } 80 | p:last-child { 81 | margin-bottom: 0; 82 | } 83 | 84 | .sr-only { 85 | position: absolute; 86 | height: 1px; 87 | width: 1px; 88 | overflow: hidden; 89 | clip: rect(1px, 1px, 1px, 1px); 90 | } 91 | 92 | .title { 93 | text-align: right; 94 | font-size: clamp(1.8em, calc(6vw + 1em), 5em); 95 | text-transform: uppercase; 96 | line-height: 1; 97 | font-weight: 900; 98 | letter-spacing: -.05em; 99 | padding: 1em var(--gutter); 100 | max-width: 50rem; /* 800px /16 */ 101 | margin: 0 auto; 102 | } 103 | .title u { 104 | color: #fff; 105 | text-decoration-color: rgba(255, 255, 255, .4); 106 | } 107 | .title a[href], 108 | .title a[href]:visited { 109 | color: #fff; 110 | text-decoration: none; 111 | } 112 | 113 | dl { 114 | display: grid; 115 | gap: 1em clamp(2em, 3vw, var(--rhythm)); 116 | } 117 | @media (min-width: 37.5em) { /* 600px */ 118 | dl { 119 | grid-template-columns: 40% auto; 120 | } 121 | } 122 | dl { 123 | margin: var(--rhythm) 0; 124 | } 125 | dt { 126 | display: flex; 127 | flex-direction: column; 128 | justify-content: center; 129 | } 130 | dd { 131 | margin: 0 0 var(--rhythm); 132 | } 133 | @media (min-width: 37.5em) { /* 600px */ 134 | dd { 135 | margin: var(--rhythm) 0; 136 | } 137 | } 138 | 139 | browser-window { 140 | display: block; 141 | font-size: 0.875em; /* 14px /16 */ 142 | } 143 | browser-window[mode="dark"] { 144 | --bw-border: none; 145 | } 146 | 147 | .site-link { 148 | font-family: Poppins, system-ui, sans-serif; 149 | display: grid; 150 | grid-template-columns: 1em auto; 151 | gap: .25em; 152 | align-items: flex-start; 153 | font-size: 1.5em; 154 | font-weight: 500; 155 | text-wrap: balance; 156 | } 157 | .favicon { 158 | vertical-align: text-bottom; 159 | } 160 | .favicon, 161 | .site-favicon { 162 | width: 1em; 163 | height: auto; 164 | border-radius: .25em; 165 | margin-right: .2em; 166 | } 167 | .site-favicon { 168 | margin-top: .2em; 169 | } 170 | @supports (object-fit: contain) { 171 | .favicon, 172 | .site-favicon { 173 | width: 1em; 174 | height: 1em; 175 | object-fit: contain; 176 | } 177 | } 178 | .site-screenshot { 179 | display: block; 180 | width: 100%; 181 | height: auto; 182 | aspect-ratio: 800/420; 183 | overflow: hidden; 184 | object-fit: cover; 185 | object-position: top; 186 | } 187 | @media (min-width: 37.5em) { /* 600px */ 188 | .site-screenshot--skew browser-window { 189 | transform: skewX(-4deg); 190 | perspective-origin: 25% 75%; 191 | } 192 | } 193 | .site-screenshot:hover, 194 | .site-screenshot:focus { 195 | opacity: .95; 196 | } 197 | browser-window:hover { 198 | --bw-shadow-hsl: 220.2deg 93.55% 42.55%; 199 | box-shadow: 0 0 0 .25em var(--primary); 200 | border-radius: .5em; 201 | } 202 | dt:has(.site-link:hover) + dd browser-window { 203 | --bw-shadow-hsl: 220.2deg 93.55% 42.55%; 204 | box-shadow: 0 0 0 .25em var(--primary); 205 | border-radius: .5em; 206 | } 207 | dt:has(.site-link:hover) + dd .site-screenshot { 208 | opacity: .95; 209 | } 210 | .site-metadata { 211 | margin: 0; 212 | margin-top: .25em; 213 | margin-left: 1.875em; 214 | } 215 | 216 | @media (min-width: 37.5em) { /* 600px */ 217 | .site-promo { 218 | grid-column: 1/3; 219 | margin-left: -1em; 220 | margin-right: -1em; 221 | } 222 | } 223 | .site-promo-link { 224 | display: flex; 225 | align-items: center; 226 | gap: 2em; 227 | flex-wrap: wrap; 228 | font-size: 0.9375em; /* 15px /16 */ 229 | margin-bottom: calc(2 * var(--rhythm)); 230 | } 231 | .site-promo-link:hover .site-screenshot, 232 | .site-promo-link:focus .site-screenshot { 233 | border-color: currentColor; 234 | } 235 | @media (min-width: 37.5em) { /* 600px */ 236 | .site-promo-link :first-child { 237 | flex-basis: 65%; 238 | } 239 | .site-promo-link :last-child { 240 | flex-basis: calc(35% - 2em); 241 | } 242 | } 243 | 244 | /* Lite-YouTube */ 245 | lite-youtube[videoid] { 246 | max-width: 100%; 247 | } 248 | 249 | /* CloudCannon specific */ 250 | .cc-editor-link { 251 | display: none; 252 | } 253 | .cms-editor-active .cc-editor-link { 254 | display: inline; 255 | outline: 2px solid var(--color-sol); 256 | } 257 | .cms-editor-active .cc-editor-link:hover, 258 | .cms-editor-active .cc-editor-link:focus { 259 | outline: 2px solid var(--color-cc-blue); 260 | } 261 | 262 | /* Filter container */ 263 | filter-container form { 264 | margin: 1em 0; 265 | line-height: 2; 266 | } 267 | @media (min-width: 37.5em) and (min-height: 50em) { 268 | filter-container form { 269 | position: sticky; 270 | top: 1em; 271 | z-index: 1; 272 | } 273 | } 274 | filter-container label { 275 | display: block; 276 | } 277 | filter-container:not(:defined) form { 278 | visibility: hidden; 279 | } 280 | 281 | .filter-tags--hide { 282 | display: none; 283 | } 284 | filter-container:has(.filter-tags--hide) .site-promo { 285 | display: none; 286 | } 287 | 288 | -------------------------------------------------------------------------------- /src/uploads/aaron-swartz-profile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zachleat/educational-sensational-inspirational-foundational/f8b90123435d40ace2a3fb62a3c76322c8eb7e79/src/uploads/aaron-swartz-profile.jpg -------------------------------------------------------------------------------- /src/uploads/mrmrs-logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/uploads/w3c-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/uploads/zengardenicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zachleat/educational-sensational-inspirational-foundational/f8b90123435d40ace2a3fb62a3c76322c8eb7e79/src/uploads/zengardenicon.png --------------------------------------------------------------------------------