Philip Walton

The interesting bit is this: https://philipwalton.com/articles/cascading-cache-invalidation/ Without that one sentence, the entire article is moot because I thought bundlers solved the problem. I haven't thought about that in years. I didn't realize it had been solved. Browser support looks pretty good. I guess now I have to figure out how to get this to play nice with Vite and TypeScript module resolution.... and now it's starting to hurt my brain again, great.

This would center a fixed sized element in absolute position to page, this was never an issue. Problems start when you do not know size of your element and its parent. Flex finally fixes[1] this issue but it was not fully supported until recently[2]. [1] https://philipwalton.github.io/solved-by-flexbox/demos/vertical-center… [2] https://github.com/philipwalton/flexbugs Most of the flexbugs are now fixed and flex should be recommended way of making layouts.

Its not just for positioning, its also for distribution of space. e.g. as a contrived example, you can say you want the left sidebar to be 200px, and the rest of the space to be distributed 80%/20% for the body and right sidebar. This is a good site for demonstrating other situations that flexbox helps with: https://philipwalton.github.io/solved-by-flexbox/ It is recommended a lot because its a really powerful and simple API to serve a broad class of problems.

spoofing the user agent works fine I'm continually upset by this. If you know you rely on, for example, the fetch() api, test for the fetch api[0]. Whitelisting browser user agents just means chasing your tail for forever. By all means, politely warn a user that "your browser is not tested". It's getting to feel like a marketing driven decision, where pages just about say "our site is so powerful, we only work with the greatest browser ever, Chrome, so come back when you have it". A local airbnb competitor currently does this. [0] https://philipwalton.com/articles/loading-polyfills-only-when-needed/

Would love to see a comparison of this and the set up posted last night: https://philipwalton.com/articles/the-google-analytics-setup-i-use-on-… (via https://news.ycombinator.com/item?id=13636884) and the other set up linked from those comments: https://github.com/thenextweb/gtm

Thats been my goto reference for most of my layout needs. I've also found https://philipwalton.github.io/solved-by-flexbox/ useful. Props to all the great authors (including OP) for these -- flexbox + great tutorials has greatly improved my web dev experience.

No way. It's great for layouts too, particularly the ever-difficult fluid-3-column-on-desktop-to-one-column-on-mobile "holy grail" layout [0]. That site has a few other great examples like media objects that would usually take a ton of CSS hacking but are solved easily with flexbox [1]. [0] http://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/ [1] http://philipwalton.github.io/solved-by-flexbox/

> I can't believe that flexbox is the best thing they could come up with. Flexbox is pretty damn good: http://philipwalton.github.io/solved-by-flexbox/ Also, in case you didn't know, there is also Grid Layout: http://gridbyexample.com/ Flexbox is 1D, Grid Layout is 2D.

We already have vertical centering via flex-box: https://philipwalton.github.io/solved-by-flexbox/demos/vertical-center… It's great that this is getting discussed as a way to make things more consistent, but you can basically use all its features now if you want to. Look at all the solved-by-flexbox examples; they're enlightening. And you can already use flex-box in ie9+ and ff/chrome with no problems.

> But the big fixes to layout have been harder to specify and agree upon. They've been in the works for many years, but it's taken a while to figure out how they really should work, and which parts should be fundamental. It looks like it's getting a lot closer; the CSS Grid Module Although lower-level and not as modular, flexbox can already be used with great success for a number of layout sections (media objects, vertical centering, input inserts) or full layouts ("holy grail", sticky footers and grids): http://philipwalton.github.io/solved-by-flexbox/ Flexbox is a CR, and it's starting to get pretty well supported: http://caniuse.com/#feat=flexbox

Here is a link to an article that discusses one possible way to test private functions: http://philipwalton.com/articles/how-to-unit-test-private-functions-in… He basically exposes them while in a dev environment, and then uses a build tool to make them actually private. I agree with weego's comment though, its something that isn't usually worth the tradeoffs, as long as your team has discipline.

> for what I'm doing (a pretty complex web app with an almost desktop-style GUI with a bunch of buttons, text inputs and checkboxes everywhere) Right. There's different contexts between an application an a (hyper)text document. What's good semantic markup for one, will generally be bad for the other. It's admirable (and desirable) to strive for adaptive layout and accessibility in applications - but they need a different type of framework than documents made for browsers. The browsers straddle this divide rather uncomfortably - being in part hypertext document browsers, and in part virtual machines for running general applications. Approaches like web components[1] might help us move toward a standardised reality for "applications that happen to run in the browser", while css and html are still (more and more anachronistically) (hypertext) document markup and layout tools. If you want to make a Web page/site (like alistapart.com) that's great. Swim with the current and draw inspiration from stuff like css zen garden[2]. With flex box, you can burn[4] most of the old complicated grid layout stuff, and comparatively easily make great sites. That doesn't really help if you're a "front-end developer" making "apps" though. Even the few that make an effort to color within the lines are still fighting the browsers and the standard, trying to fit a code-on-demand app into a REST shoe[3]. [1] https://www.webcomponents.org/ [2]…

