DEV Community: Jaga santagostino

How I Start New Go Projects in Seconds

Jaga santagostino — Mon, 09 Mar 2020 00:00:00 +0000

For the past years, I’ve started using more and more golang as a scripting language, and since in the past we were forced to put code in the GOPATH it became a little cumbersome compared to just write a bash file in the current folder

Project goinit

So I created a go program called goinit to generate a new project in my GOPATH at ~/go/src/github.com/kandros/[project-name] and open it in my editor, so far it server me very well, every new experiment is just a couple keystroke away goinit my-app, I literally can see something in the console in less than 15 seconds

Using go mod

Since go 1.11 I’ve started using go modules and stopped using goinit, a couple days ago I decided to refactor it to handle creating projects outside GOPATH and decided to use an even simpler solution, a custom shell function

goinit() {
 mkdir -p ~/coding/$1
 cd ~/coding/$1
 cat <<-EOF > main.go
 package main

 import "fmt"

 func main() {
    fmt.Println("hello")
    }
 EOF

 go mod init github.com/kandros/$1
 code-insiders --new-window . --goto main.go
}

It works the same way as my previous script by running goinit new-project in the terminal it will create the folder ~/coding/new-project open the project in VScode and the file main.go

Make the function accessible globally

This function is stored in my ~/.zshrc file to be available in the terminal, Bash users can put it in their ~/.bash_profile

How to Build a Textual Progress Bar for Node.js CLI and Terminal Apps

Jaga santagostino — Fri, 06 Mar 2020 00:00:00 +0000

I find textual interfaces extremely interesting and I’m trying to figure out how some common components can be creates

this is the time of a progress bar

to create a textual progress bar we need to understand two simple concepts

you can control where the cursor Is programmatically
There are ANSI escapes code to cancel the entire screen or the current line (\r)

One way to achieve this is to start a loop and on every iteration print the special escape code \r that will clear the line at the cursor position and then print one of the following to simulate a progress

[.]
[..]
[...]
[....]
[.....]
[......]
[.......]
[........]
[.........]

In this example, I’ll be using Node.js

async function main() {
  /* using 20 to make the progress bar length 20 charactes, multiplying by 5 below to arrive to 100 */

  for (let i = 0; i <= 20; i++) {
    const dots = ".".repeat(i)
    const left = 20 - i
    const empty = " ".repeat(left)

    /* need to use `process.stdout.write` becuase console.log print a newline character */
    /* \r clear the current line and then print the other characters making it looks like it refresh*/
    process.stdout.write(`\r[${dots}${empty}] ${i * 5}%`)
    await wait(80)
  }
}

main()

function wait(ms) {
  return new Promise(res => setTimeout(res, ms))
}

This was relatively simple but with some custom colors can have a huge impact in the UX of a tool, especially it takes some time to complete and there is no other feedback for the user that everything is going ok

full code available on the repo on github

How to Show Colored Text in Terminal?

Jaga santagostino — Tue, 03 Mar 2020 00:00:00 +0000

There are many things that we see and use every day but rarely we stop and think “how does it work?”, other times we ask ourselves that question but dismiss it because we suppose that the answer is probably super complicated.

This was the case for me about wondering how terminals show different colors, in my mind, it has always been something extremely complicated until I realized it’s quite simple and easy.

For years I’ve been using tools that show colored output and from time to time I used them too, always relying on libraries such a chalk in Node.js

This until one day, I wanted to print some errors messages in red in a simple script and wanted to avoid using a library for such a simple case, that day I understand the basics of colors and another formatting in terminal output

all required is to print some special sequence of characters called ANSI escape and the text after that will have the specific color or background or text style

these are standardized and interpreted by almost any terminal emulator

