DEV Community: Liz Lam

The ABC's of grep - A

Liz Lam — Wed, 25 Oct 2023 02:22:24 +0000

Welcome to The ABC's of grep!

Here we will explore the different flags for our beloved command and give it the accolades it deserves.

Let's start!

A

Use the -A flag to show the lines after the matching search term is found.

Suppose you have a file named test.txt with the following content:

sad
happy
awake
coffee
work
school

You would search for the word "happy" like this:

$ grep "happy" test.txt
happy

To see the first 2 lines after happy, execute the following:

$ grep -A 2 "happy" test.txt
happy
awake
coffee

Use jq to format p4 changes output to SQLite

Liz Lam — Wed, 26 Jul 2023 18:33:39 +0000

There are so many possibilities once data is structured. In my last post about formating p4 changes out to JSON, it occurred to me it would be fairly trivial to put this same data into a SQLite databasse.

As show in the previous post, p4 changes output can be converted to JSON data like this:

p4 changes | jq -R -s '[split("\n")[:-1] | map(split("\u0020")) | .[] | { "change": .[1], "author": .[5], "date": .[3], "message": .[6:length] | join(" ") }]'

[
  {
    "change": "3",
    "author": "grepliz@test-local-01",
    "date": "2023/07/20",
    "message": "'Add day1.pdf'"
  },
  {
    "change": "2",
    "author": "grepliz@test-local-01",
    "date": "2023/07/20",
    "message": "'Add crazy.psd.'"
  },
  {
    "change": "1",
    "author": "grepliz@test-local-01",
    "date": "2023/07/20",
    "message": "'Populated server with files '"
  }
]

For brevity's sake, I'm going to redirect that output to a file called json.txt and cat it for the rest of the examples.

p4 changes | jq -R -s '[split("\n")[:-1] | map(split("\u0020")) | .[] | { "change": .[1], "author": .[5], "date": .[3], "message": .[6:length] | join(" ") }]' > json.txt

CREATING THE INSERT STATEMENTS

We can now pipe the JSON data back into another jq filter to produce the insert statements needed for a SQLite database.

cat json.txt | jq -r '.[] | "insert into changes values (\(.change), \"\(.author)\", \"\(.date)\", \(.message));"'             

insert into changes values (3, "grepliz@test-local-01", "2023/07/20", 'Add day1.pdf');
insert into changes values (2, "grepliz@test-local-01", "2023/07/20", 'Add crazy.psd.');
insert into changes values (1, "grepliz@test-local-01", "2023/07/20", 'Populated server with files ');

The key to this jq filter is using string interpolation via \(exp) which is documented here:
https://jqlang.github.io/jq/manual/#Stringinterpolation:\(exp)

Because the insert statement contains characters that can make the filter a bit of a bear to look at (parenthesis and quotations), let's look at a simpler example.

Suppose we just wanted to create a sentence with this format:

Changelist number X was writte by Y on Z.

What would that look like?

Using the \(exp) syntax, we can do something like this:

cat json.txt | jq -r '.[] | "Changelist number \(.change) was written by \(.author) on \(.date)"'                 

Changelist number 3 was written by grepliz@test-local-01 on 2023/07/20
Changelist number 2 was written by grepliz@test-local-01 on 2023/07/20
Changelist number 1 was written by grepliz@test-local-01 on 2023/07/20

Now suppose we wanted to quote the author in our sentence, we would need to add quotation marks and escape them like this: \"(.author)\".

cat json.txt | jq -r '.[] | "Changelist number \(.change) was written by \"\(.author)\" on \(.date)."'

Changelist number 3 was written by "grepliz@test-local-01" on 2023/07/20.
Changelist number 2 was written by "grepliz@test-local-01" on 2023/07/20.
Changelist number 1 was written by "grepliz@test-local-01" on 2023/07/20.

Putting it all together, we arrive at this:

cat json.txt | jq -r '.[] | "insert into changes values (\(.change), \"\(.author)\", \"\(.date)\", \(.message));"'

