📣 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!
• 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!
![](https://makerlog-cdn.nyc3.digitaloceanspaces.com/task-attachments/clsfe4pux00hb22w80bn0he5w.png)
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
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
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...
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...
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...
Added bio to /profile page
Fixed right margin of avatars on /roadmap
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.
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.
• 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.
![](https://makerlog-cdn.nyc3.digitaloceanspaces.com/task-attachments/clsfe72k000ie22w84tjl69cp.png)
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
• 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
* 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
![](https://makerlog-cdn.nyc3.digitaloceanspaces.com/avatars/clsf3n55103sa1xsb5ewceuw4.jpeg)
Jason Leow
Author
@FaizMetronome thank you! Perseverance indeed… never took this long with a feature (~2wks)
![](https://makerlog-cdn.nyc3.digitaloceanspaces.com/avatars/clsf3n55103sa1xsb5ewceuw4.jpeg)
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%;
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
-- 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
Made a demo to show a responsive header nav bar and scroll-to-top floating button on Carrd sites - https://navbar.carrd.co/
![](https://makerlog-cdn.nyc3.digitaloceanspaces.com/task-attachments/clsgbjzgz00p2131i1lbf46xy.png)