written before css grid and css columns? another z-index one: https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

How come it's possible to see visual bands in the main graph [0]? It's clearly using a perceptually uniform modern colormap (magma I think), where might be the artifacts coming from? [0] https://philipwalton.com/static/lh-cwv-correlation-1400w-65493a1b29.pn…

This lets you provide an implementation for a CSS feature that is perhaps not yet implemented by browsers, or maybe never will be. You could always do this with Javascript, and some people have been. See: https://philipwalton.github.io/polyfill/ But this lets you do it in a less hacky, and especially, more performant way. The author of that JS CSS polyfill library above actually wrote in 2016 how that approach was proving a bad idea, and the right way to do this was the houdini API... I guess we've been waiting for it since 2016? This is the first I had heard of it. https://philipwalton.com/articles/the-dark-side-of-polyfilling-css/

Container queries have been suggested for a while now, it is not a new idea. But it has gained a lot of momentum recently, for example [1]. So maybe it will not be years until all modern browsers might support it. Until then, you might want to try [2] (not a polyfill, but a workaround with JavaScript). [1] https://github.com/w3c/csswg-drafts/issues/5796 [2] https://philipwalton.com/articles/responsive-components-a-solution-to-…

Why force all your users to download transpiled ES5, just to accommodate IE11 dinosaurs? Not to mention all the issues you'll have if you try to use CSS Flex or Grid. Support IE11 only if you absolutely must, is my advice, and do that with differential serving: https://philipwalton.com/articles/deploying-es2015-code-in-production-… https://calendar.perfplanet.com/2018/doing-differential-serving-in-201…

Flex box https://philipwalton.github.io/solved-by-flexbox/demos/vertical-center…

I am very interested about publishing ES6+ code. https://philipwalton.com/articles/deploying-es2015-code-in-production-… was very inspirational on this topic, but the fact that 99% of the libraries I use are publishing transpiled code (+ polyfill) is a big disappointment. From what I understood, there is currently nothing to allow both ES5 and ES6 code to be published and let the bundler choose which one to include. Any ideas on how to change this?

Flexbox is meant to bring responsive grids to the browsers without an extra CSS framework. Supported by the latest versions https://caniuse.com/#feat=flexbox https://philipwalton.github.io/solved-by-flexbox/

This article may interest you: https://philipwalton.com/articles/loading-polyfills-only-when-needed/ Also on being able to use new syntax: https://philipwalton.com/articles/deploying-es2015-code-in-production-…

This is a very fair point. For instance, you can't do the sticky footer Flexbox example with a table layout: https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ (or, at least, I can't immediately think how you'd do it, but hey, it's late, and it's been more than a decade since I've used tables to lay things out...)

When you fork a Github project, you'll have to examine the code to see what it's doing and how. With HTML and CSS, it's mostly visual but you can find improvements on semantics or simplifying what's there. If you can improve performance by rewriting a javascript function into CSS, such as animations, submit a pull request with your suggestions. With Javascript, look for bugs and improve the code that's written. Javascript easily becomes a mess and is often referred to as spaghetti code when it becomes hard to manage. Overall, look for ways to simplify the code, even if it means more code overall although usually it means less code. Two examples: https://philipwalton.com/articles/untangling-deeply-nested-promise-cha… http://www.heydonworks.com/article/on-writing-less-damn-code

You probably already know this but just in case: https://philipwalton.github.io/solved-by-flexbox/demos/vertical-center…

Why not just use flex? https://philipwalton.github.io/solved-by-flexbox/demos/grids/

I get the joke since I've been doing the web design thing for a couple decades at this point, but in case your question was serious, yes it is finally solved: https://philipwalton.github.io/solved-by-flexbox/demos/vertical-center…

Bear in mind that BEM (CSS-wise) is just a nomenclature. What it addresses is exactly excessive nesting and dependence between mark-up and styling. It roughly means that you imply structure via naming conventions instead of nesting (e.g. if you have a box inside a block, you'd style it via single class such as .my-block__my-box, instead of the traditional nesting approach .my-block .my-box). You can - and should - still use SASS (or other preprocessor) with BEM. Some interesting resources regarding this: http://philipwalton.com/articles/css-architecture/ http://philipwalton.com/articles/side-effects-in-css/ http://philipwalton.com/articles/extending-styles/ http://benfrain.com/the-ten-commandments-of-sane-style-sheets/

This is has been a problem for a long time, but it's fixed now: https://philipwalton.github.io/solved-by-flexbox/demos/vertical-center… http://caniuse.com/#feat=flexbox

I like how he explains separating layout from presentation. When writing the layout code, keep in mind how its coupled to the HTML. This link mentions how "layout" like z-index is coupled to the structure of HTML, because nesting elements creates new stacking contexts (Z-index is hierarchical - an element's z-index only controls it's depth within the current context, not the overall document). http://philipwalton.com/articles/what-no-one-told-you-about-z-index/ This one advises using "js" prefixed classes for JS, so the JS is only coupled to the HTML & not the CSS: http://philipwalton.com/articles/decoupling-html-css-and-javascript/