insert into changes values (3, "grepliz@test-local-01", "2023/07/20", 'Add day1.pdf');
insert into changes values (2, "grepliz@test-local-01", "2023/07/20", 'Add crazy.psd.');
insert into changes values (1, "grepliz@test-local-01", "2023/07/20", 'Populated server with files ');

Now we just need to redirect this to a file called insert.sql and we will import the data into a SQLite database (i.e. append > insert.sql to the above statement).

SETTING UP THE SQLITE DATABASE

Create a SQLite database like this:

sqlite3 changelists.db

This will create a file called changelists.db in your current directory and take you the a SQLite interactive prompt.

Create a table with a schema that matches the values in the insert.sql file.

sqlite> CREATE TABLE changes (
   ...>     change INTEGER PRIMARY KEY, 
   ...>     author TEXT NOT NULL, 
   ...>     date TEXT NOT NULL, 
   ...>     Message TEXT NOT NULL
   ...> );

We now have an empty table called changes. If we try to select from this table, we see that it is empty as indicated by the fact that nothing is returned.

sqlite> select * from changes;

Let's toggle some options to make the SQL output look a little nicer when we do populate the table.

sqlite> .headers on
sqlite> .mode columns

We can now add a dummy row to see what it will look like.

sqlite> insert into changes values (0, "liz", "today", "this is a changelist description.");
sqlite> select * from changes;
change  author  date   Message                          
------  ------  -----  ---------------------------------
0       liz     today  this is a changelist description.

Great, that looks pretty good. Now let's import the insert.sql file we just created.

sqlite> .read insert.sql
sqlite> select * from changes;
change  author                 date        Message                          
------  ---------------------  ----------  ---------------------------------
0       liz                    today       this is a changelist description.
1       grepliz@test-local-01  2023/07/20  Populated server with files      
2       grepliz@test-local-01  2023/07/20  Add crazy.psd.                   
3       grepliz@test-local-01  2023/07/20  Add day1.pdf

Next, let's delete our dummy row.

sqlite> delete from changes where change = 0;
sqlite> select * from changes;
change  author                 date        Message                     
------  ---------------------  ----------  ----------------------------
1       grepliz@test-local-01  2023/07/20  Populated server with files 
2       grepliz@test-local-01  2023/07/20  Add crazy.psd.              
3       grepliz@test-local-01  2023/07/20  Add day1.pdf

Voila! Now we have a SQLite database with a populated changes table.

Use jq to format p4 changes output to JSON.

Liz Lam — Sat, 22 Jul 2023 20:22:46 +0000

UPDATE: Just a few days after hitting publish on this blog, a few folks from the Perforce community shared a better way to output JSON data from p4 commands using the -ztag and -Mj flags: p4 -ztag -Mj changes -m3 | jq -s '.'

I recently ran across this blog showing how to use jq to format git log output to JSON. Curious about jq and wanting to try a similar thing with Perforce, I was able to modify the example pretty easily.

This is what p4 changes output looks like:

$ p4 changes

Change 3 on 2023/07/20 by grepliz@test-local-01 'Add day1.pdf'
Change 2 on 2023/07/20 by grepliz@test-local-01 'Add crazy.psd.'
Change 1 on 2023/07/20 by grepliz@test-local-01 'Populated server with files '

Here is how you can format to JSON using jq:

$ p4 changes | jq -R -s '[split("\n")[:-1] | map(split("\u0020")) | .[] | { "change": .[1], "author": .[5], "date": .[3], "message": .[6:length] | join(" ") }]'

[
  {
    "change": "3",
    "author": "grepliz@test-local-01"
    "date": "2023/07/20",
    "message": "'Add day1.pdf'"
  },
  {
    "change": "2",
    "author": "grepliz@test-local-01",
    "date": "2023/07/20",
    "message": "'Add crazy.psd.'"
  },
  {
    "change": "1",
    "author": "grepliz@test-local-01",
    "date": "2023/07/20",
    "message": "'Populated server with files '"
  }
]

I think the original blog I referred to gives a pretty good explanation of what is going on, but I find it helpful to write out what is going on for future reference (and for my future self!).

The input: `p4 changes`

