Live data from Hacker News

Learn CSS layout the pedantic way (2015)

book.mixu.net

91–100 of 106 posts

Re: Learn CSS layout the pedantic way (2015)

#91
post #71
post #51

Earlier quoted context omitted.

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.

Modern devs should hand-write as much CSS as they do Assembly code.

Re: Learn CSS layout the pedantic way (2015)

#92
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…

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 t…

If there is an update to the docs, that might mean there was an update to the tool you used. Why not learn the new features of your tool?

You can also pin your docs to a version just like your dependencies, no reason for online-only.

You can still google things as needed, I just don't see the problem with spending a few minutes familiarizing ourselves with the changelog.

Even if they do change every few weeks, we have diffs don't we?

I do agree a lot of docs and manuals are not production ready.

Re: Learn CSS layout the pedantic way (2015)

#93
post #71
post #51

Earlier quoted context omitted.

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.

Yes, people are very happy with CSS and never tried replacing with anything. /s

Re: Learn CSS layout the pedantic way (2015)

#94
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...

To me, CSS frameworks break the whole point of CSS, generally add a lot of bloat, and aren't useful except in some instances where rapid prototyping is needed. Tailwind exists largely because programmers don't like CSS. We no longer need frameworks for compatibility. The era of browser testing is over. And we don't need them to do things CSS can't do, as in the past couple of years nearly all browsers are handling th…

A lot of people seem to approach Tailwind as a set of helper classes, but I think this is a misunderstanding of what Tailwind is doing.

It's clearer to think about Tailwind as a DSL for writing CSS directly in your templates. If that sounds like a thing you don't want to do in the first place, then Tailwind probably won't add anything useful for you, but for a lot of developers, it's a very convenient way of encapsulating style, structure (and potentially behaviour) in a single unit. You can then compose these units together to create larger systems.

Like I say, that's not the only way to develop for the web, you can also take the approach of separating out style, structure, and behaviour, and there you're not really going to see much benefit from Tailwind directly.

Specifically, I think a lot of the success of Tailwind comes from the fact that it's very agnostic about how you build your units. A lot of tools for CSS encapsulation have typically either been bound to a single framework, or at least very bound to the Javascript ecosystem. For example, CSS Modules do in many way a very similar thing to Tailwind, but they're heavily connected to the JS concept of importing and bundling - they can't easily be used in Python, for example. On the other hand, Tailwind is just text - if the Tailwind compiler finds a file where you're using its DSL, it can build the correct CSS files from that, regardless of how the file has been written. This allows you to use Tailwind from HTML, JS, but also from arbitrary custom templating formats, or even other programming languages.

I don't think Tailwind has so much to do with "basics vs helper methods". To do a lot of useful things in Tailwind, you need to know CSS in the first place, and it really is just a DSL around arbitrary CSS declarations (although the more complex those declarations become, the less pleasant Tailwind becomes to use - it is by no means perfect, or even my favourite tool for encapsulated CSS). It's more a question of how you want to write your CSS: do you want to write it coupled to HTML in components, or so you want to write it decoupled as a whole-page stylesheet?

Re: Learn CSS layout the pedantic way (2015)

#95
post #25

The first thing that should be explained about CSS layout, is that it has 4 different layout systems: - table, the oldest one, still used for email - float, for articles with inline images - flexbox, most used one today - grid, modern alternative to table There is also absolute and fixed positioning as a hack to bypass layout.

Table isn't a CSS layout system. Table layouts abused the HTML table element because CSS didn't support such layouts. The problem was it became impossible to distinguish between a real table in a document and one that is just used for layout.

Re: Learn CSS layout the pedantic way (2015)

#96
post #26
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 :)

In spanish, current translates to actual .

Yep, I acquired the habit to write var names like "cur_thing" for "current thing", you know.

Re: Learn CSS layout the pedantic way (2015)

#98
post #68

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…

Because people work with many different tech stacks. E.g.,

HTML CSS C++ CMake Python Javascript PostgreSQL Docker

Then next year, its something different. And you just need to solve that one problem that one time.

You simply don't have the time.

Re: Learn CSS layout the pedantic way (2015)

#99

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…

The big shift has been to Single Page Applications (SPA) either indirectly using a framekwork like React, or Angular or using the Javascript fetch() directly. So this also means that links (within your website/application) go away. This avoids page reloads, and it feels more like a desktop application.

The foundation is modern Javascript, another big new concept is async/await, combined with the fetch() calls so the entire screen doesn't lock up while your'e waiting for it to return

The other big shift is using CSS framekworks. Big ones now are Bootstrap and Tailwind.

I'm actually working on making a video with a live coding experiment making a small social networking site with some modern practices.

But some people still persist in doing the old way - e.g. Wikipedia. And Hacker News isn't an SPA from what I understand

Also, the "old way" has started to make a comeback with Server Side Rendering, as the compiled Javascript files using frameworks can get up to several megabytes and its taking too long to load the site.

Re: Learn CSS layout the pedantic way (2015)

#100
post #26
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 :)

In spanish, current translates to actual .

Yeah exactly, looks like it's mostly English that's weird. Translations of "current":

- Danish: aktuel

- Dutch: actueel

- French: actuel

- German: aktuell

- Italian: attuale

- Norwegian: aktuell

- Polish: aktualny

- Portuguese: atual

- Romanian: actual

- Spanish: actual

Even Hungarian has aktuális! So using "actual" to mean "current" is basically just fixing English.

Post reply on HN