Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Learn CSS layout the pedantic way (2015)

book.mixu.net

Post reply on HN
Print view View original

71–80 of 106 posts

Re: Learn CSS layout the pedantic way (2015)

#71

Post by treflop »

yojo wrote: post #51
danielvaughn wrote: post #46

Earlier quoted context omitted.

Any introduction to HTML/CSS really should explain the fact that when these technologies were created, they were solely meant to render documents online. It was basically created to be like a Microsoft Word but for files on another person's computer. So most of the early properties (like float) were for typographic layout.

It is, after all, HyperText Markup Language. The modern app-based web is incredibly far out of scope of the initial vision of “text documents that link to other text documents.” CSS and HTML are loaded with legacy warts that can never be removed without breaking backward compatibility.

Old HTML/CSS might be out of scope for a modern web app but I’m pretty sure if you were to write a layout engine from scratch today, it wouldn’t look any different from modern HTML/CSS

Honestly layouting an app in code just looks like HTML/CSS but with functions.

Re: Learn CSS layout the pedantic way (2015)

#72

Post by lovegrenoble »

cantSpellSober wrote: post #19

> Floats can be used to position boxes to the left and right edges of their container box No, that's not exactly what float means! Yes you can accomplish this using floats, but we haven't since flexbox and grid landed. The element is taken out of the normal flow, and this is a confusing way to build layouts for those studying CSS. `float` is more of a typographic tool. If this article calls itself pedantic, it needs…

And for flexbox layout, this tool streamlines the process,

removing the need to worry about numerous properties: https://flexboxcss.com

Re: Learn CSS layout the pedantic way (2015)

#73

Post by pests »

chatmasta wrote: post #69
pests wrote: post #68

Earlier quoted context omitted.

When has it became normalized to not read docs and be almost proud of it? I harp on this a lot, but computer engineering will never be treated seriously if we continue acting like documentaton or manuals are too good for us. Its like if when designing a bridge no one read the spec sheet on the bolts. If I ever hear a bridge or structural engineer going "huh, TIL" about a fact found in the manual of a tool or item he…

Well, it's not so much that people don't read docs, but that they don't keep reading them. Most people probably read (or at least skim) the manual cover-to-cover when learning a new tool. But once you're actively using it, the main interaction with its docs is when you land on a specific page to solve your immediate problem. I'm advocating for periodically reading the docs of your most commonly used tools, as if you…

> I'm advocating for periodically reading the docs of your most commonly used tools, as if you were a new user. You'll pickup something new nearly every time you do that.

Strongly agree.

Re: Learn CSS layout the pedantic way (2015)

#75

Post by msoad »

jibbit wrote: post #61
msoad wrote: post #48

Kind of unrelated but if you want to build nice modern layouts and if you are one the 10 people in the planet that doesn't use Tailwind take a look at sub grids. It's really underrated given how well supported and nice to work with it is. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_la...

you're saying that Subgrid is an alternative to Tailwind? Or, you can't use Subgrid as well as Tailwind?

if you buy into Tailwind you probably won't think of using sub grids. But it is really nice to use sub grids and css variables to achieve amazing results

Re: Learn CSS layout the pedantic way (2015)

#76

Post by julianeon »

pests wrote: post #68
chatmasta wrote: post #55

Earlier quoted context omitted.

That's a useful MDN page, and it's even the third page of the "CSS Layout" section of "Learn Web Development." And yet, how many people reading these comments have ever seen that page? I'll admit that I hadn't seen it! Sometimes it's nice to read the docs of your tools from the top down, rather than relying on whatever local section of documentation Google sends you when you're solving a specific problem. There are a…

When has it became normalized to not read docs and be almost proud of it? I harp on this a lot, but computer engineering will never be treated seriously if we continue acting like documentaton or manuals are too good for us. Its like if when designing a bridge no one read the spec sheet on the bolts. If I ever hear a bridge or structural engineer going "huh, TIL" about a fact found in the manual of a tool or item he…

You're talking about docs here as if they're like a textbook on Calculus. Thorough, constant and unquestionably effective.

Online docs are nothing like this.

First, they can change as frequently as every few weeks, so there's no point in studying them exhaustively if they'll be useless after the next update.

Second, they're often inferior to Google's answers on the topic, especially if you're using your question as the search query.

