taphangum

100% this.

The moment I started to see HTML and CSS as a holistic system of layout construction, rather than as simply two separate but complimentary technologies, my productivity in both skyrocketed.

'Bugs' in my CSS became infinitely easier to not only find, but also solve. And the benefits of tools that both unified and abstracted layout construction, like Tailwind, became immediately obvious.

Shameless plug: I talk more about a lot of these mindset shifts and how they've helped me finally feel like I truly understand CSS in a book I'm working on called "How To Debug CSS" [1].

It goes over not only the mindset shifts that have helped me gain a decent level of mastery over CSS, but also shows you how to solve the 50+ most common issues that you'll come across when developing with it. Like when you have an overflow on your page for example, and have no idea what's causing it.

[1] - https://gumroad.com/l/Debbg/z823cp8

If your reader doesn't get it, they blame you. So its wise to use all of the tools at your disposal.

Having been on the wrong end of a low empathy pm (who on the outside seemed to look like they had empathy), I can say that there is probably nothing more important than this wrt developer productivity.

I don't actually even think that the lack of empathy was intentional, I think that it had more to do with a basic lack of understanding in many areas, that lead to unrealistic expectations.

Thank you very much!

I can't think of a better advertisement for these VC's. Calculated or not, it is a great move

If you're feeling a block, then first work around the work, eventually you'll be working ON the work.

The HN comments: https://news.ycombinator.com/item?id=24875357.

In reality, it is as complicated, maybe more so, than any programming language or framework you will ever come across.

The best way to start to get better at it, is to gain an appreciation for it, as a 'hard', technical thing. Which it is.

You do this by re-framing how you see it.

Instead of seeing CSS as an annoying way to 'style' pages, see it instead as a visual programming language for constructing visual guides (UI's) for your user.

You don't 'style' pages, you 'construct' and 'architect' them. It sounds weird to use these words, but they have a massive effect in changing your perception of what you're doing. And that has a massive effect on your impression and willingness to learn how to do it well.

Essentially, you can properly learn CSS by transforming it in your mind from a 'styling' problem thing, to an 'engineering' problem thing.

I've got a post on this coming up tomorrow, which I'll post here.

If you want to get a shout when the full post on this is up, you can drop your email on the site homepage here: https://planflow.dev. Or you can just follow the twitter account here: https://twitter.com/PlanFlowDev.

In the meantime, you can check out another post where I talk about this general idea at a higher level: https://simpleprogrammer.com/information-architecture-develo....

Thanks a lot for sharing Rick!

It could be summarized simply as: decrease options, increase option depth.

Apple does this very well with its products. From the 'unboxing' experience, down to the dashboard UI's and functions. Every complex function is 'unfolded into', while only the things that are immediately necessary are made obvious.

I made a drawing to help to further illustrate this idea: https://twitter.com/PlanFlowDev/status/1311356383221223424/p...

But if you want a shorter primer, you can check out this one that gives a short summary of this concept: https://planflow.dev/blog/ux-planning-starts-with-informatio....

I'm serious.

The more I (as a developer trying to master design) delve into the product design space. The more I see that there is no more fundamental skill in design than that of constructing 'information architectures'. Essentially, mapping (or diagramming) the most important pieces of a design that you are making.

It is literally the key to creating a great design.

I wrote more about this in a guest post here: https://simpleprogrammer.com/information-architecture-develo....

Think about the design of Apple products, is it really just the way they look that makes you love them. Or is it more subtly, the way the work (of which UI is a component), and how that makes you feel?

Definitely worth thinking about.

Not only is it now a very important ranking factor for SEO reasons. There's also going to be a point for most websites where the complexity (I'd argue that the standard WordPress install is a lot more complex than most JamStack setups, if you're going to be digging into the code) will eventually need to be offloaded to a build process that spits out a static site, just to meet the 'acceptable' threshold.

I'm in the process of testing out a new, faster way of teaching programming that uses an associative method called 'constructivism'.

Instead of assuming no similar knowledge when teaching a new language or framework, we try to leverage the knowledge of similar languages and frameworks that you already have to build a new knowledge structure, and ultimately teach faster.

I expand on this idea more here: https://fromtoschool.com/why-most-programming-tutorials-are-...

I guess the next question is, how does one create a way to reliably generate these kinds of "itch scratching" type queries on a regular basis?

My immediate guess would be to just be building something within your niche that you find interesting. And the ideas would come as a by-product of that.

So this definitely works best for builders. Those who are just focused on content creation and not building may have a pretty tough time using this strategy, due to lack of ideas.

Thanks for the heads up!

Once you get over the small learning curve, it gets to be VERY productive. Think of it as writing CSS at a slightly higher level of abstraction. That abstraction being in not having to edit two separate files or areas of your HTML document (unless you want to abstract further with @apply).

Not having to go through the 'define identifier in element, then define in StyleSheet' workflow. With Tailwind you get the most commonly used style definitions pre-defined. But not so high level that it LOOKS pre-defined. Giving you room to customize greatly. How could it not be faster?

I recently completed a theme in Tailwind, mostly to get the hang of it: https://planflow.dev/free-themes/. And managed to go from idea to finished theme in about 4-5 days. That's the fastest I've ever done it.

I wrote more about this here: https://simpleprogrammer.com/information-architecture-develo....

But cheers for sharing this link here!

Thanks for sharing.