for example the Espace code \x1b[32m will start printing in green while \x1b[0m is the reset Espace and will reset the next text to normal

try to print this in you terminal

echo "I'm normal \x1b[32m I will be green \x1b[47m I will have white background \x1b[4m I will be underscored \x1b[0m, not I'm back to normal"

this will be the result

How can I do it in my programming language?

as long the output is interpreted by an ANSI compatible terminal you only have to print the escape code, for example, the above command can be used as a string in console.log

console.log("I'm normal \x1b[32m I will be gre
en \x1b[47m I will have white background \x1b[4m
I will be undescored \x1b[0m not I'm back to norm
al")

These are some other cool escape codes you can try

Have fun!

Reset = "\x1b[0m"
Bright = "\x1b[1m"
Dim = "\x1b[2m"
Underscore = "\x1b[4m"
Blink = "\x1b[5m"
Reverse = "\x1b[7m"
Hidden = "\x1b[8m"

FgBlack = "\x1b[30m"
FgRed = "\x1b[31m"
FgGreen = "\x1b[32m"
FgYellow = "\x1b[33m"
FgBlue = "\x1b[34m"
FgMagenta = "\x1b[35m"
FgCyan = "\x1b[36m"
FgWhite = "\x1b[37m"

BgBlack = "\x1b[40m"
BgRed = "\x1b[41m"
BgGreen = "\x1b[42m"
BgYellow = "\x1b[43m"
BgBlue = "\x1b[44m"
BgMagenta = "\x1b[45m"
BgCyan = "\x1b[46m"
BgWhite = "\x1b[47m"

Some other cool colored and formatted text

output of man command

part of GatsbyJS build script

Why I Created a Playlist on Spotify every month for the past 5 years

Jaga santagostino — Sun, 10 Nov 2019 00:00:00 +0000

image credit: Mohammad Metri

Some people love to carefully craft playlists, I’m by no means one of them.

I listen in mostly shuffle-mode from a collection of thousands of songs, so for me is not uncommon to listen Iron Maiden followed by Be Gees, Mozart up next and then again Katy perry.

In March 2015 I started creating a new playlist at the beginning of every month where I save songs I enjoyed to listen that month and continued since.

Ok cool, but why?

I find it fascinating to be able to check what I was listening to in some specific periods of my life and see how different styles of music I listen to

At the start of every month, I listen to the previous years’ playlists for the corresponding month, (this has the interesting side effect that I’m more likely to add songs from prev year to the current month)

What is amazing is that these songs triggers some kind of memories and being in the same time-frame make them revive memories associated with them

Another amazing thing is that listening to songs from Films and Tv Shows I’m able to tell what I watched (or rewatched) that month

Automating the process

Using IFTTT I was able to create a new voice command for google assistant that would pick the phrase "save this song on my monthly playlist" and call an AWS lambda using IFTTT webhooks to save the current song in the appropriate folder using Spotify API

If you are curious these are my lists from previous years in November

Please don’t judge me :D

Func fact: I hide link of songs I listen to while coding in commit messages and code comments

Opening a Folder and File in Vscode from Terminal

Jaga santagostino — Fri, 08 Nov 2019 00:00:00 +0000

VSCode offers the code command (code-insiders for the beta channel) to open files and folders from terminal

these are some possible usage:code myfilecode a/b/c/d/text.shcode myFolder

what if we want to open a folder and also a file within?

use code path_to_foder --goto path_to_file

Daily random knowledge from Wikipedia

Jaga santagostino — Wed, 16 Oct 2019 00:00:00 +0000

In the past few weeks, I’ve added an interesting new “todo” to my morning routine: to read Wikipedia’s Main page

This page is updated every day to show a Featured article, facts happened the same day in the past, some Did you know interesting events and a Featured Image with a detailed caption.

This allows me to know a lot of interesting information every day with little to no effort, the best part is that I get to know facts I would probably never search for otherwise.

A couple of days ago I started reading a fact about Lincoln and link after link I read very interesting stuff related to the White House

Did you know every new US president have a budget of $100.000 to changes things in the White House?

President Obama built a basketball court for example.

Did you know the President’s desk in the Oval Office was a gift from Queen Victoria and was built from the timbers coming from a British Ship that the USA helped recover in the Artic?

fun fact

Italian’s main page is different from the English one.

we have:

born and dead anniversaries
holidays
no detailed description for the image of the day
a single Did you know
a call to action to translate a page not yet available in Italian
a book of the Month from Wikisource
a destination of the Month from Wikivoyage

Conclusion

Most of these are far from being must know pieces of information but I really enjoy getting to know more about the world I live in

Especially if It’s one click away.

Disable VScode TypeScript alias in rename refactoring

Jaga santagostino — Mon, 27 May 2019 00:00:00 +0000

Since TypeScript 3.4 a setting has been implemented into tsserver that makes refactoring > rename create an alias in the local scope insted of change the original name

this abomination was enabled by default on VScode and after months of pain I found a way to disable it.

🎉🎉🎉🎉🎉🎉🎉

The configuration is called typescript.preferences.renameShorthandProperties

Counting Visits and adblockers

Jaga santagostino — Sun, 05 May 2019 00:00:00 +0000

Nowadays a lot of users use some kind of adblocker, personally, I use uBlock origin.

It this just for ads right?

Well, no, most adblocker also blocks tracking events including the most famous tracking system which is the dead-simple to setup and goto tool for most companies google analytics

How does a blocker work?

Being a browser extension, a blocker sits between the internet and the browser, this can stop requests from a website you are navigating to another URL matching, for example, the domains from a blacklist.

This look familiar?

What is the problem

The obvious problem is that visits statistics such as numbers of pageview for an article or most used devices will no longer match the reality, given it only shows devices that don't have an adblocker, and based on your audience it can be a huge part, if not the most part.

Having data you cannot trust or make decisions upon is just useless data.

all I want for my personal projects is to know the visit count divided by page and the origin of the visit (slack, twitter, google, etc), from which country the visitor is requesting the page is a nice to have but not required.

Solution

Use something else, something that is not in a blacklist

First Try

(This works and I'm using it now, it was my fault for not making it work in the end, details later)

Jaga santagostino

@kandros5591

what is the goto tool for easy website analytics that is not blocked by adblockers? a dashboard with viewcount total and trend is enough, location nice to have

00:48 AM - 04 May 2019

0 0

Suggested by a friend of mine on twitter, I tried to use simpleanalytics.io which offer an HTML script tag to insert in your pages and a dashboard to see the requests, it shows device type, country, origin.

Enough for my case!

The pricing is very good 9 dollars per month with unlimited websites, so I could use it for all my domains which is great.

Unfortunately, I tried it and my adblocker blocked it.

Well, it' a tracking service, no wonder it eventually entered in the huge blacklist.

Second Try

So I went ahead and built my poor-man-edition visit counter in go on aws-lambda using dynamodb that uses a great feature of lambdas being server by api-gateway receives the headers from CloudFront which have some amazing information inside

here the repo of the visit tracker go-visits-cloudfront

It works, have no frontend not dashboard at the moment but It's surprisingly useful for a 2-hour Saturday project built in a bar.

Third try

In the meantime, the twitter thread continued and the author of simpleanalytics.io step-by, to add a much-appreciated information

Adriaan van Rossum

@adriaanvrossum

@kandros5591 @siscia_ @Cloudflare @SimpleAnalytic We have a feature called subdomain adblocker bypass, you just link a CNAME to our server and you're done. We setup SSL and do the rest. Bye bye adblockers ;-)

12:54 PM - 04 May 2019

2 2

adding a cname redirect from one of your subdomains to simpleanalytics' api we can bypass the adblocker, given the fact that simpleanalitycs is based on privacy and "being a good internet citizen" at its core, I have no problem doing that.

The solution is as simple as it is smart.

what about SSL?

In case you wonder how it works with https, you set the subdomain you choose into the simpleanalytics dashboard and it does SSL certificates magic to enable secure data communication for you. Using domains from different registars (Godaddy, Google, Amazon Route 53, Zeit, Netlify via their domain servers) I had to do nothing else.

What about single page applications and gatsby?

For SPA it just works, for details there is a page in their documentation doc.

For Gatsby I just had to add the script to the page "the gatsby way" using the SSR api
Here's how

Conclusion

I moved different sites to use simpleanalytics.io because the pricing is small enough that it's worth buying it instead of maintaining an in-house solution even if very small, which means the greater experience for my visitors, greater experience for me because I can now have meaningful data to make decisions upon to create more content.

fix chrome flexbox layouts in chrome 72, 73+

Jaga santagostino — Wed, 10 Apr 2019 00:00:00 +0000

Chrome 72 introduced a change in how flexbox element with height: 100% renders, that caused some strange product breakage from one day to another without any code change.

The fix was simple but hard to find.flexbox elements with height: 100% now need to have min-height set, even 0 value is ok.

.list {
  display: flex;
}

.item {
  height: 100%;
  min-height: 0; /* add this */
}

more info: https://developers.google.com/web/updates/2019/01/devtools

don't use git stash pop

Jaga santagostino — Tue, 09 Apr 2019 00:00:00 +0000

Why?

A git stash is a very powerful concept, it’s like Harry Potter’s Room of Requirement for your code, you throw it in here and you can get it back when you need it again in the future.

But dealing with it can be dangerous.

Running git stash pop throws away the stash after applying it.git stash apply leaves it in the stash list and can be reused later (or dropped using git stash drop)

note: If during a pop there are conflicts it behave exactly like git stash apply and the stash will not be lost

Worth notice

git stash pop is equivalent to git stash apply && git stash drop

Conclusion

git stash apply can be a life-saver somethimes when you mess up with taking something from the stash

image credit: ancientking

Using Custom Terminal Functions

Jaga santagostino — Wed, 27 Feb 2019 00:00:00 +0000

Did you know you can declare a custom function to use in your terminal?

There’s dozens of operations you perform daily in your terminal that can be automated with very little effort, one way is using a custom function.

How do functions in bash/zsh work? Here’s a little example:

function sayCiaone() {
    echo "ciaone from a shell function"
}

copy this in your terminal and then call sayCiaone

Here’s some functions that I use daily

create folder and cd into it

function mkcd() {
    mkdir -p "$1" && cd "$1"
}

$1 is the first parameter after mkcd for calling mkcd my-new-folder is essentially like typing

mkdir my-new-folder
cd my-new-folder

pasting clipboard content in a file

function pastefile() {
    pbpaste > "$1"
}

pbpaste is a builtin utility on macOS that print the clipboard content
> means to write the input from the left (the output of the command pbpaste)
$1 is the argument, in this case, the filename I want to paste to.

pastefile myFile will create a new file named myFile with my current clipboard content

print package.json scripts

function scripts() {
     cat package.json | jq -r '.scripts'
}

| is the pipe operator in shell scripting, it means the output of the command on his left will be the input of the command on his right, in this case, the content of the package.json file
jq is a utility for formatting and pretty printing JSON, in this case we only read the field scripts of the received object

commit everything with a wip commit message

function wip() {
    git add --all
    git commit -m "wip"
}

this is pretty self-explanatory :D

tips

in zsh you can set the function as a oneline
in zsh function keyword is optional

the snippet below is valid in zsh

mkcd() { mkdir -p "$1" && cd "$1" }

Saving in a dotfile for reuse

declaring a function only makes it available in the current terminal session, if you want it to be persisted and accessible from any terminal you can declare them inside your .zshrc or .bashrc

UPDATE

Looks like the function keyword is optional

this code is actually valid in both zsh and bash

sayCiaone() {
echo "ciaone from a shell function"
}

thanks to @moopet