├── .eleventy.js ├── .eslintrc ├── .github └── workflows │ └── main.yml ├── .gitignore ├── .nvmrc ├── .prettierignore ├── .prettierrc ├── .stylelintrc ├── .vscode └── settings.json ├── README.md ├── _webmentioncache └── webmentions.json ├── netlify.toml ├── onBuild.mjs ├── onStart.mjs ├── package-lock.json ├── package.json └── src ├── _data ├── blogroll.json ├── menudata.json ├── menuitems.json ├── metadata.json └── version.json ├── _includes ├── about.njk ├── blogroll.njk ├── home.njk ├── layout.njk ├── page.njk ├── partials │ ├── author-details.njk │ ├── categories.njk │ ├── components │ │ └── icon-link.njk │ ├── dark-mode-toggle.njk │ ├── featured-post.njk │ ├── footer.njk │ ├── header.njk │ ├── hero.njk │ ├── more-like-this.njk │ ├── post-grid-pagination.njk │ ├── post-header-content.njk │ ├── post-header.njk │ ├── post-listing.njk │ ├── posts-grid.njk │ ├── prev-next.njk │ ├── sotb-banner-ad.njk │ ├── sprite.svg │ ├── tag-links.njk │ └── webmentions.njk ├── post-alt.njk ├── post.njk ├── posts-layout.njk └── tag-page.njk ├── css ├── 01-config │ ├── _functions.scss │ └── _variables.scss ├── 02-base │ ├── _layout.scss │ ├── _prism.scss │ ├── _reset.scss │ └── _typography.scss ├── 03-objects │ ├── _hotlink.scss │ ├── _icon-link.scss │ └── _richtext.scss ├── 04-components │ ├── _all-tags.scss │ ├── _alt-header.scss │ ├── _author-info.scss │ ├── _blogroll.scss │ ├── _categories.scss │ ├── _dark-mode-toggle.scss │ ├── _footer.scss │ ├── _header.scss │ ├── _hero.scss │ ├── _page-header.scss │ ├── _post-grid-pagination.scss │ ├── _post-header.scss │ ├── _posts-grid.scss │ ├── _prev-next.scss │ ├── _sidebar.scss │ ├── _tag-links.scss │ └── _webmentions.scss ├── 05-utilities │ └── _utils.scss └── styles.scss ├── favicon ├── android-chrome-192x192.png ├── android-chrome-512x512.png ├── apple-touch-icon.png ├── favicon-16x16.png ├── favicon-32x32.png ├── site.webmanifest └── social_1200x630.png ├── feed.njk ├── fonts ├── jost.woff2 └── urbanist.woff2 ├── icons ├── Instagram.svg ├── facebook.svg ├── github.svg ├── icon-dark.svg ├── icon-external-link.svg ├── icon-heart.svg ├── icon-light.svg ├── icon-mention.svg ├── icon-repost.svg ├── icon-rss.svg ├── linkedin.svg ├── logo-horizontal-text.svg ├── logo-horizontal.svg ├── logo-icon.svg ├── logo-new.svg ├── logo-stacked-text.svg ├── logo-stacked.svg ├── logo.svg ├── mastodon.svg ├── pinterest.svg └── twitter.svg ├── images ├── 2019-in-review.svg ├── SotB-Logo.svg ├── a-handy-use-for-cascade-layers.jpg ├── a-layout-trick-for-building-a-contact-list.png ├── a-modern-front-end-workflow-01_01.png ├── a-modern-front-end-workflow-02_01.png ├── a-modern-front-end-workflow-03_01.png ├── a-reason-to-self-host-fonts-01.jpg ├── a-reason-to-self-host-fonts-02.jpg ├── a-utility-class-for-covering-elements-01.jpg ├── a-year-of-utilities-01.svg ├── amending-your-past-commits-with-git-01.png ├── amending-your-past-commits-with-git-02.png ├── amending-your-past-commits-with-git-03.png ├── animated-grid-tracks-with-has-01.jpg ├── animated-grid-tracks-with-has-02.jpg ├── are-my-third-parties-green.webp ├── aspect-ratio-is-great-01.jpg ├── aspect-ratio-is-great-02.jpg ├── aspect-ratio-is-great-03.jpg ├── aspect-ratio-is-great-04.jpg ├── aspect-ratio-is-great-05.jpg ├── aspect-ratio-is-great-06.jpg ├── better-vuex-state-management.svg ├── beyond-the-spotlight_1024.webp ├── beyond-the-spotlight_800.webp ├── breaking-out-of-a-central-wrapper-01.webp ├── breaking-out-of-a-central-wrapper-02.webp ├── breaking-out-of-a-central-wrapper-03.webp ├── breaking-out-of-a-central-wrapper-04.webp ├── breaking-out-of-a-central-wrapper-05.webp ├── breaking-out-of-a-central-wrapper-06.webp ├── breaking-out-of-a-central-wrapper-07.webp ├── breaking-out-of-a-central-wrapper-08.webp ├── building-a-dependency-free-site.jpg ├── building-a-greener-web.svg ├── building-a-scrapbook-layout_01.png ├── building-a-scrapbook-layout_02.jpg ├── building-a-scrapbook-layout_03a.png ├── building-a-scrapbook-layout_04a.png ├── building-a-scrapbook-layout_05a.png ├── building-a-scrapbook-layout_06a.png ├── building-a-scrapbook-layout_08.jpg ├── building-a-scrapbook-layout_09.png ├── building-a-scrapbook-layout_10.jpg ├── building-an-interactive-timetable-01a.jpg ├── building-the-zig-zag-gradient-lab-01.jpg ├── building-the-zig-zag-gradient-lab-01a.jpg ├── building-the-zig-zag-gradient-lab-02.jpg ├── building-the-zig-zag-gradient-lab-03.jpg ├── building-the-zig-zag-gradient-lab-04.jpg ├── building-the-zig-zag-gradient-lab-05.jpg ├── building-the-zig-zag-gradient-lab-06.jpg ├── building-the-zig-zag-gradient-lab-07.jpg ├── building-the-zig-zag-gradient-lab-08.jpg ├── building-the-zig-zag-gradient-lab-09.jpg ├── building-the-zig-zag-gradient-lab-10.jpg ├── carbon-capture-01.jpg ├── carbon-capture-01_1200.jpg ├── carbon-capture-01_800.jpg ├── code-gardening-01_1200.webp ├── code-gardening-01_1600.webp ├── code-gardening-01_900.webp ├── controlling-leftover-grid-items-01.svg ├── controlling-leftover-grid-items-02.svg ├── creating-generative-svg-characters-01.jpg ├── creating-generative-svg-characters.jpg ├── css-day-2022_1200.webp ├── css-day-2022_900.webp ├── css-halftone-patterns-01.jpg ├── css-halftone-patterns-01a.jpg ├── css-halftone-patterns-01b.jpg ├── css-halftone-patterns-02.jpg ├── css-halftone-patterns-03.jpg ├── css-halftone-patterns-04.jpg ├── css-halftone-patterns-05.jpg ├── css-halftone-patterns-06.jpg ├── css-only-slide-up-caption-hover-effect-01.jpg ├── css-only-slide-up-caption-hover-effect-02.jpg ├── css-only-slide-up-caption-hover-effect-03.jpg ├── debugging-css-grid-1_01.png ├── debugging-css-grid-1_02.png ├── debugging-css-grid-1_03.png ├── debugging-css-grid-1_04.png ├── debugging-css-grid-1_06.png ├── debugging-css-grid-2-01.png ├── debugging-css-grid-2-02.png ├── debugging-css-grid-2-03.png ├── debugging-css-grid-3-01.png ├── debugging-css-grid-3-02.png ├── debugging-css-grid-3-03.png ├── debugging-css-grid-3-04.png ├── debugging-css-grid-3-05.png ├── debugging-css-grid-3-06.png ├── debugging-css-grid-3-07a.png ├── debugging-css-grid-3-08a.png ├── debugging-media-queries-a-dev-tools-wish-list-01.jpg ├── disentangling-frameworks-01.svg ├── disentangling-frameworks-02.svg ├── drop-shadow-01.jpg ├── drop-shadow-02.jpg ├── drop-shadow-03.jpg ├── drop-shadow-04.jpg ├── drop-shadow-05.jpg ├── eleventy-starter_1200.webp ├── eleventy-starter_1600.webp ├── eleventy-starter_600.webp ├── eleventy-starter_900.webp ├── exciting-things-on-the-horizon-for-css-layout.svg ├── favourite-things-01.jpg ├── favourite-things-02-01.jpg ├── favourite-things-02-02.jpg ├── favourite-things-02-03.jpg ├── favourite-things.svg ├── favourite-web-development-courses-01.jpg ├── favourite-web-development-courses-02.jpg ├── find-me-on-mastodon-01.svg ├── finding-an-elements-nearest-relative-positioned-ancestor-01.jpg ├── finding-meaning-in-our-work-01__1200.webp ├── finding-meaning-in-our-work-01__1600.webp ├── finding-meaning-in-our-work-01__600.webp ├── finding-meaning-in-our-work-01__900.webp ├── flow-chart-01_1600.webp ├── flow-chart-02_1600.webp ├── flow-chart-03_1600.webp ├── flow-chart-04_1600.webp ├── flow-chart-05_1600.webp ├── flow-chart-06_1600.webp ├── font-rendering_1200.webp ├── font-rendering_1600.webp ├── font-rendering_600.webp ├── font-rendering_900.webp ├── from-gatsby-to-eleventy-01.jpg ├── from-gatsby-to-eleventy-02.jpg ├── from-gatsby-to-eleventy-03.jpg ├── fun-with-css-motion-path-01.jpg ├── gap-01_1200.webp ├── gap-01_1600.webp ├── gap-01_900.webp ├── gap-02_1200.webp ├── gap-02_1600.webp ├── gap-02_900.webp ├── gap-03_1200.webp ├── gap-03_1600.webp ├── gap-03_900.webp ├── gap-04_1200.webp ├── gap-04_1600.webp ├── gap-04_900.webp ├── gap-05_1200.webp ├── gap-05_1600.webp ├── gap-05_900.webp ├── green-web-foundation-directory_1200.webp ├── green-web-foundation-directory_1600.webp ├── green-web-foundation-directory_600.webp ├── green-web-foundation-directory_900.webp ├── greenwashing-and-the-cop28-website_1200.webp ├── greenwashing-and-the-cop28-website_1600.webp ├── greenwashing-and-the-cop28-website_1800.webp ├── greenwashing-and-the-cop28-website_600.webp ├── greenwashing-and-the-cop28-website_900.webp ├── grid-backgrounds.jpg ├── handy-tools-for-mocking-api-requests-01_1600.jpg ├── handy-tools-for-mocking-api-requests-01_900.jpg ├── handy-tools-for-mocking-api-requests-02_1600.jpg ├── handy-tools-for-mocking-api-requests-02_900.jpg ├── headshot.jpg ├── heatwave-animated-sun-illustration.png ├── how-git-stash-01.svg ├── how-git-stash-02.svg ├── how-to-convince-your-team.svg ├── how-to-enable-experimental-features-02.png ├── how-to-enable-experimental-features-03.png ├── how-to-enable-experimental-features-04.png ├── how-to-enable-experimental-features-05.png ├── how-to-enable-experimental-features.jpg ├── implicit-tracks.jpg ├── in-commission-to-no-emissions-01.svg ├── in-search-of-simplicity.jpg ├── inspecting-sizes-01.jpg ├── introducing-the-web-sustainability-guidelines.png ├── irregular-shaped-links-with-subgrid-01b.jpg ├── irregular-shaped-links-with-subgrid-02a.jpg ├── irregular-shaped-links-with-subgrid-03a.jpg ├── irregular-shaped-links-with-subgrid-04.jpg ├── irregular-shaped-links-with-subgrid-05.jpg ├── it-career-energizer-podcast-01.png ├── limitation-breeds-creativity_1200.webp ├── limitation-breeds-creativity_1600.webp ├── limitation-breeds-creativity_1800.jpg ├── limitation-breeds-creativity_1800.webp ├── limitation-breeds-creativity_700.webp ├── limitation-breeds-creativity_900.webp ├── logical-border-radius-01.webp ├── logical-border-radius-02.webp ├── logical-border-radius-03.webp ├── logical-border-radius-04.webp ├── logical-border-radius-05.webp ├── making-work-experience-a-positive-experience-01a.svg ├── masonry-in-css-01.webp ├── masonry-syntax_1400.webp ├── masonry-syntax_900.webp ├── mentoring-01.svg ├── messing-about-with-css-gradients-01_1200.webp ├── messing-about-with-css-gradients-01_1600.webp ├── messing-about-with-css-gradients-01_900.webp ├── messing-about-with-css-gradients-02_1200.webp ├── messing-about-with-css-gradients-02_1600.webp ├── messing-about-with-css-gradients-02_900.webp ├── messing-about-with-css-gradients-03_1200.webp ├── messing-about-with-css-gradients-03_1600.webp ├── messing-about-with-css-gradients-03_900.webp ├── my-browser-support-strategy-01.jpg ├── my-browser-support-strategy-02.jpg ├── my-browser-support-strategy-03.jpg ├── my-css-grid-wishlist-01.png ├── my-css-grid-wishlist-02.png ├── nbpm-01_1200.webp ├── nbpm-01_1600.webp ├── nbpm-01_900.webp ├── negative-lines.jpg ├── negative-lines2.jpg ├── negative-lines2.png ├── not-an-nft-artist-01.jpg ├── not-an-nft-artist-02.jpg ├── og-image.jpg ├── optimising-svgs-for-the-web_01.png ├── optimising-svgs-for-the-web_02.jpg ├── optimising-svgs-for-the-web_03.jpg ├── optimising-svgs-for-the-web_04.jpg ├── optimising-svgs-for-the-web_04.png ├── optimising-svgs-for-the-web_05a.jpg ├── optimising-svgs-for-the-web_06.jpg ├── overflow-01_1200.webp ├── overflow-01_1600.webp ├── overflow-02_1200.webp ├── overflow-02_1600.webp ├── overflow-03_1200.webp ├── overflow-03_1600.webp ├── overflow-04_1200.webp ├── overflow-04_1600.webp ├── overflow-05_1200.webp ├── overflow-05_1600.webp ├── overflow-06_1200.webp ├── overflow-06_1600.webp ├── overflow-07_1200.webp ├── overflow-07_1600.webp ├── overflow-08_1200.webp ├── overflow-08_1600.webp ├── overflow-09_1200.webp ├── overflow-09_1600.webp ├── overflow-10_1200.webp ├── overflow-10_1600.webp ├── owning-your-web-01_1200.webp ├── owning-your-web-01_1600.webp ├── owning-your-web-01_900.webp ├── paper-snowflakes-01.jpg ├── paper-snowflakes-02.svg ├── paper-snowflakes-03.svg ├── paper-snowflakes-04.svg ├── paper-snowflakes-04a.svg ├── paper-snowflakes-05.svg ├── paper-snowflakes-06.svg ├── perspective-01_1200.webp ├── perspective-01_1600.webp ├── perspective-01_1800.webp ├── perspective-01_700.webp ├── perspective-01_900.webp ├── progressively-enhanced-toggletips_1200.webp ├── progressively-enhanced-toggletips_1600.webp ├── progressively-enhanced-toggletips_700.webp ├── progressively-enhanced-toggletips_900.webp ├── quick-and-easy-dark-mode-with-css-custom-properties.svg ├── quick-tip-negative-animation-delay-02.webp ├── quick-tip-negative-animation-delay.webp ├── radial-gradient-trigonometry-01.webp ├── radial-gradient-trigonometry-01_1200.webp ├── radial-gradient-trigonometry-01_900.webp ├── radial-gradient-trigonometry.svg ├── rainy-gradient_1200.webp ├── rainy-gradient_1600.webp ├── rainy-gradient_1800.webp ├── rainy-gradient_900.webp ├── recreating-the-his-dark-materials-logo-01.jpg ├── reducing-complexity-01.jpg ├── reducing-complexity-01_1200.jpg ├── reducing-complexity-01_800.jpg ├── scheduling-netlify-deployments-with-github-actions-01.jpg ├── scheduling-netlify-deployments-with-github-actions-02.jpg ├── scheduling-netlify-deployments-with-github-actions-03.jpg ├── setting-up-a-new-macbook.svg ├── shades-of-grey-01_1200.webp ├── shades-of-grey-01_1600.webp ├── shades-of-grey-01_800.webp ├── smashing-meets-goes-green.svg ├── social_1200x630.png ├── solving-a-tricky-layout-problem_01.jpg ├── solving-a-tricky-layout-problem_02.png ├── solving-a-tricky-layout-problem_03.png ├── solving-a-tricky-layout-problem_04.png ├── solving-a-tricky-layout-problem_05.png ├── solving-a-tricky-layout-problem_06.png ├── solving-a-tricky-layout-problem_07.png ├── sotb01.jpg ├── state-of-the-browser.jpg ├── styling-external-links-01.webp ├── styling-external-links-02.webp ├── subgrid-is-here.png ├── svg-filter_02-01.png ├── svg-filters_01a-01.png ├── svg-filters_01b-01.png ├── svg-filters_03-01.png ├── svg-filters_duotone.png ├── testing-color-accessibility-with-dev-tools-01.jpg ├── the-joy-of-lists-01.svg ├── thoughts-on-the-state-of-the-web.jpg ├── tips-for-writing-for-the-web.svg ├── to-grid-or-to-flex-01.svg ├── to-grid-or-to-flex-02.jpg ├── top-tips-for-hiring-diverse-teams-01.png ├── top-tips-for-hiring-diverse-teams-02.png ├── working-with-color-scales-01.svg ├── working-with-color-scales-02.jpg ├── working-with-color-scales-02b.jpg ├── working-with-color-scales-02c.jpg ├── working-with-color-scales-03.jpg ├── workshop-review-data-visualisation-fundamentals.png ├── workshop-review-data-visualisation-fundamentals_1200.webp ├── workshop-review-data-visualisation-fundamentals_1600.webp ├── workshop-review-data-visualisation-fundamentals_600.webp ├── workshop-review-data-visualisation-fundamentals_900.webp ├── wrapping-up-2023.svg ├── writing-useful-alt-text-01.webp └── writing-useful-alt-text-02.webp ├── index.md ├── js ├── darkModeToggle.js ├── expander.js ├── header.js ├── menu.js ├── scripts.js └── service-worker.js ├── media ├── animating-css-grid.mp4 ├── heatwave-animated-sun-illustration.mp4 └── is-it-time-to-ditch-the-design-grid.mp4 ├── pages ├── about.md ├── articles.njk ├── blogroll.njk ├── demos.njk ├── faqs.md ├── guest-posts.md ├── notes.njk ├── pages.json ├── quick-tips.njk └── tags-list.njk ├── posts ├── .DS_Store ├── 20-inspiring-women.md ├── 2019-in-review.md ├── 2021-in-review.md ├── 2022-in-review.md ├── 7-uses-for-css-custom-properties.md ├── a-blog-post-about-blogging.md ├── a-fun-css-text-effect.md ├── a-guide-to-modern-css-colors.md ├── a-handy-use-for-cascade-layers.md ├── a-layout-trick-for-building-a-contact-list.md ├── a-modern-front-end-workflow-part-1.md ├── a-modern-front-end-workflow-part-2.md ├── a-modern-front-end-workflow-part-3.md ├── a-native-visually-hidden-class.md ├── a-quick-website-redesign.md ├── a-reason-to-self-host-fonts.md ├── a-useful-vscode-extension-for-environment-switching.md ├── a-utility-class-for-covering-elements.md ├── a-versatile-markdown-shortcode-for-eleventy.md ├── a-year-of-utility-classes.md ├── accessible-toggles.md ├── accessibly-hiding-focus-outlines.md ├── ai-environmental-impact-report.md ├── all-the-css-colours.md ├── amending-your-past-commits-with-git.md ├── anchor-positioning-and-the-popover-api.md ├── animated-grid-tracks-with-has.md ├── animating-css-grid.md ├── animating-underlines.md ├── another-anchor-positioning-demo-multiple-anchors.md ├── are-my-third-parties-green.md ├── aspect-ratio-cells.md ├── aspect-ratio-is-great.md ├── beautiful-scrolling-experiences-without-libraries.md ├── becoming-a-tech-speaker.md ├── better-vue-application-state-management-with-vuex-modules.md ├── breaking-out-of-a-central-wrapper.md ├── building-a-dependency-free-site.md ├── building-a-dynamic-header-with-intersection-observer.md ├── building-a-greener-web.md ├── building-a-progressive-web-app.md ├── building-a-scrapbook-layout-with-css-grid.md ├── building-a-scrollable-and-draggable-timeline-with-gsap.md ├── building-an-interactive-sparkline-graph-with-d3.md ├── building-an-interactive-timetable.md ├── building-the-zig-zag-gradient-lab.md ├── carbon-capture-a-new-way-to-measure-carbon-emissions.md ├── choosing-a-green-web-host.md ├── code-gardening.md ├── color-theming-with-custom-properties-and-tailwind.md ├── controlling-leftover-grid-items.md ├── cool-tools.md ├── correcting-with-kindness.md ├── creating-3d-characters-in-threejs.md ├── creating-color-palettes-with-the-color-mix-function.md ├── creating-css-variables-from-a-js-file.md ├── creating-custom-easing-effects-with-linear.md ├── creating-generative-svg-characters.md ├── creating-static-svgs-from-geojson.md ├── creating-vscode-snippets-to-speed-up-workflow.md ├── creative-css-layout-and-the-flexible-web.md ├── creative-list-styling.md ├── css-day-2022.md ├── css-halftone-patterns.md ├── css-masonry-layout-syntax.md ├── css-nesting-is-here.md ├── css-only-slide-up-caption-hover-effect.md ├── debating-the-merits-of-llms.md ├── debugging-css-grid-part-1-understanding-implicit-tracks.md ├── debugging-css-grid-part-2-what-the-fraction.md ├── debugging-css-grid-part-3-auto-flow-order-and-item-placement.md ├── debugging-media-queries-a-dev-tools-wish-list.md ├── design-patterns-that-encourage-junk-data.md ├── detecting-css-selector-support.md ├── detecting-hover-capable-devices.md ├── developer-decisions-for-building-flexible-components.md ├── development-budgets.md ├── disentangling-frameworks.md ├── do-we-need-css4.md ├── dont-forget-the-lang-attribute.md ├── dont-mind-the-gap.md ├── drawing-raindrops-with-css-gradients-and-masks.md ├── drop-shadow-the-underrated-css-filter.md ├── dynamic-css-masks-with-custom-properties-and-gsap.md ├── education-needs-teachers-not-more-technology.md ├── eleventy-starter-projects-updates.md ├── evaluating-clever-css-solutions.md ├── everybodys-free-to-write-websites.md ├── exciting-things-on-the-horizon-for-css-layout.md ├── exciting-times-for-browsers-and-css.md ├── experimental-layouts.md ├── exploring-has-again.md ├── favourite-things-01.md ├── favourite-things-02.md ├── favourite-web-development-courses.md ├── february-2024-bookmarks.md ├── feedback.md ├── find-me-on-mastodon.md ├── finding-an-elements-nearest-relative-positioned-ancestor.md ├── finding-meaning-in-our-work.md ├── from-gatsby-to-eleventy.md ├── fun-with-css-motion-path.md ├── get-ready-for-the-css-grid-revolution.md ├── getting-started-with-container-queries.md ├── goodbye-2020.md ├── greenhouse-gas-emissions-from-streaming-digital-content.md ├── greenwashing-and-the-cop28-website.md ├── handling-null-undefined-and-zero-values-in-javascript.md ├── handy-tools-for-mocking-api-requests.md ├── has-has-landed-in-safari.md ├── heatwave-animated-sun-illustration.md ├── hide-and-debug-empty-elements-with-css.md ├── how-do-you-vertically-centre-an-element-in-css.md ├── how-git-stash-can-help-you-juggle-multiple-branches.md ├── how-i-solved-my-font-rendering-problem.md ├── how-to-accessibly-split-text.md ├── how-to-be-a-good-co-worker.md ├── how-to-convince-your-team-to-adopt-grid.md ├── how-to-create-better-themes.md ├── how-to-enable-experimental-web-platform-features.md ├── i-finally-installed-an-ad-blocker.md ├── imperfect.md ├── in-commission-to-no-emissions-videos-from-toronto-web-performance-meetup.md ├── in-defence-of-bad-code.md ├── in-search-of-simplicity.md ├── inspecting-sizes.md ├── interop-2023.md ├── interview-beyond-the-spotlight.md ├── into-the-matrix-with-svg-filters.md ├── introducing-the-web-sustainability-guidelines.md ├── introduction-to-gatsby.md ├── introduction-to-web-sustainability.md ├── irregular-shaped-links-with-subgrid.md ├── is-it-time-to-ditch-the-design-grid.md ├── it-career-energizer-podcast.md ├── ive-been-doing-blockquotes-wrong.md ├── kicking-the-excessive-javascript-habit.md ├── launching-the-new-and-improved-css-irl.md ├── learning-about-css-3d-transforms.md ├── learning-in-the-open.md ├── leaving-twitter-behind.md ├── limitation-breeds-creativity.md ├── logical-border-radius.md ├── logical-properties-for-useful-shorthands.md ├── logical-properties-in-size-queries.md ├── making-work-experience-a-positive-experience.md ├── manifesto-for-a-humane-web.md ├── masking-one-element-with-another.md ├── masonry-in-css.md ├── mentoring-junior-developers.md ├── mentoring.md ├── messing-about-with-css-gradients.md ├── modern-css-layout-is-awesome.md ├── more-flexibility-with-minmax.md ├── my-browser-support-strategy.md ├── my-css-grid-wishlist.md ├── my-typical-day.md ├── nan-or-not-a-number.md ├── national-blog-posting-month.md ├── negative-grid-lines.md ├── new-and-improved-green-web-hosting-directory.md ├── new-css-features-in-2022.md ├── new-length-debugging-tool-in-chrome-canary.md ├── not-an-nft-artist.md ├── notes-from-green-io-conference.md ├── notes-from-state-of-the-browser.md ├── oh-no-overflow.md ├── on-a-break.md ├── optimising-svgs-for-the-web.md ├── optimizing-a-vue-app.md ├── owning-your-web.md ├── paper-snowflakes-combining-clipping-and-masking-in-css.md ├── perspective.md ├── pixel-pioneers-2019-roundup.md ├── positioning-text-along-a-path-with-css.md ├── posts.json ├── practical-tips-css-variables.md ├── preventing-overscroll-bounce-with-css.md ├── programming-as-a-craft.md ├── progressive-web-apps.md ├── progressively-enhanced-popover-toggletips.md ├── quick-and-easy-dark-mode-with-css-custom-properties.md ├── quick-command-line-tip-create-multiple-files.md ├── quick-tip-negative-animation-delay.md ├── quick-tip-style-pseudo-elements-with-javascript-using-custom-properties.md ├── quick-tip-you-might-not-need-calc.md ├── radial-gradients-and-css-trigonometric-functions.md ├── reactivity-in-vanilla-javascript.md ├── reality-check-a-series-for-building-real-layouts.md ├── recreating-the-his-dark-materials-logo-in-css.md ├── reduce-your-websites-environmental-impact-with-a-carbon-budget.md ├── reducing-complexity-in-front-end-development.md ├── reducing-the-webs-carbon-footprint-optimizing-social-media-embeds.md ├── relative-grid-tracks.md ├── reporting-on-website-carbon-emissions.md ├── resizing-with-css.md ├── respecting-users-motion-preferences.md ├── responsive-css-motion-path.md ├── reversing-an-easing-curve.md ├── rss-is-good-isnt-it.md ├── scheduling-netlify-deployments-with-github-actions.md ├── scroll-progress-animations-in-css.md ├── scroll-timeline-parallax-effect.md ├── setting-up-a-newish-macbook.md ├── shades-of-grey-with-color-mix.md ├── simpler-block-styling-in-wordpress-with-is-and-where.md ├── simplifying-form-styles-with-accent-color.md ├── solving-a-tricky-layout-problem.md ├── speaking-at-bristol-js.md ├── state-of-the-art-css.md ├── stop-using-ai-generated-images.md ├── styling-external-links-with-attribute-selectors.md ├── styling-tables-the-modern-css-way.md ├── subgrid-is-here.md ├── super-powered-grid-components.md ├── super-powered-layouts.md ├── sustainable-hardware-choices.md ├── sustainable-web-development-strategies-within-an-organization.md ├── tailwind-thoughts.md ├── talking-about-web-sustainability-on-shoptalk-show.md ├── tech-workers-and-climate-action.md ├── testing-colour-accessibility-with-dev-tools.md ├── testing-the-performance-of-social-media-embeds.md ├── the-joy-of-lists.md ├── the-perfect-site-doesnt-exist.md ├── the-problem-with-surveys.md ├── the-state-of-css-2021.md ├── the-web-doesnt-have-version-numbers.md ├── thoughts-from-css-day-2023.md ├── thoughts-on-the-state-of-the-web.md ├── thoughts-on-ux-engineering.md ├── time-to-ditch-analytics.md ├── tips-for-writing-for-the-web.md ├── to-grid-or-to-flex.md ├── toggling-css-custom-properties-with-radio-buttons.md ├── top-front-end-writers.md ├── top-tips-for-hiring-diverse-teams.md ├── trigonometry-in-css-and-js-a-series.md ├── troubleshooting-caching.md ├── update-on-the-cop28-website.md ├── useful-resources-for-web-performance.md ├── using-flow-diagrams-to-manage-state.md ├── using-pseudo-elements.md ├── variable-font-animation-with-css-and-splitting-js.md ├── video-90-seconds-on-css-custom-properties.md ├── video-building-a-greener-web-smashing-meets.md ├── video-building-a-greener-web.md ├── video-building-complex-layouts-future-sync.md ├── video-dev-roulette-live.md ├── video-modern-css-layout-is-awesome.md ├── video-super-powered-layouts-at-state-of-the-browser.md ├── video-using-tailwind-with-wordpress.md ├── web-sustainability-and-the-ethical-dilemma.md ├── web-sustainability-resources.md ├── what-i-learned-from-migrating-a-vuex-app-to-pinia.md ├── what-to-blog-about-when-you-dont-know-what-to-blog-about.md ├── where-do-we-go-from-here.md ├── wholegrain-digitals-response-to-web-sustainability-report.md ├── why-i-dont-have-time-for-your-coding-challenge.md ├── why-you-should-hold-onto-your-devices-for-longer.md ├── working-with-color-scales-for-data-visualisation-in-d3.md ├── workshop-review-data-visualisation-fundamentals.md ├── wrapping-up-2018.md ├── wrapping-up-2023.md ├── wrapping-up-national-blog-posting-month-2023.md ├── writing-useful-alt-text.md └── you-have-something-to-say-thats-worth-hearing.md ├── robots.txt ├── rss.njk └── tags.njk /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "rules": { 3 | "quotes": [ 4 | "error", 5 | "single", 6 | { "avoidEscape": false, "allowTemplateLiterals": true } 7 | ] 8 | }, 9 | "parserOptions": { "sourceType": "module", "ecmaVersion": 2021 }, 10 | "extends": ["prettier"] 11 | } 12 | -------------------------------------------------------------------------------- /.github/workflows/main.yml: -------------------------------------------------------------------------------- 1 | name: Scheduled build 2 | on: 3 | schedule: 4 | - cron: '0 0 * * 0' 5 | jobs: 6 | build: 7 | runs-on: ubuntu-latest 8 | steps: 9 | - name: Trigger our build webhook on Netlify 10 | env: 11 | TOKEN: ${{ secrets.NETLIFY_DAILY_BUILD }} 12 | run: curl -X POST -d {} https://api.netlify.com/build_hooks/${TOKEN} 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | .parcel-cache 61 | .cache 62 | public 63 | yarn-error.log 64 | dist 65 | .DS_Store 66 | _webmentioncache 67 | 68 | # Yarn 69 | .pnp.* 70 | .yarn 71 | !.yarn/patches 72 | !.yarn/plugins 73 | !.yarn/releases 74 | !.yarn/sdks 75 | !.yarn/versions 76 | 77 | # Netlify generated stuff 78 | .netlify/ 79 | netlify 80 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | v20.5.1 -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | # Build files: 2 | /dist/* 3 | 4 | /node_modules/* -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "tabWidth": 2, 4 | "semi": false, 5 | "singleQuote": true 6 | } 7 | -------------------------------------------------------------------------------- /.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "stylelint-config-prettier" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # CSS { In Real Life } 2 | 3 | The official Github repository for front end blog [CSS { In Real Life }](https://css-irl.info/). 4 | 5 | [![Netlify Status](https://api.netlify.com/api/v1/badges/cc07b1dd-5918-4cd2-b95c-94f7e950062b/deploy-status)](https://app.netlify.com/sites/css-irl/deploys) 6 | 7 | ## How to run 8 | 9 | 1. Install dependencies: `npm install`. 10 | 2. Run `npm start` to start the Eleventy server. In a new terminal window run `npm run watch:parcel` to watch for CSS and JS changes. 11 | 12 | ## Building for production 13 | 14 | ```zsh 15 | npm run build 16 | ``` 17 | 18 | ### Generate SVG sprite 19 | 20 | ```zsh 21 | npm run svg 22 | ``` 23 | -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | command = "npm run build" 3 | publish = "dist" 4 | 5 | [[headers]] 6 | for = "/*" 7 | 8 | [headers.values] 9 | X-Frame-Options = "SAMEORIGIN" 10 | X-XSS-Protection = "1; mode=block" 11 | cache-control = ''' 12 | max-age=600, 13 | must-revalidate''' 14 | -------------------------------------------------------------------------------- /onStart.mjs: -------------------------------------------------------------------------------- 1 | import { writeFile } from 'fs' 2 | 3 | const versionObject = { 4 | css: '', 5 | js: '', 6 | } 7 | 8 | writeFile('src/_data/version.json', JSON.stringify(versionObject), (err) => { 9 | if (err) throw err 10 | console.log(`${versionObject} > src/_data/version.json`) 11 | }) 12 | -------------------------------------------------------------------------------- /src/_data/menudata.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "title": "Github", 4 | "icon": "github", 5 | "url": "https://github.com/mbarker84" 6 | }, 7 | { 8 | "title": "Mastodon", 9 | "icon": "mastodon", 10 | "url": "https://front-end.social/@michelle" 11 | } 12 | ] 13 | -------------------------------------------------------------------------------- /src/_data/menuitems.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "title": "Home", 4 | "url": "/" 5 | }, 6 | { 7 | "title": "Search by topic", 8 | "url": "/tags" 9 | }, 10 | { 11 | "title": "About", 12 | "url": "/about" 13 | }, 14 | { 15 | "title": "FAQs", 16 | "url": "/faqs" 17 | }, 18 | { 19 | "title": "Blogroll", 20 | "url": "/blogroll" 21 | }, 22 | { 23 | "title": "RSS", 24 | "url": "/rss.xml", 25 | "icon": { 26 | "name": "icon-rss", 27 | "title": "RSS", 28 | "url": "/rss.xml" 29 | } 30 | } 31 | ] 32 | -------------------------------------------------------------------------------- /src/_data/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "CSS { In Real Life }", 3 | "description": "A blog about CSS, front-end development, the web, and beyond.", 4 | "aboutLink": { 5 | "title": "Find out more", 6 | "url": "/about" 7 | }, 8 | "author": { 9 | "name": "Michelle Barker" 10 | }, 11 | "url": "https://css-irl.info", 12 | "img": "social_1200x630.png" 13 | } 14 | -------------------------------------------------------------------------------- /src/_data/version.json: -------------------------------------------------------------------------------- 1 | {"css":"b6793f1f9193b712","js":"740acf2ed4c64f57"} -------------------------------------------------------------------------------- /src/_includes/about.njk: -------------------------------------------------------------------------------- 1 | {% extends "./layout.njk" %} 2 | 3 | {% block content %} 4 |
5 |
6 |
7 |
8 | {% set title = displayTitle %} 9 | {% include "./partials/post-header.njk" %} 10 |
11 |
12 |
13 | {{ content | safe }} 14 |
15 | {% include "./partials/author-details.njk" %} 16 |
17 |
18 | {% include "./partials/prev-next.njk" %} 19 |
20 |
21 |
22 |
23 | {% endblock %} 24 | -------------------------------------------------------------------------------- /src/_includes/blogroll.njk: -------------------------------------------------------------------------------- 1 | {% extends "./layout.njk" %} 2 | 3 | {% block content %} 4 |
5 |
6 |
7 |

