Decoding Coding

2019 till present bucket list - learning how to code. HMTL, CSS, JS, jQuery, Bootstrap, PHP, MySQL, Ruby on Rails, JAMstack, Gatsby, Vue, Nuxt

Upgraded database in Heroku

Reached the 10k row limit on the Hobby Dev tier pretty fast! Not even 1 year yet for Lifelog. Had to upgrade to Hobby Basic US$9/m for 10M rows now. Let's hope it lasts!

Had sweaty palms and butterflies doing this! Backend dev work is just not my forte. πŸ˜“

πŸ“£ Added frequent updates banner on home page

β€’ Added a red banner for when site is down
β€’ Added an announcements info banner for updates/announcements (since many seem to be not getting updates from Telegram)
β€’ All this is controlled via a Google Sheet! No need to deploy code changes to update the banner, especially during emergencies when the site is down. All I need is to edit the cell value in the Google Sheets table to push out an announcement!

Successfully integrated Notifyxf bot to send notifications to myself whenever I post!

It just works for myself for now. I'll get a message from the Notifyxf bot whenever I post for the day.

That way, if I ever forgot if I had written for the day, I just need to check the message thread from the bot.

But can't send to other users yet. Feature not available on Notifyxf. πŸ€” Should I make my own?

https://dev.to/rgthree/personal-telegram-bot-for-alerting-your-phone-w-o-code-1oih

Played around with adding pushmore.io and notifyxf bot so that I can get a Telegram notification when I post for the day

BUT hit CORS error with pushmore bot. The POST request sends OK in Insomnia. Debugging...

Notifyxf by @jasontxf went fine. Was sending messages to myself in Telegram within minutes! But wondering how to send it to others now, other than me.
https://getmakerlog.com/products/notifyxf

Tried to fix an elusive Vue warn error but couldn't pin in down

Not sure why this popped up when navigating FROM profile/_index page.

Error is 'id' of undefined. Likely culprit is the `this.user` variable, where value is tied to the `this.$route.params.profile`, which doesn't work when you navigate off the profile page.

But since I'm off the profile page, why does it matter? Best guess: Nuxt keeps alive the profile page data somehow...

Fixed new bug where comment didn't appear on comment thread after posting

So the latest deployment introduced new bugs to otherwise working functions!

sortedComments() is a computed property, and using a variable which is the result of a mounted method won't work in computed. The variable won't be reactive. Hence when I post a comment, it won't auto refresh and show the comment. Had to stop using the method, move the forEach() and push() to asyncData instead, and add the `accounts` data into the `post.comments` array directly BEFORE it goes to computed.

I'm still not sure why it didn't work on Vue/Nuxt, just know this is the case...

Quickly fixed bug on profile page where profile image wasn't rendering in public view

Of course it can't be so smooth...!

Fixed bug in fetchAcc() GET request for account details of user of profile page - should not have used loggedInUser object as that would only show the profile image when authenticated.

πŸ›¬ Deployed the new profile image feature to Heroku, and it went smoothly without a hitch...a MIRACLE!

β€’ Added profile images feature to entire site.
β€’ Added new timezone field to registration pg.
β€’ Created new TimezoneRegister component which I never used.
β€’ Added new writing prompts to PostsLists, write pg.
β€’ Retired old posts.custom endpoint, replaced with new accounts endpoint instead.
β€’ Updated roadmap.

Double checked that all the GET requests for individual `account` is using the account id instead of author id

β€’ Checked through code from past 3 weeks
β€’ Updated roadmap
β€’ git commit all the changes
β€’ get ready to deploy by planning the tricky steps needed this time

Retired old custom endpoint in posts/_slug page, replaced with new accounts endpoint instead

With this, the old endpoint is retired for good.

Discovered and played around with Debuggex - love how it visualizes your regex!

https://www.debuggex.com/

😡 F**KING FINALLY. The DIY @mention autocomplete feature is complete. Managed to find a way to track xy coords of caret in textarea, so that the dropdown tooltip will pop up just under the text when user types "@"

That was some crazy Javascript gymnastics. As imperative programming as it can get. Some dev notes on how I did it so that I can remember:

* Create a separate (invisible) element and fill it with textarea content from start to the cursor position. This 'clone' is for making measurements, using Element.getClientRects(). What's important is that it's an inline element, because each line has it's own boundary within a multiline paragraph.
* Textarea and the clone should have matching CSS (font properties, padding/margin/border and width).
* Then stack these elements on top of each other. Make sure the textarea isn't obscured by clone.
* The "xy" div is meant to mirror the cursor, just an indicator for testing. Also where the tooltip is anchored to.

Find code here:
https://codepen.io/jasonleow/pen/jOVaeXd
Jason Leow Author

@FaizMetronome thank you! Perseverance indeed… never took this long with a feature (~2wks)

0 Likes
Jason Leow Author

Thanks @sergio @okitsjoe!

0 Likes

Revert comments thread back to asc order (oldest on top, to newest at bottom) because it's a conversation, not a news feed! Insight to user behaviour from chatting on Telegram group

Fixed background-image to be responsive on mobile

background-size: cover;
width: auto;
height: 100%;

Facing my HARDEST bug yet. Stayed up 4am the night before, tried fixing it the whole day today, but no luck

🀬🀬🀬 Who else was screwed over for a few hours by Github's recent change to switch from username+password to personal access token for auth (when using Git to remote push in terminal)? So many error messages that led to nowhere and lots and lots of pointless searching dammit...only to discover a quiet little email from Github saying it's been depreciated

Solution (for Macs):
-- Create a personal access token in your Github account
-- Open Keychain Access in your Mac, find github item in the table, change the password to the PAT
-- go back to VSCode or terminal to remote push and voila!

Ref:
https://docs.github.com/en/free-pro-team@latest/github/getting-started-with-github/set-up-git#next-steps-authenticating-with-github-from-git

https://docs.github.com/en/free-pro-team@latest/github/authenticating-to-github/creating-a-personal-access-token

https://docs.github.com/en/free-pro-team@latest/github/using-git/updating-credentials-from-the-macos-keychain

Refreshing Nuxt fundamentals before the next sprint for my frontend!

😎 Wow... managed to show code on page using escaped HTML and copy to clipboard the unescaped HTML https://codepen.io/jasonleow/pen/dyXwWOW

Researching about nocode &/or code web scraping, proxy bots, cron jobs

Researched membership mgt/subscription and auth solutions - Memberstack, Memberspace, Memberful, Meber365, and Pico. Decided to try Pico since free for first 500 users and pricing is most competitive until 2500 users (after which Memberstack is better) - https://trypico.com/

Trying to figure out how to copy to clipboard the escaped HTML of my Vue app as displayed in the DOM (yes, WITH all the tags and divs)

Moving out of browsing just Vue repos to all the cool shit that's done on Codepen using just CSS, or vanilla JS. I think as I like coding more and more, the fear that comes with looking at and playing with other langs/frameworks decreases too