DEV Community: Gass

Online tipping and its implications

Gass — Sun, 12 Jun 2022 12:36:50 +0000

Have you ever been to New York? The amount of advertisement is mind blowing. I personally didn't like that, and probably the majority will agree.

Something similar has been happening all over the internet for some time now. We are bombarded by so many images and advertising that sometimes is hard to focus on what was the intention of the visit in the first place.

Why is this happening? Well because most of the content is rewarded to creators by showcasing advertisement. In most cases with content that people don't want to see.

Struggling to find the content through the advertisement jungle has become normal. Why? Aren't there other ways of rewarding content creators? And so, why are those alternatives not been used as much?

Gif from www.tychesoftwares.com

Is there someone to blame for all these pop ups? Yes, unfortunately there is and his name is Ethan Zuckerman

I didn't know about his existence before writing the article and probably you won't as well. But let's not blame him for what he didn't know what would happen. And he also apologized so all is good. Is it? Let's move on....

A fresh vision for the future

Sites as Pexels inspire me. They are an example of what the future of the internet could look like. A clean site with quality content and passionate photographers that are incentivized by voluntary donations from users.

Publicity badly targeted suddenly is no longer the best way of receiving support online

But there is another problem, most of the current online donation’s systems are tedious, they require a minimum age (18+), credit card information, PayPal accounts and have high fees that end up in the hands of third parties.

In case of PayPal for example, look at all the information and documents you need to set up an account to receive donations online. Just reading it, gives me an instant migraine.

Other platforms like buy me a coffee have age restrictions (18+) , high fees for every movement and you can only withdraw to systems linked to the banking grid. In case you would like to withdraw to a crypto address such as Bitcoin to do whatever you want, then you can't.

So, you can be super motivated to start your online venture to create content in exchange for donations. And suddenly if you don't meet the requirements like the minimum age, then you can't continue.

Gif from www.giphy.com

When I experienced this reality in 2020 I couldn't believe there weren't any better options. Or maybe there were...

The crypto universe

Cointree It is an easy to setup, platform and uses crypto for tipping, but the quality and the speed of the website it's not the best.

Cryptocurrencies are the way to go in this regard. Comparing the dollar or the euro to the speed and transaction fees of cryptos is like comparing a tortoise to a falcon. Some of them are quite amazing. You can send transactions instantly for pennies and move your money in complete freedom, without having to ask for permissions to third parties or be obliged to withdraw to a bank.

If you receive tips with crypto, you can: invest it, save it with interest, trade it for other cryptos, send to a friend, sell for your local currency, withdraw to your bank (some countries) and the list goes on.

When you experience this freedom and speed, you don't want to go back. It is the cryptocurrency superpower. And from my perspective the underlying technology for online tip systems of the future.

All these reasons led me to develop an open source project which uses Dash to send and receive tips. I chose this crypto because honestly I was blown away after trying it.

If you want to know more about the project you can visit the repo here. What do you think about all of this? Do you agree/disagree with my perspective? Would you like to add something? Share your thoughts.

One of my favorite JS challenges on Stack Overflow

Gass — Tue, 26 Apr 2022 08:09:06 +0000

This one got me hooked for hours. I love when I find uncommon questions and have the time to attempt to solve them.

After one year and four months of been active on Stack Overflow and having answered almost 300 questions, this one is one of my favorite challenges.

The question

How does one randomly change an element across the board for all users without using a back-end ?

Well, to be honest the question was not exactly like that, the user wasn't discarding the use of a back-end but it just made it more interesting.

How did I solve it?

The first time I read the question I thought it was not possible without a back-end.

But after some time thinking I realized that the key to unlock this mistery was in the value that new Date().getTime() provides, due to the fact that returns a number that is the same across all computers around the world and is unique!

You can see the ⚙️ working snippet here

Code explanation

First things first..

<div id="root"/>

I retrieve the milliseconds since January 1, 1970 and then I convert it to hours:

