skidding

Updated the project description roughly to this. You're part of the Cosmos story now – Cheers! :)

Couldn't have said it better myself, thank you!

Done! :)

https://reactcosmos.org

Wow, author of Cosmos here. For the record I didn't post this. So thanks to OP and everyone who upvoted. It's cool that Cosmos still generates new interest after so many years.

Yes, Cosmos is very similar to Storybook. It's also older, and I'm only saying this because I'm tired of getting asked how does it differ. Both projects provide an isolated component environment to help tackle complexity in single page apps. The difference boils down to setup compatibility and personal taste.

I'm not gonna lie, some of the comments are tough to process, but what can you do. I still appreciate all feedback and as usual I'll try to incorporate it as best as I can.

it seems like this creates a webpage that you can use to speed up iteration on your components?

Pretty accurate. Cosmos is an isolated component environment. You can load components separately for regular development, as well as for automated visual regression testing.

What else does this do? What problem does it solve? How does it solve that? Saying it solves "Reusable components" is pretty generic, could use some expansion on how it actually helps in this regard.

I get that it's confusing, but the landing page literally addresses this:

- "Develop one component at a time. Isolate the UI you're working on and iterate quickly. Reloading your whole app on every change is slowing you down!"

- "Bookmark component states, from blank states to edge cases. Your component library keeps you organized and provides a solid foundation of test cases."

Scroll down and it goes into more detail in 6 concise paragraphs.

The live demo doesn't really work on mobile

That's true. But you can't really develop React apps on mobile either. React Cosmos is desktop dev tool that you run locally as part of your codebase.

Right next to the demo, however, there's a link to a 21-tweet thread with specific functionality, code examples and visuals included: https://twitter.com/ReactCosmos/status/1189127279533793281

It _is_ the same project though, hugely improved.

I'm not going to use a project that cares more about "hype" than about delivering value

I can assure you I care a lot more about delivering value than hype. I spent countless hours (from my personal time) over the last 6 years on making React Cosmos easy to use and compatible with as many codebase configurations as possible, and maybe two weeks on the website.

The project README explains what the project does and what it doesn't: https://github.com/react-cosmos/react-cosmos/blob/main/READM...

There is an open thread about website feedback, and I agree I could've done a better job and there is still room for improvement: https://github.com/react-cosmos/react-cosmos/issues/1111

It's about React Cosmos specifically.

https://twitter.com/dan_abramov/status/600354123372965888

Totally agree, like I said I also avoid defaults exports (for the same reasons). But I'm fine with default exports in fixtures because you never import them by hand, they are picked up automatically by React Cosmos. And you can customize no-default-export rules to ignore fixture files.

I generally avoid defaults exports as well but didn't realize some codebases disable them completely. What do you mean by "non-default-exporting" TSX files, can you provide a link?

Perhaps adding shim files that import the component and re-export as default?

Definitely, you could add a transform to the Cosmos build pipeline that renames some named export to default. If you're willing to write the transform I'll gladly help you integrate it.

Update: I made some perf optimizations unrelated to animations. Essentially preventing needless component updates. Feels smoother on my end.

Let me know if you see any improvement: https://jobs-done.now.sh

The first version did! But I removed it because I didn't want Blizzard to take me down for copyright infringement, haha. And to be honest it was getting annnoying while I was working on the app cause I heard it dozens of times a day.

But Heartstone? Ha! Go back in time another 12 years.

I used to play Warcraft III in highschool and that sound stuck with me for sure.

I fixed some Firefox & Safari issues in the meantime, and added more browser polyfills. If you have the chance let me know if you see any improvement on your side after clearing the cache. Thanks!

No shame in admitting this. I still struggle with it. Computers are very effective at messing up our sleep function.

Happy to hear you're giving Jobs Done a try. Note that you can customize the steps, set phrase and suggested activities by cloning the repo, editing data.js, building and publishing the static build with a service like https://zeit.co/now or https://surge.sh (free).

Good luck!

Those custom notebooks sound cool!

Deep Work reads like a lightweight book but impact of its practices are huge. Glad to see other people who found it useful.

Thanks!

Oh I love Workflowy. I manage my life using it!

Thanks! I think the scope of this app is too limited to monetise. Happy to see it grow as an open source project for now. But hopefully this sort of exposure (and building experience) will increase my chanses of finding customers when I focus on a paid app/service.

