7 ms·

I used to get really angry at CSS because of all of the things that made it a bad fit with component-based systems like React. It made me so unhappy that I work

I used to get really angry at CSS because of all of the things that made it a bad fit with component-based systems like React. It made me so unhappy that I worked full-time for about nine months on this project, which was a React-like component system that rendered to canvas. https://github.com/maxharris9/layout https://github.com/maxharris9/layout I got pretty far! But I gave up working on it when I realized that I was going to be pushing this boulder uphill for years. So what changed? I picked up Swift and SwiftUI, and it turns out that some of the ideas that I had were the same ones the SwiftUI folks went with! For all the web has given us, I think its APIs are holding us back now. I still think we need something open and decentralized that competes with the App store and Play store, but one that offers apps that use basically the same APIs and technology that the native apps use. Last thing: I know Apple cripples browsers on their platforms. I've run into all those issues personally in my work! That still doesn't make the web the right thing. Here's James Mickens telling us how to fix the browser's busted architecture: https://www.youtube.com/watch?v=1uflg7LDmzI https://www.youtube.com/watch?v=1uflg7LDmzI

untog 6y ago
Improvements like web components encapsulating CSS make it a much better fit for component development. Just a shame React doesn’t support the API like other frameworks do.
- runawaybottle 6y ago
  I thought React team was working to support web components?
  - untog 6y ago
    I hadn’t heard that. Very positive development if so.
filleduchaos 6y ago
This is part of why it bemuses me to see web developers cling so hard to using HTML/CSS beyond the browser. I'd much sooner tangle with a proper UI SDK designed from the start to support applications than fight with a layout/painting engine that relies on a document model. The sheer inability of CSS to handle dynamic heights should be frustration enough for anyone.
- franga2000 6y ago
  One big reason I often go with HTML rather than any kind of actual UI framework, especially for prototypes or ad-hoc interfaces, is that's it makes it so much easier to do dumb things that weren't intended, aren't versitile or accessible, but I don't care. I can put a div in a div, border-radius=50%, position=relative,absolute, add a single event handler and that's a digital joystick. Run a local single-exe websocketify and you can control anything from a CNC router to an army of drones. I dislike Electron* as much as the next guy and steer clear of npm like my life depends on it, but there's no single thing that's more universal and easy to hack on than a simple HTML file.
  - filleduchaos 6y ago
    > I can put a div in a div, border-radius=50%, position=relative,absolute, add a single event handler and that's a digital joystick Are you implying that this is somehow unique to the web or HTML? Because I can assure you that it is not.
    - franga2000 6y ago
      It's true that it's been a while since I've tried doing horrible things in an actual UI framework, but last time I did it was only very easy in QML, which is (was?) a royal pain in the ass to build for Android.
- deergomoo 6y ago
  Even layout aside (I'm hoping Houdini will eventually bring some form of constraint-based layout to browsers), HTML is the lamest UI toolkit going. We've got a handful of basic form inputs, incredibly inflexible tables, and some semantic rectangles. That's basically it. Even the form inputs can be a pain. It's insane to me that the only way to change the background colour of a checkbox is to hide it and build your own with CSS hacks (pseudo-elements etc.). I guess the fact that any element needs to function purely from markup without any code severely hampers them, but I can't believe how much time we're all wasting having to build things as basic as pop-out menus by hand.
yagodragon 6y ago
> I still think we need something open and decentralized that competes with the App store and Play store, but one that offers apps that use basically the same APIs and technology that the native apps use. Take a look at Flutter(which is similar to swiftUI). I know Google is behind it but it's so damn good. The JS community spends so much time creating new tools on top of older tools to achieve simple things that should be trivial in 2020. Meanwhile, flutter is typescript+react+webpack+component library + a bunch of npm dependencies(because dart has a proper standard library) + advanced styling/layout and animation primitives inside the programming language + amazing IDE support + compiler that generates optimized AOT native code. Flutter Web is a huge bet though because it completely throws away every web tech and builds UIs on top of <canvas>. That way you get the same API's you get on mobiles. The results are not good right now but alongside Microsoft's Blazor they are the only technologies competing with the broken web landscape.

untog 6y ago

Improvements like web components encapsulating CSS make it a much better fit for component development. Just a shame React doesn’t support the API like other frameworks do.

runawaybottle 6y ago
I thought React team was working to support web components?
- untog 6y ago
  I hadn’t heard that. Very positive development if so.

filleduchaos 6y ago

This is part of why it bemuses me to see web developers cling so hard to using HTML/CSS beyond the browser. I'd much sooner tangle with a proper UI SDK designed from the start to support applications than fight with a layout/painting engine that relies on a document model. The sheer inability of CSS to handle dynamic heights should be frustration enough for anyone.

franga2000 6y ago
One big reason I often go with HTML rather than any kind of actual UI framework, especially for prototypes or ad-hoc interfaces, is that's it makes it so much easier to do dumb things that weren't intended, aren't versitile or accessible, but I don't care. I can put a div in a div, border-radius=50%, position=relative,absolute, add a single event handler and that's a digital joystick. Run a local single-exe websocketify and you can control anything from a CNC router to an army of drones. I dislike Electron* as much as the next guy and steer clear of npm like my life depends on it, but there's no single thing that's more universal and easy to hack on than a simple HTML file.
- filleduchaos 6y ago
  > I can put a div in a div, border-radius=50%, position=relative,absolute, add a single event handler and that's a digital joystick Are you implying that this is somehow unique to the web or HTML? Because I can assure you that it is not.
  - franga2000 6y ago
    It's true that it's been a while since I've tried doing horrible things in an actual UI framework, but last time I did it was only very easy in QML, which is (was?) a royal pain in the ass to build for Android.
deergomoo 6y ago
Even layout aside (I'm hoping Houdini will eventually bring some form of constraint-based layout to browsers), HTML is the lamest UI toolkit going. We've got a handful of basic form inputs, incredibly inflexible tables, and some semantic rectangles. That's basically it. Even the form inputs can be a pain. It's insane to me that the only way to change the background colour of a checkbox is to hide it and build your own with CSS hacks (pseudo-elements etc.). I guess the fact that any element needs to function purely from markup without any code severely hampers them, but I can't believe how much time we're all wasting having to build things as basic as pop-out menus by hand.

yagodragon 6y ago

> I still think we need something open and decentralized that competes with the App store and Play store, but one that offers apps that use basically the same APIs and technology that the native apps use. Take a look at Flutter(which is similar to swiftUI). I know Google is behind it but it's so damn good. The JS community spends so much time creating new tools on top of older tools to achieve simple things that should be trivial in 2020. Meanwhile, flutter is typescript+react+webpack+component library + a bunch of npm dependencies(because dart has a proper standard library) + advanced styling/layout and animation primitives inside the programming language + amazing IDE support + compiler that generates optimized AOT native code. Flutter Web is a huge bet though because it completely throws away every web tech and builds UIs on top of <canvas>. That way you get the same API's you get on mobiles. The results are not good right now but alongside Microsoft's Blazor they are the only technologies competing with the broken web landscape.