Rachel Andrew

rachelandrew.co.uk · Personal blog · on HN since 2011

Rachel Andrew, a web developer, CSSWG member and Perch co-founder, writes about CSS Grid, layout, and running a small web business.

What HN saysHN commenters call her a champion of CSS Grid and recommend her articles on grid versus flexbox, IE support, and disappearing entry points into web development.
60HN people shared it
25linked it in comments
56stories submitted
927story points
4 months agolast shared
2011people per year2026

Most-shared posts

  1. 1
  2. 2
    HTML, CSS and our vanishing industry entry points
    6 people · 381 points · first shared 2019 · 210 comments on HN
  3. 3
  4. 4
    Should i use grid or flexbox
    4 people · first shared 2016
  5. 5
  6. 6
  7. 7
    The Profitable Side Project Handbook
    3 people · 11 points · first shared 2014 · 2 comments on HN
  8. 8
    The end of the clearfix hack?
    2 people · 124 points · first shared 2017 · 78 comments on HN
  9. 9
  10. 10
    CSS Grid is coming
    2 people · 9 points · first shared 2017 · discussion on HN
  11. 11
    Is it really safe to start using CSS Grid Layout?
    2 people · 4 points · first shared 2017 · discussion on HN
  12. 12
    Where's the holistic AI productivity data?
    2 people · 4 points · first shared 2026 · discussion on HN
  13. 13
    Stop solving problems you don't yet have
    2 people · 3 points · first shared 2012 · discussion on HN
  14. 14
    Unfashionably profitable
    2 people · 2 points · first shared 2013 · discussion on HN
  15. 15
    Grid Level 2 and Subgrid
    2 people · 2 points · first shared 2018 · discussion on HN

What HN people wrote when they linked it

