TJL #23: Building Wedje (part 2)
Also: Do I need Redux, a milestone, and everything I googled.
Welcome back to Today Jan Learned (TJL) #22. In this newsletter I share the best of what others have figured out already. To get the full TJL experience, subscribe today.
What you might’ve missed:
TJL #21: Three small things: In this post I rambled about time, product, and a small idea that I had. In this post, I try to explore this idea a little bit more in further detail.
TJL #22: Building Wedje (part 1): In my previous post I explored the app idea from TJL #21 a bit more with some initial mockups. This post explores and builds out some of these ideas even further.
In this post I make an initial prototype based on the designs of yesterday’s post. Also in this post:
Introduction
Data flow
Do I really need Redux?
Milestone 1 🎉
Everything I googled
Landing page mockup
Introduction
Just a short recap. In my two previous TJLs which you can find here and here I talked about a small app idea that I had.
This is in part inspired by this blog post called How To Do What You Want from the Messy Matters blog. The author dares himself to write a post every month. If a user catches him slipping by tweeting a screenshot of the homepage of the blog without a new post on the first date of the month, you get $5000.
The basic premise behind this is that you’re more likely to do something if you have some skin in the game. That is, if you have something to lose.
Saying that you’re going to do something is somewhat credible.
Saying that you’re going to do something, giving me $5000 dollars with the instructions of keeping it when I don’t do it, now that’s credible.
Data flow
I don’t know if it’s true, but I have this gut feel that writing out the data flow on paper might prove beneficial in the future.
(Am I secretly flexing with my new Happy Hacking Keyboard (HHKB) Professional Hybrid Topre keyboard that I recently bought? Who knows.)
This is what I came up with so far:
Individual commits:
Name
Date
Stake
Supervisor
Perhaps we also need some auxiliary elements like a unique hash key for each commit, but that can come later.
We also have the total list of commitments.
commitment #1
Name
Date
Stake
Supervisor
commitment #2
etc.
Do I really need Redux?
If you don’t know what Redux is, forget about this section.
Redux is a “state management library” for JS applications. It allows you to basically build a “database” for your application, but it is quite complex and has a big overhead. It is usually only necessary for really big projects where state can be really messy.
I was very tempted to use Redux because I’ve been aching for an excuse to use it. However, after reading this article I decided not to.
Let’s start simple. If we turn out to need Redux, then well, shit. Lesson learned I guess.
(I also learned today that React’s data flows only one way, which makes it really fast, but also annoying to work with sometimes.)
Milestone 1 🎉
I thought it would be nice to set a milestone and came up with the following requirements (god I hate that word 🤢):
Expo init application
Add button that allows us to add commitments
Default list of commitments (mock data)
Default commitment to add (mock data)
Rendering of commitment list
Building this wasn’t that complicated actually. It took me roughly 25 minutes to whip up something like this.
Building something is so much easier when you know what to build.
Then I spent another 25 minutes or so whipping up this neat button and fiddling with the positioning.
For some reason my button was not working (not triggering a re-render).
If you are interested in the (not so cool) details, check out Bonus #1.
That’s it so far! I think the next steps are to build a navbar on top and to perhaps work on the navigation between screens. I found this navbar which might be useful.
Everything I googled
I thought it would be funny to include everything that I googled while building this.
Spoiler alert: it’s a lot:
Rendering array of data map and jsx
make text bold react-native
set width 100 percent react-native
padding between elements react-native
align text in button react-native
pass state to button react-native
generate random int javascript
set scrollview react-native
npm uninstall package
remove scrollbar scrollview react-native
Landing page mockup
Was fiddling with a landing page but it wouldn’t save, so I’m saving it here. I was thinking something along the lines of this bold style but then with our app in half a screen on the background maybe.
Recap
Today we worked on the data flow, landing page, and an initial mockup expo which shows some simple data views. Next up is the core logic of adding and subtracting goals!
Previous TJLs
Read my previous TJLs by following on the links down below:
TJL #6: How to remember the difference between margin and padding
TJL #7: According to Jeff Bezos there are two types of failure
Bonus #1: I’m an idiot
As it turns out I wasn’t using the state at all! I was still using the mock data that I created earlier somewhere. Oops!
Bonus #2: How to write a warm email
I got this email today and felt it was really well written. Short. Snappy. To the point. Love it.
Hi Jan,
I received your contact details from REDACTED.
Quick introduction, my name is REDACTED, and I am an REDACTED in our company.
I'm currently on a time critical project that requires some advice on REDACTED.
Do you have anyone available with this skillset, that can also spend a short 30min. chat with me today, tomorrow, or Wednesday.
If not, maybe you can still help me by sending me in the right direction where I can find someone like that.
Cheers,
REDACTED