Flexbox Tool and Flexbox Froggy for CSS

Hi guys! Currently working on renovating my website (which you can check out here: jessicapeng.com), so I decided to share an extremely useful tool I am using for CSS and formatting things on the website: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

I especially like this website because it formats the properties you use for the parent of the flex container on the left and the properties for children (inside the parent containers) on the right so you don’t have to frantically scroll through lots of syntax and information to find the distinctions and syntax. It looks like this:

One of the really useful tools I found was the magic of warp! I didn’t know flex had the property where they could not only help you align everything in 1 row, but they actually allow images to warp one-by-one to the bottom if there’s not enough space. This is so incredibly convenient because I no longer to hard-code the responsiveness of each element and redesign at each px size of the website. Flex does this for me!

This was the css of outside container or div that contained the images I wanted to align:



          display: flex;

           align-items: center;

           justify-content: center;


This allowed all the images in my container  to be aligned in a row, and centered all the elements inside the container (vertically and horizontally I believe).

Another really useful tool to learn flexbox froggy that has a 24 exercises to do with aligning frogs on lilypads that help you practice the syntax and functions of flex. Before I really start web development again, I might have to redo those exercises. Link to flexbox froggy: https://flexboxfroggy.com/ 

What it looks like:

File Permissions and ‘chmod’

Since I work with Linux in both Advanced Programming (C) and in my DevTech course, I had to implement file permissions and ‘chmod’ my shell scripts. I was always a little confused on this, but I was finally able to understand how the permissions are displayed and how to change and why we need to chmod a shell script, so below is an explanation of this:

When you type the commands ls -l into terminal you can see all the files or directories in the directory you are in and you can see all the file permissions for each. An example of ls -l looks like this:

The format of the file permissions look like:

_ _ _ _ _ _ _ _ _ _

which is 10 fields which are known as its “file mode bits” which give the different permissions. 

You can also look at it like:

_    _ _ _    _ _ _   _ _ _ 

The first character stands for whether it is a directory or not. If it is a directory, it has a ‘d’ as the 1st character. If it is just a file or not a directory, it will just have a dash: ‘-‘.

The next parameters are grouped into groups of 3. The 1st group stands for the user permissions, the second group of stands for the group permissions, and the third group stands for other permissions

The 3 permissions are:

read – r

write – w

execute – x

(Pretty self-explanatory right?) 

So another way to view the file mode bits are:

d   usr:r w x   grp:r w x   othr:r w x 

Given that, lets now analyze the ls -l of my previous directory I showed in the image above: 

As you can see, the only row that has a ‘d’ as the first mode bit is my directory lecture-5 which is a separate “folder” that contains the lecture notes inside my current hw-5 directory (lecture-5 is also shown in purple to indicate it is a directory).

Now, lets look at 1 file’s permissions just to apply what we learned above: script.sh

The file permissions for script.sh are:


Let’s put this into the format above as:

direc:–    usr:rwx   grp: r–   othr:r–

  1. Directory: Since directory bit mode is a dash, this means it is not a directory.
  2. User permissions: User has permissions to read, write, and execute.
  3. Group permissions: Group only has permission to read (the rest are indicated by dashes).
  4. Other permissions: Same as group, Other only has permission to read (the rest are indicated by dashes).

Now that we understand how to see the permissions on file, we’ll talk about how to change permissions with chmod.

Chmod Modifies File Permissions

First, we must understand read, write, and execute can be represented by these numbers:

read – 4

write – 2

execute – 1

The format of ‘chmod’ is 3 digits. For example, if I wanted to give file permissions to a script called script.sh, I could do:

chmod 744 script.sh

Now, let’s go over what permissions that gives. The format of the digits are:

usr      grp      othr

The summation of the read, write, and execute numbers are the permissions given to each of the 3 groups. So, given the digits 744, this means that:

  1. usr = 7 = 4 + 2 + 1  -> which is all the permissions ( read, write, execute)
  2. grp = 4 -> 4 is just the read permission
  3. othr = 4 -> 4 is just the read permission

**Note: the sum of the numbers 4, 2, 1 are unique and cannot be produced by other combinations and therefore can serve to indicate file permissions

So chmod 744 script.sh would give us the exact same permissions that we just observed on script.sh:


Where the user has all permissions ( read, write, execute), and the group and other both only have read permissions.

Here are the other combinations you can have:

# Permission rwx Binary
7 read, write and execute rwx 111
6 read and write rw- 110
5 read and execute r-x 101
4 read only r– 100
3 write and execute -wx 011
2 write only -w- 010
1 execute only –x 001
0 none 000







More on bash scripting

This was one of my homework assignments for DevTech on Linux:

Write a script that parses the output of /usr/bin/free and checks if the “free” memory is below 400000 (these are kB). If it is, print a warning that the system is running low on memory. Example run: 

./memory_monitor.sh Memory low: 169416 / 400000 

Parsing  /usr/bin/free:


**Note: free memory is Mem row and the 4th column

You can use grep Mem to get only the row with mem

Afterwards, you can use awk in order to only get the 4th column

Then, you can compare it to 400000. But since it is an integer comparison, we must use the byte comparator which is -lt (yes bash is weird).

**Some other things to note:

-to get the memory, we must surround the execution with $() to store in variable

-when referring back to the variable, we must access with $

-when making if comparisons, there must be a space after and before the [ and ] brackets

-after an if statement is opened, it must be closed with fi

Bash script that I wrote: 


free_mem=$(/usr/bin/free|grep “Mem”|awk ‘{print $4}’)

if [  $free_mem -lt 400000  ]


           echo System is running on sufficient memory: $free_mem/400000.


           echo System is running on low memory: $free_mem/400000.


To run script:

chmod 744 script.sh



Here are my resources on bash syntax for if statements, variables, comparators, etc:

Other Comparison Operators: https://tldp.org/LDP/abs/html/comparison-ops.html

Variables: https://tldp.org/HOWTO/Bash-Prog-Intro-HOWTO-5.html

If Statements: https://ryanstutorials.net/bash-scripting-tutorial/bash-if-statements.php


Copying from Virtual Machine onto Local Computer

I’ve been trying to figure out how to copy files from my Virtual Machine environment onto my local computer and desktop. I’m still trying to understand it completely, but according to my DevTech professor, you can use the “scp” command.

This is my professor explaining it (I’ll add commentary once I understand everything):

You can transfer the file to your own computer with secure copy (scp).  It is part of the OpenSSH Suite and is used to transfer files back and forth between machines.  It is like ssh but for file transfer. You will need to include a flag to your local ssh key file.

Here is an online example I found explaining it as well: https://uoa-eresearch.github.io/vmhandbook/doc/copy-file-linux.html

More explanation by my professor: 

From “man scp”, the syntax is:

     scp [-346BCpqrTv] [-c cipher] [-F ssh_config] [-i identity_file]
         [-l limit] [-o ssh_option] [-P port] [-S program] source … target

Square brackets contain options, and they are optional (because they are in square brackets).

The only required option is: scp source target.

You can copy from remote server (VM in this case) to your local computer, or from your local computer to the VM.  This will determine what is “source” and what is “target”.  For example, to copy something from your local computer to the VM (with -i because we need to pass our ssh key because we configured the VM to authenticate this way):

scp    -i /path/to/your/private-key    file-on-local-computer    [email protected]

-i should point to your private ssh key

where username is your VM username, and is your VM external IP address.  To copy in reverse, you reverse the source and target.  If you use scp on the VM then the source/target are relative to the VM.

scp script.sh ~/. will copy the script locally, because “script.sh” is source and “~/.” is target, and this target is local, not remote.  Your VM is remote, it is far away somewhere.  Just like you log into your VM with ssh, scp needs username and IP address to connect to it, this is what defines it as remote.

Another example is uploading your homework to Courseworks.  Courseworks is remote, you can’t access it as you would a local directory on your computer.  You log in, then you upload the file through the web interface.  ssh/scp is just a different interface, in this case for managing (ssh) and moving files (scp) between two different hosts.

Shell scripting basics

I was a little confused on how to write a shell script and we used it for Advanced Programming and also we are doing it in my Linux Projects course so I thought it might be pretty important so I searched it up and found this link that describes it nice and thoroughly: http://linuxcommand.org/lc3_wss0010.php