{{ pageTitle }}

8 | {{ content | safe }} 9 |
10 | 11 | 19 |
20 |
21 | {% endblock %} 22 | -------------------------------------------------------------------------------- /src/_includes/home.njk: -------------------------------------------------------------------------------- 1 | --- 2 | layout: 'posts-layout.njk' 3 | --- 4 | 5 | {% set items = pagination.items %} 6 | 7 | {% block content %} 8 | 13 | {% endblock %} 14 | -------------------------------------------------------------------------------- /src/_includes/page.njk: -------------------------------------------------------------------------------- 1 | {% extends "./layout.njk" %} 2 | 3 | {% block content %} 4 |
5 |
6 |

7 | {% if displayTitle %} 8 | {{ displayTitle }} 9 | {% else %} 10 | {{ pageTitle }} 11 | {% endif %} 12 |

13 | {{ content | safe }} 14 |
15 |
16 | {% endblock %} 17 | -------------------------------------------------------------------------------- /src/_includes/partials/author-details.njk: -------------------------------------------------------------------------------- 1 | {% if authorInfo %} 2 |
3 |
4 | Michelle Barker profile picture 5 |
6 |
7 |

About the author

8 | {{ authorInfo | safe }} 9 |
10 |
11 | {% endif %} 12 | -------------------------------------------------------------------------------- /src/_includes/partials/categories.njk: -------------------------------------------------------------------------------- 1 | {% set categories = [ 2 | { 3 | title: 'All', 4 | url: '/', 5 | length: collections.post|length 6 | }, 7 | { 8 | title: 'Articles', 9 | url: '/articles/', 10 | length: collections.article|length 11 | }, 12 | { 13 | title: 'Quick tips', 14 | url: '/quick-tips/', 15 | length: collections['quick tip']|length 16 | }, 17 | { 18 | title: 'Notes', 19 | url: '/notes/', 20 | length: collections.note|length 21 | }, 22 | { 23 | title: 'Demos', 24 | url: '/demos/', 25 | length: collections.demo|length 26 | } 27 | ] %} 28 | 29 |
30 |

Categories

31 | 38 |
-------------------------------------------------------------------------------- /src/_includes/partials/components/icon-link.njk: -------------------------------------------------------------------------------- 1 | 2 | 5 | {{ iconLink.title }} 6 | -------------------------------------------------------------------------------- /src/_includes/partials/dark-mode-toggle.njk: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/_includes/partials/footer.njk: -------------------------------------------------------------------------------- 1 | 24 | -------------------------------------------------------------------------------- /src/_includes/partials/hero.njk: -------------------------------------------------------------------------------- 1 |
2 |
3 | 6 |

{{ metadata.title }}

7 |
8 |

{{ metadata.description }}

9 | {{ metadata.aboutLink.title }} 10 |
11 |
12 |
-------------------------------------------------------------------------------- /src/_includes/partials/more-like-this.njk: -------------------------------------------------------------------------------- 1 |
2 |

More like this

3 | 10 |
-------------------------------------------------------------------------------- /src/_includes/partials/post-grid-pagination.njk: -------------------------------------------------------------------------------- 1 | 15 | -------------------------------------------------------------------------------- /src/_includes/partials/post-header.njk: -------------------------------------------------------------------------------- 1 | {% if headerStyle == 'simple' %} 2 | {% set componentClass = 'c-post-header--simple' %} 3 | {% endif %} 4 | 5 |
6 | 7 | {% if featuredImage %} 8 | 9 | {% endif %} 10 | 11 | {% include "./post-header-content.njk" %} 12 | 13 |
14 | -------------------------------------------------------------------------------- /src/_includes/partials/posts-grid.njk: -------------------------------------------------------------------------------- 1 | 6 | 7 | {% include "./post-grid-pagination.njk" %} 8 | -------------------------------------------------------------------------------- /src/_includes/partials/prev-next.njk: -------------------------------------------------------------------------------- 1 | {% set slug = '/' + page.fileSlug + '/' %} 2 | 3 | 28 | -------------------------------------------------------------------------------- /src/_includes/partials/sotb-banner-ad.njk: -------------------------------------------------------------------------------- 1 |
2 |
3 | State of the Browser 4 |
5 |

State of the browser is back for the 10th year! Join us in London or online on