const hours = Math.round(new Date().getTime()/(1000*60*60))

Slice hours six digit number into three numbers and add them inside an array.

I'm creating this array with the purpose of having multiple unique numbers to create a random number depending on the time, which will be the same across all computers.

const numbers = [
    Number(hours.toString().slice(0,2)),
    Number(hours.toString().slice(2,4)),
    Number(hours.toString().slice(4,6))
]

Now, I need images to display, depending on the random number that the code will generate. I get some URLs from Lorem Picsum and add them inside an array:

images = [
    'https://picsum.photos/id/237/200/300', 
    'https://picsum.photos/id/236/200/300', 
    'https://picsum.photos/id/235/200/300',
    'https://picsum.photos/id/234/200/300',
    'https://picsum.photos/id/233/200/300',
    'https://picsum.photos/id/232/200/300',
    'https://picsum.photos/id/231/200/300',
    'https://picsum.photos/id/230/200/300',
    'https://picsum.photos/id/229/200/300',
    'https://picsum.photos/id/228/200/300'
  ];

Okay, is time to create the function that will return a random number by the hour.

So how do we do it ?

I'll show you step by step..

Inside hourlyRand() the first thing is an arrow function that will return a pseudo random number as a string depending on the numbersArr (array of numbers) passed to it.

This does not make much sense now 😵‍💫 but it will a few lines down the road.

function hourlyRand(){
  const pseudoRandString = (numbersArr) => {
    let rand = 1
    numbersArr.forEach((n, i) => {
      if(n !== 0) rand = rand * n 
    })
    return rand.toString()
  }  
}

Now using pseudoRandString(numbersArr) function I pass the numbers array initialized at the top like so pseudoRandString(numbers) and I assign the value to randString variable:

  let randString = pseudoRandString(numbers)

By slicing the randString I can get a two digit number. But these numbers have a typeof string so I need to convert back to Number and assign the value to n:

  // length of the pseudo random number string
  let L = randString.length

  let n = Number(randString.slice(L-3,L-1))

And the function hourlyRand() is almost ready. The only thing pending is to return n

The finished function hourlyRand() looks like so:

function hourlyRand(){
  const pseudoRandString = (numbersArr) => {
    let rand = 1
    numbersArr.forEach((n, i) => {
      if(n !== 0) rand = rand * n 
    })
    return rand.toString()
  }  

  // get a pseudo random number and convert to string
  let randString = pseudoRandString(numbers)

  // length of the pseudo random number string
  let L = randString.length

  // slice the string and convert to number
  let n = Number(randString.slice(L-3,L-1))

  // return the double digit hourly random number
  return n
}

Now that we have all we need, we get the two digit random number from hourlyRand() and divided by 10 (because we have 10 images) and round it:

// pseudo-random number between 0 and 9 
let n = Math.round(hourlyRand()/10)

Finally to display the hourly random image just add n as an index of the images array:

const element = document.getElementById('root')
element.innerHTML = '<img src=' + images[n] + '/>'

Fun JS - Start multiple counters ⏱️ at different speeds

Gass — Wed, 20 Apr 2022 16:19:43 +0000

Sometimes I think I'm a Stack Overflow junky 🤪... And my addiction was worse a few months ago when I saw this question and couldn't resist my fingers from tackling it.

The main idea was to..

🛠️ Build a JavaScript algorithm that would make counters start at different speeds depending on the value set in the speed attribute of the HTML span tag elements.

I feel that is an interesting and fun code to share with others.

If you want to try out the snippet 👉 click here

Before you continue..

I've written this post in great detail so that it can be understood by begginers. The idea of the post is to have fun programming, learn/practice a few things, experiment and maybe come up with a different or even a better solution that the one I came up with.

If(you_want_to_continue === true) console.log('keep scrolling..')
else console.log('see you! 👋')

Grab some ☕ and lets get started!

Go to your favorite JS code editor (JSFiddle is pretty cool) and setup the HTML

