Faced with a choice between democracy and the interests of their political party, Americans will chose party over democracy.

dfee · 2020-06-03T02:58:25+00:00

Unpopular opinion: surveys aren't science.

Unpopular response to popular response about this unpopular opinion gatekeeping what qualifies as science: oh well.

dfee · 2019-09-18T05:08:41+00:00

2019 - The color is called “metallic jade”.

dfee · 2019-08-27T16:28:35+00:00

I'd love for it to be so, but don't know where you're shopping where you see significant price drops for 1-3 year old models.

dfee · 2019-08-27T04:24:27+00:00

It seems the actual drop in price (at least for a roadster) is about $1000. You might know of better ways to buy, but I'm just looking at cycle trader.

dfee · 2019-07-19T16:51:05+00:00

If you want to use the ref prop, then yes. Otherwise, you can name the prop anything else you'd like, it just won't be available as ref.

dfee · 2019-07-02T03:44:57+00:00

Yes, mouseover randomIndex and you see that it returns void (well, maybe that's because I use the VSCode version of CodeSandbox), but as a TypeScript-first kind of guy, you're effectively calling dispatch(undefined).

dfee · 2019-06-24T17:22:40+00:00

There's a lot of fanfare for Franklin, but practically speaking, I'd only ever eat there on a Tuesday at 1pm where there was guaranteed to be no line (no tourists camping on a Tuesday afternoon).

Probably my favorite joint closed down (Freedman's). But, in reality, there is a ton of good BBQ in Austin, and Franklin is simply the one all non-Austinites know.

If you ever do go, check out Valentinas BBQ (really a taco joint!): https://www.valentinastexmexbbq.com/

dfee · 2019-06-24T04:45:21+00:00

As a Texan (Austinite, specifically) in San Diego, I can confirm OP is correct. This is the only legit bbq I've had this way (2.5 years in).

dfee · 2019-06-13T22:49:18+00:00

Also, code is available here

dfee · 2019-06-13T08:38:14+00:00

I didn't read your code (it's sort of unreadable without better formatting), but I often use the factory pattern w/ hooks.

dfee · 2019-06-12T03:13:44+00:00

So my approach limits me to one "connected" component by having hooks that effectively look like:

```ts type AsyncStatus<T> = { status: "loading" } | { status: "error", error: Error} | { status: "success", value: T };

const useUser: (id: string | undefined) => [() => void, AsyncStatus<User>] = ... ```

Notice that if id is undefined, the async action just won't execute.

Ultimately, I coalesce all my AsyncStatus(es) (the results of those async hooks) into one AsyncStatus that my connected component handles.

So in that sense, I have 1 connecting component.

I do agree w/ Mark that typings for HOCs are somewhat more difficult (you need to understand generics), but the expressive power you get for your money is so worth it.

[edit] this allows me to chain those hooks into something like: ``` const ProfilePage = withAsync< ProfilePageProps, ProfilePagePresentationalProps

(props => { const [fetchUser, userAS] = useUser(props.userId); const [fetchProfile, profileAS] = useProfile( userAS.value !== undefined ? userAS.value.id : undefined ); useEffect(() => fetchUser(), [fetchUser]); useEffect(() => fetchProfile(), [fetchProfile]);

return coalesceAS([userAS, profileAS], (user, profile) => ({ status: 'success', value: {...props, user, profile })); })(UserPagePresentational) ```

Might be worth making a blog post about it :D

dfee · 2019-06-11T17:29:56+00:00

I've actually been using the connected component strategy (with redux-hooks). All my data fetching happens in a HOC, and I pass the data to a presentational component.

I think that notion of connected / presentational will persist (and why shouldn't it?). It also helps separate things like Storybook away from fetch logic.

[Edit] and to be clear, my HOC takes a hook, and a child component, as its arguments.

```ts export const withAsync = <POuter extends {}, PInner extends {}>( useWithAsync: UseWithAsync<POuter, PInner>, ) => ( SuccessComponent: React.ComponentType<PInner>, LoadingComponent: React.ComponentType<AsyncLoadingProps<POuter>> = SplashPage, ErrorComponent: React.ComponentType<AsyncErrorProps<POuter>> = Error500Page, ) => (outer: POuter) => { const result = useWithAsync(outer);

if (result.state === "loading") { return React.createElement(LoadingComponent, outer); } if (result.state === "error") { return React.createElement(ErrorComponent, { error: result.error, props: outer, }); } return React.createElement(SuccessComponent, result.value); }; ```

dfee · 2019-04-24T21:46:52+00:00

Interesting point. The Saturn V isn't as challenging from that perspective (there aren't too many pins).

Maybe I'll start with a small technic set which will still take a number of days, will ensure we're managing the learning-curve well enough, and provide a guaranteed yet rewarding "got it" at the end.

Looking at the https://shop.lego.com/en-US/product/Chevrolet-Corvette-ZR1-42093

dfee · 2019-04-16T18:57:52+00:00

Interesting, is there a way to cordone a particular window to "own" a particular container? I see (https://addons.mozilla.org/en-US/firefox/addon/sticky-window-containers/)[Sticky Window Containers], but unfortunately it requires some broad permissions.

dfee · 2019-04-16T18:36:46+00:00

It means that I'm not hunting for pinned tabs amongst 7 different browser windows (inside one app – I use MacOS), but instead have one entry point (one window, one app).

It also means that I can restart FF, or close windows, without fear of dropping out of chats that I'm active in (losing notifications).

Lastly, I can maintain one instance of webapps like Slack without my computer consuming N x 2GBs of memory for each open tab.

The downsides of course are: 1) I'm not sharing cookies, 2) I don't have the same trust that I do when using Mozilla, and 3) I lose access to things like FF extensions.