6 | Get tickets → 7 |
8 |
9 |
-------------------------------------------------------------------------------- /src/_includes/partials/tag-links.njk: -------------------------------------------------------------------------------- 1 | {% if home %} 2 | {% set componentClass = 'c-tag-links--home' %} 3 | {% endif %} 4 | 5 | 19 | -------------------------------------------------------------------------------- /src/_includes/post-alt.njk: -------------------------------------------------------------------------------- 1 | {% extends "./layout.njk" %} 2 | 3 | {% set style = '' %} 4 | 5 | {% if headerColors %} 6 | {% set style = '--color1:' + headerColors[0] + ';' %} 7 | {% endif %} 8 | 9 | {% if headerColors|length > 1 %} 10 | {% set style = style + '--color2:' + headerColors[1] + ';' %} 11 | {% endif %} 12 | 13 | {% if textColor %} 14 | {% set style = style + '--headerTextColor:' + textColor + ';' %} 15 | {% endif %} 16 | 17 | {% block content %} 18 |
19 |
20 |
21 | {% include "./partials/post-header-content.njk" %} 22 |
23 |
24 | 25 |
26 |
27 | 28 |
29 |
30 | {{ content | safe }} 31 |
32 | {% include "./partials/webmentions.njk" %} 33 |
34 |
35 | {% include "./partials/prev-next.njk" %} 36 |
37 |
38 |
39 |
40 | {% endblock %} 41 | -------------------------------------------------------------------------------- /src/_includes/post.njk: -------------------------------------------------------------------------------- 1 | {% extends "./layout.njk" %} 2 | 3 | {% block content %} 4 |
5 |
6 |
7 |
8 | {% include "./partials/post-header.njk" %} 9 |
10 |
11 | {% if intro %} 12 |

{{ intro }}