Third, even if they are current and the best text resource available, they may still be bad. Halfhearted explanations or even whole pages saying "content should go here." Often worse than simply asking for an explanation in a Slack or a Discord.

I don't think that would be true of an engineer with a physical tool, but it's often true of software tools.

Re: Learn CSS layout the pedantic way (2015)

#77

Post by Vinnl »

Tomte wrote: post #21
Vinnl wrote: post #10

Earlier quoted context omitted.

> what is actual and what is not Heh, off-topic, but this is one of my favourite "EU English"-isms: using actual to mean current . Completely understandable, given how e.g. the Dutch translation of current is actueel (whereas the translation of actual is daadwerkelijk ). Anyway, maybe this is even helpful if a native speaker is confused :)

Yes, first example in https://en.m.wikipedia.org/wiki/Euro_English under Vocabulary.

Thank you! I've been trying to find [1] again, which I encountered ages ago, and this Wikipedia page got me back there.

[1] https://www.eca.europa.eu/Other%20publications/EN_TERMINOLOG...

Re: Learn CSS layout the pedantic way (2015)

#78

Post by philsnow »

shubhamjain wrote: post #27

I find articles like this daunting, even when it predates CSS Grid which has made CSS Layouting even more complex. I have been a web developer for 10 years, and I still feel out of depth about CSS. How it all works, obscure edge cases, internals, and the sheer number of features in there. I wrote about it recently [1] > I hadn’t even completely caught up with the intricacies of Grid Layouting, when subgrid and contai…

My perennial problem with frontend work is that all the articles are written for an audience of people who have been keeping up with the state of the art for the last 15 years.

The first time I wrote actual frontend things in exchange for USD, I was generating "DHTML" (my fingers stumbled over even typing the abbreviation because it's flushed so far out of my muscle memory cache) directly from perl. I know frontend stuff like a six year old knows calculus, and I feel like there's no way for me to catch up now.

Re: Learn CSS layout the pedantic way (2015)

#79

Post by chrysoprace »

temporallobe wrote: post #50

I develop a lot UI apps (mostly Angular) and these days I just use a framework like Bootstrap or Foundation. The myriad of layout options in pure CSS is overwhelming and mind boggling, especially when it comes to responsive design. I have tried using pure CSS but find myself writing lots of boilerplate code and coming up with amounts to a mini framework. Unless you’re designing a custom bespoke designer web site, I d…

There's still some boilerplate, but I'm a big fan of Open Props[0] because it takes a hybrid approach. CSS isn't necessarily reinventing the wheel, but allowing for easier / more powerful approaches to difficult layouts or things that would otherwise require JS. Bootstrap is fine but troubleshooting advanced layout issues involves a lot of inspecting elements to see what styles are actually being applied (at least in my experience, YMMV) so I'd personally always bet on CSS.

A new feature that I'm excited about is the `@scope` rule which is going to make scoped styles a lot easier.

[0] https://open-props.style/

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/@scope

Re: Learn CSS layout the pedantic way (2015)

#80

Post by dragonwriter »

philsnow wrote: post #78
shubhamjain wrote: post #27

I find articles like this daunting, even when it predates CSS Grid which has made CSS Layouting even more complex. I have been a web developer for 10 years, and I still feel out of depth about CSS. How it all works, obscure edge cases, internals, and the sheer number of features in there. I wrote about it recently [1] > I hadn’t even completely caught up with the intricacies of Grid Layouting, when subgrid and contai…

My perennial problem with frontend work is that all the articles are written for an audience of people who have been keeping up with the state of the art for the last 15 years. The first time I wrote actual frontend things in exchange for USD, I was generating "DHTML" (my fingers stumbled over even typing the abbreviation because it's flushed so far out of my muscle memory cache) directly from perl. I know frontend s…

There's a whole lot of frontend content written for complete newbies, as well as stuff written for people who have been keeping up; if you are an experienced programmer who hasn't been keeping up with frontend stuff, you'll probably need to use a mix of stuff written for people with less programming experience than you have and stuff written for people with more frontend experience, but catching up isn't making up for the intervening time you weren't engaged, because while a tiny fraction of the knowledge of frameworks that has come and gone went into shaping context for the "always current" people learning the new stuff, a large fraction of it is just knowledge that is no longer relevant.
Post reply on HN