Jason Leow

Wow this feature is turning out harder than expected, and a lot more work across multiple files. Poor tech estimation again! Need to get better at this.

• Optimised First Joined and Top Streaks leaderboards (using the fetchCurrentStreaks() function) to use data from asyncData() instead, thus making first paint faster
• removed fetchAccAll() from mounted() since no longer necessary
• Had to match profileImg to authors in fetchLongestStreaks() fetchMostStreaks() functions

Next: wrangling with the code for Most Goals, Most Comments and Most Posts!

“I’ve had a lot of worries in my life, most of which never happened.” - Mark Twain

Fear-setting: It’s like a darker but necessary twin to goal setting. Just as we plan for goals by imagining the best possible future, we face our fears by identifying it as a worse-off possible future. Both require planning. Both needs a hearty dose of grounded reality, versus imagined pain or rewards.

Set your fears, to set them free.

My problem had been I had 3 types of data, and I want to show different profile image with different data.

- user with account and profile image url - render `streak.profileImg`

- user with account but no profile image url, use `streak.author.id` to render robovatar

- user without account, use `streak.author` (notice it's different!) to render robovatar

I could v-if the first 2 using `v-if="streak.profileImg"` and `v-else-if="streak.profileImg == '' || streak.profileImg == null" respectively, but the 3rd one somehow doesnt work using `v-else` or `v-else-if="!streak.profileImg"`.

In the end for 3rd one I found a hack:

`v-if="typeof `${streak.author}` === 'string'"` because only for users without account their `author` data is a string(`"11"`), not an `Object`.

What is something that for a long time you thought was essential, but once you stopped doing it, you realized everything was just fine without it? ~ @stephsmithio

Things I stopped seeing as essential:

A job (being employed)
Giving birth in a hospital
Carbs - bread, rice, noodles
Being polite and nice
Finding your one true passion
Being a night owl
Having children (but I had one anyway)
Getting married (but got married anyway)
......

Working on changing my mind about it:
Shampoo
Being lazy
Not equating hard work with self-worth
......

Can't believe I spent the whole day trying to debug this bugger! Weird data rendering bug on Vue.

---

When I tried to access .profileImg data in my template, it renders as [object Object]. Right now, the profile images for is rendering `...roboharsh.org/[object Object]` in the template... why???

Say as he said, “I still understand little, but I’m capable of accomplishing a lot.”

So now I should instead say, “Thinking back, I don’t think I can do that much, but I believe I’m capable of achieving a lot, despite that.”

Humble about past, conservative about your previous achievements, yet optimistic about the future, bullish about what you can achieve.

It might not be as much as I thought, but it can still be a lot nonetheless.

My solution for profile images on the /community page only works because I assumed the index position for my accDetailsAll and author.id are aligned. But they are not in the production db, because I had deleted users before. For index position 4 now has author id of 10. The hack of using `....- 1` doesn't work anymore.

Back to the drawing board!

Spent the whole morning trying to using a method in a v-if nested within a v-for
`v-if="getProfileImg(streak.author)"`
but it ended up creating an infinite loop 😵

Will try map() within a method instead and push() the profileImg data to the array for v-for

Just as code scales your productivity and your work, helping you automate tasks or do them faster/easier, content scales your networking, helping you make friends and connect to business acquaintances while you sleep, at scale.

• Added additional v-if="accDetails" to

profile image, in case a particular account doesn't exist in the data table - to prevent error when at the next v-if="accDetails.profileImg lower down the template (if account doesn't exist, accDetails would be undefined and .profileImg would be trying to read from an undefined variable, which will result in an error)

• Added additional v-else to show robo avatar if account indeed doesn't exist

• Overall, the logic looks like this:
--- v-if - if account exists
------ v-if - if image is null or empty, show robo
------ v-else - if image exists, show image
--- v-else - if account doesn't exist, show robo

• also added try {} catch {} to the function for the accDetails endpoint to prevent error from stopping the page from rendering

I'd been mistaken how javascript operators work, like == ||

The logic: if variable is either null or empty, then do this.

❌ v-if="accDetails.profileImg == null || ''"
❌ v-if="accDetails.profileImg == (null || '')"
✅ v-if="accDetails.profileImg == null || accDetails.profileImg == ''"

Solution: Had to wrap a v-if to check if accDetailsAll[streak.author] exists before checking with another v-if for .profileImg

------

Penning down my approach for this feature, for future reference:
• accDetailsAll will contain all authors details. Their position in the index will match their author id.
• streaks only return authors with streaks, but it comes with author id too.
• so by accDetailsAll[streak.author - 1], I'm using the streak author id to find the correct index position of the author details in the array
• Downside of this approach is: if a user delete his account, the index position of accDetailsAll will be messed up. Would PostgresQL skip id numbers too in their tables?

Why does this happen (Vue.js)?

I get a good response when i console log a variable in my mounted() function:

console.log(this.accDetailsAll[1].profileImg)

But when I access the same in my template in the html, it gives an error "Cannot read property 'profileImg' of undefined"

{{ accDetailsAll[1].profileImg }}

----

It checks if the value exists before rendering it. So when the method on mounted() finished, data becomes available, and it will get printed. On load, before data is available it will be hidden. Because of async function, that array is empty when it’s loaded. Async doesn’t wait.. it lets your code run. It works on the console because you use await which wait for the call to finish. But on template, you tried to access it directly.

Another way if you don’t want to add v-if is to construct your array object in data when you initialize it:
accDetailsAll: [ profileImg: '' ]

So the structure is always there. But if you work with API, you don’t want to prepare all the attributes on your component. This construct approach will be hard to maintain, because one more thing to update if the API changes. Using v-if is better.

I thought because I added await in the function, when i access it in the template, it will wait till the data is loaded..
It will wait in the function.. not on the template. If you use asyncData, then this is ok because it’s processed before page is loaded.

One hour is one hour is one hour. But how productive you are within that one hour, really comes down to the energy level you bring to the tasks within that hour.

One hour immediately after you wake up feeling fresh and alert from a good night’s sleep, is a very different one hour after a heavy lunch of too much spaghetti and meatballs.

Energy management > time management

Productivity is not about how you manage your time, but how you manage your energy.

• Thought I had to remove Bootstrap CDN, but the solution ended up being so simple: just add 1 line of CSS for hr height: 4rem
• Uploaded new version to Flurly product page
• Replied and sent code solution to customer who pointed it out

Reflection: Selling code snippets is like running multiple nano-SaaS! Each code snippet has bugs to debug, need tech support, each has its own changelog, etc. 😓

Useful checklist:

Product-market fit: When a product is providing value to a big enough group of customers.

Founder-market fit / Product-founder fit: When the experience and expertise of a founder is suited to creating a product for the relevant market.

Business model-market fit: When the business model of a product gains traction by showing consistent revenue retention, and scalable sales/marketing/customer acquisition.

Founder-future fit: When the insight/vision that a founder has for the future is right on aligned to present trends of disruption.