Congrats!

When I travel my life looks more interesting, but when I settle in one place for a while to focus on work (current situation) I often fail to schedule my personal life. Definitely an area I can improve.

Is it not possible to bookmark web pages on the home screen on iOS?

PWAs play nicely like this on Android, which is what I'm using atm. I'm actually planning to switch back to iOS soon but not being able to have web app shortcuts on my home page would be a bummer!

I agree the book teaches many useful concepts!

OP: cool looking app, it’s really nicely done. Was this a “teach myself a language” sort of project? If not, what was the motivation? [Edit: just seen your comment below.]

Thanks! A combination of learning RN and adopting Deep Work principles by building something around it --- my favorite type of learning, albeit time consuming :).

Do the official react-native-web examples work OK on Win10/Chrome70? http://necolas.github.io/react-native-web/examples/

You should definitely give react-native-web a look. I've had a good experience with it and the only issue is animation. I don't know how any UI animation lib can match the performance of hardware accelerated CSS transitions btw. As soon as you have to run user code on every frame things go south.

Of course I'd love to be proven wrong and shown what animation optimizations I missed in my code.

I haven't heard of Capacitor yet, but I've used Cordova in the past. Is it a big improvement?

Yes!

Yes. This is what I meant with "for the most part".

So I first made the app web-only, which is what I know best. Used CSS animations and they were smooth!

Then converted the project to React Native (because I wanted to learn how to make a RN app). But because I wanted to keep using the web app I used react-native-web, which had also been intriguing me for some time.

Result? Animations became much slower! react-native-web basically polyfills RN's Animated library [0], so maybe it's not very optimal. But to be honest, even when running the native app the animations seem janky (tried on Android via Expo and on iOS simulator).

So react-native-web is a great project, but I'll likely not use it again for a similar project. I'm a web believer anyway, so I'll probably do just web apps going forward unless some use case really benefits from native APIs.

[0] I never looked at the source but I assume the code for web animations is here https://github.com/necolas/react-native-web/tree/3fa18becc76...

Pretty much.

The activities part is very experimental. I basically realised that I suck at planning my evenings and it's hard to disconnect unless a pasttime activity draws you in and shifts your focus.

That said, definitely looking for suggestions. Maybe a reminder to "plan evening activities for the following days" might be more suited than "ideas for what to do NOW".

See my related comment: https://news.ycombinator.com/item?id=18339840

I guess it's sad but true :)

Probably only applies to single people, though.

I have to say I've gotten much better at avoiding overworking myself lately, but evenings are still an issue (again, probably only relevant for single people).

The suggestions I've added help but not entirely, as evenings usually have to be planned in advance (you can't just summon friends at 5:59pm).

Going through these activity suggestions daily helps me in two ways: 1) it reminds me what a true afterhours activity looks like (ie. not more work stuff desguised as leisure) and 2) it reminds me to plan ahead my evenings in the near future.

Hey, Ovidiu the author here.

So how could this be interesting to you?

The app

I read a book called Deep Work to improve the quality of my work and found the simple "shutdown ritual" idea powerful. I started with a dead simple list that I went through every evening to clear my mind and disconnect from work.

Then I decided to build a simple app and keep iterating in small increments every day I also use the app. After about 2mo I use it daily and it looks good enough to draw a line. So I made it public in case anyone else finds it useful.

The codebase

Meanwhile, I wanted to learn React Native and try react-native-web. I also wanted to see how well styled-components behaves "unversally" and how to do server-side-rendering with RNW. It worked pretty well (for the most part...) and I learned a lot.

If you're interested in this tech stack I encourage you to dig through the codebase and maybe run it locally to get a feel.

If you have any questions related to the app or the codebase, fire away. I'll answer gladly!

Hey, auther here.

I posted the first version of this a few months ago, but I've now revamped the website and added examples with https://github.com/kentcdodds/react-testing-library, which I discovered recently and like a lot!

Also new are examples of using https://github.com/skidding/react-mock, released just a week ago.

Finally, rewrote the about page to explain the project's goals better and made the repo more contributor friendly.

Let me know what you think!

On a much smaller scale, also https://github.com/skidding/illustrated-algorithms