13 | {% endif %} 14 |
15 | {{ content | safe }} 16 |
17 | {% include "./partials/webmentions.njk" %} 18 |
19 | {% if related %} 20 |
21 | {% include "./partials/more-like-this.njk" %} 22 |
23 | {% endif %} 24 |
25 | {% include "./partials/prev-next.njk" %} 26 |
27 |
28 |
29 |
30 | {% endblock %} 31 | -------------------------------------------------------------------------------- /src/_includes/posts-layout.njk: -------------------------------------------------------------------------------- 1 | {% extends "./layout.njk" %} 2 | 3 | {% if page.url != '/' %} 4 | {% set pageClass = 'home-layout--no-hero' %} 5 | {% endif %} 6 | 7 | {% block content %} 8 |
9 | 10 | {% if page.url == '/' %} 11 | {% include "./partials/hero.njk" %} 12 | {% endif %} 13 | 14 |
15 | {# {{ content | safe }} #} 16 | 17 |
18 |
19 | 20 |
21 |

Search by topic...

22 | {% set tags = collections.homepageTags %} 23 | {% set home = true %} 24 | {% include "./partials/tag-links.njk" %} 25 | 26 | {% include "./partials/categories.njk" %} 27 |
28 |
29 | 30 |
31 | {{ content | safe }} 32 | {% if items %} 33 |
    34 | {% for post in items %} 35 | {% include "./partials/post-listing.njk" %} 36 | {% endfor %} 37 |
38 | {% endif %} 39 |
40 |
41 | 42 | {% include "./partials/post-grid-pagination.njk" %} 43 |
44 |
45 | {% endblock %} 46 | -------------------------------------------------------------------------------- /src/_includes/tag-page.njk: -------------------------------------------------------------------------------- 1 | {% extends "./layout.njk" %} 2 | 3 | {% block content %} 4 |
5 | {{ content | safe }} 6 |
7 | {% endblock %} 8 | -------------------------------------------------------------------------------- /src/css/01-config/_functions.scss: -------------------------------------------------------------------------------- 1 | @use "sass:math"; 2 | 3 | @function rem($size) { 4 | $remSize: math.div($size, 16px); 5 | 6 | @return #{$remSize}rem; 7 | } 8 | -------------------------------------------------------------------------------- /src/css/02-base/_reset.scss: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | min-height: 100vh; 7 | margin: 0; 8 | background: var(--bg); 9 | } 10 | 11 | p { 12 | margin: 0; 13 | } 14 | 15 | ul { 16 | display: block; 17 | margin: 0; 18 | padding: 0; 19 | } 20 | 21 | ul[class] { 22 | list-style: none; 23 | } 24 | 25 | img, 26 | video { 27 | max-width: 100%; 28 | height: auto; 29 | display: block; 30 | } 31 | 32 | svg { 33 | width: 100%; 34 | height: 100%; 35 | fill: currentColor; 36 | } 37 | 38 | figure { 39 | margin: 0; 40 | } 41 | -------------------------------------------------------------------------------- /src/css/03-objects/_hotlink.scss: -------------------------------------------------------------------------------- 1 | .o-hotlink { 2 | display: inline-flex; 3 | background-color: var(--primary); 4 | border-radius: 0.5rem; 5 | border: 0.1rem solid var(--primary); 6 | padding: 0.25em 1em; 7 | text-decoration: none; 8 | color: var(--white); 9 | transition: 10 | color 150ms, 11 | background-color 150ms; 12 | 13 | &[href^='http'] { 14 | &::after { 15 | --externalLinkImage: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 12.2 12.2' width='14' height='14'%3E%3Cpath fill='white' d='M5.7 0v1.5h4L4.5 6.7l1 1.1 5.3-5.2v3.9h1.4V0z'/%3E%3Cpath fill='none' d='M3.4 6.7l3-2.9H1.5v7h7V5.9l-3 2.9z'/%3E%3Cpath fill='white' d='M8.5 5.9v4.9h-7v-7h4.9l1.5-1.6H0v10h10V4.4z'/%3E%3C/svg%3E"); 16 | position: relative; 17 | } 18 | } 19 | 20 | &:hover, 21 | &:focus-visible { 22 | background-color: var(--bg); 23 | color: var(--primary); 24 | text-decoration: none; 25 | 26 | &[href^='http'] { 27 | &::after { 28 | --externalLinkImage: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 12.2 12.2' width='14' height='14'%3E%3Cpath fill='deeppink' d='M5.7 0v1.5h4L4.5 6.7l1 1.1 5.3-5.2v3.9h1.4V0z'/%3E%3Cpath fill='none' d='M3.4 6.7l3-2.9H1.5v7h7V5.9l-3 2.9z'/%3E%3Cpath fill='deeppink' d='M8.5 5.9v4.9h-7v-7h4.9l1.5-1.6H0v10h10V4.4z'/%3E%3C/svg%3E"); 29 | } 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/css/03-objects/_icon-link.scss: -------------------------------------------------------------------------------- 1 | .o-icon-link { 2 | display: flex; 3 | align-items: center; 4 | gap: 0.25rem; 5 | 6 | svg { 7 | width: 0.9lh; 8 | flex: 0 0 auto; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /src/css/04-components/_all-tags.scss: -------------------------------------------------------------------------------- 1 | .c-all-tags__list { 2 | @media (min-width: $md) { 3 | columns: 20rem; 4 | column-gap: 2rem; 5 | } 6 | } 7 | 8 | .c-all-tags__link { 9 | color: var(--textColor); 10 | 11 | &:hover, 12 | &:focus { 13 | color: var(--primary); 14 | } 15 | } 16 | 17 | .c-all-tags__post-count { 18 | font-family: $heading-light; 19 | color: var(--primary); 20 | font-size: 0.9rem; 21 | 22 | @media (min-width: $md) { 23 | font-size: 1rem; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/css/04-components/_alt-header.scss: -------------------------------------------------------------------------------- 1 | .c-alt-header { 2 | --py: clamp(3rem, 10vw, 20rem); 3 | background: linear-gradient( 4 | -45deg, 5 | var(--color2, deeppink), 6 | var(--color1, darkorchid) 7 | ); 8 | background-attachment: fixed; 9 | padding: var(--py) 0 var(--vr) 0; 10 | color: var(--headerTextColor, var(--white)); 11 | 12 | .c-tag-links__tag a { 13 | color: var(--white); 14 | background-color: var(--headerBg); 15 | } 16 | 17 | .c-tag-links__tag--note a, 18 | .c-tag-links__tag--quick-tip a { 19 | background-color: var(--note, royalblue); 20 | color: var(--white); 21 | } 22 | 23 | .c-tag-links__tag--quick-tip a { 24 | background-color: var(--note, turquoise); 25 | color: var(--black); 26 | } 27 | 28 | .c-tag-links__tag--demo a { 29 | background-color: var(--note, orange); 30 | color: var(--black); 31 | } 32 | 33 | @media (min-width: $lg) { 34 | margin-bottom: calc(var(--vr) * 2); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/css/04-components/_author-info.scss: -------------------------------------------------------------------------------- 1 | .c-author-info { 2 | padding: var(--vr); 3 | background-color: var(--bgTint); 4 | margin-top: calc(var(--vr) * 2); 5 | 6 | p { 7 | @media (min-width: $md) { 8 | font-size: 1.2rem; 9 | } 10 | } 11 | 12 | p:last-child { 13 | margin-bottom: 0; 14 | } 15 | 16 | p + p { 17 | margin-top: var(--vr); 18 | } 19 | 20 | @media (min-width: $md) { 21 | display: flex; 22 | } 23 | 24 | @media (min-width: $md) { 25 | padding: calc(var(--vr) * 2); 26 | } 27 | } 28 | 29 | .c-author-info__image { 30 | margin: 0 auto var(--vr) auto; 31 | max-width: rem(100px); 32 | border-radius: 50%; 33 | overflow: hidden; 34 | filter: grayscale(100%); 35 | 36 | @media (min-width: $md) { 37 | margin: 0 var(--vr) var(--vr) auto; 38 | align-self: flex-start; 39 | max-width: rem(150px); 40 | } 41 | } 42 | 43 | .c-author-info__heading { 44 | margin: 0 0 var(--vr) 0; 45 | } 46 | -------------------------------------------------------------------------------- /src/css/04-components/_blogroll.scss: -------------------------------------------------------------------------------- 1 | .c-blogroll__list { 2 | padding: rem(20px) 0; 3 | font-family: $heading-light; 4 | display: grid; 5 | grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 6 | gap: var(--vr); 7 | 8 | @media (min-width: $sm) { 9 | grid-template-columns: repeat(2, 1fr); 10 | } 11 | 12 | @media (min-width: $lg) { 13 | grid-template-columns: repeat(3, 1fr); 14 | gap: calc(var(--vr) * 2); 15 | margin-top: calc(var(--vr) * 2); 16 | } 17 | } 18 | 19 | .c-blogroll__item { 20 | font-size: 0.9rem; 21 | padding: var(--vr); 22 | background-color: var(--bgTint); 23 | border-radius: 0.3rem; 24 | position: relative; 25 | 26 | @media (min-width: $md) { 27 | font-size: 1rem; 28 | margin-bottom: 0; 29 | } 30 | } 31 | 32 | .c-blogroll__heading { 33 | margin: 0 0 calc(var(--vr) / 4) 0; 34 | } 35 | 36 | .c-blogroll__link { 37 | &::after { 38 | content: ''; 39 | position: absolute; 40 | top: 0; 41 | left: 0; 42 | width: 100%; 43 | height: 100%; 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /src/css/04-components/_categories.scss: -------------------------------------------------------------------------------- 1 | .c-categories__item { 2 | font-family: $heading-light; 3 | 4 | a { 5 | color: var(--text-color); 6 | text-decoration-color: transparent; 7 | display: inline-flex; 8 | align-items: baseline; 9 | padding: 0.5rem 0; 10 | 11 | &::after { 12 | content: '➞'; 13 | margin-left: 0.2rem; 14 | text-decoration-color: transparent; 15 | opacity: 0; 16 | transform: translate3d(0, 0, 0); 17 | transition: opacity 150ms, transform 150ms; 18 | } 19 | 20 | span:first-child { 21 | text-decoration: underline; 22 | } 23 | 24 | &:hover, 25 | &:focus { 26 | text-decoration-color: transparent; 27 | 28 | &::after { 29 | opacity: 1; 30 | transform: translate3d(0.5rem, 0, 0); 31 | } 32 | } 33 | 34 | @media (hover: hover) and (pointer: fine) { 35 | padding: 0.1rem 0; 36 | } 37 | } 38 | } 39 | 40 | .c-categories__title { 41 | margin-bottom: calc(var(--vr) / 2); 42 | } 43 | 44 | .c-categories__post-count { 45 | font-family: $heading-light; 46 | font-size: max(0.6em, 0.9rem); 47 | margin-left: 0.3em; 48 | color: var(--textGrey); 49 | } 50 | -------------------------------------------------------------------------------- /src/css/04-components/_dark-mode-toggle.scss: -------------------------------------------------------------------------------- 1 | .c-dark-mode-toggle { 2 | transition: color 200ms; 3 | background: none; 4 | border: none; 5 | padding: 0.25rem; 6 | cursor: pointer; 7 | color: var(--bg-headerLink); 8 | 9 | &:hover, 10 | &:focus-visible { 11 | color: var(--primary); 12 | } 13 | } 14 | 15 | .c-dark-mode-toggle__icon { 16 | width: 2.65rem; 17 | height: auto; 18 | } 19 | 20 | .c-dark-mode-toggle__icon--light { 21 | display: none; 22 | 23 | @media (prefers-color-scheme: dark) { 24 | display: block; 25 | } 26 | } 27 | 28 | .c-dark-mode-toggle__icon--dark { 29 | @media (prefers-color-scheme: dark) { 30 | display: none; 31 | } 32 | } 33 | 34 | .th-dark { 35 | .c-dark-mode-toggle__icon--light { 36 | display: block; 37 | } 38 | 39 | .c-dark-mode-toggle__icon--dark { 40 | display: none; 41 | } 42 | } 43 | 44 | .th-light { 45 | @media (prefers-color-scheme: dark) { 46 | .c-dark-mode-toggle__icon--light { 47 | display: none; 48 | } 49 | 50 | .c-dark-mode-toggle__icon--dark { 51 | display: block; 52 | } 53 | } 54 | } 55 | 56 | .no-js { 57 | .c-dark-mode-toggle { 58 | display: none; 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /src/css/04-components/_footer.scss: -------------------------------------------------------------------------------- 1 | .c-footer { 2 | font-family: $heading-light; 3 | font-size: 0.9rem; 4 | padding: 1rem; 5 | background-color: var(--bgGrey); 6 | display: flex; 7 | align-items: baseline; 8 | flex-wrap: wrap; 9 | gap: 1rem; 10 | 11 | @media (min-width: $md) { 12 | padding: 1rem 2rem; 13 | 14 | & > :nth-child(2) { 15 | margin-left: auto; 16 | } 17 | } 18 | } 19 | 20 | .c-footer__links { 21 | display: flex; 22 | flex-wrap: wrap; 23 | gap: 1rem; 24 | } 25 | -------------------------------------------------------------------------------- /src/css/04-components/_hero.scss: -------------------------------------------------------------------------------- 1 | .c-hero { 2 | padding: 3rem 0 calc(2 * var(--vr)); 3 | display: flex; 4 | align-items: center; 5 | position: relative; 6 | 7 | @media (min-width: $md) { 8 | padding: 6rem 0 var(--vr); 9 | } 10 | } 11 | 12 | .c-hero__desc { 13 | font-family: $heading-light; 14 | font-weight: 400; 15 | font-size: 1.3rem; 16 | max-width: 35rem; 17 | 18 | @media (min-width: $md) { 19 | font-size: 1.8rem; 20 | } 21 | } 22 | 23 | .c-hero__about { 24 | display: inline-block; 25 | font-size: 1.2rem; 26 | margin-top: 1em; 27 | } 28 | 29 | .c-hero__svg { 30 | width: 75%; 31 | max-width: 42rem; 32 | margin-bottom: var(--vr); 33 | } 34 | -------------------------------------------------------------------------------- /src/css/04-components/_page-header.scss: -------------------------------------------------------------------------------- 1 | .c-page-header { 2 | padding-bottom: var(--vr); 3 | margin-bottom: var(--vr); 4 | border-bottom: 0.1rem solid var(--textColor); 5 | } 6 | 7 | .c-page-header__post-count { 8 | font-family: $heading; 9 | display: block; 10 | margin-bottom: 0.5rem; 11 | font-size: 1rem; 12 | } 13 | -------------------------------------------------------------------------------- /src/css/04-components/_post-grid-pagination.scss: -------------------------------------------------------------------------------- 1 | .c-post-grid-pagination__items { 2 | display: flex; 3 | list-style: none; 4 | margin: rem(20px) 0; 5 | font-family: $heading; 6 | padding: rem(20px) 0 0; 7 | border-top: 0.1rem solid var(--textColor); 8 | 9 | @media (min-width: $lg) { 10 | margin-top: rem(60px); 11 | } 12 | 13 | a { 14 | color: inherit; 15 | font-weight: 400; 16 | text-decoration: none; 17 | 18 | &:hover, 19 | &:focus { 20 | color: var(--primary); 21 | } 22 | } 23 | } 24 | 25 | .c-post-grid-pagination__item--next { 26 | margin-left: auto; 27 | } 28 | -------------------------------------------------------------------------------- /src/css/04-components/_post-header.scss: -------------------------------------------------------------------------------- 1 | .c-post-header { 2 | padding-top: var(--vr); 3 | margin-bottom: calc(var(--vr) * 2); 4 | 5 | > * + * { 6 | margin: rem(5px) 0 0; 7 | 8 | @media (min-width: $md) { 9 | margin: rem(10px) 0 0; 10 | } 11 | } 12 | 13 | @media (min-width: $md) { 14 | margin-bottom: var(--vr); 15 | } 16 | 17 | @media (min-width: $lg) { 18 | @supports (display: grid) { 19 | margin-bottom: 0; 20 | } 21 | } 22 | } 23 | 24 | .c-post-header__date, 25 | .c-post-header__source { 26 | display: block; 27 | font-family: $heading-light; 28 | font-size: 0.9rem; 29 | 30 | @media (min-width: $md) { 31 | font-size: 1rem; 32 | } 33 | } 34 | 35 | .c-post-header__series { 36 | display: block; 37 | font-size: rem(16px); 38 | margin-bottom: 1rem; 39 | margin-top: 1rem; 40 | 41 | @media (min-width: $md) { 42 | font-size: rem(24px); 43 | } 44 | } 45 | 46 | .c-post-header__title { 47 | margin-bottom: 0; 48 | max-width: 25ch; 49 | letter-spacing: -0.01em; 50 | 51 | @media (min-width: $lg) { 52 | margin-bottom: var(--vr); 53 | } 54 | } 55 | 56 | .c-post-header { 57 | position: relative; 58 | margin-bottom: 0; 59 | padding-bottom: calc(var(--vr) * 2); 60 | border-bottom: 0.1rem solid var(--textColor); 61 | } 62 | 63 | .page-content--about { 64 | .c-post-header__title { 65 | @media (min-width: $lg) { 66 | margin-bottom: 0; 67 | } 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /src/css/04-components/_prev-next.scss: -------------------------------------------------------------------------------- 1 | .c-prev-next { 2 | font-family: $heading; 3 | margin-top: rem(20px); 4 | padding-top: rem(20px); 5 | border-top: 0.1rem solid var(--textColor); 6 | 7 | @media (min-width: 400px) { 8 | display: flex; 9 | } 10 | 11 | @media (min-width: $lg) { 12 | margin-top: 0; 13 | } 14 | } 15 | 16 | .c-prev-next__item { 17 | flex: 1 0 50%; 18 | transition: color 200ms; 19 | line-height: 1.5; 20 | 21 | &:first-child { 22 | margin-bottom: rem(20px); 23 | } 24 | 25 | @media (min-width: 400px) { 26 | &:first-child { 27 | padding-right: rem(20px); 28 | margin-bottom: 0; 29 | } 30 | 31 | &:nth-child(2) { 32 | padding-left: rem(20px); 33 | text-align: right; 34 | } 35 | } 36 | } 37 | 38 | .c-prev-next__link-desc { 39 | font-size: 0.9rem; 40 | display: block; 41 | text-decoration-style: none; 42 | margin-bottom: rem(10px); 43 | 44 | @media (min-width: $sm) { 45 | font-size: 1rem; 46 | } 47 | } 48 | 49 | .c-prev-next__link { 50 | color: var(--textColor); 51 | text-decoration-style: underline; 52 | text-decoration-color: var(--primary); 53 | text-decoration-thickness: 0.08em; 54 | text-underline-offset: 0.2em; 55 | 56 | &:hover, 57 | &:focus { 58 | color: var(--primary); 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /src/css/04-components/_sidebar.scss: -------------------------------------------------------------------------------- 1 | .sidebar { 2 | margin-top: var(--vr); 3 | padding-top: var(--vr); 4 | border-top: 1px solid; 5 | 6 | @media (min-width: $lg) { 7 | margin-top: 0; 8 | padding-top: 0; 9 | border: none; 10 | position: sticky; 11 | top: 5rem; 12 | } 13 | } 14 | 15 | .sidebar__heading { 16 | font-family: $heading-light; 17 | font-size: 0.8em; 18 | font-weight: normal; 19 | margin-top: 0; 20 | } 21 | 22 | .sidebar__list { 23 | display: grid; 24 | gap: 1em; 25 | position: sticky; 26 | top: 0; 27 | } 28 | 29 | .sidebar__link { 30 | font-family: $heading; 31 | font-weight: $bold; 32 | line-height: 1.25; 33 | } 34 | -------------------------------------------------------------------------------- /src/css/04-components/_webmentions.scss: -------------------------------------------------------------------------------- 1 | .c-webmentions { 2 | border-top: 0.1rem solid var(--textColor); 3 | padding-top: var(--vr); 4 | margin-top: calc(2 * var(--vr)); 5 | } 6 | 7 | .c-webmentions__items { 8 | display: flex; 9 | gap: var(--vr); 10 | font-size: 1rem; 11 | font-family: $heading-light; 12 | margin-bottom: var(--vr); 13 | } 14 | 15 | .c-webmentions__item { 16 | display: flex; 17 | 18 | svg { 19 | width: 2em; 20 | margin-right: 0.25em; 21 | } 22 | } 23 | 24 | .c-webmentions__list { 25 | > * + * { 26 | margin-top: var(--vr); 27 | } 28 | } 29 | 30 | .c-webmentions__list-item { 31 | max-width: 50rem; 32 | font-size: max(1rem, 0.9em); 33 | 34 | blockquote { 35 | padding: calc(var(--vr) / 2) 1rem; 36 | background-color: var(--bgTint); 37 | margin-left: 0; 38 | border-radius: 0.3rem; 39 | } 40 | 41 | cite { 42 | font-style: normal; 43 | font-family: $heading-light; 44 | font-size: 1rem; 45 | } 46 | } 47 | 48 | .c-webmentions__header { 49 | margin-bottom: var(--vr); 50 | } 51 | 52 | .c-webmentions__heading { 53 | display: inline-block; 54 | margin-bottom: 0; 55 | } 56 | 57 | .c-webmentions__info-link { 58 | font-style: normal; 59 | font-family: $heading-light; 60 | font-size: 1rem; 61 | display: inline-flex; 62 | align-items: center; 63 | color: var(--textGrey); 64 | text-decoration-color: var(--textGrey); 65 | 66 | svg { 67 | width: 1rem; 68 | margin-left: 0.4em; 69 | margin-top: 0.15em; 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /src/css/05-utilities/_utils.scss: -------------------------------------------------------------------------------- 1 | .hidden { 2 | display: none; 3 | } 4 | 5 | .visually-hidden { 6 | clip: rect(0 0 0 0); 7 | clip-path: inset(50%); 8 | height: 1px; 9 | overflow: hidden; 10 | position: absolute; 11 | white-space: nowrap; 12 | width: 1px; 13 | } 14 | -------------------------------------------------------------------------------- /src/css/styles.scss: -------------------------------------------------------------------------------- 1 | @import '01-config/functions'; 2 | @import '01-config/variables'; 3 | 4 | @import '02-base/reset'; 5 | @import '02-base/typography'; 6 | @import '02-base/layout'; 7 | @import '02-base/prism'; // syntax highlighting 8 | 9 | @import '03-objects/richtext'; 10 | @import '03-objects/hotlink'; 11 | @import '03-objects/icon-link'; 12 | 13 | @import '04-components/all-tags'; 14 | @import '04-components/alt-header'; 15 | @import '04-components/author-info'; 16 | @import '04-components/blogroll'; 17 | @import '04-components/categories'; 18 | @import '04-components/dark-mode-toggle'; 19 | @import '04-components/header'; 20 | @import '04-components/footer'; 21 | @import '04-components/hero'; 22 | @import '04-components/page-header'; 23 | @import '04-components/posts-grid'; 24 | @import '04-components/post-grid-pagination'; 25 | @import '04-components/post-header'; 26 | @import '04-components/prev-next'; 27 | @import '04-components/sidebar'; 28 | @import '04-components/tag-links'; 29 | @import '04-components/webmentions'; 30 | 31 | @import '05-utilities/utils'; 32 | -------------------------------------------------------------------------------- /src/favicon/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/favicon/android-chrome-192x192.png -------------------------------------------------------------------------------- /src/favicon/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/favicon/android-chrome-512x512.png -------------------------------------------------------------------------------- /src/favicon/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/favicon/apple-touch-icon.png -------------------------------------------------------------------------------- /src/favicon/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/favicon/favicon-16x16.png -------------------------------------------------------------------------------- /src/favicon/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/favicon/favicon-32x32.png -------------------------------------------------------------------------------- /src/favicon/site.webmanifest: -------------------------------------------------------------------------------- 1 | {"name":"CSS { In Real Life }","short_name":"CSS IRL","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"} -------------------------------------------------------------------------------- /src/favicon/social_1200x630.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/favicon/social_1200x630.png -------------------------------------------------------------------------------- /src/feed.njk: -------------------------------------------------------------------------------- 1 | --- 2 | permalink: '/feed.json' 3 | --- 4 | 5 | { 6 | "posts": [ 7 | {% for item in collections.postPaginated %} 8 | { 9 | "title": "{{ item.data.title }}", 10 | "url": "{{ item.url }}", 11 | "date": "{{ item.date }}" 12 | }{% if not loop.last %},{% endif %} 13 | {% endfor %} 14 | ] 15 | } -------------------------------------------------------------------------------- /src/fonts/jost.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/fonts/jost.woff2 -------------------------------------------------------------------------------- /src/fonts/urbanist.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/fonts/urbanist.woff2 -------------------------------------------------------------------------------- /src/icons/Instagram.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/icons/facebook.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/icons/github.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/icon-dark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/icon-external-link.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/icons/icon-heart.svg: -------------------------------------------------------------------------------- 1 | heart-outline -------------------------------------------------------------------------------- /src/icons/icon-light.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/icon-mention.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/icon-repost.svg: -------------------------------------------------------------------------------- 1 | repeat -------------------------------------------------------------------------------- /src/icons/icon-rss.svg: -------------------------------------------------------------------------------- 1 | rss -------------------------------------------------------------------------------- /src/icons/linkedin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/icons/logo-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/icons/mastodon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/pinterest.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/icons/twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/images/a-handy-use-for-cascade-layers.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/a-handy-use-for-cascade-layers.jpg -------------------------------------------------------------------------------- /src/images/a-layout-trick-for-building-a-contact-list.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/a-layout-trick-for-building-a-contact-list.png -------------------------------------------------------------------------------- /src/images/a-modern-front-end-workflow-01_01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/a-modern-front-end-workflow-01_01.png -------------------------------------------------------------------------------- /src/images/a-modern-front-end-workflow-02_01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/a-modern-front-end-workflow-02_01.png -------------------------------------------------------------------------------- /src/images/a-modern-front-end-workflow-03_01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/a-modern-front-end-workflow-03_01.png -------------------------------------------------------------------------------- /src/images/a-reason-to-self-host-fonts-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/a-reason-to-self-host-fonts-01.jpg -------------------------------------------------------------------------------- /src/images/a-reason-to-self-host-fonts-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/a-reason-to-self-host-fonts-02.jpg -------------------------------------------------------------------------------- /src/images/a-utility-class-for-covering-elements-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/a-utility-class-for-covering-elements-01.jpg -------------------------------------------------------------------------------- /src/images/amending-your-past-commits-with-git-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/amending-your-past-commits-with-git-01.png -------------------------------------------------------------------------------- /src/images/amending-your-past-commits-with-git-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/amending-your-past-commits-with-git-02.png -------------------------------------------------------------------------------- /src/images/amending-your-past-commits-with-git-03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/amending-your-past-commits-with-git-03.png -------------------------------------------------------------------------------- /src/images/animated-grid-tracks-with-has-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/animated-grid-tracks-with-has-01.jpg -------------------------------------------------------------------------------- /src/images/animated-grid-tracks-with-has-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/animated-grid-tracks-with-has-02.jpg -------------------------------------------------------------------------------- /src/images/are-my-third-parties-green.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/are-my-third-parties-green.webp -------------------------------------------------------------------------------- /src/images/aspect-ratio-is-great-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/aspect-ratio-is-great-01.jpg -------------------------------------------------------------------------------- /src/images/aspect-ratio-is-great-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/aspect-ratio-is-great-02.jpg -------------------------------------------------------------------------------- /src/images/aspect-ratio-is-great-03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/aspect-ratio-is-great-03.jpg -------------------------------------------------------------------------------- /src/images/aspect-ratio-is-great-04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/aspect-ratio-is-great-04.jpg -------------------------------------------------------------------------------- /src/images/aspect-ratio-is-great-05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/aspect-ratio-is-great-05.jpg -------------------------------------------------------------------------------- /src/images/aspect-ratio-is-great-06.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/aspect-ratio-is-great-06.jpg -------------------------------------------------------------------------------- /src/images/beyond-the-spotlight_1024.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/beyond-the-spotlight_1024.webp -------------------------------------------------------------------------------- /src/images/beyond-the-spotlight_800.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/beyond-the-spotlight_800.webp -------------------------------------------------------------------------------- /src/images/breaking-out-of-a-central-wrapper-01.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/breaking-out-of-a-central-wrapper-01.webp -------------------------------------------------------------------------------- /src/images/breaking-out-of-a-central-wrapper-02.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/breaking-out-of-a-central-wrapper-02.webp -------------------------------------------------------------------------------- /src/images/breaking-out-of-a-central-wrapper-03.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/breaking-out-of-a-central-wrapper-03.webp -------------------------------------------------------------------------------- /src/images/breaking-out-of-a-central-wrapper-04.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/breaking-out-of-a-central-wrapper-04.webp -------------------------------------------------------------------------------- /src/images/breaking-out-of-a-central-wrapper-05.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/breaking-out-of-a-central-wrapper-05.webp -------------------------------------------------------------------------------- /src/images/breaking-out-of-a-central-wrapper-06.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/breaking-out-of-a-central-wrapper-06.webp -------------------------------------------------------------------------------- /src/images/breaking-out-of-a-central-wrapper-07.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/breaking-out-of-a-central-wrapper-07.webp -------------------------------------------------------------------------------- /src/images/breaking-out-of-a-central-wrapper-08.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/breaking-out-of-a-central-wrapper-08.webp -------------------------------------------------------------------------------- /src/images/building-a-dependency-free-site.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/building-a-dependency-free-site.jpg -------------------------------------------------------------------------------- /src/images/building-a-greener-web.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/building-a-scrapbook-layout_01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/building-a-scrapbook-layout_01.png -------------------------------------------------------------------------------- /src/images/building-a-scrapbook-layout_02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/building-a-scrapbook-layout_02.jpg -------------------------------------------------------------------------------- /src/images/building-a-scrapbook-layout_03a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/building-a-scrapbook-layout_03a.png -------------------------------------------------------------------------------- /src/images/building-a-scrapbook-layout_04a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/building-a-scrapbook-layout_04a.png -------------------------------------------------------------------------------- /src/images/building-a-scrapbook-layout_05a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/building-a-scrapbook-layout_05a.png -------------------------------------------------------------------------------- /src/images/building-a-scrapbook-layout_06a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/building-a-scrapbook-layout_06a.png -------------------------------------------------------------------------------- /src/images/building-a-scrapbook-layout_08.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/building-a-scrapbook-layout_08.jpg -------------------------------------------------------------------------------- /src/images/building-a-scrapbook-layout_09.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/building-a-scrapbook-layout_09.png -------------------------------------------------------------------------------- /src/images/building-a-scrapbook-layout_10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/building-a-scrapbook-layout_10.jpg -------------------------------------------------------------------------------- /src/images/building-an-interactive-timetable-01a.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/building-an-interactive-timetable-01a.jpg -------------------------------------------------------------------------------- /src/images/building-the-zig-zag-gradient-lab-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/building-the-zig-zag-gradient-lab-01.jpg -------------------------------------------------------------------------------- /src/images/building-the-zig-zag-gradient-lab-01a.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/building-the-zig-zag-gradient-lab-01a.jpg -------------------------------------------------------------------------------- /src/images/building-the-zig-zag-gradient-lab-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/building-the-zig-zag-gradient-lab-02.jpg -------------------------------------------------------------------------------- /src/images/building-the-zig-zag-gradient-lab-03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/building-the-zig-zag-gradient-lab-03.jpg -------------------------------------------------------------------------------- /src/images/building-the-zig-zag-gradient-lab-04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/building-the-zig-zag-gradient-lab-04.jpg -------------------------------------------------------------------------------- /src/images/building-the-zig-zag-gradient-lab-05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/building-the-zig-zag-gradient-lab-05.jpg -------------------------------------------------------------------------------- /src/images/building-the-zig-zag-gradient-lab-06.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/building-the-zig-zag-gradient-lab-06.jpg -------------------------------------------------------------------------------- /src/images/building-the-zig-zag-gradient-lab-07.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/building-the-zig-zag-gradient-lab-07.jpg -------------------------------------------------------------------------------- /src/images/building-the-zig-zag-gradient-lab-08.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/building-the-zig-zag-gradient-lab-08.jpg -------------------------------------------------------------------------------- /src/images/building-the-zig-zag-gradient-lab-09.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/building-the-zig-zag-gradient-lab-09.jpg -------------------------------------------------------------------------------- /src/images/building-the-zig-zag-gradient-lab-10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/building-the-zig-zag-gradient-lab-10.jpg -------------------------------------------------------------------------------- /src/images/carbon-capture-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/carbon-capture-01.jpg -------------------------------------------------------------------------------- /src/images/carbon-capture-01_1200.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/carbon-capture-01_1200.jpg -------------------------------------------------------------------------------- /src/images/carbon-capture-01_800.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/carbon-capture-01_800.jpg -------------------------------------------------------------------------------- /src/images/code-gardening-01_1200.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/code-gardening-01_1200.webp -------------------------------------------------------------------------------- /src/images/code-gardening-01_1600.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/code-gardening-01_1600.webp -------------------------------------------------------------------------------- /src/images/code-gardening-01_900.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/code-gardening-01_900.webp -------------------------------------------------------------------------------- /src/images/creating-generative-svg-characters-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/creating-generative-svg-characters-01.jpg -------------------------------------------------------------------------------- /src/images/creating-generative-svg-characters.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/creating-generative-svg-characters.jpg -------------------------------------------------------------------------------- /src/images/css-day-2022_1200.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/css-day-2022_1200.webp -------------------------------------------------------------------------------- /src/images/css-day-2022_900.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/css-day-2022_900.webp -------------------------------------------------------------------------------- /src/images/css-halftone-patterns-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/css-halftone-patterns-01.jpg -------------------------------------------------------------------------------- /src/images/css-halftone-patterns-01a.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/css-halftone-patterns-01a.jpg -------------------------------------------------------------------------------- /src/images/css-halftone-patterns-01b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/css-halftone-patterns-01b.jpg -------------------------------------------------------------------------------- /src/images/css-halftone-patterns-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/css-halftone-patterns-02.jpg -------------------------------------------------------------------------------- /src/images/css-halftone-patterns-03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/css-halftone-patterns-03.jpg -------------------------------------------------------------------------------- /src/images/css-halftone-patterns-04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/css-halftone-patterns-04.jpg -------------------------------------------------------------------------------- /src/images/css-halftone-patterns-05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/css-halftone-patterns-05.jpg -------------------------------------------------------------------------------- /src/images/css-halftone-patterns-06.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/css-halftone-patterns-06.jpg -------------------------------------------------------------------------------- /src/images/css-only-slide-up-caption-hover-effect-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/css-only-slide-up-caption-hover-effect-01.jpg -------------------------------------------------------------------------------- /src/images/css-only-slide-up-caption-hover-effect-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/css-only-slide-up-caption-hover-effect-02.jpg -------------------------------------------------------------------------------- /src/images/css-only-slide-up-caption-hover-effect-03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/css-only-slide-up-caption-hover-effect-03.jpg -------------------------------------------------------------------------------- /src/images/debugging-css-grid-1_01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/debugging-css-grid-1_01.png -------------------------------------------------------------------------------- /src/images/debugging-css-grid-1_02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/debugging-css-grid-1_02.png -------------------------------------------------------------------------------- /src/images/debugging-css-grid-1_03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/debugging-css-grid-1_03.png -------------------------------------------------------------------------------- /src/images/debugging-css-grid-1_04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/debugging-css-grid-1_04.png -------------------------------------------------------------------------------- /src/images/debugging-css-grid-1_06.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/debugging-css-grid-1_06.png -------------------------------------------------------------------------------- /src/images/debugging-css-grid-2-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/debugging-css-grid-2-01.png -------------------------------------------------------------------------------- /src/images/debugging-css-grid-2-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/debugging-css-grid-2-02.png -------------------------------------------------------------------------------- /src/images/debugging-css-grid-2-03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/debugging-css-grid-2-03.png -------------------------------------------------------------------------------- /src/images/debugging-css-grid-3-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/debugging-css-grid-3-01.png -------------------------------------------------------------------------------- /src/images/debugging-css-grid-3-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/debugging-css-grid-3-02.png -------------------------------------------------------------------------------- /src/images/debugging-css-grid-3-03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/debugging-css-grid-3-03.png -------------------------------------------------------------------------------- /src/images/debugging-css-grid-3-04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/debugging-css-grid-3-04.png -------------------------------------------------------------------------------- /src/images/debugging-css-grid-3-05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/debugging-css-grid-3-05.png -------------------------------------------------------------------------------- /src/images/debugging-css-grid-3-06.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/debugging-css-grid-3-06.png -------------------------------------------------------------------------------- /src/images/debugging-css-grid-3-07a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/debugging-css-grid-3-07a.png -------------------------------------------------------------------------------- /src/images/debugging-css-grid-3-08a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/debugging-css-grid-3-08a.png -------------------------------------------------------------------------------- /src/images/debugging-media-queries-a-dev-tools-wish-list-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/debugging-media-queries-a-dev-tools-wish-list-01.jpg -------------------------------------------------------------------------------- /src/images/drop-shadow-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/drop-shadow-01.jpg -------------------------------------------------------------------------------- /src/images/drop-shadow-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/drop-shadow-02.jpg -------------------------------------------------------------------------------- /src/images/drop-shadow-03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/drop-shadow-03.jpg -------------------------------------------------------------------------------- /src/images/drop-shadow-04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/drop-shadow-04.jpg -------------------------------------------------------------------------------- /src/images/drop-shadow-05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/drop-shadow-05.jpg -------------------------------------------------------------------------------- /src/images/eleventy-starter_1200.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/eleventy-starter_1200.webp -------------------------------------------------------------------------------- /src/images/eleventy-starter_1600.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/eleventy-starter_1600.webp -------------------------------------------------------------------------------- /src/images/eleventy-starter_600.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/eleventy-starter_600.webp -------------------------------------------------------------------------------- /src/images/eleventy-starter_900.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/eleventy-starter_900.webp -------------------------------------------------------------------------------- /src/images/exciting-things-on-the-horizon-for-css-layout.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/images/favourite-things-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/favourite-things-01.jpg -------------------------------------------------------------------------------- /src/images/favourite-things-02-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/favourite-things-02-01.jpg -------------------------------------------------------------------------------- /src/images/favourite-things-02-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/favourite-things-02-02.jpg -------------------------------------------------------------------------------- /src/images/favourite-things-02-03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/favourite-things-02-03.jpg -------------------------------------------------------------------------------- /src/images/favourite-things.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/images/favourite-web-development-courses-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/favourite-web-development-courses-01.jpg -------------------------------------------------------------------------------- /src/images/favourite-web-development-courses-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/favourite-web-development-courses-02.jpg -------------------------------------------------------------------------------- /src/images/finding-an-elements-nearest-relative-positioned-ancestor-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/finding-an-elements-nearest-relative-positioned-ancestor-01.jpg -------------------------------------------------------------------------------- /src/images/finding-meaning-in-our-work-01__1200.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/finding-meaning-in-our-work-01__1200.webp -------------------------------------------------------------------------------- /src/images/finding-meaning-in-our-work-01__1600.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/finding-meaning-in-our-work-01__1600.webp -------------------------------------------------------------------------------- /src/images/finding-meaning-in-our-work-01__600.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/finding-meaning-in-our-work-01__600.webp -------------------------------------------------------------------------------- /src/images/finding-meaning-in-our-work-01__900.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/finding-meaning-in-our-work-01__900.webp -------------------------------------------------------------------------------- /src/images/flow-chart-01_1600.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/flow-chart-01_1600.webp -------------------------------------------------------------------------------- /src/images/flow-chart-02_1600.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/flow-chart-02_1600.webp -------------------------------------------------------------------------------- /src/images/flow-chart-03_1600.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/flow-chart-03_1600.webp -------------------------------------------------------------------------------- /src/images/flow-chart-04_1600.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/flow-chart-04_1600.webp -------------------------------------------------------------------------------- /src/images/flow-chart-05_1600.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/flow-chart-05_1600.webp -------------------------------------------------------------------------------- /src/images/flow-chart-06_1600.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/flow-chart-06_1600.webp -------------------------------------------------------------------------------- /src/images/font-rendering_1200.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/font-rendering_1200.webp -------------------------------------------------------------------------------- /src/images/font-rendering_1600.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/font-rendering_1600.webp -------------------------------------------------------------------------------- /src/images/font-rendering_600.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/font-rendering_600.webp -------------------------------------------------------------------------------- /src/images/font-rendering_900.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/font-rendering_900.webp -------------------------------------------------------------------------------- /src/images/from-gatsby-to-eleventy-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/from-gatsby-to-eleventy-01.jpg -------------------------------------------------------------------------------- /src/images/from-gatsby-to-eleventy-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/from-gatsby-to-eleventy-02.jpg -------------------------------------------------------------------------------- /src/images/from-gatsby-to-eleventy-03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/from-gatsby-to-eleventy-03.jpg -------------------------------------------------------------------------------- /src/images/fun-with-css-motion-path-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/fun-with-css-motion-path-01.jpg -------------------------------------------------------------------------------- /src/images/gap-01_1200.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/gap-01_1200.webp -------------------------------------------------------------------------------- /src/images/gap-01_1600.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/gap-01_1600.webp -------------------------------------------------------------------------------- /src/images/gap-01_900.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/gap-01_900.webp -------------------------------------------------------------------------------- /src/images/gap-02_1200.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/gap-02_1200.webp -------------------------------------------------------------------------------- /src/images/gap-02_1600.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/gap-02_1600.webp -------------------------------------------------------------------------------- /src/images/gap-02_900.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/gap-02_900.webp -------------------------------------------------------------------------------- /src/images/gap-03_1200.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/gap-03_1200.webp -------------------------------------------------------------------------------- /src/images/gap-03_1600.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/gap-03_1600.webp -------------------------------------------------------------------------------- /src/images/gap-03_900.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/gap-03_900.webp -------------------------------------------------------------------------------- /src/images/gap-04_1200.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/gap-04_1200.webp -------------------------------------------------------------------------------- /src/images/gap-04_1600.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/gap-04_1600.webp -------------------------------------------------------------------------------- /src/images/gap-04_900.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/gap-04_900.webp -------------------------------------------------------------------------------- /src/images/gap-05_1200.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/gap-05_1200.webp -------------------------------------------------------------------------------- /src/images/gap-05_1600.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/gap-05_1600.webp -------------------------------------------------------------------------------- /src/images/gap-05_900.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/gap-05_900.webp -------------------------------------------------------------------------------- /src/images/green-web-foundation-directory_1200.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/green-web-foundation-directory_1200.webp -------------------------------------------------------------------------------- /src/images/green-web-foundation-directory_1600.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/green-web-foundation-directory_1600.webp -------------------------------------------------------------------------------- /src/images/green-web-foundation-directory_600.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/green-web-foundation-directory_600.webp -------------------------------------------------------------------------------- /src/images/green-web-foundation-directory_900.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/green-web-foundation-directory_900.webp -------------------------------------------------------------------------------- /src/images/greenwashing-and-the-cop28-website_1200.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/greenwashing-and-the-cop28-website_1200.webp -------------------------------------------------------------------------------- /src/images/greenwashing-and-the-cop28-website_1600.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/greenwashing-and-the-cop28-website_1600.webp -------------------------------------------------------------------------------- /src/images/greenwashing-and-the-cop28-website_1800.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/greenwashing-and-the-cop28-website_1800.webp -------------------------------------------------------------------------------- /src/images/greenwashing-and-the-cop28-website_600.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/greenwashing-and-the-cop28-website_600.webp -------------------------------------------------------------------------------- /src/images/greenwashing-and-the-cop28-website_900.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/greenwashing-and-the-cop28-website_900.webp -------------------------------------------------------------------------------- /src/images/grid-backgrounds.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/grid-backgrounds.jpg -------------------------------------------------------------------------------- /src/images/handy-tools-for-mocking-api-requests-01_1600.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/handy-tools-for-mocking-api-requests-01_1600.jpg -------------------------------------------------------------------------------- /src/images/handy-tools-for-mocking-api-requests-01_900.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/handy-tools-for-mocking-api-requests-01_900.jpg -------------------------------------------------------------------------------- /src/images/handy-tools-for-mocking-api-requests-02_1600.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/handy-tools-for-mocking-api-requests-02_1600.jpg -------------------------------------------------------------------------------- /src/images/handy-tools-for-mocking-api-requests-02_900.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/handy-tools-for-mocking-api-requests-02_900.jpg -------------------------------------------------------------------------------- /src/images/headshot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/headshot.jpg -------------------------------------------------------------------------------- /src/images/heatwave-animated-sun-illustration.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/heatwave-animated-sun-illustration.png -------------------------------------------------------------------------------- /src/images/how-to-enable-experimental-features-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/how-to-enable-experimental-features-02.png -------------------------------------------------------------------------------- /src/images/how-to-enable-experimental-features-03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/how-to-enable-experimental-features-03.png -------------------------------------------------------------------------------- /src/images/how-to-enable-experimental-features-04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/how-to-enable-experimental-features-04.png -------------------------------------------------------------------------------- /src/images/how-to-enable-experimental-features-05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/how-to-enable-experimental-features-05.png -------------------------------------------------------------------------------- /src/images/how-to-enable-experimental-features.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/how-to-enable-experimental-features.jpg -------------------------------------------------------------------------------- /src/images/implicit-tracks.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/implicit-tracks.jpg -------------------------------------------------------------------------------- /src/images/in-search-of-simplicity.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/in-search-of-simplicity.jpg -------------------------------------------------------------------------------- /src/images/inspecting-sizes-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/inspecting-sizes-01.jpg -------------------------------------------------------------------------------- /src/images/introducing-the-web-sustainability-guidelines.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/introducing-the-web-sustainability-guidelines.png -------------------------------------------------------------------------------- /src/images/irregular-shaped-links-with-subgrid-01b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/irregular-shaped-links-with-subgrid-01b.jpg -------------------------------------------------------------------------------- /src/images/irregular-shaped-links-with-subgrid-02a.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/irregular-shaped-links-with-subgrid-02a.jpg -------------------------------------------------------------------------------- /src/images/irregular-shaped-links-with-subgrid-03a.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/irregular-shaped-links-with-subgrid-03a.jpg -------------------------------------------------------------------------------- /src/images/irregular-shaped-links-with-subgrid-04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/irregular-shaped-links-with-subgrid-04.jpg -------------------------------------------------------------------------------- /src/images/irregular-shaped-links-with-subgrid-05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/irregular-shaped-links-with-subgrid-05.jpg -------------------------------------------------------------------------------- /src/images/it-career-energizer-podcast-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/it-career-energizer-podcast-01.png -------------------------------------------------------------------------------- /src/images/limitation-breeds-creativity_1200.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/limitation-breeds-creativity_1200.webp -------------------------------------------------------------------------------- /src/images/limitation-breeds-creativity_1600.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/limitation-breeds-creativity_1600.webp -------------------------------------------------------------------------------- /src/images/limitation-breeds-creativity_1800.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/limitation-breeds-creativity_1800.jpg -------------------------------------------------------------------------------- /src/images/limitation-breeds-creativity_1800.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/limitation-breeds-creativity_1800.webp -------------------------------------------------------------------------------- /src/images/limitation-breeds-creativity_700.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/limitation-breeds-creativity_700.webp -------------------------------------------------------------------------------- /src/images/limitation-breeds-creativity_900.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/limitation-breeds-creativity_900.webp -------------------------------------------------------------------------------- /src/images/logical-border-radius-01.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/logical-border-radius-01.webp -------------------------------------------------------------------------------- /src/images/logical-border-radius-02.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/logical-border-radius-02.webp -------------------------------------------------------------------------------- /src/images/logical-border-radius-03.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/logical-border-radius-03.webp -------------------------------------------------------------------------------- /src/images/logical-border-radius-04.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/logical-border-radius-04.webp -------------------------------------------------------------------------------- /src/images/logical-border-radius-05.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/logical-border-radius-05.webp -------------------------------------------------------------------------------- /src/images/masonry-in-css-01.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/masonry-in-css-01.webp -------------------------------------------------------------------------------- /src/images/masonry-syntax_1400.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/masonry-syntax_1400.webp -------------------------------------------------------------------------------- /src/images/masonry-syntax_900.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/masonry-syntax_900.webp -------------------------------------------------------------------------------- /src/images/messing-about-with-css-gradients-01_1200.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/messing-about-with-css-gradients-01_1200.webp -------------------------------------------------------------------------------- /src/images/messing-about-with-css-gradients-01_1600.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/messing-about-with-css-gradients-01_1600.webp -------------------------------------------------------------------------------- /src/images/messing-about-with-css-gradients-01_900.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/messing-about-with-css-gradients-01_900.webp -------------------------------------------------------------------------------- /src/images/messing-about-with-css-gradients-02_1200.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/messing-about-with-css-gradients-02_1200.webp -------------------------------------------------------------------------------- /src/images/messing-about-with-css-gradients-02_1600.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/messing-about-with-css-gradients-02_1600.webp -------------------------------------------------------------------------------- /src/images/messing-about-with-css-gradients-02_900.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/messing-about-with-css-gradients-02_900.webp -------------------------------------------------------------------------------- /src/images/messing-about-with-css-gradients-03_1200.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/messing-about-with-css-gradients-03_1200.webp -------------------------------------------------------------------------------- /src/images/messing-about-with-css-gradients-03_1600.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/messing-about-with-css-gradients-03_1600.webp -------------------------------------------------------------------------------- /src/images/messing-about-with-css-gradients-03_900.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/messing-about-with-css-gradients-03_900.webp -------------------------------------------------------------------------------- /src/images/my-browser-support-strategy-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/my-browser-support-strategy-01.jpg -------------------------------------------------------------------------------- /src/images/my-browser-support-strategy-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/my-browser-support-strategy-02.jpg -------------------------------------------------------------------------------- /src/images/my-browser-support-strategy-03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/my-browser-support-strategy-03.jpg -------------------------------------------------------------------------------- /src/images/my-css-grid-wishlist-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/my-css-grid-wishlist-01.png -------------------------------------------------------------------------------- /src/images/my-css-grid-wishlist-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/my-css-grid-wishlist-02.png -------------------------------------------------------------------------------- /src/images/nbpm-01_1200.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/nbpm-01_1200.webp -------------------------------------------------------------------------------- /src/images/nbpm-01_1600.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/nbpm-01_1600.webp -------------------------------------------------------------------------------- /src/images/nbpm-01_900.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/nbpm-01_900.webp -------------------------------------------------------------------------------- /src/images/negative-lines.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/negative-lines.jpg -------------------------------------------------------------------------------- /src/images/negative-lines2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/negative-lines2.jpg -------------------------------------------------------------------------------- /src/images/negative-lines2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/negative-lines2.png -------------------------------------------------------------------------------- /src/images/not-an-nft-artist-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/not-an-nft-artist-01.jpg -------------------------------------------------------------------------------- /src/images/not-an-nft-artist-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/not-an-nft-artist-02.jpg -------------------------------------------------------------------------------- /src/images/og-image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/og-image.jpg -------------------------------------------------------------------------------- /src/images/optimising-svgs-for-the-web_01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/optimising-svgs-for-the-web_01.png -------------------------------------------------------------------------------- /src/images/optimising-svgs-for-the-web_02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/optimising-svgs-for-the-web_02.jpg -------------------------------------------------------------------------------- /src/images/optimising-svgs-for-the-web_03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/optimising-svgs-for-the-web_03.jpg -------------------------------------------------------------------------------- /src/images/optimising-svgs-for-the-web_04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/optimising-svgs-for-the-web_04.jpg -------------------------------------------------------------------------------- /src/images/optimising-svgs-for-the-web_04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/optimising-svgs-for-the-web_04.png -------------------------------------------------------------------------------- /src/images/optimising-svgs-for-the-web_05a.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/optimising-svgs-for-the-web_05a.jpg -------------------------------------------------------------------------------- /src/images/optimising-svgs-for-the-web_06.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/optimising-svgs-for-the-web_06.jpg -------------------------------------------------------------------------------- /src/images/overflow-01_1200.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/overflow-01_1200.webp -------------------------------------------------------------------------------- /src/images/overflow-01_1600.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/overflow-01_1600.webp -------------------------------------------------------------------------------- /src/images/overflow-02_1200.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/overflow-02_1200.webp -------------------------------------------------------------------------------- /src/images/overflow-02_1600.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/overflow-02_1600.webp -------------------------------------------------------------------------------- /src/images/overflow-03_1200.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/overflow-03_1200.webp -------------------------------------------------------------------------------- /src/images/overflow-03_1600.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/overflow-03_1600.webp -------------------------------------------------------------------------------- /src/images/overflow-04_1200.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/overflow-04_1200.webp -------------------------------------------------------------------------------- /src/images/overflow-04_1600.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/overflow-04_1600.webp -------------------------------------------------------------------------------- /src/images/overflow-05_1200.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/overflow-05_1200.webp -------------------------------------------------------------------------------- /src/images/overflow-05_1600.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/overflow-05_1600.webp -------------------------------------------------------------------------------- /src/images/overflow-06_1200.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/overflow-06_1200.webp -------------------------------------------------------------------------------- /src/images/overflow-06_1600.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/overflow-06_1600.webp -------------------------------------------------------------------------------- /src/images/overflow-07_1200.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/overflow-07_1200.webp -------------------------------------------------------------------------------- /src/images/overflow-07_1600.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/overflow-07_1600.webp -------------------------------------------------------------------------------- /src/images/overflow-08_1200.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/overflow-08_1200.webp -------------------------------------------------------------------------------- /src/images/overflow-08_1600.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/overflow-08_1600.webp -------------------------------------------------------------------------------- /src/images/overflow-09_1200.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/overflow-09_1200.webp -------------------------------------------------------------------------------- /src/images/overflow-09_1600.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/overflow-09_1600.webp -------------------------------------------------------------------------------- /src/images/overflow-10_1200.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/overflow-10_1200.webp -------------------------------------------------------------------------------- /src/images/overflow-10_1600.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/overflow-10_1600.webp -------------------------------------------------------------------------------- /src/images/owning-your-web-01_1200.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/owning-your-web-01_1200.webp -------------------------------------------------------------------------------- /src/images/owning-your-web-01_1600.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/owning-your-web-01_1600.webp -------------------------------------------------------------------------------- /src/images/owning-your-web-01_900.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/owning-your-web-01_900.webp -------------------------------------------------------------------------------- /src/images/paper-snowflakes-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/paper-snowflakes-01.jpg -------------------------------------------------------------------------------- /src/images/perspective-01_1200.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/perspective-01_1200.webp -------------------------------------------------------------------------------- /src/images/perspective-01_1600.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/perspective-01_1600.webp -------------------------------------------------------------------------------- /src/images/perspective-01_1800.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/perspective-01_1800.webp -------------------------------------------------------------------------------- /src/images/perspective-01_700.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/perspective-01_700.webp -------------------------------------------------------------------------------- /src/images/perspective-01_900.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/perspective-01_900.webp -------------------------------------------------------------------------------- /src/images/progressively-enhanced-toggletips_1200.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/progressively-enhanced-toggletips_1200.webp -------------------------------------------------------------------------------- /src/images/progressively-enhanced-toggletips_1600.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/progressively-enhanced-toggletips_1600.webp -------------------------------------------------------------------------------- /src/images/progressively-enhanced-toggletips_700.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/progressively-enhanced-toggletips_700.webp -------------------------------------------------------------------------------- /src/images/progressively-enhanced-toggletips_900.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/progressively-enhanced-toggletips_900.webp -------------------------------------------------------------------------------- /src/images/quick-and-easy-dark-mode-with-css-custom-properties.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/images/quick-tip-negative-animation-delay-02.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/quick-tip-negative-animation-delay-02.webp -------------------------------------------------------------------------------- /src/images/quick-tip-negative-animation-delay.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/quick-tip-negative-animation-delay.webp -------------------------------------------------------------------------------- /src/images/radial-gradient-trigonometry-01.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/radial-gradient-trigonometry-01.webp -------------------------------------------------------------------------------- /src/images/radial-gradient-trigonometry-01_1200.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/radial-gradient-trigonometry-01_1200.webp -------------------------------------------------------------------------------- /src/images/radial-gradient-trigonometry-01_900.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/radial-gradient-trigonometry-01_900.webp -------------------------------------------------------------------------------- /src/images/rainy-gradient_1200.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/rainy-gradient_1200.webp -------------------------------------------------------------------------------- /src/images/rainy-gradient_1600.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/rainy-gradient_1600.webp -------------------------------------------------------------------------------- /src/images/rainy-gradient_1800.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/rainy-gradient_1800.webp -------------------------------------------------------------------------------- /src/images/rainy-gradient_900.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/rainy-gradient_900.webp -------------------------------------------------------------------------------- /src/images/recreating-the-his-dark-materials-logo-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/recreating-the-his-dark-materials-logo-01.jpg -------------------------------------------------------------------------------- /src/images/reducing-complexity-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/reducing-complexity-01.jpg -------------------------------------------------------------------------------- /src/images/reducing-complexity-01_1200.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/reducing-complexity-01_1200.jpg -------------------------------------------------------------------------------- /src/images/reducing-complexity-01_800.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/reducing-complexity-01_800.jpg -------------------------------------------------------------------------------- /src/images/scheduling-netlify-deployments-with-github-actions-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/scheduling-netlify-deployments-with-github-actions-01.jpg -------------------------------------------------------------------------------- /src/images/scheduling-netlify-deployments-with-github-actions-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/scheduling-netlify-deployments-with-github-actions-02.jpg -------------------------------------------------------------------------------- /src/images/scheduling-netlify-deployments-with-github-actions-03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/scheduling-netlify-deployments-with-github-actions-03.jpg -------------------------------------------------------------------------------- /src/images/shades-of-grey-01_1200.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/shades-of-grey-01_1200.webp -------------------------------------------------------------------------------- /src/images/shades-of-grey-01_1600.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/shades-of-grey-01_1600.webp -------------------------------------------------------------------------------- /src/images/shades-of-grey-01_800.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/shades-of-grey-01_800.webp -------------------------------------------------------------------------------- /src/images/social_1200x630.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/social_1200x630.png -------------------------------------------------------------------------------- /src/images/solving-a-tricky-layout-problem_01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/solving-a-tricky-layout-problem_01.jpg -------------------------------------------------------------------------------- /src/images/solving-a-tricky-layout-problem_02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/solving-a-tricky-layout-problem_02.png -------------------------------------------------------------------------------- /src/images/solving-a-tricky-layout-problem_03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/solving-a-tricky-layout-problem_03.png -------------------------------------------------------------------------------- /src/images/solving-a-tricky-layout-problem_04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/solving-a-tricky-layout-problem_04.png -------------------------------------------------------------------------------- /src/images/solving-a-tricky-layout-problem_05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/solving-a-tricky-layout-problem_05.png -------------------------------------------------------------------------------- /src/images/solving-a-tricky-layout-problem_06.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/solving-a-tricky-layout-problem_06.png -------------------------------------------------------------------------------- /src/images/solving-a-tricky-layout-problem_07.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/solving-a-tricky-layout-problem_07.png -------------------------------------------------------------------------------- /src/images/sotb01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/sotb01.jpg -------------------------------------------------------------------------------- /src/images/state-of-the-browser.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/state-of-the-browser.jpg -------------------------------------------------------------------------------- /src/images/styling-external-links-01.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/styling-external-links-01.webp -------------------------------------------------------------------------------- /src/images/styling-external-links-02.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/styling-external-links-02.webp -------------------------------------------------------------------------------- /src/images/subgrid-is-here.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/subgrid-is-here.png -------------------------------------------------------------------------------- /src/images/svg-filter_02-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/svg-filter_02-01.png -------------------------------------------------------------------------------- /src/images/svg-filters_01a-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/svg-filters_01a-01.png -------------------------------------------------------------------------------- /src/images/svg-filters_01b-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/svg-filters_01b-01.png -------------------------------------------------------------------------------- /src/images/svg-filters_03-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/svg-filters_03-01.png -------------------------------------------------------------------------------- /src/images/svg-filters_duotone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/svg-filters_duotone.png -------------------------------------------------------------------------------- /src/images/testing-color-accessibility-with-dev-tools-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/testing-color-accessibility-with-dev-tools-01.jpg -------------------------------------------------------------------------------- /src/images/thoughts-on-the-state-of-the-web.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/thoughts-on-the-state-of-the-web.jpg -------------------------------------------------------------------------------- /src/images/to-grid-or-to-flex-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/to-grid-or-to-flex-02.jpg -------------------------------------------------------------------------------- /src/images/top-tips-for-hiring-diverse-teams-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/top-tips-for-hiring-diverse-teams-01.png -------------------------------------------------------------------------------- /src/images/top-tips-for-hiring-diverse-teams-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/top-tips-for-hiring-diverse-teams-02.png -------------------------------------------------------------------------------- /src/images/working-with-color-scales-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/working-with-color-scales-02.jpg -------------------------------------------------------------------------------- /src/images/working-with-color-scales-02b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/working-with-color-scales-02b.jpg -------------------------------------------------------------------------------- /src/images/working-with-color-scales-02c.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/working-with-color-scales-02c.jpg -------------------------------------------------------------------------------- /src/images/working-with-color-scales-03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/working-with-color-scales-03.jpg -------------------------------------------------------------------------------- /src/images/workshop-review-data-visualisation-fundamentals.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/workshop-review-data-visualisation-fundamentals.png -------------------------------------------------------------------------------- /src/images/workshop-review-data-visualisation-fundamentals_1200.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/workshop-review-data-visualisation-fundamentals_1200.webp -------------------------------------------------------------------------------- /src/images/workshop-review-data-visualisation-fundamentals_1600.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/workshop-review-data-visualisation-fundamentals_1600.webp -------------------------------------------------------------------------------- /src/images/workshop-review-data-visualisation-fundamentals_600.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/workshop-review-data-visualisation-fundamentals_600.webp -------------------------------------------------------------------------------- /src/images/workshop-review-data-visualisation-fundamentals_900.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/workshop-review-data-visualisation-fundamentals_900.webp -------------------------------------------------------------------------------- /src/images/writing-useful-alt-text-01.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/writing-useful-alt-text-01.webp -------------------------------------------------------------------------------- /src/images/writing-useful-alt-text-02.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/images/writing-useful-alt-text-02.webp -------------------------------------------------------------------------------- /src/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | tags: collections.homepageTags 3 | pagination: 4 | data: collections.postPaginated 5 | size: 12 6 | layout: home.njk 7 | --- 8 | -------------------------------------------------------------------------------- /src/js/expander.js: -------------------------------------------------------------------------------- 1 | class Expander { 2 | constructor(el) { 3 | this.el = el 4 | this.isExpanded = true 5 | this.content = el.querySelector('[data-content]') 6 | this.btn = el.querySelector('[data-btn]') 7 | this.isDesktop = window.matchMedia('(min-width: 1024px)') 8 | this.onToggle = this.toggleExpanded.bind(this) 9 | this.isDesktop.addEventListener('change', this.onChange.bind(this)) 10 | 11 | this.init() 12 | } 13 | 14 | onChange(mq) { 15 | if (mq.matches) { 16 | this.open() 17 | this.btn.removeEventListener('click', this.onToggle) 18 | } else { 19 | this.close() 20 | this.btn.addEventListener('click', this.onToggle) 21 | } 22 | 23 | this.btn.hidden = mq.matches 24 | } 25 | 26 | close() { 27 | this.isExpanded = false 28 | this.btn.setAttribute('aria-expanded', 'false') 29 | this.content.hidden = true 30 | this.content.setAttribute('tabindex', -1) 31 | } 32 | 33 | open() { 34 | this.isExpanded = true 35 | this.btn.setAttribute('aria-expanded', 'true') 36 | this.content.hidden = false 37 | this.content.setAttribute('tabindex', 0) 38 | } 39 | 40 | toggleExpanded() { 41 | if (this.isExpanded) { 42 | this.close() 43 | } else { 44 | this.open() 45 | } 46 | } 47 | 48 | init() { 49 | this.btn.hidden = this.isDesktop.matches 50 | 51 | if (!this.isDesktop.matches) { 52 | this.close() 53 | this.btn.addEventListener('click', this.onToggle) 54 | } 55 | } 56 | } 57 | 58 | export default Expander 59 | -------------------------------------------------------------------------------- /src/js/header.js: -------------------------------------------------------------------------------- 1 | const header = document.querySelector('[data-header]') 2 | const trigger = document.querySelector('[data-trigger="header-change"]') 3 | 4 | const options = { 5 | rootMargin: '-40px', 6 | threshold: 0 7 | } 8 | 9 | const toggleHeaderStyle = (entries) => { 10 | entries.forEach((entry) => { 11 | if (entry.isIntersecting) { 12 | header.classList.remove('c-header--bg') 13 | } else { 14 | header.classList.add('c-header--bg') 15 | } 16 | }) 17 | } 18 | 19 | const headerChange = () => { 20 | if (trigger) { 21 | const observer = new IntersectionObserver(toggleHeaderStyle, options) 22 | observer.observe(trigger) 23 | } 24 | } 25 | 26 | export default headerChange -------------------------------------------------------------------------------- /src/js/scripts.js: -------------------------------------------------------------------------------- 1 | import menu from './menu' 2 | import headerChange from './header' 3 | import DarkModeToggle from './darkModeToggle' 4 | import Expander from './expander' 5 | 6 | const components = [ 7 | { 8 | name: 'dark-mode-toggle', 9 | component: DarkModeToggle, 10 | }, 11 | { 12 | name: 'expander', 13 | component: Expander, 14 | }, 15 | ] 16 | 17 | window.addEventListener('DOMContentLoaded', () => { 18 | document.body.classList.remove('no-js') 19 | menu() 20 | headerChange() 21 | 22 | /* Init components */ 23 | components.forEach(({ name, component }) => { 24 | const elements = [ 25 | ...document.querySelectorAll(`[data-behaviour="${name}"]`), 26 | ] 27 | 28 | elements.forEach((el) => new component(el)) 29 | }) 30 | }) 31 | -------------------------------------------------------------------------------- /src/js/service-worker.js: -------------------------------------------------------------------------------- 1 | self.addEventListener('install', function() { 2 | self.skipWaiting() 3 | }) 4 | 5 | self.addEventListener('activate', function() { 6 | self.caches.keys() 7 | .then(keys => { 8 | keys.forEach(key => { 9 | console.log(key) 10 | self.caches.delete(key) 11 | }) 12 | }) 13 | .then(() => { 14 | self.registration.unregister() 15 | console.log('unregister') 16 | }) 17 | .then(() => { 18 | self.clients.matchAll() 19 | console.log(self.clients) 20 | }) 21 | .then((clients) => { 22 | clients.forEach(client => client.navigate(client.url)) 23 | }) 24 | .catch((err) => console.log(err)) 25 | }); -------------------------------------------------------------------------------- /src/media/animating-css-grid.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/media/animating-css-grid.mp4 -------------------------------------------------------------------------------- /src/media/heatwave-animated-sun-illustration.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/media/heatwave-animated-sun-illustration.mp4 -------------------------------------------------------------------------------- /src/media/is-it-time-to-ditch-the-design-grid.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/media/is-it-time-to-ditch-the-design-grid.mp4 -------------------------------------------------------------------------------- /src/pages/articles.njk: -------------------------------------------------------------------------------- 1 | --- 2 | pageTitle: 'Articles' 3 | layout: 'posts-layout.njk' 4 | --- 5 | 6 | {% block content %} 7 |
8 |

Articles

9 | {{ collections.article | length }} posts 10 |
11 | 12 | 17 | {% endblock %} 18 | -------------------------------------------------------------------------------- /src/pages/blogroll.njk: -------------------------------------------------------------------------------- 1 | --- 2 | permalink: /blogroll/ 3 | layout: blogroll.njk 4 | pageTitle: 'Blogroll' 5 | content: about.md 6 | --- 7 | 8 |

Some of the talented front end writers I am inspired by, whose blogs I read regularly:

9 | 10 | -------------------------------------------------------------------------------- /src/pages/demos.njk: -------------------------------------------------------------------------------- 1 | --- 2 | pageTitle: 'Demos' 3 | layout: 'posts-layout.njk' 4 | --- 5 | 6 | {% block content %} 7 |
8 |

Demos

9 | {{ collections.demo | length }} posts 10 |
11 | 12 | 17 | {% endblock %} -------------------------------------------------------------------------------- /src/pages/guest-posts.md: -------------------------------------------------------------------------------- 1 | --- 2 | pageTitle: 'Guest Posts' 3 | displayTitle: 'Do you accept guest posts?' 4 | layout: page.njk 5 | --- 6 | 7 | No. 8 | -------------------------------------------------------------------------------- /src/pages/notes.njk: -------------------------------------------------------------------------------- 1 | --- 2 | pageTitle: 'Notes' 3 | layout: 'posts-layout.njk' 4 | --- 5 | 6 | {% block content %} 7 |
8 |

Notes

9 | {{ collections.note | length }} posts 10 |
11 | 12 | 17 | {% endblock %} -------------------------------------------------------------------------------- /src/pages/pages.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": "page.njk", 3 | "permalink": "{{ pageTitle | slug }}/index.html", 4 | "tags": "page" 5 | } 6 | -------------------------------------------------------------------------------- /src/pages/quick-tips.njk: -------------------------------------------------------------------------------- 1 | --- 2 | pageTitle: 'Quick tips' 3 | layout: 'posts-layout.njk' 4 | --- 5 | 6 | {% block content %} 7 |
8 |

Quick tips

9 | {{ collections['quick tip'] | length }} posts 10 |
11 | 12 | 17 | {% endblock %} 18 | -------------------------------------------------------------------------------- /src/pages/tags-list.njk: -------------------------------------------------------------------------------- 1 | --- 2 | permalink: /tags/ 3 | layout: tag-page.njk 4 | pageTitle: 'Search by topic' 5 | --- 6 | 7 |
8 | 20 |
-------------------------------------------------------------------------------- /src/posts/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mbarker84/css-irl-eleventy/57416d810a1cd0ef6554212867dab1c797f861ba/src/posts/.DS_Store -------------------------------------------------------------------------------- /src/posts/a-guide-to-modern-css-colors.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'A Guide To Modern CSS Colors With RGB, HSL, HWB, LAB And LCH' 3 | date: '2021-11-18' 4 | source: 'Smashing Magazine' 5 | srcUrl: 'https://www.smashingmagazine.com' 6 | externalLink: 'https://www.smashingmagazine.com/2021/11/guide-modern-css-colors/' 7 | tags: ['post', 'css'] 8 | --- 9 | 10 | There’s more to color on the web than meets the eye, and it’s about to get a lot more interesting! In this article, we’ll take a look at the best ways to use colors in a design system, and what we can expect from our colors in the not-too-distant future. 11 | 12 | [Read the article](https://www.smashingmagazine.com/2021/11/guide-modern-css-colors/#comments-guide-modern-css-colors) 13 | -------------------------------------------------------------------------------- /src/posts/a-useful-vscode-extension-for-environment-switching.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'A Useful VS Code Extension for Environment Switching' 3 | date: '2023-01-18' 4 | tags: ['note', 'post', 'tooling', 'workflow'] 5 | --- 6 | 7 | Do you find yourself needing to switch between development environments frequently? That's often the case for me. I work on a web app for wind turbine operators, and I regularly need to test my front end code with different databases. 8 | 9 | My colleague recently alerted me to [.ENV Switcher](https://marketplace.visualstudio.com/items?itemName=EcksDy.env-switcher), a VS Code extension that makes switching between different environments simple. Once installed, you need to create your different .env files (such as dev.env, release.env). Then you bring up a list of .env files to select from by clicking on a small button at the bottom of the window, and instantly switch to the desired environment. Nice! 10 | 11 | [Get the extension →](https://marketplace.visualstudio.com/items?itemName=EcksDy.env-switcher) 12 | -------------------------------------------------------------------------------- /src/posts/animating-css-grid.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Animating CSS Grid' 3 | date: '2019-01-14' 4 | tags: ['post', 'css grid'] 5 | --- 6 | 7 |
8 | 11 |
Animated CSS Grid properties in action (Firefox Nightly)
12 |
13 | 14 | Soooo, [Jen Simmons](http://jensimmons.com/) just dropped a surprise bombshell on Twitter – CSS Grid `grid-template-columns` and `grid-template-rows` properties are now _animatable_ in Firefox Nightly! Naturally I had to jump in and have a go right away! 15 | 16 | Here’s the demo if you want to have a play: 17 | 18 | 20 | -------------------------------------------------------------------------------- /src/posts/beautiful-scrolling-experiences-without-libraries.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Beautiful Scrolling Experiences – Without Libraries' 3 | date: '2019-12-06' 4 | source: '24 Ways' 5 | srcUrl: 'https://24ways.org/' 6 | externalLink: 'https://24ways.org/2019/beautiful-scrolling-experiences-without-libraries/' 7 | tags: ['post', 'css', 'scroll-snap', 'javascript'] 8 | --- 9 | 10 | Published on 24Ways 11 | -------------------------------------------------------------------------------- /src/posts/building-a-dynamic-header-with-intersection-observer.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Building A Dynamic Header With Intersection Observer' 3 | date: '2021-07-20' 4 | source: 'Smashing Magazine' 5 | srcUrl: 'https://www.smashingmagazine.com' 6 | externalLink: 'https://www.smashingmagazine.com/2021/07/dynamic-header-intersection-observer/#comments-dynamic-header-intersection-observer' 7 | tags: ['post', 'css', 'javascript'] 8 | --- 9 | 10 | Have you ever needed to build a UI where some component on the page needs to respond to elements as they’re scrolled to a certain threshold within the viewport — or perhaps in and out of the viewport itself? 11 | 12 | This article for Smashing Magazine walks through building a page header that updates its colours as the user scrolls to different sections of the page. 13 | 14 | [Read the article](https://www.smashingmagazine.com/2021/07/dynamic-header-intersection-observer/#comments-dynamic-header-intersection-observer) 15 | -------------------------------------------------------------------------------- /src/posts/building-a-scrollable-and-draggable-timeline-with-gsap.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Building a Scrollable and Draggable Timeline with GSAP' 3 | date: '2022-01-03' 4 | source: 'Codrops' 5 | srcUrl: 'https://tympanus.net/codrops' 6 | externalLink: 'https://tympanus.net/codrops/2022/01/03/building-a-scrollable-and-draggable-timeline-with-gsap/' 7 | tags: ['post', 'css', 'javascript'] 8 | --- 9 | 10 | The [Greensock](https://greensock.com/) animation library’s ScrollTrigger and Draggable plugins can help us create some very cool effects that respond to user interaction. In this article for Codrops we’ll look at how to use them together, to create an interactive timeline that’s both scrollable _and_ draggable. We’ll be building a timeline showing the albums of the rock band Radiohead — but you can choose any subject matter you like! 11 | 12 | [Read the article](https://tympanus.net/codrops/2022/01/03/building-a-scrollable-and-draggable-timeline-with-gsap/) 13 | -------------------------------------------------------------------------------- /src/posts/building-an-interactive-sparkline-graph-with-d3.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Building an Interactive Sparkline Graph with D3' 3 | date: '2022-03-29' 4 | source: 'Codrops' 5 | srcUrl: 'https://tympanus.net/codrops' 6 | externalLink: 'https://tympanus.net/codrops/2022/03/29/building-an-interactive-sparkline-graph-with-d3/' 7 | tags: ['post', 'css', 'javascript'] 8 | --- 9 | 10 | D3 is a great JavaScript library for building data visualizations using SVG elements. In this tutorial, learn how to build an interactive sparkline graph that takes inspiration from the NPM website. We’ll also learn how to use CSS custom properties to create multiple color schemes. 11 | 12 | [Read the article](https://tympanus.net/codrops/2022/03/29/building-an-interactive-sparkline-graph-with-d3/) 13 | -------------------------------------------------------------------------------- /src/posts/color-theming-with-custom-properties-and-tailwind.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Color Theming with CSS Custom Properties and Tailwind' 3 | date: '2020-11-20' 4 | source: 'CSS-Tricks' 5 | srcUrl: 'https://css-tricks.com/color-theming-with-css-custom-properties-and-tailwind/' 6 | externalLink: 'https://css-tricks.com/color-theming-with-css-custom-properties-and-tailwind/' 7 | tags: ['post', 'css', 'custom properties', 'tailwind', 'color'] 8 | --- 9 | 10 | I’m a big fan of custom properties, and this post for CSS Tricks covers how we use them with Tailwind CSS at Atomic Smash for building themes. 11 | -------------------------------------------------------------------------------- /src/posts/creating-3d-characters-in-threejs.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Creating 3D Characters in Three.js' 3 | date: '2021-10-10' 4 | source: 'Codrops' 5 | srcUrl: 'https://tympanus.net/codrops/' 6 | externalLink: 'https://tympanus.net/codrops/2021/10/04/creating-3d-characters-in-three-js/' 7 | tags: ['post', 'javascript', 'threejs'] 8 | --- 9 | 10 | In this tutorial we’ll talk through creating a three-dimensional character using Three.js, adding some simple but effective animation, and a generative colour palette. 11 | 12 | [Read the full article on Codrops](https://tympanus.net/codrops/2021/10/04/creating-3d-characters-in-three-js/) 13 | -------------------------------------------------------------------------------- /src/posts/creating-color-palettes-with-the-color-mix-function.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Creating Color Palettes with the CSS color-mix() Function' 3 | date: '2024-03-08' 4 | source: 'MDN' 5 | srcUrl: 'https://developer.mozilla.org/en-US/blog/' 6 | externalLink: 'https://developer.mozilla.org/en-US/blog/color-palettes-css-color-mix/' 7 | tags: ['post', 'css'] 8 | --- 9 | 10 | Colors can sometimes get out of hand in a project. We often start with a few well-chosen brand colors, but over time, we may find ourselves adding variations as our project grows. Perhaps we realize that we need to adjust the lightness of a button color for accessibility reasons, or that we need a slightly different variant of a component. How do we ensure that the colors we choose fit within the design system for our project? 11 | 12 | I’ve been exploring using the relatively new CSS `color-mix()` function for this purpose. It’s been fun to see the different palette variations I could generate! In this article for MDN we’ll explorer how `color-mix()` can be a game-changer for your design process. 13 | 14 | {% hotlink 'https://developer.mozilla.org/en-US/blog/color-palettes-css-color-mix/', 'Read the article on MDN' %} 15 | -------------------------------------------------------------------------------- /src/posts/creating-custom-easing-effects-with-linear.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Creating custom easing effects in CSS animations using the linear() function' 3 | date: '2023-08-01' 4 | source: 'MDN' 5 | srcUrl: 'https://developer.mozilla.org/en-US/blog/' 6 | externalLink: 'https://developer.mozilla.org/en-US/blog/custom-easing-in-css-with-linear/' 7 | tags: ['post', 'css', 'animation'] 8 | --- 9 | 10 | An animation is about more than just moving things from one place to another. **How** something moves (or changes in some way) is just as important for conveying a sense of purpose. 11 | 12 | The `linear()` function in CSS is a new easing function that gives us more control over crafting our animations. We'll explore how `linear()` works and also look at some practical examples of where it can be used. 13 | 14 | [Read the article](https://developer.mozilla.org/en-US/blog/custom-easing-in-css-with-linear/) 15 | -------------------------------------------------------------------------------- /src/posts/creative-list-styling.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Creative List Styling' 3 | date: '2022-08-24' 4 | source: 'Web.dev' 5 | srcUrl: 'https://web.dev' 6 | externalLink: 'https://web.dev/creative-list-styling/' 7 | tags: ['post', 'css', 'html'] 8 | --- 9 | 10 | What comes to mind when you think of a list? The most obvious example is a shopping list—the most simple of lists, a collection of items in no particular order. But we use lists in all sorts of ways on the web. A collection of upcoming concerts at a venue? Very likely a list. A multi-step booking process? Quite possibly a list. A gallery of images? Even that could be considered a list of images with captions. 11 | 12 | In this article we'll dive into the different HTML list types available to us on the web and when to use them, including some attributes you might not be familiar with. We'll also take a look at some useful and creative ways to style them with CSS. 13 | 14 | [Read the article](https://web.dev/creative-list-styling/) 15 | -------------------------------------------------------------------------------- /src/posts/developer-decisions-for-building-flexible-components.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Developer Decisions For Building Flexible Components' 3 | date: '2021-09-09' 4 | tags: ['post', 'workflow', 'css'] 5 | source: 'Smashing Magazine' 6 | srcUrl: 'https://www.smashingmagazine.com' 7 | externalLink: 'https://www.smashingmagazine.com/2021/09/developer-decisions-building-flexible-components/' 8 | --- 9 | 10 | One of the key skills of a front-end developer is to be able to take designs and turn them into code. These designs are often presented as static mock-ups, which visualize the “ideal” experience of browsing the website. 11 | 12 | In the real world, content often differs vastly from the neat, perfectly fitting content presented in designs. Added to that, on the modern web, users have an ever-increasing range of options for how they access the sites we build. 13 | 14 | In this article, we’ll walk through the process of taking a seemingly simple design for a text-and-media component and deciding how best to translate it into code, keeping in mind the needs of both users and content authors. We’re not going to delve into how to code it — rather, the factors that will determine our development decisions. We’ll consider the questions we need to ask (both ourselves and other stakeholders) at every step. 15 | 16 | [Read the full article](https://www.smashingmagazine.com/2021/09/developer-decisions-building-flexible-components/) 17 | -------------------------------------------------------------------------------- /src/posts/dynamic-css-masks-with-custom-properties-and-gsap.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Dynamic CSS Masks with Custom Properties and GSAP' 3 | date: '2021-05-04' 4 | source: 'Codrops' 5 | srcUrl: 'https://tympanus.net/codrops/2021/05/04/dynamic-css-masks-with-custom-properties-and-gsap/' 6 | externalLink: 'https://tympanus.net/codrops/2021/05/04/dynamic-css-masks-with-custom-properties-and-gsap/' 7 | tags: ['post', 'css', 'animation', 'custom properties', 'javascript'] 8 | --- 9 | 10 | Learn how to animate CSS masks based on the cursor position using GSAP and custom properties for a unique spotlight effect. 11 | 12 | [Read the article ➡️](https://tympanus.net/codrops/2021/05/04/dynamic-css-masks-with-custom-properties-and-gsap/) 13 | -------------------------------------------------------------------------------- /src/posts/everybodys-free-to-write-websites.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Everybody’s Free (to Write Websites)' 3 | date: '2024-07-18' 4 | tags: ['post', 'note'] 5 | --- 6 | 7 | If anybody needs some free advice on how to build websites, Sara Joy has got it [absolutely nailed](https://sarajoy.dev/blog/write-websites/). (With supporting voiceover from [Keenan](https://gkeenan.co/), and an accompanying video from [Robb Knight](https://rknight.me/).) 8 | 9 | The indie web community is awesome 💕 10 | 11 | {% hotlink 'https://sarajoy.dev/blog/write-websites/', 'Everybody’s Free (to Write Websites)' %} 12 | -------------------------------------------------------------------------------- /src/posts/get-ready-for-the-css-grid-revolution.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Get ready for the CSS Grid Revolution' 3 | date: '2019-09-06' 4 | source: 'Creative Bloq' 5 | srcUrl: 'https://www.creativebloq.com/features/get-ready-for-the-css-grid-revolution' 6 | externalLink: 'https://www.creativebloq.com/features/get-ready-for-the-css-grid-revolution' 7 | tags: ['post', 'css grid', 'opinion'] 8 | --- 9 | 10 | An interview for Net magazine 11 | -------------------------------------------------------------------------------- /src/posts/getting-started-with-container-queries.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Getting Started with Container Queries' 3 | date: '2023-11-16' 4 | source: 'MDN' 5 | srcUrl: 'https://developer.mozilla.org/en-US/blog/' 6 | externalLink: 'https://developer.mozilla.org/en-US/blog/getting-started-with-css-container-queries/' 7 | tags: ['post', 'css', 'layout'] 8 | --- 9 | 10 | As of this year, container queries are supported in all major browsers. But what are they, and how can we use them to build more robust, flexible layouts? Do we still need media queries? Let's find out. 11 | 12 | This post for MDN includes everything you need to get started using container queries for building layouts. 13 | 14 | {% hotlink 'https://developer.mozilla.org/en-US/blog/getting-started-with-css-container-queries/', 'Read the post on MDN' %} 15 | -------------------------------------------------------------------------------- /src/posts/how-to-create-better-themes.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'How to Create Better Themes with CSS Variables' 3 | date: '2019-04-01' 4 | source: 'LogRocket' 5 | srcUrl: 'https://blog.logrocket.com/how-to-create-better-themes-with-css-variables-5a3744105c74' 6 | externalLink: 'https://blog.logrocket.com/how-to-create-better-themes-with-css-variables-5a3744105c74' 7 | tags: ['post', 'custom properties', 'css'] 8 | --- 9 | 10 | Published on LogRocket 11 | -------------------------------------------------------------------------------- /src/posts/interop-2023.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Interop 2023' 3 | date: '2023-02-02' 4 | tags: ['note', 'post', 'css'] 5 | --- 6 | 7 | Last year, [Interop 2022](https://wpt.fyi/interop-2022), a collaborative cross-browser initiative, was hugely successful in getting 15 key features implemented interoperably. As developers, we can enjoy the fruits of this collaboration, with features like [container queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries), [cascade layers](https://css-tricks.com/css-cascade-layers/) and [dynamic viewport units](https://web.dev/viewport-units/) going from little or no browser support to almost full support in the space of a year. 8 | 9 | [Interop 2023](https://wpt.fyi/interop-2023) has just been announced, expanding to 26 focus areas. Some exciting CSS features include the [`:has()` pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:has), which is already supported in some browsers, as well as [Level 4 media queries](https://drafts.csswg.org/mediaqueries-4/), [math functions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions#math_functions), and [font palette features](https://webkit.org/blog/12662/customizing-color-fonts-on-the-web/), which enable custom coloured fonts. 10 | 11 | Read the Interop teams’ write-ups here: 12 | 13 | - [WebKit](https://webkit.org/blog/13706/interop-2023) 14 | - [Google](https://web.dev/interop-2023/) 15 | - [Igalia](https://www.igalia.com/news/2023/interop2023.html) 16 | - [Microsoft](https://blogs.windows.com/msedgedev/2023/02/01/microsoft-edge-and-interop-2023/) 17 | - [Mozilla](https://hacks.mozilla.org/2023/02/announcing-interop-2023/) 18 | - [Bocoup](https://bocoup.com/blog/interop-2023) 19 | -------------------------------------------------------------------------------- /src/posts/interview-beyond-the-spotlight.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Interview: Beyond the Spotlight' 3 | date: '2023-12-18' 4 | tags: ['note', 'post', 'careers', 'opinion'] 5 | --- 6 | 7 |
8 | Profile pic with the text “Beyond the Spotlight” 9 |
10 | 11 | Melinda Seckington has just launched a brand new blog series, **Beyond the Spotlight**, where she’ll be talking to conference speakers about their talk process, preparation and delivery. Melinda is an accomplished speaker , writer and engineering manager, so I was honoured to be the [first speaker interviewed](https://www.seckington.com/beyond-the-spotlight-michelle-barker/). 12 | 13 | It was interesting to reflect on my experience of speaking at conferences and consider what drew me into it. I’m looking forward to reading more in the series. 14 | 15 | [Read the interview](https://www.seckington.com/beyond-the-spotlight-michelle-barker/) 16 | -------------------------------------------------------------------------------- /src/posts/introduction-to-web-sustainability.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Introduction to Web Sustainability' 3 | date: '2023-10-13' 4 | source: 'MDN' 5 | srcUrl: 'https://developer.mozilla.org/en-US/blog/' 6 | externalLink: 'https://developer.mozilla.org/en-US/blog/introduction-to-web-sustainability/' 7 | tags: ['post', 'web sustainability', 'workflow'] 8 | --- 9 | 10 | It’s important to reflect on the environmental impact of our work and do what we can to reduce it. Don’t know where to start? This article for MDN introduces some ways in which developers can improve the efficiency of the website we build and take steps to make our work more sustainable. 11 | 12 | [Read the article](https://developer.mozilla.org/en-US/blog/introduction-to-web-sustainability/) 13 | -------------------------------------------------------------------------------- /src/posts/it-career-energizer-podcast.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'IT Career Energizer Podcast' 3 | date: '2021-11-17' 4 | tags: ['post', 'css', 'careers', 'opinion', 'podcast'] 5 | --- 6 | 7 |
8 | Profile image with the text 'IT Career Energizer Podcast Episode 318: Michelle Barker, Lead Front End Developer at Atomic Smash — Learn From Your Communities and Remember That Learning Is Fun' 9 |
10 | 11 | I recently had the priviledge of chatting to Phil Burgess on the [IT Career Energizer Podcast](https://itcareerenergizer.com/) about my journey into web development, and advice to new developers starting out on that path. You can [listen to the episode here](https://itcareerenergizer.com/podcast/learn-from-your-communities-and-remember-that-learning-is-fun-with-michelle-barker/) — it’s also available on all your favourite podcast platforms (Spotify, Apple Podcasts and more)! 12 | -------------------------------------------------------------------------------- /src/posts/leaving-twitter-behind.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Leaving Twitter Behind' 3 | date: '2023-11-06' 4 | tags: ['post', 'note', 'National Blog Posting Month', 'opinion'] 5 | intro: 'Day 6 of National Blog Posting Month #NaBloPoMo' 6 | --- 7 | 8 | It’s been a year since Twitter (X) went down the pan, and I finally got around to removing the Twitter link from this site. I haven’t visited the platform in months, except periodically, guiltily checking that I haven’t missed an important DM. I never post there, and the occasional fleeting glimpse of my feed is enough to convince me I’m not missing much. 9 | 10 | I think it’s pretty safe to say I’m not going back. The only reason I haven’t deleted my two accounts on there is because there are a bunch of places on the web that link to my Twitter profiles, and I don’t want someone else taking my username and causing confusion. Nor do I like the idea of leaving dead links out there in the wild, going nowhere. 11 | 12 | I post on [Mastodon](https://front-end.social/@michelle) semi-regularly, but overall I’ve cut down my social media use quite a bit, which I think is a good thing. Overall, what I’ve gained outweighs what I’ve lost. 13 | 14 | Even posting on Mastodon sometimes I find it overwhelming to try and keep up with the replies, and the cognitive load of trying to have constructive discussions on there. I’m trying to share a bit more on LinkedIn, which seems wise from a career perspective. But quite often now I’ll post on this blog without sharing it anywhere. It’s my own cosy little corner of the web. 15 | 16 | I’m grateful for the connections I made on Twitter. But I’m ready to stop chasing likes. 17 | -------------------------------------------------------------------------------- /src/posts/manifesto-for-a-humane-web.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Manifesto for a Humane Web' 3 | date: '2024-05-10' 4 | tags: ['post', 'note', 'opinion'] 5 | --- 6 | 7 | I’m sure I’m not alone in noticing the recent proliferation of articles lamenting the impending (or, indeed, already happening) destruction of the web as we know it, due in large part to the influx of AI-generated content. For the most part, I share their pessimism. It’s hard not to see the devaluation of human content as anything but a negative. 8 | 9 | But in the face of all this gloom, I think it’s important to define not just what we **don’t** want from the web, but what we **do**. I put some of these thoughts into words and created a manifesto for what _I_ think is a better vision for the web. It’s a lot of stuff that many of us care about greatly anyway, and are trying to put into practice daily. To me, it’s nice to have a place I can visit to remind myself of what’s important, why we do what we do, and how we can strive for a better web. It’s something of a work in progress — a [digital garden](https://maggieappleton.com/garden-history) if you will, which I expect to change over time. It comes from a place of hope. 10 | 11 | {% hotlink 'https://humanewebmanifesto.com/', 'Read the manifesto' %} 12 | -------------------------------------------------------------------------------- /src/posts/new-css-features-in-2022.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'New CSS Features In 2022' 3 | date: '2022-03-01' 4 | source: 'Smashing Magazine' 5 | srcUrl: 'https://www.smashingmagazine.com' 6 | externalLink: 'https://www.smashingmagazine.com/2022/03/new-css-features-2022/' 7 | tags: ['post', 'css', 'javascript'] 8 | --- 9 | 10 | There are **a lot** of new CSS features in development as I write this. And 2022 is the year that some big ones will be landing in a browser near you, with the potential for big changes in the way we write CSS! I explored some of these new features for Smashing Magazine. 11 | 12 | [Read the article](https://www.smashingmagazine.com/2022/03/new-css-features-2022/) 13 | -------------------------------------------------------------------------------- /src/posts/optimizing-a-vue-app.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Optimizing a Vue App' 3 | date: '2022-11-22' 4 | source: 'Smashing Magazine' 5 | srcUrl: 'https://www.smashingmagazine.com' 6 | externalLink: 'https://www.smashingmagazine.com/2022/11/optimizing-vue-app/' 7 | tags: ['post', 'css', 'javascript', 'web performance'] 8 | --- 9 | 10 | Prioritizing performance when building our web apps improves the user experience and helps ensure they can be used by as many people as possible. In this article we’ll walk through some of the front-end optimization tips to keep our Vue apps as efficient as possible. 11 | 12 | [Read the article](https://www.smashingmagazine.com/2022/11/optimizing-vue-app/) 13 | -------------------------------------------------------------------------------- /src/posts/perspective.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Perspective' 3 | date: '2024-05-24' 4 | tags: ['post', 'note', 'opinion'] 5 | --- 6 | 7 |
8 | View from the top of Mount Snowdon (Y Wyddfa), looking down at two lakes and rocky slopes, with mountains fading into the distance against a backdrop of blue, cloudy sky 9 |
View from the top of Mount Snowdon (Y Wyddfa) in Eryri National Park
10 |
11 | 12 | This week I climbed a mountain. There are some things that make me care not one tiny bit about web development, and being on top of a mountain is one of them. The web helped me with this adventure, though. 13 | 14 | I planned the trip on the web. 15 | 16 | I researched the hiking route on the web. 17 | 18 | I booked the hotel on the web. 19 | 20 | I bought equipment on the web. 21 | 22 | I navigated the journey on the web (well, Google Maps). 23 | 24 | At the top of the mountain, none of it mattered. All that mattered was the moment. On top of the mountain, the people below were nothing more than specks. It’s a cliché, but all the silly little things I normally worry about felt inconsequential. Now, every time I think back to that trip I get a welcome sense of perspective. 25 | 26 | What matters is not the websites we build, but what they enable people to do. Let’s make better websites, so more people can climb mountains. 27 | -------------------------------------------------------------------------------- /src/posts/posts.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": "post.njk", 3 | "tags": "post", 4 | "permalink": "{{ page.fileSlug }}/" 5 | } 6 | -------------------------------------------------------------------------------- /src/posts/quick-tip-you-might-not-need-calc.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Quick Tip: You Might Not Need Calc()' 3 | date: '2022-05-16' 4 | tags: ['post', 'css', 'quick tip'] 5 | --- 6 | 7 | Did you know, if you use CSS math functions like [`min()`](https://developer.mozilla.org/en-US/docs/Web/CSS/min), [`max()`](https://developer.mozilla.org/en-US/docs/Web/CSS/max) and [`clamp()`](https://developer.mozilla.org/en-US/docs/Web/CSS/clamp) and you’re calculating any one of the arguments, you don’t need `calc()`? I think it was [Ahmad Shadeed](https://twitter.com/shadeed9) who mentioned this on Twitter the other day, but I could be wrong. 8 | 9 | So if you want to use `clamp()` for some fluid typography, say, with a `calc()` function for the middle value, instead of doing this: 10 | 11 | ```css 12 | h1 { 13 | font-size: clamp(1.5rem, calc(1rem + 3vw), 4rem); 14 | } 15 | ``` 16 | 17 | You can do this: 18 | 19 | ```css 20 | h1 { 21 | font-size: clamp(1.5rem, 1rem + 3vw, 4rem); 22 | } 23 | ``` 24 | 25 | It totally makes sense, because `min()`, `max()` and `clamp()` _already are_ math functions. But nonetheless, it’s something I wasn’t aware of before! 26 | 27 | It works with custom properties too — check out [this demo](https://codepen.io/michellebarker/pen/qBxRXmg). 28 | 29 | Incidentally, if you want to know more about fluid typography in CSS (including accessibility concerns), [this comprehensive guide](https://www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp/) by [Adrian Bece](https://twitter.com/AdrianBeceDev) has you covered. 30 | -------------------------------------------------------------------------------- /src/posts/reduce-your-websites-environmental-impact-with-a-carbon-budget.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Reduce Your Website’s Environmental Impact With a Carbon Budget' 3 | date: '2021-12-06' 4 | source: 'CSS Tricks' 5 | srcUrl: 'https://css-tricks.com/' 6 | externalLink: 'https://css-tricks.com/reduce-your-websites-environmental-impact-with-a-carbon-budget/' 7 | tags: ['post', 'css', 'javascript', 'opinion', 'web sustainability'] 8 | --- 9 | 10 | In this article for CSS Tricks’ end-of-year series I wrote about how we in the web development industry should examine the environmental impact of the products we’re building, and some resources to help us do so. 11 | 12 | [Read the article](https://css-tricks.com/reduce-your-websites-environmental-impact-with-a-carbon-budget/) 13 | -------------------------------------------------------------------------------- /src/posts/reducing-the-webs-carbon-footprint-optimizing-social-media-embeds.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Reducing The Web’s Carbon Footprint: Optimizing Social Media Embeds' 3 | date: '2022-02-03' 4 | source: 'Smashing Magazine' 5 | srcUrl: 'https://www.smashingmagazine.com' 6 | externalLink: 'https://www.smashingmagazine.com/2022/02/reducing-web-carbon-footprint-optimizing-social-media-embeds/' 7 | tags: ['post', 'css', 'javascript', 'html', 'web sustainability'] 8 | --- 9 | 10 | In this article, we’ll look specifically at what we can do to reduce the impact of social media embeds and social sharing widgets — or even some strategies to avoid them altogether. While the spotlight is on reducing the environmental impact, many of these tips will be great for performance too. 11 | 12 | [Read the article](https://www.smashingmagazine.com/2022/02/reducing-web-carbon-footprint-optimizing-social-media-embeds/) 13 | -------------------------------------------------------------------------------- /src/posts/reporting-on-website-carbon-emissions.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Reporting on Website Carbon Emissions' 3 | date: '2023-12-08' 4 | tags: ['post', 'note', 'web sustainability', 'performance'] 5 | --- 6 | 7 | Yesterday I spoke at [Smashing Meets Goes Green](https://smashingconf.com/meets-green), an online meetup themed around building a more sustainable web. In my talk I spoke a little about tools for measuring your website’s carbon emissions, and how it would be great if these metrics could be integrated with commonly-used developer tools for monitoring performance. As I also mentioned, it’s really hard to land on 100% accurate figures for this stuff, as there are so many variables. 8 | 9 | Nevertheless, bringing these metrics into focus, however imperfect, would contribute in a big way towards awareness of the carbon overhead of of digital products, and hopefully encourage some designers and developers to build more sustainable websites. 10 | 11 | Fershad Irani has written a [fascinating deep-dive](https://calendar.perfplanet.com/2023/why-web-perf-tools-should-be-reporting-website-carbon-emissions) into the models used for calculating website carbon emissions, their limitations, and how they could be improved. He argues that despite their imperfections, we should be reporting on this stuff anyway. 12 | 13 | [Read the article](https://calendar.perfplanet.com/2023/why-web-perf-tools-should-be-reporting-website-carbon-emissions) 14 | -------------------------------------------------------------------------------- /src/posts/respecting-users-motion-preferences.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Respecting Users’ Motion Preferences' 3 | date: '2021-10-21' 4 | source: 'Smashing Magazine' 5 | srcUrl: 'https://www.smashingmagazine.com' 6 | externalLink: 'https://www.smashingmagazine.com/2021/10/respecting-users-motion-preferences/' 7 | tags: ['post', 'css', 'javascript', 'accessibility', 'animation'] 8 | --- 9 | 10 | The prefers-reduced-motion media query has excellent support in all modern browsers going back a couple of years. In this article, we’ll look at how to use it today to make your sites more accessible. 11 | 12 | [Read the article](https://www.smashingmagazine.com/2021/10/respecting-users-motion-preferences/) 13 | -------------------------------------------------------------------------------- /src/posts/reversing-an-easing-curve.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Reversing an Easing Curve' 3 | date: '2018-12-18' 4 | source: 'CSS-Tricks' 5 | srcUrl: 'https://css-tricks.com/reversing-an-easing-curve/' 6 | externalLink: 'https://css-tricks.com/reversing-an-easing-curve/' 7 | tags: ['post', 'css', 'animation', 'custom properties'] 8 | --- 9 | 10 | Published on CSS Tricks 11 | -------------------------------------------------------------------------------- /src/posts/scroll-progress-animations-in-css.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Scroll Progress Animations in CSS' 3 | date: '2023-07-14' 4 | source: 'MDN' 5 | srcUrl: 'https://developer.mozilla.org/en-US/blog/' 6 | externalLink: 'https://developer.mozilla.org/en-US/blog/scroll-progress-animations-in-css/' 7 | tags: ['post', 'css'] 8 | --- 9 | 10 | Scroll-linked animations can often add a touch of class to a website, but have long been the preserve of JavaScript. Now a brand new specification is being implemented to enable us to create rich scroll-driven experiences with CSS! In this article for MDN, we’ll explore scroll timelines — how to link an animation to the progress of scroll. 11 | 12 | [Read the article](https://developer.mozilla.org/en-US/blog/scroll-progress-animations-in-css/) 13 | -------------------------------------------------------------------------------- /src/posts/simplifying-form-styles-with-accent-color.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Simplifying Form Styles With accent-color' 3 | date: '2021-09-23' 4 | source: 'Smashing Magazine' 5 | srcUrl: 'https://www.smashingmagazine.com/' 6 | externalLink: 'https://www.smashingmagazine.com/2021/09/simplifying-form-styles-accent-color/' 7 | tags: ['post', 'css'] 8 | --- 9 | 10 | The new CSS accent-color property makes it quick and easy to roll out our brand colors to certain form inputs by leveraging user agent styles. In this article we’ll take a look at what it does and how to use it alongside color-scheme for simple, accessible checkboxes and radio buttons — and imagine how we might use it in the future. 11 | 12 | [Read the article](https://www.smashingmagazine.com/2021/09/simplifying-form-styles-accent-color/) 13 | -------------------------------------------------------------------------------- /src/posts/state-of-the-art-css.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'State of the Art CSS' 3 | date: '2019-10-23' 4 | source: 'Creative Bloq' 5 | srcUrl: 'https://www.creativebloq.com' 6 | externalLink: 'https://www.creativebloq.com/how-to/8-state-of-the-art-css-features' 7 | tags: ['post', 'css'] 8 | --- 9 | 10 | An article on new and upcoming CSS features for Web Designer magazine. 11 | -------------------------------------------------------------------------------- /src/posts/styling-tables-the-modern-css-way.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Styling Tables the Modern CSS Way 3 | date: '2024-07-18' 4 | source: Piccalilli 5 | srcUrl: 'https://piccalil.li/' 6 | externalLink: 'https://piccalil.li/blog/styling-tables-the-modern-css-way/' 7 | tags: ['post', 'css', 'html', 'design'] 8 | --- 9 | 10 | In this article for Andy Bell’s blog [Piccalilli](https://piccalil.li/blog), we explore something I’ve been consumed with styling a lot recently: data tables. Not to be confused with using tables for layout (as in the bad old days of CSS), HTML tables are vital for displaying tabular data (data with row and column relationships) accessibly. They come with a few quirks, however, and some less-familiar CSS properties that are handy for styling. 11 | 12 | Head on over to Piccalilli to learn more, and check out some of Andy’s other great articles. 13 | 14 | {% hotlink 'https://piccalil.li/blog/styling-tables-the-modern-css-way/', 'Read the article on Piccalilli' %} 15 | -------------------------------------------------------------------------------- /src/posts/super-powered-grid-components.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Super-powered Grid Components with CSS Custom Properties' 3 | date: '2018-08-28' 4 | source: 'CSS-Tricks' 5 | srcUrl: 'https://css-tricks.com/super-power-grid-components-with-css-custom-properties/' 6 | externalLink: 'https://css-tricks.com/super-power-grid-components-with-css-custom-properties/' 7 | tags: ['post', 'css grid', 'custom properties', 'layout'] 8 | --- 9 | 10 | Published on CSS Tricks 11 | -------------------------------------------------------------------------------- /src/posts/sustainable-web-development-strategies-within-an-organization.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Sustainable Web Development Strategies Within an Organization' 3 | date: '2022-10-11' 4 | source: 'Smashing Magazine' 5 | srcUrl: 'https://www.smashingmagazine.com/' 6 | externalLink: 'https://www.smashingmagazine.com/2022/10/sustainable-web-development-strategies-organization/' 7 | tags: ['post', 'web sustainability', 'workflow', 'opinion'] 8 | --- 9 | 10 | Climate change and sustainability are increasing concerns for digital organizations, as well as individuals working in tech. In this article for Smashing Magzine, we explore some of the ways we can raise awareness and effect change within an organization to create a more positive environmental impact. 11 | 12 | [Read the article](https://www.smashingmagazine.com/2022/10/sustainable-web-development-strategies-organization/) 13 | -------------------------------------------------------------------------------- /src/posts/talking-about-web-sustainability-on-shoptalk-show.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Talking About Web Sustainability on ShopTalk Show' 3 | date: '2024-03-16' 4 | tags: ['post', 'note', 'web sustainability'] 5 | related: 6 | [ 7 | { 8 | title: 'Design Patterns that Encourage Junk Data', 9 | url: '/design-patterns-that-encourage-junk-data/', 10 | }, 11 | { title: 'Building a Greener Web', url: '/building-a-greener-web/' }, 12 | { 13 | title: 'New and Improved Green Web Hosting Directory from the Green Web Foundation', 14 | url: '/new-and-improved-green-web-hosting-directory/', 15 | }, 16 | ] 17 | --- 18 | 19 | When you get an invite from Chris and Dave to appear on [ShopTalk Show](https://shoptalkshow.com) it’s hard to say no! Despite my longstanding fear of sounding like an idiot on the airwaves, I swallowed my nerves and joined them for an episode on web sustaibaility — althought we managed to delve into a few other topics too. Naturally, right afterwards I thought of a whole bunch of things I forgot to mention (hopefully I’ll get around to writing one or two follow-up blog posts!), but I was pleased to get the chance to talk about this important subject on such an esteemed podcast. I hope listeners will take away one or two things, and be inspired to do their own research. 20 | 21 | {% hotlink 'https://shoptalkshow.com/606/', 'Listen here' %} 22 | -------------------------------------------------------------------------------- /src/posts/the-perfect-site-doesnt-exist.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'The Perfect Site Doesn’t Exist' 3 | date: '2024-05-03' 4 | source: 'Branch' 5 | srcUrl: 'https://branch.climateaction.tech' 6 | externalLink: 'https://branch.climateaction.tech/issues/issue-8/the-perfect-site-doesnt-exist/' 7 | tags: ['post', 'web sustainability', 'workflow'] 8 | --- 9 | 10 | There’s something special about starting a new web or software project. Like a blank canvas, it has so much potential. Surely this is where we’re about to do our best work... 11 | 12 | In this piece for Branch magazine, I explore the theme of “Perfection is the enemy of progress” by considering how those of us concerned with building a humane web can weave incremental change into our work — without allowing perfectionism to stall our progress. 13 | 14 | {% hotlink 'https://branch.climateaction.tech/issues/issue-8/the-perfect-site-doesnt-exist/', 'Read the article via Branch' %} 15 | -------------------------------------------------------------------------------- /src/posts/the-web-doesnt-have-version-numbers.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'The Web Doesn’t Have Version Numbers' 3 | date: '2022-03-19' 4 | tags: ['post', 'quick links', 'css', 'html', 'opinion'] 5 | --- 6 | 7 | You’ve probably heard the term “web3” bandied around quite a bit over the past year or so — along with related terminology like “blockchain”, “crypto” and “NFTs”. If you’re a web developer you’d be forgiven for thinking that this technology is something you need to jump on right away, or risk being left behind. [This post](https://hiddedevries.nl/en/blog/2022-01-03-the-web-doesnt-have-version-numbers) by [Hidde de Vries](https://twitter.com/hdv) explains why we should be cautious about the misleading term “web3”, and **not** mistake it for some kind of official release. As he writes: 8 | 9 | > There is no institution that regularly releases new versions of the web, and recently happily announced this one. 10 | 11 | It certainly doesn’t hurt to be aware of these new technologies. They are the subject of much debate at the moment, and may or may not prove useful in the long run. But, Hidde argues, there is plenty of the web that is getting on just fine without it, and lots of exciting innovation happening on the web platform itself that have nothing to do with the blockchain. 12 | 13 | I hope that “web3” and its associated terminologies don’t become buzzwords that recruiters look for in a CV. For most web development roles, specialist knowledge of this area is completely unnecessary. 14 | 15 | [Read the article](https://hiddedevries.nl/en/blog/2022-01-03-the-web-doesnt-have-version-numbers) 16 | -------------------------------------------------------------------------------- /src/posts/trigonometry-in-css-and-js-a-series.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Trigonometry in CSS and JS: A Series' 3 | date: '2021-06-11' 4 | tags: ['post', 'javascript', 'css'] 5 | --- 6 | 7 | While working on some demos earlier this year, I started to get really interested in trigonometry. Having left the subject alone since school, I initially started brushing up on my knowledge to solve a specific problem. But I was soon drawn in by how a grasp of trigonometry opens up the possibilities for creative coding! 8 | 9 | If the subject sounds intimidating, this article series I wrote for Codrops might be for you. In it we walk through the principles of trigonometry and some creative applications in CSS and JS. Starting from the basics, we gain an understanding of the various trigonometric functions, and move through to using them in our CSS code, before graduating to drawing and animating shapes with the Canvas API. I learnt a lot while writing these articles, and I hope you will too. Maths and creative coding need not be intimidating! 10 | 11 | ## Read the articles 12 | 13 | 1. [Introduction to Trigonometry](https://tympanus.net/codrops/2021/06/01/trigonometry-in-css-and-javascript-introduction-to-trigonometry/) 14 | 2. [Getting Creative with Trigonometric Functions](https://tympanus.net/codrops/2021/06/02/trigonometry-in-css-and-javascript-getting-creative-with-trigonometric-functions/) 15 | 3. [Beyond Triangles](https://tympanus.net/codrops/2021/06/04/trigonometry-in-css-and-javascript-beyond-triangles/) 16 | -------------------------------------------------------------------------------- /src/posts/video-building-a-greener-web.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Video: Building a Greener Web' 3 | date: '2023-07-25' 4 | tags: 5 | ['post', 'video', 'web sustainability', 'javascript', 'workflow', 'tooling'] 6 | --- 7 | 8 | It’s been great to see digital sustainability become more of a mainstream topic in recent months. With most of Europe baking in a deadly heatwave with unprecedated temperature, the need for action on climate change is more pressing than ever. If you’re not sure what action you, as a developer, can take, my talk from [All Day Hey](https://heypresents.com/conferences/2023) conference provides some facts, figures and starting points for thinking about sustainability in the context of web development. 9 | 10 | Although it may seem like a big, scary topic, there’s a lot we can do in terms of mitigating environmental harm in our own work, sharing knowledge and influencing the industry as a whole. I hope you’ll find some useful takeaways here, and be encouraged to join the fight against climate change. 11 | 12 | https://www.youtube.com/watch?v=EfPoOt7T5lg 13 | -------------------------------------------------------------------------------- /src/posts/video-building-complex-layouts-future-sync.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Video: Building Complex Layouts at Future Sync 2019' 3 | date: '2019-06-15' 4 | tags: ['post', 'css grid', 'video', 'events'] 5 | --- 6 | 7 | [Future Sync](https://futuresync.co.uk/) conference recently published the videos from their 2019 conference, including the one from my talk, **Building Complex Layouts with CSS Grid**. If you’re new to CSS Grid, or haven’t had the chance to play around with it too much yet, this could be a good introduction. I start of with some basic usage and progressively get onto more complex examples, explaining different placement methods, and using the `minmax()` function to craft flexible layouts. 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/posts/video-dev-roulette-live.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Video: Dev Roulette Live' 3 | date: '2021-06-27' 4 | tags: ['post', 'video', 'opinion', 'css'] 5 | --- 6 | 7 | Last week I had the honour of participating in [Dev Roulette Live](https://www.youtube.com/channel/UCmAXY1OelfjilsGMHGmVdIQ) — a new video series co-ordinated by [Stephanie Eckles](https://twitter.com/5t3ph), where developers are paired up for live conversation about their specialist subjects. The added twist is a roulette wheel, spun at different points to choose topics at random. One of my favourite things to do is talk about CSS, so this was super fun to be a part of! 8 | 9 | I was also really excited to meet [Bramus](https://twitter.com/bramus), who I was paired up with. Bramus has a [fantastic blog](https://www.bram.us/) that covers loads of useful tips and bleeding-edge CSS features. In the conversation we talked about our favourite CSS tricks, creativity, why we do what we do, and much more. Enjoy the video! 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/posts/video-modern-css-layout-is-awesome.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Video: Modern CSS Layout is Awesome' 3 | date: '2023-07-11' 4 | tags: ['post', 'video', 'layout', 'css'] 5 | --- 6 | 7 | Back in May I had the privilege of speaking at [Beyond Tellerand](https://beyondtellerrand.com/), an incredible conference in Düsseldorf, Germany, with content extending way beyond web design into the realms of animation, mural painting, typography, digital art, Japanese calligraphy and more! 8 | 9 | My own talk was on CSS layout, including some of the exciting new features we have at our disposal. If you want to get up to speed on what’s new in CSS layout, this is a good place to start. 10 | 11 | https://www.youtube.com/watch?v=6O0KBNslevQ 12 | 13 | Here’s a [wrap up from the conference](https://beyondtellerrand.com/blog/wrap-up-and-coverage-for-dusseldorf-2023) too. Enjoy! 14 | -------------------------------------------------------------------------------- /src/posts/video-super-powered-layouts-at-state-of-the-browser.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Video: Super-powered Layouts at State of the Browser 2018' 3 | date: '2019-06-08' 4 | tags: ['post', 'css grid', 'custom properties', 'video', 'events'] 5 | --- 6 | 7 | Last year I spoke about CSS Grid at [State of the Browser](https://2018.stateofthebrowser.com/) conference. This was a great conference to attend, with awesome speakers including [Jeremy Keith](https://adactio.com/), [Christian Heilmann](https://christianheilmann.com/), [Ruth John](https://ruthjohn.com/) and [Charlie Owen](https://www.sonniesedge.net/). 8 | 9 | The video of my talk, **Super-powered Layouts with CSS Grid and CSS Variables** has just been published. Enjoy! 10 | 11 | https://www.youtube.com/embed/hq3hDKD4H98 12 | -------------------------------------------------------------------------------- /src/posts/video-using-tailwind-with-wordpress.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Video: Using Tailwind with Wordpress' 3 | date: '2020-12-20' 4 | tags: ['post', 'css', 'tailwind', 'video'] 5 | --- 6 | 7 | Last week I had the pleasure of chatting with [Keith Devon](https://twitter.com/keithdevon) and [Mark Wilkinson](https://twitter.com/wpmark) of [Highrise Digital](https://highrise.digital/), alongside [Ben Furfie](https://twitter.com/frontendben), about my experience of using Tailwind CSS for building Wordpress sites. We’ve been using Tailwind at Atomic Smash for the past year, and I’ve been using it even longer. It’s been an interesting journey marrying it up with the Gutenberg block editor in Wordpress, but it’s fair to say it’s become an important part of our workflow. 8 | 9 | Watch the video here: 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/posts/what-i-learned-from-migrating-a-vuex-app-to-pinia.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: What I learned from migrating a Vue project from Vuex to Pinia 3 | date: '2025-02-06' 4 | source: 'Piccalilli' 5 | srcUrl: 'https://piccalil.li/' 6 | externalLink: 'https://piccalil.li/blog/what-i-learned-from-migrating-a-vue-project-from-vuex-to-pinia/' 7 | tags: ['post', 'workflow', 'javascript'] 8 | --- 9 | 10 | Recently I had the experience of migrating a Vue web app to a new state management library, Pinia, which was interesting from both a technical and non-technical point of view. In this article for Piccalilli I’ll share my thoughts and findings on when, why and how you might consider carrying out such a major technical migration, applicable to any large web project, and some tips and advice on migrating from Vuex to Pinia specifically. 11 | 12 | {% hotlink 'https://piccalil.li/blog/what-i-learned-from-migrating-a-vue-project-from-vuex-to-pinia/', 'Read the article' %} 13 | -------------------------------------------------------------------------------- /src/posts/what-to-blog-about-when-you-dont-know-what-to-blog-about.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'What to Blog About When You Don’t Know What to Blog About' 3 | date: '2023-11-23' 4 | tags: ['post', 'National Blog Posting Month', 'opinion', 'workflow'] 5 | intro: 'Day 23 of National Blog Posting Month #NaBloPoMo' 6 | --- 7 | 8 | 1. Here’s a cool thing I made. 9 | 2. Here’s a cool thing someone else made. 10 | 3. Here’s something I just learned. 11 | 4. Here’s something I want to learn that looks cool. 12 | 5. Why I want to learn/use/do this thing. 13 | 6. Why I don’t want to learn/use/do the thing. 14 | 7. I’m in the process of learning something but I haven’t quite got it figured out yet. 15 | 8. Here’s something else I discovered while learning a thing. 16 | 9. Let’s learn a thing together! 17 | 10. Here’s a tip, tool and/or person that helped me recently. Maybe it’ll help you too. 18 | 11. Here’s a problem that’s been bugging me. 19 | 12. This is what I think about work/life/the industry/the world/this UI component right now. 20 | 13. Here’s an interesting thing someone else has to say. Here’s my take on it. 21 | 14. I’m feeling motivated! This is what’s motivating me. 22 | 15. I’m feeling unmotivated or burnt out. Here’s why. 23 | 16. This is what I’ve been reading/watching/listening to recently. 24 | 17. Here’s a list of things I could blog about. 25 | -------------------------------------------------------------------------------- /src/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: GPTbot 2 | Disallow: / 3 | 4 | User-agent: ChatGPT-User 5 | Disallow: / 6 | 7 | User-agent: Google-Extended 8 | Disallow: / 9 | 10 | User-agent: Omgilibot 11 | Disallow: / -------------------------------------------------------------------------------- /src/rss.njk: -------------------------------------------------------------------------------- 1 | ---json 2 | { 3 | "permalink": "rss.xml", 4 | "eleventyExcludeFromCollections": true, 5 | "metadata": { 6 | "title": "CSS In Real Life", 7 | "subtitle": "Tips, tricks and tutorials on the web’s most beautiful language", 8 | "url": "https://css-irl.info/", 9 | "feedUrl": "https://css-irl.info/rss.xml/", 10 | "author": { 11 | "name": "Michelle Barker", 12 | "email": "contact@michellebarker.co.uk" 13 | } 14 | } 15 | } 16 | --- 17 | 18 | 19 | {{ metadata.title }} 20 | {{ metadata.subtitle }} 21 | 22 | 23 | {{ collections.post | rssLastUpdatedDate }} 24 | {{ metadata.url }} 25 | 26 | {{ metadata.author.name }} 27 | {{ metadata.author.email }} 28 | 29 | {% for post in collections.post | reverse %} 30 | {% if not post.externalLink %} 31 | {% set absolutePostUrl %}{{ post.url | url | absoluteUrl(metadata.url) }}{% endset %} 32 | 33 | {{ post.data.title }} 34 | 35 | {{ post.date | rssDate }} 36 | {{ absolutePostUrl }} 37 | {{ post.templateContent | htmlToAbsoluteUrls(absolutePostUrl) }} 38 | 39 | {% endif %} 40 | {% endfor %} 41 | 42 | --------------------------------------------------------------------------------