Jason Leow

Wow they really like them Carrd templates!

* Snackbar for comments to slide in from left
* 100-word char limit for goal title
* Optimized comment+notif posting
* Hide draft goals

"What does a perfectly productive day look like for you?"

Optimized it by:

* Making the functions run asynchronously in parallel (instead of synchronously one after another). Removed `async await` in the composite function postCommentAndNotif()

* Passing `this.content` as a param into all 3 nested functions within postCommentAndNotif(), before updating `this.content = ' '` to clear text input in comment textarea. Because "When you pass it as a parameter to the function it basically creates a copy of it. So if you change this.content the function will still have their own contentData variable" - kudos to @keenencharles for this! 🍻

Feedback from @Lobacrow: I think goals should serve the goal setter first and foremost. 20 characters is pretty stringent. I'm not saying no limit, I just think that one is quite low. Now I'm wasting time figuring out how to name my goal in 20 characters instead of writing about it.

Jason: I like your point that the goals should serve the user. Though we gotta draw the line somewhere though, so it will never be 'enough' to suit everyone's preferences, so to speak. (Reminds me of the twitter char limit debate) When I set it to 20, i was coming from the perspective of wanting to keep things less cluttered and easier to scan, for a cleaner visual exp for everyone.

But separately I already truncate the text in the goal tags, so that serves the objective already. Longer goal titles in the profile page looks acceptable. So yeah, don't see why I need that low char limit now. Will raise it to 100 then - should be more than enough. Fits all the longer goal titles we have right now.

Found that putting the confirmation message as close to the comment box is ideal (less eye tracking effort needed). So it will now fade in/out from left. Thanks @Lobacrow for pointing out the visual disjointedness previously!

For those who broke their streak but come back all the time. We have quite a few master streak-breakers in the community, and this might be great to celebrate their ability to bounce back, their Resilience (proposed name of upcoming badge). Interestingly the streak algorithm already has that data, just that I never thought it'll be interesting to show.

To prevent goals in draft mode from showing up in the Featured Goals sidebar, as per request of @brianball. Had to tweak the SQL query (that fetches data for Featured Goals), by adding the IS NOT NULL statement:

WHERE g.published_at IS NOT NULL

I realised I can just unpublish goals and turn them to draft mode. So the goals, the relations etc are all still saved in the db, but it won't show up anywhere now, even for the logged in user. That way the user can choose to switch them back on when the goals edit feature is up...

Found #amwriting #writingcommunity hashtags on Twitter.

"I find that as I whittle down all the tiny little things that drink from my day’s limited pool of cognitive capacity and willpower, I have just that little more available for the things that really matter – my work, my health, my happiness, my family, my goals. And that’s all that matters."

Having fun adding animations and transitions to the site! Improves the UX just that bit more.

Ref: https://www.w3schools.com/howto/howto_js_snackbar.asp

Moved `this.content = ''` (which clears input text from the comment textarea) from postComment() to the composite function, and added async await to ensure all 3 methods are called (and data sent) on click, before clearing the text input in comment textarea.

"Sometimes constraints help more than it hinders. In this case, narrowing down the distractions to the minimum, to focus on what matters."

I think I got the steps roughly figured out, without using packages:

📝 Create autocomplete component that pulls data from API endpoint for showing autocomplete suggestions
* https://www.digitalocean.com/community/tutorials/vuejs-vue-autocomplete-component
* https://www.fareez.info/blog/create-your-own-autocomplete-using-vuejs-2/
* https://codepen.io/alligatorio/pen/XZoXqy

🔗 Create function using .replace regex to add anchor link to @mentions in body text
* https://stackoverflow.com/questions/62733767/how-to-change-users-mentioned-to-a-html-a-tag-in-a-post-vue-node

👋 Create function using .match regex to detect @mention on body text, and then POST notifications to @mention users
* https://stackoverflow.com/questions/62730022/how-to-extract-users-mentioned-in-a-post-vue-node

The next clone will be a paid template! 🤑

Prioritizing via the ABCDE method:
A - major consequences
B - minor consequences
C - little/no consequences
D - delegate out
E - eliminate, never again

Instructions for use: Categorize your goals and tasks based on the spectrum of how big the consequences are of not completing them. Then focus on the As and Bs, the mission-critical things that really move the needle.

Notification bell on the navbar is easy to miss. For those seeing it for the first time, it just shows a number without context. Changed the design to persist the bell icon, but added a red number notification badge (ala iPhone style) with an animated wobble for visual signalling. Thanks to Ben Parry for highlighting that!