Live data from Hacker News

Thank You Bootstrap 1

kylerego.github.io

41–50 of 65 posts

Re: Thank You Bootstrap 1

#41

Something that I've often wished, as a primarily backend focused engineer, often without frontend support, is for designers or perhaps design engineers, to pretty much build Bootstrap themes. That would let me code to the Bootstrap docs (which are pretty good), while allowing us to brand or customise whatever we're working on. I've seen even contract designers push back on this idea, suggesting that doing such a thin…

Every bootstrap site looks the same no matter how you customize it. Designers quite often focus on the details. They're the type of person who gets offended if the icon is off by 1 pixel. It is fine for most of us with no artistry brain, but may be boring to see the same bootstrap theme for them. Anecdotally, it is like clothing choice in different gender. Majority of men are fine wearing the same tee everyday, but m…

> Every bootstrap site looks the same no matter how you customize it.

How would you recognize a bootstrap site if this is false though? Sounds like confirmation bias, that is, "all sites that I can recognize as using Bootstrap use Bootstrap"

Re: Thank You Bootstrap 1

#42

Something that I've often wished, as a primarily backend focused engineer, often without frontend support, is for designers or perhaps design engineers, to pretty much build Bootstrap themes. That would let me code to the Bootstrap docs (which are pretty good), while allowing us to brand or customise whatever we're working on. I've seen even contract designers push back on this idea, suggesting that doing such a thin…

I've seen both sides of this idea many times, and from my personal experience, this idea looks good on paper, but usually implodes in practice. Bootstrap gives you a baseline quickly, but what pretty much universally happens is that at one point a feature requires you to venture outside of its constraints and that's when the trouble starts. Overrides and extensions, then something changes in the underlying theme or you update Bootstrap for some adjacent reason, that means more changes to the custom logic and eventually it's a big ball of yarn. Since you're working within the confines of Bootstrap and what it does and doesn't let you customize, you're never in a position where you can refactor all of it to make complete sense. In my opinion, if you're already working with a designer, it's way easier to build what they delivered from scratch, rather than try to bend Bootstrap over backwards to fit over it.

Re: Thank You Bootstrap 1

#43
post #32

Earlier quoted context omitted.

One thing that I've learned over time is that if I can't understand why people are taking some particularly obtuse or circuitous route, then that's probably because I don't yet understand what they're doing properly. I never really understood why people would use terminal-based text editors until I tried it out for myself, and while I still have my doubts, I understand the tradeoffs much better now. If frontend devel…

I hope you understand that a fair bit of my second post was tongue-in-cheek. I appreciate the concrete examples, and yes, that makes perfect sense when you start getting into data-heavy frontend applications. I do remember jQuery being useful for AJAX and for DOM selection primarily, so I get it. And of course I knew I was missing something, that's why I asked lol, the question was serious and I knew HN wouldn't let…

I'm a BE dev that has do to some FE work now and again, but IIRC the shadow DOM thing is about performance: it is in theory more performant to modify the shadow tree and then send it to the browser for rendering in one go than to manipulate individual elements and have the updates render immediately.

Back in the day I had to use an escape hatch in Vue 2 (which does not have shadow DOM) to work with the DOM directly to render a fast changing component (a structured log browser window with live logs flowing in rapidly). No idea if React would have worked better though. :)

Re: Thank You Bootstrap 1

#44
post #25
post #11

Earlier quoted context omitted.

> What am I missing? You're not missing anything, companies like mine have done just this. We supported a messy situation of 7 webapps using different technologies looking 7 different ways. Once we got them to use Bootstrap, was a cinch to consolidate to a single company brand. The "big reskin" UX was gearing up for was as simple as a new theme, and was done without any drama. They were almost disappointed it was so…

The secret: use SCSS or LESS to pack the combined effect of "p-3 border-1 shadow-sm rounded-2" into a single class.

I agree, but that approach seems to be uncommon or at least discouraged by the Tailwind creator.

I'd actually recommend Tailwind shops use the DaisyUI plugin which gives component classes similar to Bootstrap.

Re: Thank You Bootstrap 1

#45
post #32

Earlier quoted context omitted.

One thing that I've learned over time is that if I can't understand why people are taking some particularly obtuse or circuitous route, then that's probably because I don't yet understand what they're doing properly. I never really understood why people would use terminal-based text editors until I tried it out for myself, and while I still have my doubts, I understand the tradeoffs much better now. If frontend devel…

I hope you understand that a fair bit of my second post was tongue-in-cheek. I appreciate the concrete examples, and yes, that makes perfect sense when you start getting into data-heavy frontend applications. I do remember jQuery being useful for AJAX and for DOM selection primarily, so I get it. And of course I knew I was missing something, that's why I asked lol, the question was serious and I knew HN wouldn't let…

By shadow DOM do you mean the virtual DOM? The shadow DOM is also a thing, but it's largely unrelated to web frameworks.

The idea behind the virtual DOM is that it's usually easier to render everything in a functional sort of way. You treat rendering like a function that takes state as an argument, and returns your desired UI. Every time an event handler fires and changes some state somewhere, you rerun all the functions with the new state and that produces a (potentially different) UI.