I know the output of p4 changes is being piped into the jq program and it is helpful that the output is delimited by a space character and is one line per changelist. This output produces the columns needed for programs like jq and awk.

The flags: `jq -R -s`

The jq flags being used are nicely documented here.

--slurp/-s:
Instead of running the filter for each JSON object in the input, read the entire input stream into a large array and run the filter just once.

--raw-input/-R:
Don't parse the input as JSON. Instead, each line of text is passed to the filter as a string. If combined with --slurp, then the entire input is passed to the filter as a single long string.

The `jq` filter

'[split("\n")[:-1] | map(split("\u0020")) | .[] | { "change": .[1], "author": .[5], "date": .[3], "message": .[6:length] | join(" ") }]'

This is where all the magic happens. There are basically 4 sections to this filter.

split("\n")[:-1]

This says to split on newlines. If we were to stop here, we would get an array of the changelists.
Example:

p4 changes | jq -R -s 'split("\n")[:-1]'
[
  "Change 3 on 2023/07/20 by grepliz@test-local-01 'Add day1.pdf'",
  "Change 2 on 2023/07/20 by grepliz@test-local-01 'Add crazy.psd.'",
  "Change 1 on 2023/07/20 by grepliz@test-local-01 'Populated server with files '"
]

map(split("\u0020"))

This tells the filter to map and split on the space character.
When combined with #1 above it would look like this:

p4 changes | jq -R -s 'split("\n")[:-1] | map(split("\u0020"))'

[
  [
    "Change",
    "3",
    "on",
    "2023/07/20",
    "by",
    "grepliz@test-local-01",
    "'Add",
    "day1.pdf'"
  ],
  [
    "Change",
    "2",
    "on",
    "2023/07/20",
    "by",
    "grepliz@test-local-01",
    "'Add",
    "crazy.psd.'"
  ],
  [
    "Change",
    "1",
    "on",
    "2023/07/20",
    "by",
    "grepliz@test-local-01",
    "'Populated",
    "server",
    "with",
    "files",
    "'"
  ]
]

.[]

This creates arrays of the values such that we can iterate over it. The following is from the documentation:

Array/Object Value Iterator: .[]
If you use the .[index] syntax, but omit the index entirely, it will return all of the elements of an array. Running .[] with the input [1,2,3] will produce the numbers as three separate results, rather than as a single array.

You can also use this on an object, and it will return all the values of the object.

p4 changes | jq -R -s 'split("\n")[:-1] | map(split("\u0020")) | .[]'

[
  "Change",
  "3",
  "on",
  "2023/07/20",
  "by",
  "grepliz@test-local-01",
  "'Add",
  "day1.pdf'"
]
[
  "Change",
  "2",
  "on",
  "2023/07/20",
  "by",
  "grepliz@test-local-01",
  "'Add",
  "crazy.psd.'"
]
[
  "Change",
  "1",
  "on",
  "2023/07/20",
  "by",
  "grepliz@test-local-01",
  "'Populated",
  "server",
  "with",
  "files",
  "'"
]

{ "change": .[1], "author": .[5], "date": .[3], "message": .[6:length] | join(" ") }

Finally, this section gives us the desired JSON shape of each changelist and by wrapping the whole thing (the whole jq filter) with [], we get the final array.

Some Quick Thoughts on Seven Languages in Seven Weeks - Part 4

Liz Lam — Mon, 08 May 2023 04:58:33 +0000

This is a continuation of my thoughts on Seven Languages in Seven Weeks by Bruce Tate.

After over a year, I finally finished Seven Langugages in Seven Weeks by Bruce Tate. The last language explored is Haskell. A few quick thoughts about Haskell:

Haskell is a purely functional language but feels a little too academic for me.
Language has been around since the 1980’s.
Concatenate with ++
Example: "hello" ++ "world" -> “hello world”
Strings are just a list/array of characters. Example: ['a', 'b'] -> ‘ab’
Booleans are what you expect with slightly different syntax.
Example:
(4+9) == 9 -> True
(5+5) /= 10 -> False
if is a function not a control structure that returns a value like any other function.
Haskell is strongly typed.
Functions have two parts to them, type declaration and then function declaration.
Example:
double :: Integer -> Integer
double x = x + x
Classes are not OOP classes. In Haskell, classes allow for polymorphism and overloading.
Instances of a class are types, not date objects.

