惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Martin Fowler
Martin Fowler
L
LINUX DO - 最新话题
P
Proofpoint News Feed
Cyberwarzone
Cyberwarzone
Know Your Adversary
Know Your Adversary
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
L
Lohrmann on Cybersecurity
D
Darknet – Hacking Tools, Hacker News & Cyber Security
Security Latest
Security Latest
T
The Exploit Database - CXSecurity.com
Exploit-DB.com RSS Feed
Exploit-DB.com RSS Feed
P
Privacy & Cybersecurity Law Blog
K
Kaspersky official blog
The Last Watchdog
The Last Watchdog
Webroot Blog
Webroot Blog
Scott Helme
Scott Helme
T
Threat Research - Cisco Blogs
C
Cyber Attacks, Cyber Crime and Cyber Security
WordPress大学
WordPress大学
L
LINUX DO - 热门话题
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
博客园 - Franky
V
Visual Studio Blog
O
OpenAI News
AI
AI
Hacker News: Ask HN
Hacker News: Ask HN
V2EX - 技术
V2EX - 技术
GbyAI
GbyAI
Recent Commits to openclaw:main
Recent Commits to openclaw:main
Simon Willison's Weblog
Simon Willison's Weblog
S
Schneier on Security
Spread Privacy
Spread Privacy
Y
Y Combinator Blog
I
InfoQ
H
Hackread – Cybersecurity News, Data Breaches, AI and More
T
Threatpost
C
Cybersecurity and Infrastructure Security Agency CISA
F
Fortinet All Blogs
C
CERT Recently Published Vulnerability Notes
T
The Blog of Author Tim Ferriss
C
Check Point Blog
Apple Machine Learning Research
Apple Machine Learning Research
有赞技术团队
有赞技术团队
人人都是产品经理
人人都是产品经理
N
News and Events Feed by Topic
Project Zero
Project Zero
小众软件
小众软件
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
B
Blog
G
Google Developers Blog

Bryan Robinson's Blog

Does our technology still work for us? Product pricing, dev bad habits, and the role of the pit of success Astro Server Island for latest Bluesky post (heavily cached!) Type-safe environment variables in Astro 5.0 New Website, but really is it? Netlify Durable Cache: Caching for a third-party world Introducing the Hygraph Astro Content Loader Integrating Astro.js Starlight Documentation into a Next.js Project Using Proxies Jamstack is meaningless 11ty Second 11ty: Creating Template Filters 11ty Second 11ty: Global Data files (JS and JSON) 11ty second 11ty: The Render Plugin Part 1 Help needed: Netlify Frontend environment variables with Astro.js Quick experiment with the Slinkity 11ty plugin Creating a dynamic color converter with 11ty Serverless Using 11ty JavaScript Data files to mix Markdown and CMS content into one collection How to show your template code in 11ty blog posts New City, New Job, New Content Using Nunjucks Climbing the 11ty Performance leaderboard with Cloudinary, critical CSS and more Three JAMstack movements to watch in 2020 Create a Codepen promo watermark with no additional HTML, CSS or JS 3 underused CSS features to learn for 2020 Use CSS Subgrid to layout full-width content stripes in an article template Adapt client-side JavaScript for use in 11ty (Eleventy) data files CSS Gap creates a bright future for margins in Flex as well as Grid Create your first CSS Custom Properties (Variables) Use CSS Grid to create a self-centering full-width element Creating an 11ty Plugin - SVG Embed Tool Now offering design and code reviews at PeerReviews.dev Routing contact-form emails to different addresses with Netlify, Zapier and SendGrid Create an Eleventy (11ty) theme based on a free HTML template Client work and the JAMstack Grid vs. Flex: A Tale of a "Simple" Promo Space Using Eleventy The Tech Barrier to Entry What Can We Learn from CERN Let Practical CSS Grid - Launching My First Course Build Trust on the Web incorporating User Worries with your User Stories 2019 The Year of Markup-First Development Refactoring CSS into a Sass mixin Starting a new journey with Code Contemporary Dynamic Static Sites with Netlify and iOS Shortcuts Top 3 uses for the ::before and ::after CSS pseudo elements How To: Use CSS Grid to Mix and Match Design Patterns Use CSS ::before and ::after for simple, spicy image overlays Modern CSS: Four Things Every Developer and Designer Should Know About CSS 3 Strategies for Getting Started with CSS Grid CSS Tip: Use rotate() and skew() together to introduce some clean punk rock to your CSS The 5 Stages of Grid Love How To: A CSS-Only Mobile Off Canvas Navigation How To: Use CSS Grid Layout to Make a Simple, Fluid Card Grid Make a More Flexible Cover Screen with CSS Grid Can CSS Grid open up interesting CMS Layout options? Firefox 52 to Introduce New Box-Alignment Values Falling Forward — Rethinking Progressive Enhancement, Graceful Degradation and Developer Morality Start Exploring the Magic of CSS Grid Layout I Converted My Blog to CSS Grid Layout and Regret Nothing Feature Queries are on the Rise CSS Shapes — Let the Text Flow Around You Flexbox -- Let Memorializing Prince and Print vs. The Web I went to Italy and noticed UX fails How to Get Designers to Contribute in Open Source The True Gift of Your Former Code
😱 Book Release: Eleventy by Example – Learn 11ty with 5 in-depth projects
2023-05-04 · via Bryan Robinson's Blog

