HN user

Wolfr_

450 karma

User interface designer/developer

Posts34
Comments44
View on HN
shadcn.obra.studio 8mo ago

Our business model and a few words about other Shadcn/UI kits

Wolfr_
1pts0
obra.studio 1y ago

Who moved my (virtual) cheese?

Wolfr_
1pts0
muffinman.io 1y ago

Native dual-range input

Wolfr_
256pts47
johanronsse.be 1y ago

The majority of design systems work is busywork

Wolfr_
6pts0
johanronsse.be 1y ago

Making an iOS App Simply by Prompting

Wolfr_
1pts0
johanronsse.be 3y ago

An intro to building Figma plugins

Wolfr_
1pts0
johanronsse.be 3y ago

Things about Storybook’s CSF3 that were not that clear immediately

Wolfr_
1pts0
johanronsse.be 3y ago

SvelteKit form actions are the bomb

Wolfr_
4pts0
johanronsse.be 5y ago

Coming to Terms with Tailwind

Wolfr_
120pts110
bedrockapp.org 5y ago

Devlog – converting this WordPress site to Bedrock itself

Wolfr_
22pts7
bedrockapp.org 5y ago

Major updates to Bedrock HTML prototyping tool: PostCSS and PurgeCSS support

Wolfr_
3pts0
mono.company 5y ago

What’s Changed in Bootstrap 5?

Wolfr_
2pts0
johanronsse.be 5y ago

Apple doesn’t care about your PWA

Wolfr_
2pts1
mono.company 5y ago

Should you use scoped styling?

Wolfr_
1pts0
johanronsse.be 6y ago

Why you’ll probably regret using Tailwind

Wolfr_
4pts1
routify.dev 6y ago

Routify 1.5 released for Svelte, alternative to Sapper

Wolfr_
3pts0
routify.dev 6y ago

Show HN: Routify, easy to use file-based router for Svelte 3

Wolfr_
2pts0
johanronsse.be 6y ago

How I made a website with Svelte

Wolfr_
243pts123
johanronsse.be 6y ago

Thoughts on Tailwind CSS

Wolfr_
2pts0
bedrockapp.org 8y ago

Bedrock Bases – A Prototyping Environment for Material Design or Bootstrap 4

Wolfr_
3pts0
bedrock.mono.company 8y ago

Bedrock – A powerful static site generator and component styleguide

Wolfr_
8pts0
johanronsse.be 8y ago

Best of 2017 – A side project

Wolfr_
1pts0
mono.company 8y ago

Generate colour themes with ease thanks to this SCSS mixin

Wolfr_
5pts0
johanronsse.be 9y ago

Why I bought a 2015 Macbook Pro

Wolfr_
2pts0
mono.company 10y ago

Presentation: Effective User Interface Design with HTML Prototyping

Wolfr_
2pts0
mono.company 11y ago

The 10 commandments of good form design on the web

Wolfr_
2pts0
mono.company 11y ago

Learning to love BEM based CSS

Wolfr_
2pts0
mono.company 11y ago

Adventures in Japanese UI design: Sharp konbini printers

Wolfr_
2pts0
wolfslittlestore.be 11y ago

AngularJS is not for websites

Wolfr_
1pts1
wolfslittlestore.be 12y ago

HTML prototyping: workflow to design software in a better way

Wolfr_
1pts0

I was in no way talking about you, I was talking about backend devs in general who are thankful for something like Tailwind.

Just like I, a front-end dev + designer am thankful for something like Firebase, because my backend skills are fairly nonexistent.

I'll try and clarify what I mean here. Tailwind seems to appeal to devs who feel they never fully grasped CSS + design.

Because it provides a copy-pastable subset of reliable classes where you end result will look good.

As a company we are often hired to fill a knowledge gap (exactly in design and front-end). The nature of agency work is to leave a deliverable for the client to work with.

My idea is that when the project is over and the design/front-end gap still exists in the team, perhaps it is better to leave something more manipulatable (I used the word malleable originally).

I think with the great docs that Tailwind has it might be easier for someone who is not a front-end dev to manipulate a `<div class="p-4">` to `<div class="p-3">` than to come across a BEM/ITCSS component, written in SCSS* where you have to understand much more concepts to manipulate it skillfully.

*(our preferred stack really)

I agree, but none of those tweets were directed at the authors. They were just talking about Tailwind in general. One was a poor joke.

My 3 blog posts were a genuine attempt at trying to dissect what I didn't like about the framework. Many people wrote in to thank me for that perspective.

I find it unfair to single out two historical tweets neither of which is directed at the authors.

I was just using my other Twitter accounts to stay up to date, it's not a big deal.

I just genuinely wonder if blocking people that don't agree with you is a good strategy.

I guess over time things also changed, Tailwind 2y ago was not the same as Tailwind now. They hired a bigger team and became much more of a company.

The context is that we're primarily a design company, the front-end is a way to express our designs.

A big reason for me is that I want the bigger group in our company to experiment with several CSS techniques to grow as front-end developers. If I (as a manager) set a constraint on one type of CSS it is difficult to learn more.

As an agency it makes sense to have broad capabilities. I think as a freelancer it's super fine to just constrain yourself to what you like, as you state there is huge demand out there.