Although it took more much longer than 7 weeks to get through, this has been a horizon expanding book. I think I actually understand monads now! The book also offers an interesting insight about the past and the way trends and languages evolve. Written in 2010 when Java was still very much dominating and Ruby on Rails was becoming the hot tech stack for startups, it’s interesting to see a book about just exploring different languages. Learning for learning’s sake. These days, there is also no shortage of resources to learn just about any language out there no matter how obscure. In fact there is probably a podcast, video series and Discord community for it. I may have finally finished the book, but I plan to keep the language exploration going. Not just because it’s another line item on my resume but because it’s fun!

Some Quick Thoughts on Seven Languages in Seven Weeks - Part 3

Liz Lam — Mon, 08 May 2023 04:53:40 +0000

This is a continuation of my thoughts on Seven Languages in Seven Weeks by Bruce Tate.

“Clojure and Java desperately need each other. Lisp needs the market place that the Java Virtual Machine can offer, and the Java community needs a serious update and an injection of fun.”

It’s been a little while and was able to pick up this book again. I was excited to learn a bit about Clojure since I know Uncle Bob (aka Robert Martin) is a big fan. It’s interesting to read the above quote since at the time of reading this chapter in 2022 (the book was writtenin 2010), the bit about the Java community needing an update and injection of fun still feels true.

Time has been at a premium for me but I wanted to jot down some quick notes on this chapter.

Function args are separated by spaces. Example: (+ 1 1) evaluates to 2.
Clojure uses prefix notation.

Examples:
(+ 2 2 2 2) evaluates to 8.
(- 8 1 2 ) evaluates to 5.
(< 1 2 3 4) evaluates to true.
(< 1 3 2 4) evalutes to false.

Clojure coerces types.
Example: (+ 3.0 5) evaluates to 8.0.

Use ‘str’ to concatenate strings.

Example: (str "name, " "date, " "age.") evaluates to “name, date, age.”

This is how you do an if:
(if true (println "it's true!")) prints “it’s true!“.