So first, you can write your script with vim/emacs, nano, etc; Personally I don’t exactly like using nano, I’ve never used emacs because my AP professor was so against it, so I guess I’m most familiar with vim. To write in vim you can just “vi ___” or “vim ___” to create file and save by doing “:wq” or “:q” to just quit without saving. To write in the file you have to press “i” for “insert” to be able to edit it.

Now, onto shell scripting. Shell scripts are essentially a combination of command lines that you would usually do in the terminal, but it does it all for you in one file, which is neat! I believe you can just write 1 command on 1 line (which is what I have been doing so far, maybe fancier shell scripts might be different).

And then, to give the shell permission to execute, you have to chmod it. One chmod could be chmod 755 hello_world (assuming your script was named hello_world) and “755” gives it read, write, and execute permission. To run it, you can do ./hello_world. The reason why this works is because we specified the pathname “./” of the file to execute. I think that “./” just means same directory as you are in.

Now, if you just want to be able to run the hello_world as a command you can put it in your bin. Then, you can just type hello_world in the command line and the code will run.



LitHum Buy Sell Memes

Check out a compilation of memes from spring semester readings in Lithum on my lithum buy sell memes blog: https://lithummemes.blogspot.com/

Linux and Kernels Explained

Some definitions I asked my professor to clarify the general ideas of Linux and kernels in my Development Technologies Linux course:

  1. Linux: Linux is an operating system, like Windows and MacOS.  It runs on hardware – a laptop, desktop or server (or VM).  Shell is an interface to the system.  Just like a Windows or Mac GUI is an interface to those systems.  Mac has a shell interface as well, and you use the terminal application to interface with it in an interactive way.  When you write a script, you interface with it in an automatic way.  Mac also has ls, grep, sudo.  They are system commands or tools, to get things done.
  2. Kernel: Sometimes we talk about Linux being a kernel.  A kernel is a small part of the operating system that runs and managers the hardware.  You don’t see it and don’t necessarily interact with it.  You use commands like ls instead.  In the context where Linux is a kernel, then the system is called GNU/Linux.  This is because the GNU project wrote a lot of the actual operating system, like commands (ls, grep, etc.), compiler, linker, and so on.  You can check it out at gnu.org.

Side notes about organizaing on VM: You can organize your homeworks and assignments in separate directories on your VM, it is good practice to be organized.  It will help you in the future with your projects.

Linear Algebra Concepts

Since I’m studying for my Linear Algebra Midterm 2, I would like to share some cool concepts or algorithms we learned in class. My notes aren’t as neat as they are usually, but here are some cool things:

  1. Change of Basis – essentially writing a matrix with  basis for R^n into a matrix with another basis (so converting the matrix into another basis “terms” or “language”)

This is a really great video explanation describing the concept of it: Change of Basis

Here are my notes from it. Here in my notes, [x]B is the new vector in terms of the new basis:

2. Gram-Schmidt Process – a way to solve for the orthogonal and orthonormal basis from an original basis. I thought the algorithm and pattern behind it was interesting since, for each new vector, you essentially subtract the “not orthogonal part” to force the remainder to be orthogonal only

3. Least Squares and Data Fitting – least squares is basically when there is no actual perfect solution to a linear transformation or matrix solution, but you try to find the one that is closest to it. I thought that was pretty deep on both a mathematical and philosophical level because it’s saying that although one cannot reach perfection, they must strive towards it. Sort of like my Model United Nations essay for college applications. If you have a lot of points on a 2D graph, the least squares regression would be the line that best fits the points on a line. I thought this as choosing someone/raising someone too–you can’t get make the perfect person and someone won’t have all the qualities you want, but you can get close enough.

Anyways, here are my notes form it:




I think I’m going to renovate this blog (for the millionth time) into that title description. I want to have a lot more freedom to post my day-to-day tasks and accomplishments and things I learn. So that will be the new title of the blog, once I figure out how to change the different things with WordPress. Using this website platform is such a pain for web developers, I would much rather program it myself so I can get it the way I like things.

TIL 4.15

Okay so I switched to TIL and the date instead of the number because I don’t want to keep scrolling down to see which TIL I am on since it’s obvious I haven’t been consecutively updating these everyday.

So TIL 4.15: If you don’t ask questions in lecture, there’s no value in going to it