Nice of you to look up those from my hundreds of tweets.

Now, since we bought Tailwind UI to do our work, we are technically also a customer.

We're trying to find the balance between semantic classes and utilities now with @apply. I've always found layout to be easier with utility classes (regardless of Tailwind, this counts for Bootstrap 4 too).

I like "atom"-like components better with semantic classes. In BEM/ITSS I'd make a component for -everything-. But in Tailwind we'd only make one for common "atoms" such as buttons, tags, inputs etc.

Code example: write ".t-button" and then use @apply to put the classes there. Keeping the design constrained to a set of tokens.

    .t-button {
        @apply border
               inline-flex
               items-center
               px-3
               leading-5
               font-medium
               rounded
               focus_outline-none
               focus_ring-2
               focus_ring-offset-2
               focus_ring-blue-500;
    }

I think if 1/3 of your company leaves there is short-term morale loss for the ones that remain. But the loss of internal IP will be devastating. Especially if you are not big on docs and have that “just be smart and ship” approach that Basecamp has. Basecamp has a real problem hand here... they probably never expected this.

The founders went into a political discussion with someone on the other side of the political spectrum and got tired of it - then instituted a no-politics-and-society-discussion policy when the whole success of Basecamp is taking a societal , opionated view on software and what work should be.

TailwindCSS v2.0 6 years ago

Depends on the kind of work, for me, in the kind of long-running web software I make HTML is actually maintained or refactored.

TailwindCSS v2.0 6 years ago

I don't get why Tailwind is so hot. Do any of you actually maintain large custom design systems?

Where the same system is used across multiple code bases, with varying components, where you need to be able to accurately replace the look of a component, that might be coded in multiple dev environments (Angular, PHP, React...)?

If so, you would be running away from this approach fast. BEM/ITCSS all the way. How would you globally replace something that is marked up like this (example appears somewhere else in this thread)? How would you assert what this code means across projects?

    class="text-4xl sm:text-6xl lg:text-7xl leading-none font-extrabold tracking-tight text-gray-900 mt-10 mb-8 sm:mt-14 sm:mb-10"
With BEM/ITCSS, you would have a custom namespace like `auk`:
    class="auk-btn auk-btn--primary"
And you can reason about it, maybe in project 2 it is
    class="auk2-btn auk2-btn--primary"
So now you can refactor the old buttons out to replace the new buttons. Good luck with the mess above.

If people say: you can use `@apply`. Yeah. If you write your whole stylesheet in `@apply` logic, why are you using Tailwind at all?

Design tokens and the re-use of design variables is not a Tailwind thing by the way. Some people seem to be acting like it is. We've had variables in Sass for over since 2009. People have been doing clever things with variable maps (arrays) in Sass since forever. There's no way Tailwind can take credit for this.

I've written extensively about why Tailwind is problematic:

(1) https://johanronsse.be/2019/11/11/thoughts-on-tailwind-css/

(2) https://johanronsse.be/2020/07/08/why-youll-probably-regret-...

(3) https://johanronsse.be/2020/08/20/hey-your-api-surface-is-ca...

Don't fall for it! The marketing is sweet but the choice will hurt you in the end.

TailwindCSS v2.0 6 years ago

Most people use rem these days, but there are common browser bugs with using rems or ems in media query rules, so in the rules specifically it is common to still specify pixels, even if the rest of your stylesheet uses rems or ems.

TailwindCSS v2.0 6 years ago

Their marketing is good, they do a primo job at conveying the message in a nice looking way, but the end result is still HTML littered with hundreds classes, that gets hard to maintain and impossible to refactor.

I made a small front-end for a web app before: http://johanronsse.be/skilliverse-10/ -

Video: https://www.youtube.com/watch?v=qicEFB_XrQQ

This is much more about what the framework solves: UI as a function of the data, no spaghetti code full of DOM handlers and cross-references that are hard to follow.

Now I just used Svelte for this project, which is indeed a simple website which might not need this at all.

Still, I invite you to do similar transitions as I have between every page and on the homepage without a framework.

It did well in the State of JS, but there are no big names using it. I think it will have grow in popularity in 2020. The community is still relatively small.

I am still 100% confused as to how it would work it I would "enable SSR" (which Sapper would allow you to do). Would the end result be a static site then? Something to explore next year (also see the comment below about it not working at all without JS)

You can find versions that support Javascript at http://bestof2018.johanronsse.be/ and http://bestof2017.johanronsse.be/ . I used a static site generator for this.

This is clearly a technology exploration.

How can I explore new technologies if I impose limits that others don't set for themselves? The job market asks for JS skills. Look at my conclusion at the bottom of my post: I state that this might be a technology downgrade instead of upgrade.

I used Sapper before, I quite like it.

But now I wanted to explore how one would build something like Sapper, this is why I went for base Svelte and then added a router. I now have pretty much what I used Sapper for and the setup is simpler.

Also, Sapper doesn't seem to be in active development.

This is something very new (a few weeks) and still a work in progress, it's nowhere near complete. It's going to be a “way of doing things” instead of a full-on framework, but at the same time, we could use more examples on how to exactly do what it prescribes. A tutorial, a sample project following the conventions etc.

It will be interesting to read the comments on this early version but it's not really “released” yet.