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

推荐订阅源

月光博客
月光博客
人人都是产品经理
人人都是产品经理
C
Check Point Blog
大猫的无限游戏
大猫的无限游戏
小众软件
小众软件
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
博客园 - 聂微东
Help Net Security
Help Net Security
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
L
LINUX DO - 最新话题
Cloudbric
Cloudbric
博客园 - Franky
阮一峰的网络日志
阮一峰的网络日志
O
OpenAI News
V2EX - 技术
V2EX - 技术
H
Hacker News: Front Page
Hacker News: Ask HN
Hacker News: Ask HN
Google DeepMind News
Google DeepMind News
PCI Perspectives
PCI Perspectives
爱范儿
爱范儿
Hacker News - Newest:
Hacker News - Newest: "LLM"
Martin Fowler
Martin Fowler
S
Schneier on Security
Webroot Blog
Webroot Blog
Know Your Adversary
Know Your Adversary
云风的 BLOG
云风的 BLOG
H
Help Net Security
I
InfoQ
Simon Willison's Weblog
Simon Willison's Weblog
雷峰网
雷峰网
J
Java Code Geeks
V
Visual Studio Blog
MyScale Blog
MyScale Blog
C
CXSECURITY Database RSS Feed - CXSecurity.com
C
CERT Recently Published Vulnerability Notes
Google Online Security Blog
Google Online Security Blog
Spread Privacy
Spread Privacy
有赞技术团队
有赞技术团队
The GitHub Blog
The GitHub Blog
Engineering at Meta
Engineering at Meta
V
V2EX
Apple Machine Learning Research
Apple Machine Learning Research
www.infosecurity-magazine.com
www.infosecurity-magazine.com
A
About on SuperTechFans
S
SegmentFault 最新的问题
H
Hackread – Cybersecurity News, Data Breaches, AI and More
TaoSecurity Blog
TaoSecurity Blog
WordPress大学
WordPress大学
S
Securelist
P
Proofpoint News Feed

CSS Wizardry

Front-End’s Missing Metric: The TBT Window Meet Your Users Where They Are with Obs.js Better Browser Caching with No-Vary-Search font-family Doesn’t Fall Back the Way You Think What Is CSS Containment and How Can I Use It? When All You Can Do Is All or Nothing, Do Nothing Obs.js: Context-Aware Web Performance for Everyone Low- and Mid-Tier Mobile for the Real World (2025) The Fastest Site in the Tour de France Making Sense of the Performance Extensibility API Why Do We Have a Cache-Control Request Header? HTML Is Not a Programming Language… Build for the Web, Build on the Web, Build with the Web Licensing Code on CSS Wizardry A Layered Approach to Speculation Rules Designing (and Evolving) a New Web Performance Score Core Web Vitals Colours The Ultimate Contract Templates for Tech Consultants: Protect Your Business and Get Paid Optimising for High Latency Environments Cache Grab: How Much Are You Leaving on the Table? blocking=render: Why would you do that?! Correctly Configure (Pre) Connections The Three Cs: 🤝 Concatenate, 🗜️ Compress, 🗳️ Cache What Is the Maximum max-age? How to Clear Cache and Cookies on a Customer’s Device The Ultimate Low-Quality Image Placeholder Technique Core Web Vitals for Search Engine Optimisation: What Do We Need to Know? The HTTP/1-liness of HTTP/2 In Defence of DOM­Content­Loaded Site-Speed Topography Remapped Why Not document.write()? Speeding Up Async Snippets Critical CSS? Not So Fast! Measure What You Impact, Not What You Influence Optimising Largest Contentful Paint Measuring Web Performance in Mobile Safari Site-Speed Topography Speed Up Google Fonts Real-World Effectiveness of Brotli Performance Budgets, Pragmatically Lazy Pre-Browsing with Prefetch Making Cloud.typography Fast(er) Time to First Byte: What It Is and How to Improve It Self-Host Your Static Assets Tips for Technical Interviews Cache-Control for Civilians Bandwidth or Latency: When to Optimise for Which ITCSS × Skillshare What If? CSS and Network Performance The Three Types of Performance Testing Getting to Know a Legacy Codebase Image Inconsistencies: How and When Browsers Download Images Identifying, Auditing, and Discussing Third Parties My Digital Music Setup Measuring the Hard-to-Measure Finding Dead CSS The Fallacies of Distributed Computing (Applied to Front-End Performance) Ten Years Old Relative Requirements Airplanes and Ashtrays Performance and Resilience: Stress-Testing Third Parties Refactoring Tunnels Little Things I Like to Do with Git Writing Tidy Code Configuring Git and Vim Base64 Encoding & Performance, Part 2: Gathering Data Base64 Encoding & Performance, Part 1: What’s Up with Base64? Code Smells in CSS Revisited Typography for Developers Moving CSS Wizardry onto HTTPS and HTTP/2 Ack for CSS Developers A New Year, a New Focus Preparing Vim for Apple’s Touch Bar Choosing the Correct Average CSS Shorthand Syntax Considered an Anti-Pattern CSS Wizardry Newsletter Nesting Your BEM? Improving Perceived Performance with Multiple Background Images Continue Normalising Your CSS Pure CSS Content Filter Pragmatic, Practical, and Progressive Theming with Custom Properties Refactoring CSS: The Three I’s Speaker’s Checklist: Before and After Your Talk Improving Your CSS with Parker The Importance of !important: Forcing Immutability in CSS Mixins Better for Performance Managing Typography on Large Apps White October Events Workshop Partnership BEMIT: Taking the BEM Naming Convention a Step Further Travelling Like You Want to, When You Have To Contextual Styling: UI Components, Nesting, and Implementation Detail Subtleties with Self-Chained Classes Cyclomatic Complexity: Logic in CSS Immutable CSS Can CSS Be Too Modular? More Transparent UI Code with Namespaces When to use @extend; when to use a mixin The Specificity Graph CSS Wizardry Ltd.: Year 1 in review
The CSS Wizardry build-along is go!
Harry Roberts · 2011-10-28 · via CSS Wizardry

