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

推荐订阅源

WordPress大学
WordPress大学
Security Latest
Security Latest
C
Cisco Blogs
P
Palo Alto Networks Blog
Know Your Adversary
Know Your Adversary
Project Zero
Project Zero
C
Cyber Attacks, Cyber Crime and Cyber Security
NISL@THU
NISL@THU
Exploit-DB.com RSS Feed
Exploit-DB.com RSS Feed
S
Secure Thoughts
P
Privacy International News Feed
V
Vulnerabilities – Threatpost
D
Docker
Google Online Security Blog
Google Online Security Blog
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO
Recent Announcements
Recent Announcements
T
The Exploit Database - CXSecurity.com
G
Google Developers Blog
Schneier on Security
Schneier on Security
小众软件
小众软件
爱范儿
爱范儿
GbyAI
GbyAI
J
Java Code Geeks
T
Tailwind CSS Blog
Cisco Talos Blog
Cisco Talos Blog
The Hacker News
The Hacker News
D
DataBreaches.Net
Blog — PlanetScale
Blog — PlanetScale
TaoSecurity Blog
TaoSecurity Blog
MyScale Blog
MyScale Blog
B
Blog RSS Feed
Cyberwarzone
Cyberwarzone
有赞技术团队
有赞技术团队
Martin Fowler
Martin Fowler
C
CXSECURITY Database RSS Feed - CXSecurity.com
S
Securelist
L
Lohrmann on Cybersecurity
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
Y
Y Combinator Blog
S
Schneier on Security
Latest news
Latest news
Apple Machine Learning Research
Apple Machine Learning Research
博客园 - 叶小钗
F
Fortinet All Blogs
M
MIT News - Artificial intelligence
PCI Perspectives
PCI Perspectives
V
V2EX
V2EX - 技术
V2EX - 技术
O
OpenAI News
W
WeLiveSecurity

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.