<h1 class="counter" speed='3'></h1>
<h1 class="counter" speed='7'></h1>
<h1 class="counter" speed='10'></h1>
<h1 class="counter" speed='12'></h1>

As you can see, I added the speed attribute to the h1 elements. The class counter is to let JS know which elements we want to select using the querySelectorAll()

Now that the HTML code is ready is time to start programming

Let's declare the elements const

const elements = document.querySelectorAll('.counter')

💬 For those who don't know, the document method querySelectorAll() returns a static NodeList representing a list of the document's elements that match the specified group of selectors.

🧐 So, in this case elements will contain all h1 elements that have the class counter.

console.log(elements) outputs:

{
  "0": <h3 class="counter" speed="6"></h3>,
  "1": <h3 class="counter" speed="7"></h3>,
  "2": <h3 class="counter" speed="8"></h3>,
  "3": <h3 class="counter" speed="9"></h3>,
  "item": function item() {
    [native code]
},
  "keys": function keys() {
    [native code]
},
  "values": function values() {
    [native code]
},
  "entries": function entries() {
    [native code]
},
  "forEach": function forEach() {
    [native code]
},
  "length": 4
}

This doesn't look very nice, I know.. But accessing the elements is simple.

They can be accessed by their 🗝️ key: elements[key]. For example elements['1'] returns the following HTML element:

<h3 class="counter" speed="7"></h3>

Now that we understand how to retrieve and work with the static NodeList elements let's start to build the logic by creating a function that will set intervals for every HTML element in elements.

function setCounter(element, speed, limit){
  let count = 0  // every count will start from 0

  let interval = setInterval(() => {
    // in every interval the count will increment by the speed value 
    count += speed

    // update the HTML in this specific element  
    element.innerHTML = count

    // stop the setInterval() if condition is met
    if(count >= limit) clearInterval(interval)

  }, 1) // <--- the interval will loop every 1 millisecond
}

Now that the setCounter() function is ready we need to loop through all the elements to retrieve their speed, and invoke the setCounters() but before doing that, we need to be clear on how to get and use all speeds.

To retrieve the speed we need to specify from which element are we going to get the attribute from:

elements[key].getAttribute('speed')

💬 When using .getAttribute() the returned value comes as a string. This can be prooven by using typeof like so:

let key = '1'
let value = elements[key].getAttribute('speed')
console.log(typeof value) // --> string

To make the code work, we need to convert to integer by using Number() or parseInt().

After this we have all needed to invoke setCounter(element, speed, limit). This will initialize each setInterval with their respective parameters.

elements.forEach((el, key) => {
  let speed = Number(elements[key].getAttribute('speed'))
  setCounter(el, speed, 1000) 
})

Now that the code is completed do you think is going to work properly ?

Let's give it a shot and see what happens. Take into consideration that the limit passed as a parameter to setCounter() is 1000

It didn't work properly 😭... The setIntervals are working but they are showing a bigger count than the limit. This is because the value of the speed that is added to the count is not summing 1 in every loop, it can be any number so it can overflow the limit.

One way of solving this, is by using a ternary operator inside the setInterval(), like so:

count = (count >= limit) ? limit : count + speed

How does this work?

If count is bigger or equal to limit, count will equal to limit and in the opposite case count will equal count + speed.

This is a minor patch to solve the last loop count problem. By doing this the count will never overflow the limit.

The resulting code ✔️

const elements = document.querySelectorAll('.counter')

elements.forEach((el, key) => {
  let speed = Number(elements[key].getAttribute('speed'))
  setCounter(el, speed, 1000)
})

function setCounter(element, speed, limit){
  let count = 0
  let interval = setInterval(() => {
    count = (count >= limit) ? limit : count + speed
    if(count === limit) clearInterval(interval)
    element.innerHTML = count
  }, 1)
}

This is my first post in dev.to

Feel free to experiment/play with the code and share your unique approach 👍 if you have one 🙃