[skidding]

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!

[mattlondon]

How are the animations done? They are pretty janky and horrible on Firefox 63, so I am guessing they are not using normal CSS animations?

I've not used react or react-native so not sure how it handles this.

[skidding]

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...

[servercobra]

Thanks for the rundown. I've been considering react-native-web, and I'll still give it a look personally, but I had concerns that this is how an app would turn out (minor jank in hard to fix spots).

I'm very excited for Capacitor's support for React coming soon! It seems pretty awesome with Angular, so I'm hoping supporting React provides the same experience.

[skidding]

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?

[skidding]

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

[dvnguyen]

Hey, cool project!

I haven't read the book. Is that possible to understand the idea without reading the book?

[jen729w]

The book is worth a read. Don’t forget about your local library!

The end-of-day shutdown is just that. You put your work day in order, you make sure your papers are tidy, you check what you need to do tomorrow (no nasty surprises) and perhaps a few days ahead, then you actually say, out loud, “shutdown complete”.

It’s supposed to help separate your day of (deep) work from your time off. I like the idea but – ha! – never remember to do it.

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.]

[spappal]

I agree that Deep Work is worth a read. Quite a few meaningful ideas in quite few pages. The end-of-day shutdown is one of the ideas that stuck in me. After a workday my mind is usually buzzing a bit too much for most activities. Focusing on winding down helps very much. Having accepted the point made by the author in combination with it being such a small thing to say the phrase when walking from work means that I often remember to say the phrase and then instantly accept that I should focus the last drops of work-related attention on disconnecting from work in a good way. Helps me a lot!

[skidding]

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 :).

[tga]

You can find notes on the book (most relevant ideas really) at https://sivers.org/book/DeepWork