If you want an else add a third argument:
(if true (println "it's true!") (println "false)) still prints “it’s true!“.

0 and "" are true, nil is not true. This is weird!
Use keyword def to define variables.
Use keyword defn to define functions.
The simplest form of a function is: (defn [params] body)

This is an example of a “Hello World” program in Clojure using functions.

(defn hello [name] (str "Hello, " name))

Invoke this with: (hello "liz") and the output will be “Hello, liz”.

Some Quick Thoughts on Seven Languages in Seven Weeks - Part 2

Liz Lam — Sun, 19 Dec 2021 21:40:11 +0000

This is a continuation of my thoughts on Seven Languages in Seven Weeks by Bruce Tate.

The Scala chapter of the book so far seems the most familiar to me. I have a pretty good understanding of Java, so I naturally leaned into this language quite a bit more than the others. This is the first time I saw traits outside of a Rust context (another language I’ve been trying to learn on the side). Traits are basically interfaces with implementation.

There are distinct and explicit ways to declare mutable and immutable variables i.e. use val for immutable values and var for mutable variables.

A similar approach is used for static classes. Instead of adding the static keyword in front of the class declaration (like in Java), Scala uses the keyword object.

One interesting bit in Scala is that XML is valid syntax. This reminded me a lot of React and JSX.

The pattern matching with conditions look like a really powerful tool over your basic switch/case statements.

Example:

def factorial(n: Int): Int = n match {
    case 0 => 1
    case x if x > 0 => factorial(n - 1) * n
}

The author’s conclusion for Scala is mixed, but I like how you are able to start with object oriented programs and ease your way into functional paradigms. Perhaps this allows too much of an escape hatch for a functional programmer’s taste?

The next chapter is on Erlang.

A few of my notes:

Statements end in period.

There is no type coercion. Example: 1 + "2" does not work.
Variables begin with capital letter and immutable.
Functions use fun keyword.
There is a prolog-based syntax.
Use the keyword spawn to spawn a process.
Send messages to threads with Pid ! "message".
Interprocess communication is REALLY easy.

I enjoyed reading about Erlang and doing some of the exercises but I found the syntax to be a little awkward. My first impression is it is not something I would want to work in on a daily basis. The author seemed to really like Erlang which makes me want to give it another try.

So far, Scala seems the most promising in terms of professional development. I’ve seen a few companies that use Scala though it is not widespread in the industry. I am looking forward to finishing up the book with the next 2 chapters and see where it takes me.

Some Quick Thoughts on Seven Languages in Seven Weeks - Part 1

Liz Lam — Sun, 19 Dec 2021 21:34:04 +0000

I recently discovered the Corecursive Podcast and love it! In particular, I really enjoyed this interview with Bruce Tate, the author of Seven Languages in Seven Weeks. The book surveys 7 different languages: Ruby, Io, Prolog, Scala, Erlang, Clojure and Haskell. I only had familiarity with Ruby, so I decided to pick it up. I have completed 3 of the 7 languages and I thought I would take some time to jot down my thoughts about the book so far.

Although the book is slightly dated (2011), it reads really well and is very digestible. I’ve done a couple of projects in Ruby in the past, but found that the chapter opened my eyes to why Ruby was designed the way it was. For example, it really was designed with the developer’s experience in mind as oppose to performance. All the code samples work (though some of the output might be slightly different) and it’s a great introduction to this language.

I found this to be less true with the Io chapter. Most of the trivial code samples worked, but unfortunately, none of the ones that involved http request did. This was a bit disappointing. I use JavaScript in my day to day work. Io is a prototypal language and I was hoping it would help me understand JavaScript (also a prototypal language) more. I believe it did accomplish this.

The Prolog chapter was very interesting. The code almost seemed like axioms from which you derived your proofs. The language is rule based and is very different from how I think of programming. This chapter probably stretched my brain the most, but is so far the most disappointing in terms of getting the code samples to work.

Overall, I still enjoyed going through these first 3 languages and look forward to the remaining 4.

Setting up Fathom Lite in a Docker Container

Liz Lam — Mon, 16 Nov 2020 07:21:58 +0000

Photo by Markus Winkler on Unsplash

I have recently been playing around with Fathom to gather visitor stats on my websites. I really like its promise of being a "simple, light-weight privacy-first alternative to Google Analytic".

It was also appealing that they offer a lite version for those who wish to self host. Seeing they provided a pre-built Docker image made it a no-brainer to want to give it a spin. It took a bit of configuration to get everything working and I've documented the steps here in case it's helpful for anyone else (AKA me in 6 months).

So before diving into the details, this is the overall picture of the setup:

The Fathom server is running on port 7070.
The nginx server is running on port 8080.
The container's port 8080 is bound to the host's port 9090.

On my host machine as root:

mkdir /opt/fathom

Create a fathom.conf file in /opt/fathom.

server {
    server_name your.domain.name;

    location / {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_set_header Host $host;
        proxy_pass http://127.0.0.1:7070; 
    }  
}

We will be mapping above fathom.conf file to a directory in the container to be used by nginx.

Create an .env file (also in /opt/fathom):

FATHOM_SERVER_ADDR=":7070"
FATHOM_DATABASE_NAME="/app/config/fathom.db"

This .env file will start the fathom server on port 7070 and place the sqlite db file in /app/config in the Docker container.

Ok, let's start our Docker container:

sudo docker run -d -v /opt/fathom:/app/config -p 9090:8080 -p 80:80 --name fathom usefathom/fathom:latest ./fathom --config /app/config/.env server

Woah!! Woah!! Woah!! I know what you're thinking. What the heck is going on here??!!!

Let's break down in this docker command:

sudo docker run -d - This runs the Docker container.

-v /opt/fathom:/app/config - This maps a volume from our host machine (/opt/fathom) to a directory in our Docker container (/app/config).

-p 9090:8080 -p 80:80 - This exposes the container's port 8080 as the host's port 9090. The second argument exposes port 80 as itself. This will be needed for generating a Let's Encrypt SSL certificate.

--name fathom - This names the container so we can easily reference it.

usefathom/fathom:latest - This pulls down the pre-built Docker container provided by Fathom.

./fathom --config /app/config/.env server - This starts the fathom server using the .env file we just created and mapped into the container.

Now that we have created a running Docker container, we can access it with an interactive bash shell with the following:

sudo docker exec -it fathom /bin/bash

NOTE: I didn't give docker the permissions needed to run it without sudo.

Once in the container, you should be in the /app directory.

Let's create a fathom user:

fathom --config /app/config/.env user add --email="your@email.com" --password="strong-password"

Install nginx, certbot and the certbot/nginx plugin:

apk add certbot certbot-nginx nginx

NOTE: The pre-built Docker container is based on the Alpine Linux distribution. Coincidentally, the host machine I'm using is a Linode that is also Alpine Linux.

Symlink the previously created fathom.conf so nginx can use it:

ln -s /app/config/fathom.conf /etc/nginx/conf.d/fathom.conf

Create certs from Let's Encrypt:

mkdir /run/nginx
certbot --nginx -d your-site.com

There will be a series of questions you will need to answer and once done there be updates to your conf file.

Open up /etc/nginx/conf.d/fathom.conf and find the updated section. It should looks something like this (excerpt):

    listen 80; # managed by Certbot

    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/yoursite.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/yoursite.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

Replace 443 to 8080, the final content should look like this:

server {
    server_name your.domain.name;

    location / {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_set_header Host $host;
        proxy_pass http://127.0.0.1:7070; 
    }  

    listen 80; # managed by Certbot

    listen 8080 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/yoursite.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/yoursite.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}

Run nginx:

nginx -t
nginx

Whew! That was a lot! Now go to https://yourdomain.com:9090 to see your freshly installed Fathom Lite dashboard!

A Gentle Introduction to the Git Command Line

Liz Lam — Wed, 07 Oct 2020 19:47:42 +0000

Git is a version control system written by Linus Torvalds in 2005. It was created specifically to manage the Linux Kernel Project. One could say it was written by Linux Kernel Developers for Linux Kernel Developers. As a result, the initial environment for working with git is the command line.

Now, if you're not familiar with the command line (like a Linux Kernel Developer), this can feel scary. With so many GUI tools out there, you may feel it's not even necessary to learn. I want to suggest that knowing how the git GUIs work under the hood is super helpful as a developer. With some diligence and working through this tutorial, you'll be a git command line power user in no time...well with some time.

NOTE: I leave out some of the git output for clarity.

Creating a new git repository

Open a terminal and run the following commands:

    $ mkdir project 
    $ cd project
    $ git init

What did we just do?
We just created an empty git repository.

Let take a look at the state of the git workspace:

    $ git status
    On branch master

    No commits yet

    nothing to commit (create/copy files and use "git add" to track)

Add a file to our working directory

Type the following command:

    $ echo ‘hello world’ > hello.txt

Take a look at the status again:

    $ git status
    On branch master

    No commits yet

    Untracked files:
    (use "git add <file>..." to include in what will be committed)

      hello.txt

    nothing added to commit but untracked files present (use "git add" to track)

The status gives us a clue on what we need to do next:

    $ git add .

Git knows we have a new file with the intention to add it to the repository but we have not committed it yet. This is often a point of confusion for new users. I think of git add like an engagement ring. It's a promise to commit, but we're not there yet.

Let's take a look at the status again:

    $ git status
    On branch master

    No commits yet

    Changes to be committed:
      (use "git rm --cached <file>..." to unstage)

        new file:   hello.txt

Time to commit

Type the following:

    $ git commit -m “Commit first file to the repo”

Congratulations! We have made our first commit to the master branch!
How do we know what branch we are currently on?

     $ git branch
     * master

Create a new branch

Type the following in your terminal:

    $ git checkout -b dev_llam
      Switched to a new branch 'dev_llam'

This will create a new branch and switch to that branch.

We should be able to see both branches now:

    $ git branch
    * dev_llam
      master

You may be thinking, "Wait??!! I didn't cd into a new directory. How did I switch to a new branch?".

This can bit a little bit confusing for those coming from other version control systems.

I think of it like someone pulled the rug out from under me and replaced it with a new one without me ever having to get up. You are physically sitting in the same directory in the filesystem, but the branch has been changed from underneath you.

Let’s make a change on our new branch.

Edit hello.txt by adding a 2nd line saying who you are. (Example: “I am Liz.”)
If you check the status, you will see git knows we made changes:

    $ echo 'I am Liz.' >> hello.txt
    $ cat hello.txt
      hello world
      I am Liz.
    $ git status
    On branch dev_llam
    Changes not staged for commit:
      (use "git add <file>..." to update what will be committed)
      (use "git checkout -- <file>..." to discard changes in working directory)

        modified:   hello.txt

    no changes added to commit (use "git add" and/or "git commit -a")

We want to add our changes:

    $ git add .

Now we want to commit them:

    $ git commit -m “Saying who I am”

Let's take a look at our history so far.

Type in the terminal:

    $ git log --oneline
      187c6fa (HEAD -> dev_llam) Saying who I am
      deccda5 (master) Commit first file to the repo.

We now have two commits in our history in our dev branch.

NOTE: The seemingly random characters in front of our commit message is called a commit SHA. This commit SHA includes information about the author and date and will be unique to you. If you are following along on your terminal, don't worry if the output looks a little different.

Let’s check on master:

    $ git checkout master
    $ git log --oneline
      deccda5 (HEAD -> master) Commit first file to the repo.
    $ cat hello.txt
      hello world

Time to merge!

We want to merge our changes from dev to master.
Remember, the target branch is always the branch you are on. Use git branch if you are not sure where you are.

    $ git merge dev_llam

Now we should see that master has the same changes as our dev branch.

    $ git log --oneline
      187c6fa (HEAD -> master, dev_llam) Saying who I am
      deccda5 Commit first file to the repo.
    $ cat hello.txt
      hello world
      I am Liz.

What about cloning?

Open another terminal window and clone the repo we just created:

    $ git clone /path/to/git/project project2

You should see an exact copy of what we had in the original project:

    $ cd project2
    $ git log --oneline 
      187c6fa (HEAD -> master, dev_llam) Saying who I am
      deccda5 Commit first file to the repo.
    $ cat hello.txt

What about pulling?

To keep our repo updated, we need to pull from the original/remote.

Go to the first terminal window with the original project open and make a change and commit it.

   $ echo 'I love coffee!' >> hello.txt
   $ git add .
   $ git commit -m "Add line about my love of caffeine."

Go back to the second terminal window with project2 open and check its status:

    $ git status
    On branch master
    Your branch is up to date with 'origin/master'.

    nothing to commit, working tree clean

That's interesting. Didn't we just make a change in the original project?!? Our cloned project (project2) does not know it is out of date with the original.
That is because we need to fetch the changes (note: fetching is different from pulling).

    $ git fetch origin master
    $ git status
      On branch master
      Your branch is behind 'origin/master' by 1 commit, and can be fast-forwarded.
        (use "git pull" to update your local branch)

      nothing to commit, working tree clean

Great! Now our repo is updated...but our working directory is not.
This is because fetching only updates our local repo, while pulling will fetch and merge it into our local workspace.
As the git output suggest, let's pull!

    $ git pull
    $ git log --oneline
      fb58b27 (HEAD -> master, origin/master, origin/HEAD) Add line about my love of caffeine.
      187c6fa (origin/dev_llam) Saying who I am
      deccda5 Commit first file to the repo.

Yay! We’re done! We have successfully pulled the coffee change from a remote repo.

If you've made it this far, you are a trooper! Congratulations!

You now know how to:

Create a new git repository
Add and commit files to a repo
Create and merge branches
Clone a repository
Fetch and pull changes

Hopefully this was an insightful glimpse of the things possible with git and the command line at your finger tips.

How to use the fetch API with and without async/await

Liz Lam — Fri, 21 Aug 2020 16:12:05 +0000

Sometimes the best way to explain something to someone is to just show them an example. This was the case when a couple of coworkers had some confusion around using async/await.

After verbally explaining, I opened up my web console and gave them a quick example. This seemed to clarify their understanding.

I will share the example here in case it's helpful to anyone else.

SIDE NOTE: This also made me think about how just playing around in the web console is a great way to learn of JavaScript. It's also an easy way to share knowledge because anyone can just copy what you have into their own web console.

Learning With Video Games

Liz Lam — Mon, 03 Aug 2020 17:31:15 +0000

I just recently finished Service Workies by Dave Geddes. It is a video game style tutorial that teaches the player how to use Service Workers. It's not simply the gamification of learning, but an actual game with engaging graphics, music and story.

The concept is based on the idea that expertise is attained when you repeatedly do something. Video games are a good example of this and he uses those techniques to solidify concepts and drill in practice. Although I'm not really a gamer, I find this style of tutorials to be really creative and fun!

Dave Geddes also have "courses" on Flexbox and CSS Grid. Both Flexbox Zombies and Service Workies are free to play where Grid Critters cost about $99 at the time of writing this.

After a quick look around, I've found a few other games in the same vein:

Flexbox Froggie
Grid Garden
CSS Diner
VIM Adventures

What's your experience with these type of games? Do you think they are an effective way of learning?

Create Your Own Quote API with Netlify Functions - Part 3

Liz Lam — Tue, 07 Jul 2020 22:23:06 +0000

Photo by Jon Tyson on Unsplash

This is a 3 part exercise on how to create and use your own quote API with Netlify functions.

Create Your Own Quote API with Netlify Functions (3 Part Series)
Part 1: Get a Netlify function up and running locally.
Part 2: Deploy the function to the Netlify platform.
Part 3: Tie it all together by using the deployed API to display quotes in a React app.

If you've been following along, you should now have a working public API that returns a random quote. In this last part of the series, we will use that API and display the quote in our React app.

Go into the src directory and replace App.js with the following:

import React, { useState, useEffect } from 'react';
import './App.css';

function App() {
  const url = '/.netlify/functions/quotes';
  const [quote, setQuote] = useState();

  useEffect(() => {
    const getQuote = async () => {
      const response = await fetch(url);
      const data = await response.json();
      setQuote(data.quote);
      return data;
    }
    getQuote();
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <p>
          {quote}
        </p>
      </header>
    </div>
  );
}

export default App;

If you are a React developer, this should feel pretty familiar to you. If not, this is essentially a functional component that uses fetch to call our quotes api.
The component returns the JSX portion which displays the quote.

Start your dev environment if you haven't already with netlify dev. Open up a browser and go to http://localhost:8888. You should see a screen something like the following:

Commit and push these new changes to GitHub. This should trigger a redeploy on Netlify. Once the redeploy is complete, you should be able to navigate to your public url and see the same thing.

Congratulations! You did it! You've created a quotes API, deployed it to Netlify and used it in a React app. Hopefully this example serves as a simple foundation on how to build API's with the power of serverless technologies.

DEV Community: Liz Lam

The ABC's of grep - A

A

Use jq to format p4 changes output to SQLite

CREATING THE INSERT STATEMENTS

SETTING UP THE SQLITE DATABASE

Use jq to format p4 changes output to JSON.

The input: p4 changes

The flags: jq -R -s

The jq filter

Some Quick Thoughts on Seven Languages in Seven Weeks - Part 4

Some Quick Thoughts on Seven Languages in Seven Weeks - Part 3

Some Quick Thoughts on Seven Languages in Seven Weeks - Part 2

Some Quick Thoughts on Seven Languages in Seven Weeks - Part 1

Setting up Fathom Lite in a Docker Container

A Gentle Introduction to the Git Command Line

Creating a new git repository

Add a file to our working directory

Time to commit

Create a new branch

Let’s make a change on our new branch.

Let's take a look at our history so far.

Time to merge!

What about cloning?

What about pulling?

How to use the fetch API with and without async/await

Learning With Video Games

Create Your Own Quote API with Netlify Functions - Part 3

The input: `p4 changes`

The flags: `jq -R -s`

The `jq` filter