For various reasons, it's not practical for these functions to actually return a new DOM every time the state changes, so instead they return the VDOM, which is a description of what the DOM should look like, and React diffs the real DOM against the VDOM and updates it if there are any changes. This way, if you've got an input that the user is typing in, it doesn't get replaced completely every time the component updates, but React might update properties on it as they change.

Originally the React team talked about how the VDOM made React faster, and this claim got stuck in everyone's heads, but it's not really true. The VDOM allows React to separate the rendering phase (i.e. when all the component render functions are called) and the DOM update phase, which can have some performance improvements against more naive approaches, but if you could optimally update the DOM directly whenever state changes, then this would still always be quicker. (And a lot of frameworks are moving towards this model, and away from the more React-like VDOM approach.) The main benefit of the VDOM is that it simplifies the programming model: it allows the "UI as a function of state" concept, and makes it easier to reason about what's happening while a render function is being executed.

A lot of more modern frameworks are moving away from VDOM-based approaches, although React is staying very much where it is. Like I said, there are faster approaches, but these arguably come with tradeoffs about complexity. Personally, I tend to avoid React because of the VDOM approach, in large part because it's a layer of abstraction that I don't really need.

Re: Thank You Bootstrap 1

#46

Earlier quoted context omitted.

Can you give any more insight as to why? Designers always seem to want to build design libraries, I don't understand why they wouldn't want to use a common API as the basis for that so that there's a contract of sorts with developers.

Things like Tailwind take the core concepts of bootstrap and build and improve on it on a grand scale. It is like comparing jQuery (bootstrap), to React (tailwind).

Tailwind and bootstrap are near opposite approaches to frontend design …

What’re you on about?

Re: Thank You Bootstrap 1

#47

Something that I've often wished, as a primarily backend focused engineer, often without frontend support, is for designers or perhaps design engineers, to pretty much build Bootstrap themes. That would let me code to the Bootstrap docs (which are pretty good), while allowing us to brand or customise whatever we're working on. I've seen even contract designers push back on this idea, suggesting that doing such a thin…

Having spent a decade in the late 90s / early aughts doing PHP web development (including Bootstrap), I can't for the life of me figure out why modern frameworks need hooks and a shadow DOM and a component model. I dabbled for a bit about a decade ago, and the first and last JS framework I worked with was Angular2 (which was in beta); this was right about the time Typescript was getting started (in fact, I distinctly…

The real reason is because it’s faster (or was in 2014) to diff 2 versions of an optimized in-memory tree than it is to use the dom API to diff live html (where any change might trigger the browser’s layout and rendering pipeline)

That’s why react opted for a virtual dom. Many frameworks followed suit.

We’re a decade on at this point and JavaScript runtimes are much faster

Re: Thank You Bootstrap 1

#48
post #45

Earlier quoted context omitted.

I hope you understand that a fair bit of my second post was tongue-in-cheek. I appreciate the concrete examples, and yes, that makes perfect sense when you start getting into data-heavy frontend applications. I do remember jQuery being useful for AJAX and for DOM selection primarily, so I get it. And of course I knew I was missing something, that's why I asked lol, the question was serious and I knew HN wouldn't let…

By shadow DOM do you mean the virtual DOM? The shadow DOM is also a thing, but it's largely unrelated to web frameworks. The idea behind the virtual DOM is that it's usually easier to render everything in a functional sort of way. You treat rendering like a function that takes state as an argument, and returns your desired UI. Every time an event handler fires and changes some state somewhere, you rerun all the funct…

Yes, virtual DOM. My mistake. Not even sure why I used the term shadow DOM.

That makes sense. I understand the rationale now.

I appreciate the detailed and thoughtful response.

Re: Thank You Bootstrap 1

#49
post #45

Earlier quoted context omitted.

By shadow DOM do you mean the virtual DOM? The shadow DOM is also a thing, but it's largely unrelated to web frameworks. The idea behind the virtual DOM is that it's usually easier to render everything in a functional sort of way. You treat rendering like a function that takes state as an argument, and returns your desired UI. Every time an event handler fires and changes some state somewhere, you rerun all the funct…

Yes, virtual DOM. My mistake. Not even sure why I used the term shadow DOM. That makes sense. I understand the rationale now. I appreciate the detailed and thoughtful response.

It's a very common mistake! No worries, I always enjoy getting to explain these details to people, I find them really interesting.

Re: Thank You Bootstrap 1

#50
post #44
post #25

Earlier quoted context omitted.

The secret: use SCSS or LESS to pack the combined effect of "p-3 border-1 shadow-sm rounded-2" into a single class.

I agree, but that approach seems to be uncommon or at least discouraged by the Tailwind creator. I'd actually recommend Tailwind shops use the DaisyUI plugin which gives component classes similar to Bootstrap.

Indeed, the reasoning I've read falls close to the last paragraph of your previous comment. Components will consistently apply "atomic styles" everywhere and so are thought to be a replacement for "semantic styling" (sprinkling in some quotes because I don't know the exact terminology).
Post reply on HN