simulo · 2023-04-16
Indeed! Great article on that: https://rachelandrew.co.uk/archives/2019/01/30/html-css-and-our-vanish… "many of us without a computer science background are here because of the ease of starting to write HTML and CSS."
tylerchilds · 2020-02-18
Just a shoutout to Rachel Andrew, the co-founder of Perch, member of the CSSWG and imo the Champion of CSS Grid. https://rachelandrew.co.uk/
lashkari · 2018-02-14
It's not as simple as using auto-prefixer, since IE10 and IE11 use the older syntax. However, it's surprisingly not that bad for simple layouts. Here's a great resource covering the hows and whys: https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the… And here's a simplified example I threw together recently to demonstrate it in action: https://codepen.io/shahab/pen/ypWmZG Basically, you lose auto-placement, named grid areas, and simple grid gaps, so you have to manually place items in the specific row/column for IE. But, I've found that it's still easier than the alternative in many cases.
sarcas · 2017-04-05
Both Jen Simmons and Rachel Andrew have lots of good resources for understanding the new CSS layout techniques. This article of Rachel's is a year old, but will still give you a good understanding of the differences between the two: https://rachelandrew.co.uk/archives/2016/03/30/should-i-use-grid-or-fl… Jen's got lots of great links here: http://jensimmons.com/post/feb-27-2017/learn-css-grid, including thoughts about how we're going to be able to use all these new layout techniques in ways both new and old. It's an exciting time to be designing on the web :->
rachelandrew · 2014-07-30
I start out in Scrivener and end up in HTML. Scrivener is great for the actual writing process, although it takes a bit of learning to get used to. I wrote up on my blog about creating the various versions http://rachelandrew.co.uk/archives/2014/01/07/html-epub-mobi-pdf-wtf-c… I've also recently presented on how to build books in CSS and HTML and the slides and various useful resources are here: http://rachelandrew.co.uk/presentations/css-books
runarberg · 2020-07-17
I recommend taking the State of CSS[1] survey, it is a nice way of keeping up with the latest features. Other then that I use PostCSS with the postcss-preset-env[2] plugin. There you can enable various future features of the language and have it compile down to a more supported version. If your really want to dive into the future of CSS you can read the issue board for the CSSWG[3] (beware, it can suck hours out of your days). Smashing Magazine[4] and A List Apart[5] also sometimes have articles about a new(ish) or upcoming features. But the CSS community could really benefit from the spec maintainers having more active bloggers among them (e.g. like Rachel Andrew[6]) and provide a regular update of the language like 2ality does for JavaScript[7]. 1: https://stateofcss.com/ 2: https://preset-env.cssdb.org/ 3: https://github.com/w3c/csswg-drafts 4: https://www.smashingmagazine.com/ 5: https://alistapart.com/ 6: https://rachelandrew.co.uk/ 7: https://2ality.com/2019/12/ecmascript-2020.html
TheAceOfHearts · 2017-07-02
If you've been following CSS grid at all, or if you look up anything related to it, you'll probably encounter something written by Rachel Andrew. She's been doing an incredible job at documenting and promoting CSS grid. In the past she wrote a CSS grid polyfill [0], but sadly it never got updated to the latest version of the spec. It'd be an easier sell if you could polyfill it reasonably on some older browsers, even if performance suffered a bit. Right now the last holdout is Edge [1], which is funny because they were the first to ship the older spec, going back as far as IE10 or IE11. Luckily, the next version will be shipping the latest spec. I've noticed autoprefixer [2] supports a grid option. I'd love a guide that explained any incompatibilities between the two versions. Getting a mostly working grid on IE11 and Edge would probably make it an easier sell for many. When flexbox started growing popular there were guides showing you could support most features on IE10 and beyond with little effort if you used autoprefixer. Since there are equivalent versions of most attributes on older browsers, you just had to be aware of bugs and gotchas. For example, the default value for flex-grow, flex-shrink, and flex-basis (and their older equivalents) changed between versions, so if you always had to set them. In addition to any incompatibilities between versions, all implementations were buggy, so you had to be aware of bugs and their workarounds. Luckily, they're all well…
PythonicAlpha · 2015-08-09
In that case, the customer could cheat. I am not totally sure about the current discussion on that, but the problem is, that you definitively can not rely on the address given of the customer, because in this case the customer will always give a country with the lowest sales tax. Also you must provide proofs for the location. The IP address is IMHO (and not only my opinion) better and will be more likely be recognized as proof instead of relying solely on some customer input. But, you (because you are so sure about the best method) by sure know, that the laws are explicitly for non-physical goods, where no delivery-address must be provided, right? Here is a link, how one company is doing it (forget about government information, they seldom go so much in details!): https://rachelandrew.co.uk/archives/2014/12/08/consensus-and-vatmoss/ They use the IP address to validate the user given address and for later proof. BTW: Downvoting all the time does not help the discussion. I try to discuss this topic seriously and I was bringing some very relevant topic here, and am constantly downvoted. (It is not my fault, that the EU came up with such laws, and provide no useful guide how to implement it!)
dutchCourage · 2020-10-13
Actually IE11 has some support for grid layouts. Depending on your use case it might just be enough. https://www.rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use…
infamia · 2019-06-20
Even when using semantic markup as you describe, there are still accessibility gotchas waiting to pounce. https://www.rachelandrew.co.uk/archives/2019/06/04/grid-content-re-ord…
vraylle · 2018-12-24
We just finished deploying a major contract where the military is a primary customer. They still have many machines running IE 11. I used CSS Grid and it's working well. IE 11 supports the initial version of the spec and has the -ms prefixes, but works. There are some things you can't do (like areas), but it largely works with that syntax, if you design with column/row in mind. See this for details on the IE 10/11 implementation: https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the…
onion2k · 2018-02-01
IE10 and IE11 support Grid, albeit a slightly different syntax to an older spec. CSS Grid is not new. IE support was there long before the other browsers. You don't need to write two entirely separate layouts to use Grid. You don't need a polyfill. Jen Simmons made a really good video about exactly this topic - https://www.youtube.com/watch?v=7msERxu7ivg Rachel Andrews' blog post about IE and Grid - https://www.rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use… Mozilla article about progressive enhancement and Grid - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_G…
claviska · 2017-08-01
"If you need a grid system," Not "you need to add your own." In the near future, grid systems will be more and more obsolete (https://rachelandrew.co.uk/archives/2017/07/01/you-do-not-need-a-css-g… and Shoelace is prepared for that. Why add the weight if you don't need it?
lstamour · 2017-06-23
Note though, it’s a very different grid (syntax/properties evolved): https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the…
extra88 · 2017-06-22
Here are a couple of articles that should help explain when CSS Grid would be a better choice than Flexbox. https://rachelandrew.co.uk/archives/2016/03/30/should-i-use-grid-or-fl… https://css-tricks.com/css-grid-replace-flexbox/ BTW, Microsoft Edge has the current CSS Grid syntax available behind a feature flag (available in Windows 10 Insider Preview build 16226). https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/sug…
Lio · 2017-04-04
Rachel Andrew has added a very illuminating comments to the article which, I think, highlights why Flexbox can't do what Grid does:- “Potentially Confusing: a “2D” Layout with Flexbox” – that isn’t a 2d layout. It’s a wrapped flex layout. As soon as you want to make that final box line up with the boxes in the first column you realise what you have isn’t two-dimensional. Flex wrapping doesn’t make it two dimensional. Each row (in your example) is a flex container itself, space distribution happens across each row individually. Which is why it isn’t two-dimensional. More here https://rachelandrew.co.uk/archives/2017/03/31/grid-is-all-about-the-c… You can also space grid tracks out evenly and so on, box alignment is shared by both the flexbox and grid specifications. For examples of that see http://gridbyexample.com/video/align-grid/
rafibomb · 2016-12-21
Flexbox excels for UI and CSS grid will work nice for layouts and some UI structure too. Together they are a powerhouse: this article explains it well https://rachelandrew.co.uk/archives/2016/03/30/should-i-use-grid-or-fl…
johneth · 2015-01-13
He referred to #VATMESS - the new VAT rules across the EU that place a large administrative burden on smaller businesses like his (and mine) - more info here: http://rachelandrew.co.uk/archives/2014/11/25/how-small-companies-and-… . Paddle seem to take care of this burden for him. I've looked into it and Stripe does not do this.
davidw · 2014-03-27
This isn't so much the problem with self-published books, as with books that are self-published and more or less "self-sold". I wrote a bit about Authority here: http://blog.liberwriter.com/2013/11/21/nathan-barrys-authority/ and think this is a real problem. I don't like not having reviews. There are some books that look interesting to me, like this one: http://www.rachelandrew.co.uk/books/the-profitable-side-project where I'm a bit reticent because of the lack of reviews and Amazon integration, combined with a higher price than I'm used to. I don't think that everyone selling their own books on their own sites is a stable equilibrium.
nailer · 2017-10-17
> apparently doing a lot of googling finding the random stuff that IE11 doesn't quite support natively Do you genuinely think the need to lay stuff out in a grid or manage callback workflows is exotic? Have you done any front end development? > Your idea of IE11 support apparently revolves around people using the worst types of tech and coding practices No. As written in the comment you're replying to, it revolves around the huge gulf between IE11 support for current tech when compared to Edge/Chrome/Safari/Firefox. Some links: From https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the… > "However, even where similar properties exist in the two versions of the specification, the capabilities of the older spec and implementation are very different to the new one. This means you can’t simply run Autoprefixer and consider the job done." The flex implementation is similarly broken. https://github.com/philipwalton/flexbugs http://caniuse.com/#search=await The only reason I mention clipboard (despite being less common) is we use it on our own site and the cost of implementing a second implementation in Flash fix is ridiculous.
youngtaff · 2015-01-02
The NYT headline misses the point somewhat… Large companies have been 'basing' their sales operations in Luxembourg because it has an extremely low rate of VAT of ebooks, digital music etc. Their sales operations have mainly been in name only with most of the work being done in other countries, and revenue moved around via high interest rate loans. The EU have decided to legislate against this and make VAT payable at the rate in the buyers country. Only problem is in legislating to prevent the likes of Apple and Amazon using the Luxembourg VAT loophole they've created hell for lots of small independent sellers who now have to charge VAT whether they needed to or not before, and charge in at multiple rates depending on where the buyer is. Rachel Andrew has some good writeup's on this, in particular http://rachelandrew.co.uk/archives/2014/11/30/how-the-eu-vat-rules-mak… with more in the archives http://rachelandrew.co.uk/archives/
hbien · 2014-05-10
Here are some resources: Podcasts: * http://www.startupsfortherestofus.com/ * http://productpeople.tv/ * http://bootstrapped.fm/ * http://casjam.com/category/podcast/ * http://www.chasingproduct.com/ * http://www.bootstrappedwithkids.com/ * http://www.kalzumeus.com/category/podcasts/ * more here: http://www.startupsfortherestofus.com/episodes/episode-104-podcasts-fo… Books: * http://www.rachelandrew.co.uk/books/the-profitable-side-project * http://www.startupbook.net/ My favorite articles and talks: * https://training.kalzumeus.com/newsletters/archive/do-not-end-the-week… * http://youtu.be/0CDXJ6bMkMY (DHH @ Startup School 2008 on making money online) * http://vimeo.com/92087769 (Nathan Barry @ Pioneer Nation on growing his business) My advice is to: (1) Make it a habit to work on your small online service every day -- or one full day per week -- and stick to the schedule. It's a marathon, not a sprint. (2) Subscribe to one or two podcasts. They're great learning/motivational tools. Listening to other people talk about building a small business will help reinforce your work habits. Don't overdo it, though! Your goal is to build something, not to continually consume and never produce. I know I gave you a huge list, just pick the one you like best!
wanda · 2016-01-31
Just as popular JavaScript libraries spawn many superfluous forks and microframeworks, the landing of Flexbox has resulted in dozens of these CSS 'frameworks' and grid systems: 1. http://basegui.de 2. https://github.com/ButaneCSS/butanecss 3. http://juicedcss.com 4. http://bowlingx.github.io/flexcss 5. http://codepen.io/geoffyuen/pen/ogrPbZ 6. https://github.com/meerita/flexsasscandy 7. http://getmdl.io/components/index.html#layout-section/grid 8. https://kevinpy.com/Projects/Flexo 9. http://philippkuehn.github.io/gridilydidily 10. http://stylusgrid.com 11. https://github.com/IonicaBizau/gridly 12. https://github.com/colourgarden/avalanche 13. https://milligram.github.io/ 14. https://github.com/ButaneCSS/butanecss 15. http://bulma.io/documentation/grid/ 16. http://gridlex.devlint.fr/ 17. http://crabcss.com and that's but a fraction of the full list. I haven't bothered to sit down and actually assess whether these flexbox grids actually differ from each other (my gut says that it's not possible for them to differ too much). My gut also tells me that there has to be an apex, an optimal Flex-based grid from which there can be no improvement. I think a big part of the problem of why websites all look a bit similar is because they're all developed using Bootstrap, Bourbon or Foundation, and apparently on the rare occasion where a front-end framework is not used, an offshoot or "heavily-inspired by" alternative is used instead. Nobody is thinking about what…

Keyboard shortcuts

/Search
j kNext / previous blog
EnterOpen selected blog
vVisit the blog site
fFollow / unfollow
lSwitch grid / list view
dSwitch dark mode
g hHome
g pTop posts
g tTopics
g fFollowing
g lLiked
g yHistory
g qFAQ
EscBack / close