Written by on CSS Wizardry.

Table of Contents

Independent writing is brought to you via my wonderful Supporters.

  1. Update

Okay, so you decided it wouldn’t be boring and that I’m not big-headed in thinking that people might actually want to watch me coding, so I’m quite excited to announce that the build-along will be going ahead!

Entry is now closed. Thanks all who sent in a PSD, watch this space for a launch article.

Obviously there need to be some terms and conditions. Apologies if these seem a little harsh(ly worded) but they are as follows:

  • PSDs only. Sorry, I don’t work with Fireworks enough to make me quick enough for this type of exercise.

  • The PSD I choose is my choice. I am only doing one and it’ll most likely be one that’s fun but not mountains of work; I need to be able to do it in a night.

  • CSS and HTML only. No Javascript as I don’t know Javascript; you would not want me even attempting it!

  • The code I provide will be final. Progressive enhancement will be used, it won’t look the same in every browser, you won’t get to make any change requests or ask for bug fixes after the fact. Naturally I’m going to do a good job, you won’t end up with any messy code, but as this is entirely free I can’t take instruction.

  • If you’re, for whatever reason, unhappy with the outcome I’m afraid you’re stuck with it… Whether the final page goes into production or not is entirely up to you.

  • The PSD must be all above board; I won’t be building you a new adult dating site ;)

  • This one is entirely your responsibility but I strongly advise you are fully transparent if your PSD will be sold on to a client. I have no qualms with you making a profit on my work but make sure your client is cool with it, especially when their site design will be being made totally public.

I’m keen to keep this as informal as possible, but the format will take:

  1. If you want me to build your PSD please email a full-size JPG of your design by Wednesday 2 November 2011 to harry at csswizardry dot com with the subject line Build-along. This subject line is vital as I’m going to set up a Gmail rule to group stuff. Any non-conforming emails might get overlooked.

  2. I’ll look at the JPGs and choose one to build. I’ll announce the person I choose in a blog post and also email them directly, at which point they reply with their actual PSD file. If your PSD didn’t get chosen then I will not email you I’m afraid; that’d take forever!

  3. The PSD must be properly constructed. I don’t want to be battling with any Layer 12 Copy 4 v2 stuff!

  4. Make sure you provide any font-files or Typekit etc information if your design uses them.

  5. I’m most likely going to be building the PSD on Friday 4 November 2011. The reason for this is that if it keeps me up into the early hours then I’d rather that was on a weekend rather than a work-night. This does mean that if you want to follow along then you’ll have to be in on a Friday evening, no pub!

  6. I’ll announce the URL in a blog post and Twitter, you can follow along live.

  7. The code will be getting committed to GitHub, too, so make sure you’re okay with that!

This all seems a bit formal, I realise, but it really won’t be. I just need to make sure I have all the stuff in the right place at the right time!

Pop any questions in the comments and I’ll update the post as necessary. Please hashtag any and all tweets about the event with #buildAlong.

So, in summary:

  1. Get a nice, neat, tidy PSD together.

  2. Send me a JPG of it as per the exact email rules.

  3. I’ll announce whose PSD I’ll be building in a blog post.

  4. Be around at about 7pm UTC (Dublin, Edinburgh, Lisbon, London) on Friday 4th November to watch along as I code.

  5. You will get a HTML/CSS single page template emailed back to you once it’s done.

Right, get emailing me!

Update

While there are loads of you interested in watching this event, no one has sent in a PSD. Not one! Mention this to friends, your boss, your designer, anyone. Without a PSD the build-along can’t run :(