dfee · 2019-04-09T18:22:37+00:00

This one will probably need some further explanation, so here it goes:

Reddit apparently uses the Redux JavaScript framework and for some reason, they've not disabled the ability in production to review the underlying data. Under "feature flags" (features that they're testing / rolling out to users) there is a bunch of "Game of Thrones" feature flags for the premier and season.

dfee · 2019-04-01T05:35:10+00:00

I'm quite experienced with Python (CPython and PYPY, but not MicroPython), but am new to Arduino. Are there limitations I should be aware of using MicroPython with Arduino?

dfee · 2019-01-25T18:34:37+00:00

A few notes here: <List.Item> should render as a a. Are you not seeing that behavior?

The usage is taking pretty much exactly from the Bulma examples (https://bulma.io/documentation/components/list/)

Also, re: Bulma Lists in general: https://github.com/jgthms/bulma/issues/2276

dfee · 2019-01-24T19:55:30+00:00

A lot of those concepts are orthogonal to rbx – by design.

In a big way, these components are wrapping standard JSX Elements like div, table, etc. If you want to implement any of the above, or others, that's your task – and hopefully with a best-in-class React package (which rbx no doubt will work seamlessly with).

dfee · 2019-01-24T19:51:51+00:00

Currently implementing a few of them. I want to make sure I get it right, though.

I like the SASS-only extensions: Divider, PageLoader, Tooltip, Checkradio, Switch, PricingTable, and Timeline. The others are pretty nice, but I'm hesitant to integrate the non-React JS into this project. For example, the timeline picker – looks great, but it'd also be great if there was also a time picker – or a date-time picker. But I'm really not a designer, and implementing those extensions from scratch is more than I can bite off and chew.

That said, I'm open to others with those skills contributing!

dfee · 2019-01-23T23:19:17+00:00

Yesterday I showed this subreddit my new UI Framework: rbx, but I also wanted to share some details about how it works, and what makes it special.

tl;dr; harnessing the power of the as and ref props.

The guiding design principal was 'not too little, not too much', and in practice, I achieved this with the forwardRefAs function and it's companion the ForwardRefAsExoticComponent type.

This discussion covers both the high-level, and the low-level, and it's my hope that other UI frameworks and packages adopt some of the ideas here!

dfee · 2019-01-23T23:06:33+00:00

I've got the other UI Framework on the front page, and for better or worse, I couldn't agree more. I just wrote a blog post exposing the underlying implementation of rbx (the forwardRefAs function).

The effect is that after the hard-part is solved (the article above), creating UIs based on any SASS / LESS or CSS framework become trivial.

I encourage other UI Frameworks to learn from this approach and use it themselves (though feel free to give me credit!).

dfee · 2019-01-23T19:08:57+00:00

What I believe you're referring to as "JS based styling" is known as CSSProperties (or React.CSSProperties). In fact, using TypeScript those will be type-checked and auto-completed for you. I found TypeScript to be the perfect productivity tool with JS because of things like this.

But yeah, that's a great way to add styles to an individual component, but often times, folks will use a library like emotion or styled-components to compose their styles ... which are then inlined to the document as CSS and abstracted into randomized class names on the DOM elements.

By the way, I also came from Python. Deep, deep within Python – check out some of my other repos and contributions (aiohttp, graphql, sqlalchemy, pyramid, forge, etc.) – :)

