Jason Leow

Learned about watchers on Vue, set up one for the textarea. Borrowed code from another project on Codepen. Progress now: It filters for the username as I type "@..." now, but if I backspace, the selection is stuck on the last username. Only refreshing the page resets it. At least...

"Sure, there’s always an easier, faster, better, more popular way to do things. But occasionally, just occasionally, it’s also fun to play Survivor. Throw in some artificial constraints, up the ante, get out of that comfort zone and see how far can you go.

Just for the heck of it."

I tried using a div instead of a ul-li element but that didnt work.Tried using a select element that is focusable but also didn't quite work in terms of the enter key repeating the username.

Tried a different approach inspired by the ternary conditional. Used a function to listen to the tooltip list, if it's visible, then switch on the text insert function. And it worked!!!

listenEnter() {
const visibleList = document.getElementById("usernamesList").style.visibility;
if (visibleList === "visible") {
return this.onEnter();
} else {
return null;
}
},

https://codepen.io/jasonleow/pen/eYBERMV

Now for the last part haha.. autocomplete search through username list as the user types...😫

Managed to insert username either using mouse click or enter key. Yass! The key piece of code was discovering selectionStart, selectionEnd and setRangeText for html input elements, in order to be able to insert the @username into textarea when user hits the @ key and selects a username from a dropdown list tooltip. Another key part was using $refs in Vue.js to directly access the DOM element of the textarea. (Thanks to @yuyu!)

typeInTextarea(el, newText) {
const [start, end] = [el.selectionStart, el.selectionEnd]
el.setRangeText(newText, start, end, 'select')
},

But now I got an issue with the enter key. When I press enter again after inserting username, instead of adding a new line/carriage return, it inserts the username again (and again and again when I hit enter)! So basically using the enter key for adding a new line is completely shot now. 😵

Found ref, described the @mention functions needed perfectly: https://medium.com/streak-developer-blog/the-complexities-of-implementing-inline-autocomplete-for-content-editables-e358c0ed504b

"No wonder I wasn’t any good with marketing, because I just want to talk about the shiny stuff! I assumed that the basics were boring to my customers because I found them boring myself. Huge blindspot there, thankfully spotted early..."

New search words for #sweetjamsites - "wordpress sucks", "jamstack", "wordpress vs jamstack"

Not sure why I only discovered this marketing hack for Twitter just yesterday, but I could have just searched for key words for my potential customers (eg frustrated Wordpress site owners, or those into daily writing habits) and then reply tweet to these folks for organic sharing, cold marketing!

Having FUN seems key. Just have fun chatting, riffing, with like-minded (re: writing habits) folks.

Probably wrote the most complicated function ever yet. In fact, over a few functions. Writing it down to remember the lessons:

* detect @ in the username text input inside a textarea, using regex .match(/@\w+/g), and then using map() and substring() to put them into an array without the @ prefix. Mount and watch this function to detect @ as the user types.

* because there's some data from 2 endpoints that needs to be prefetched for the next function to work and I didn't want to figure out how to synchronously chain that data fetching to the @submit event, I wrote a function that runs when user clicks on textarea, using @focus. That way the data is ready way before the comment is submitted.

* then comes the actual function to POST the @mention notifications. Use filter-includes-map or forEach-if-push to create an array of user ids from the username array from the 1st step. Then map() and for() loop through each of these user ids to run the POST request, including 3 if-else-if conditions to prevent double notifications. The hard part was how to compare an array to another array within a if condition! But I realised I just needed a boolean true/false from array2.includes(element) with the element from array1.map(element => ...)

Every morning at 5am, the first thing I do when I sit down at my workspace is to verbalize my $5k MRR goal to myself.....

“I’ll learn my way towards $5k MRR by end 2021. In return, I’ll have fun growing my indie products, and adhere to a happy, healthy habit system. And I’ll surrender.”

I went into this thinking that it’s a way for me to visualize my goal......But two weeks on, I’m discovering a different reason, a better reason. It’s really for introspection, to reflect if I had diligently studied and put into practice what I claim to aspire towards. First thing in the morning, without distractions, mind clear, room quiet. Nothing to run away to or from. Just plain witnessing, a mirror check on the integrity of my actions to my word. It’s not easy, for sure.

I want to compare the 2 arrays arr1 and arr2, and only return the objects where the values for username match. And then filter out only the ids of these matching objects in arr2 into a new array (arr3). I'm using arr3 to POST out the notifications.

forEach() - if() - push()
OR
filter() - includes() - map()

Liking and following folks
Just chatting casually
Offering tips and hacks
RT to amplify and help

If the path before you is clear, you’re probably on someone else’s. ~ Joseph Campbell

// After 3.5 seconds, add style display:'none' to snackbar

setTimeout(function () {
document.getElementById('snackbar').style.display = 'none'
}, 3500)

I’d been researching and asking around for more resources and material to get deeper on learning about money, marketing and monetization for Fund Feb.

Here’s the one relevant to indie hackers that I’m excited to get into:

Marketing Examples
https://marketingexamples.com/

Indie Hackers Growth Bites
https://www.indiehackers.com/growth-bites

Growth Examples
https://growthexamples.com/

Zero To Sold
https://thebootstrappedfounder.com/zero-to-sold/

Make book
https://makebook.io/
https://dariusforoux.com/stoic-path-to-wealth/

Side Hustle Stack
https://sidehustlestack.co/

Other resources, communities, podcasts and Clubhouse rooms about marketing
Also looking out for more great content, especially podcasts. Found a few Clubhouse rooms about marketing, will probably check them out if they’re just sleazy scams or the real deal.

Anything else I missed?

This feels really difficult (to me). Wondering if i should just install a package and be done with it, or if I'm missing something/doing something wrong that's making it so difficult (and that it's actually easier than it seems to me). As a first principle, I'd tried as much as possible to make my own components to reduce dependencies, but am wondering if my situation is at the technical threshold where installing package just makes more sense...

Reviewed cost per click for ads promoting website vs send message to bot: S$0.64 vs $12.29 ! Crazy! Good learning. Now to optimize on the former. And WOW, with the Ads app, it's so easy to create/re-start ads. Impressed but also slightly concerned.

Relevant hashtags and search terms found:

writing habit
#ship30for30
#200wordsaday
#amwriting
#writingcommunity

Steps: Go for Top tweets under each search query/hashtag first. Once exhausted, then Latest.