Oh hi, everyone! Listen, I've got some really exciting news. I'm honestly kind of shocked. I wrote a book. For a publisher. That comes out tomorrow.

Amazing right?

Well, listen, it's a book that talks about my absolute favorite development topic: 11ty.

Let's not go any farther without a link to buy... that seems appropriate, right? It's available in paperback and eBook.

What's covered?

Well... a lot. We build five distinct projects to cover all the basics, intermediate, and some advanced topics. Let's do a quick rundown of projects and skills.

Project 1: Basic Marketing website

The first project is super basic. We take some simple HTML and we build out a website with 11ty. To do this, we tackle a few topics:

  • Basic project setup
  • Running with no configuration
  • Best practice directory structure and configuration
  • Page templates, layouts, and includes
  • The data cascade and data in templates
    • Global data, template data, JavaScript data, you name it, we got it
  • Deployment to Netlify and CloudFlare

Not bad for a simple marketing site tutorial!

Project 2: Simple blog

Who doesn't need a blog example, am I right? In this project, we create a blog with 11ty including dealing with dreaded off-by-one date issues. The solution I wrote for the book is now one of the recommended solutions in 11ty's docs. We also make our blogs more interesting with custom media types.

Skills learned:

  • Collections
  • Custom page templates
  • Pagination (powerful, but confusing to new devs)
  • Custom shortcodes (embed YouTube, CodePen, and blockquotes)

Project 3: Photography site

We use what we learned in the blog project and create a custom photography site to play with the Image plugin. Honestly, this was the project that took me the most work. The Image plugin is great, but I'd never used it, and dealing with responsive images in the browser takes some getting used to.

Skills learned:

  • Installing and configuring a plugin
  • Using the 11ty Image plugin
  • Responsive images
  • Custom data based on the file system (another really clever code snippet that I'm quite proud of to get a list of images as data for each post)

Project 4: Podcast website

While not everyone has a podcast, most people know about podcasts. In this project, we tackle some of the interesting requirements for dealing with podcasts. We then use this project as a base to talk about integrating with 3rd parties: Hygraph (headless CMS) and Algolia (Search).

Skills learned:

  • Custom filters
  • Custom file types (exporting JSON and RSS instead of HTML)
  • Using plugins
  • 11ty Serverless for search and indexing
  • JavaScript data files to fetch data from a headless CMS

Project 5: A custom plugin

Finally, we use everything we've learned to put together a custom plugin to have all our shortcodes, filters and more readily available for any new project.

Skills Learned:

  • Plugin setup
  • Plugin testing

Ready to learn?

I'm really proud of the book and everything it teaches. If you're interested in picking up 11ty, I think it's a great resource.

You can order it today as an ebook or print book.