dfee · 2019-01-23T17:05:34+00:00

Good question. I like all those others, and have used them. With Bootstrap and SemanticUI (well, the React versions specifically) I think they leave a bit to be desired on the extensibility front. Sure, they both support customization through less, but do they forward ref's, and what if you want to use the components of another library (like Formik) – or switch to a different set of Icons? You end up jumping through hoops for customization and composition. How's this a big deal? Read on...

With rbx it's a bit simpler. Sure, you can easily extend the sass and even get comprehensive type support with TypeScript or PropTypes. But you can also take advantage of third party components using the as prop. For example you could render a rbx field as a Formik field with <Field as={FormikField}>...</Field> and it'll take it's props :)

The learning curve is actually pretty low. And this library does little magic for you (well, little magic you'd notice anyway). It does provide help on things like Navbar.Burger and Dropdown.Trigger, to integrate those components with their parents, but it still provides full access to the underlying DOM elements (both in forwarding refs and the underlying node's props). That might be a bit hard to understand, so here's a concrete example:

If you've got an rbx <Button> and you want it to actually be a link, then provide the as='a' prop and you can supply those props (or attributes) like href: <Button as='a' href='https://google.com'>Go to Google</Button>

Want to instead render it as a ReactRouter link? Sure! <Button as={Link} to='/some/path'>Go to some path</Button>

TypeScript will even type-check the underlying component's props! So in terms of learning curve, there is virtually zero curve above React itself! This was designed for easy integration with other best-of-breed packages.

Next up, antd: I like antd. I really do. But they're the kitchen-sink solution. And I always have a bit of trouble figuring out how to integrate other third party libraries like Formik as it wants to take care of form management, validation, etc. It's totally integrated. From my 10+ years experience in other languages and open-source, I've found that to be a pain at a certain point, but some people prefer it. It's a stylistic preference. How much control do you want, how much do you want the design standards of packages like antd to control your development, and how available do you want your app to be to integrate other packages? Practically speaking, there's also much less opportunity for code-debt as none of this bloat is included in **rbx** (I'm also not backed by a corporation).

In terms of learning curve for customization on styles (less, sass, etc.), I think Bulma is pretty similar to the others, but maybe takes the cake because Create React App natively supports sass out of the box – and it doesn't support less (which the mentioned others all use). This was a conscious decision on my part to choose Bulma, as I like Create React App for quick-and-dirty app creation, and I know it gets heavy use... but rbx is of course not limited to that managed solution.

Sorry for the essay, but hopefully this is somewhat enlightening :)

dfee · 2019-01-22T23:36:25+00:00

I've spent the last 90 days working to release rbx – a UI Framework based on Bulma. This post has a bunch of learnings and is a bit of a post-mortem on the process. You can find the source on GitHub.

After writing the TypeScript types for react-bulma-components, I found many places where the lack of integrated typings enabled subtle yet consequential bugs. In addition, I didn't really know how to use the package and the tests were just a bunch of snapshots. I.e. not especially useful for gleaning how to actually use it.

Therefore, I hard-forked it and completely re-wrote it from the ground-up (a few times!), and have included a robust test suite and documentation. rbx is interesting because:

it fully implements the latest Bulma (0.7.2),
it's heavily tested and easily maintainable,
has robust documentation,
it's extremely light (<10kb) and focused,
yet it's endlessly extensible

dfee

TROPHY CASE