DEV Community: yuki

Algorithms for beginners

yuki — Sat, 07 Oct 2023 04:40:02 +0000

What is algorithms?

What image comes to mind when you hear the word "algorithm"? In my case, "Hmmmm, it sounds kind of difficult".

Even though it sounds difficult, algorithms are very familiar to us in our daily lives. A series of "steps" that describes how to solve a certain problem or complete a certain goal is called an algorithm.

The name "algorithm" is said to come from the name of the 9th century mathematician al-Huwarizmi in present-day Baghdad, Iraq. Algorithms are a concept with a longer history than computers and programs.

Now, let us consider an algorithm with a familiar example. For instance, shopping is one algorithm.　

If you have a list of items to buy one bottle of milk, one bag of potatoes, and a dozen egg, there are multiple ways to find the items in any order. Such a case in which the items can be processed in any order can be called a list-type data structure. Also, an algorithm whose behaviour depends on certain conditions, such as buying another bottle of milk if it costs less than $3, is called a choice structure algorithm. Thus, in fact, algorithms are hidden in our daily life.

Algorithms and Flowcharts

A flowchart is a diagrammatic technique for designing the flow of a program.

Flowcharts allow for a holistic view of information, clarifying and understanding the process. It is a useful tool that allows even complex information to be presented in a visually clear manner.

Here are some basic types of control structures.

Sequential

Executes processes in a top-to-bottom order.

Let's take shopping as an example and represent it in a flowchart and code. When you go shopping, first thing to do is leave home. When you arrive at the grocery store, you search for products, purchase them, and return home. This order cannot be changed. They are executed in order from top to bottom.


leaveHouse();
searchItems();
makePayment();
goBackHome();

Branching

Select one of two or more alternative paths.

Suppose you go shopping and buy some milk. You want milk but are concerned about the price. Therefore, you decide on a budget. If the price of a bottle of milk is less than $3, you buy two more bottles of milk. However, if the price is higher than $3, you decide to buy only one bottle. This process can be represented as follows.

searchMilk();
let milkNum = 0;

if (milkPrice < 3){
    milkNum = 2;
}else{
    milkNum = 1;
}

makePayment();

Iterative

The same process is repeated until the end condition of the iteration is met.

You are now going to cook with potatoes. There are 10 potatoes in a bag. If you use one whole potato, it is too big. So you decide to cut the potatoes in half. The action of cutting the potatoes is repeated until there are no more potatoes in the bag. This can be expressed as follows.

let potatoNum = 10

while (potatoNum > 0) {
  cutPotato();
  // A function to cut a potatoes in half 
  potatoNum--;
}

Algorithms are an important tool for programs to solve problems. Even algorithms that seem complex may be better understood by drawing a flowchart!

JavaScript - Understanding Functions

yuki — Mon, 25 Sep 2023 20:58:48 +0000

A function is an instruction that takes some data, executes a defined and unique process, and returns the result. It's almost like a vending machine which you put money in and a drink comes out.

Two steps are necessary to use the function.

Declare a function
Call a function

◾️　Function Declaration

Functions can be declared using the "function" followed by a name and a pair of parentheses, which may contain argument if needed. And then write the tasks inside the curly braces {}.

function $FUNCTION_NAME() {
  $STATEMENTS;
}

$FUNCTION_NAME(); // call a function

◾️　Function Expression

A function expression is very similar to a function declaration. A function expressions can be assigned to variables or used as arguments in other functions. It doesn't require a function name(anonymous functions).

let $FUNCTION_NAME = function() {
  $STATEMENTS;
};

$FUNCTION_NAME(); // call a function

◾️　Function Call

You can call the function by just writing its name and parentheses. If arguments are required, they can be written in parentheses.

Argument(/Parameters):
Functions can accept parameters, which allow you to pass specific value to the function when it's called.

Return Value
By using return statement, you can return value to the code that called them. The returned value can be used in the code that called the function.

// argument: width, height
function calculateArea(width,height) {
  // return the value
  return width * height;
}
// pass the value to function
// width:4, height:5
console.log(calculateArea(4,5)); //20

▫️　Hoisting

Hoisting is JavaScript's default behaviour of moving declarations to the top.

Functions	Hoisting	Description
Function Declarations	○	You can call a function before it's defined in the code.
Function Expressions	×	You can call a function only after the line in which they are defined. Attempting to call a function expression before its definition will result in an error.

◾️　Anonymous functions

Functions can also be defined without a name. These functions are called anonymous functions and used for code that only needs to run once within a task, rather than repeatedly being called by other parts of the script. These are often used as arguments to other functions, assigned to variables, or used as event handlers and listeners to perform a task when an event occurs.

const squareArea = function(width,height) {
  return width * height;
}

◾️　Arrow Functions

Arrow functions are a function notation newly introduced in ES2015(ES6), and as the name suggests, functions are defined using =>. They are useful for short, one-line functions.

let squareArea = (width,height) => {
  return width * height;
};

squareArea(4,5);

If the function has only one statement, you can omit the curly braces and the return keyword.

let squareArea = (width,height) => width * height;

If the function has only one parameter, you can omit the parentheses.

let sayHi = name => `Hi ${name}! How are you?`;

git #1 - study notes

yuki — Mon, 18 Sep 2023 02:34:39 +0000

what is git?

Git is a distributed version control system that tracks changes to files. It allows multiple users to collaborate and facilitates work in software development.

git repository

Git repository is a workspace that tracks and saves the history of all changes you made to the files.
Local Repository
- A repository located on a user's own machine.

Remote Repository
- A repository placed on a dedicated server to be shared by multiple users.

check the git version

❯❯❯ git -v
git version 2.39.2

configuring your local git

❯❯❯ git config --global user.name "my name"
❯❯❯ git config --global user.email abcde@mail

You can verify your configurations

❯❯❯ git config user.name
my name

❯❯❯ git config user.email
abcde@mail

Initialize a new Git repository

When you run git init, a directory called .git will be created. This folder contains all the information necessary for Git to operate.

It's not recommended to initialize a new repository inside of an existing repository.

❯❯❯ git init 
# or
❯❯❯ git init ${dirName}

❯❯❯ git init
Initialized empty Git repository in /Users/user/Documents/git_test/.git/
❯❯❯ ls -la
total 0
drwxr-xr-x  3 user  staff   96 Sep 11 21:59 .
drwxr-xr-x  6 user  staff  192 Sep 11 21:58 ..
drwxr-xr-x  9 user  staff  288 Sep 11 21:59 .git

add and commit

git commit is used to save changes to your code in a repository. Commit is like a save point in a video game. So you can return to the save point later like the players. You can create snapshot of your changes and commit messages which help you keep track of what changes you've made in each commit. It is recommended to write in present tense.

But before git commit you have to stage your changes. When you run git add, you are essentially telling Git which changes or files you want to include in the next commit.

I made two files which are test1.txt and test2.txt and run git add command.

# We have two files in this directory
❯❯❯ ls -la
-rw-rw-r--  1 user  staff   820 11 Sep 22:00 test1.txt
-rw-rw-r--  1 user  staff   200 11 Sep 22:00 test2.txt

# Add all files in this directory
❯❯❯ git add .

# If you want to add specific files, you just need to specify the files
❯❯❯ git add ${file1} ${file2}

# Now we added two files to staging area
# You can check the status by running git status command
❯❯❯ git status
On branch main

No commits yet

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

# The -m flag allows you to pass in an inline commit message
❯❯❯ git commit -m "initial commit"
[main (root-commit) 36802f1] initial commit
 2 files changed, 2 insertions(+)
 create mode 100644 test1.txt
 create mode 100644 test2.txt

# You can check all commits you have made by running git log command
❯❯❯ git log
commit 3680...5746 (HEAD -> main)
Author: me <me@mail.com>
Date:   Mon Sep 11 22:09:01 2023 -0700

    initial commit
lines 1-5/5 (END)...skipping...
commit 3680...5746 (HEAD -> main)
Author: me <me@mail.com>
Date:   Mon Sep 11 22:09:01 2023 -0700

    initial commit
~

diff

The git diff command allows you to see

differences between working directory and stage
differences between stage and repository
differences with specific files

# 1. diffs between working directory and stage
❯❯❯ git diff

# 2. diffs between stage and repository
❯❯❯ git diff --staged

# 3. diffs with specific files
❯❯❯ git diff test2.txt
diff --git a/test2.txt b/test2.txt
index d606037..3b08777 100644
--- a/test2.txt
+++ b/test2.txt
@@ -1 +1,3 @@
-test2
\ No newline at end of file
+test2
+addline
+addline2

command line cheat sheet for newbies

yuki — Tue, 12 Sep 2023 20:21:15 +0000

A command-line interface (CLI) is a way to interact with a computer's operating system by typing commands into a terminal.

Structure

❯❯❯ $ command ${options} ${arguments}

# e.g.
❯❯❯ $ ls -la /document/photo

command
- The action to be executed.
options
- These are optional options (or flags) that modify the command's behaviour.
arguments
- These are the required or optional arguments that use to specify the target. The format of arguments depend on the each command.

Shortcut

Shortcut	Action
Ctrl + a	Move the insertion point to the beginning of the line
Ctrl + e	Move the insertion point to the end of the line
Ctrl + b	Move the insertion point backwards
Ctrl + f	Move the insertion point forward
Ctrl + h	Delete one character behind the cursor
Ctrl + d	Delete a character before the cursor
Ctrl + u	Delete the entire line

Directory management

pwd

check the current directory

~/Desktop ❯❯❯ pwd
/Users/user/Desktop

mkdir

make new directory

~/Desktop ❯❯❯ mkdir myDir

cd

change directory

# change directory to myDir
~/Desktop ❯❯❯ cd myDir
# change directory one level up in the hierarchy
~/Desktop ❯❯❯ cd ..
# change directory to home
~/Desktop ❯❯❯ cd

File operations

ls

list files and directories
-a: list all files including hidden file starting with '.'
-l: list with long format (permissions)
-t: sort by time and date
-d: show only the directories

~/Desktop ❯❯❯ ls -lat
total 2992
drwxr-xr-x+ 54 user  staff    1728  6 Sep 16:30 ..
drwx------@  9 user  staff     288  6 Sep 16:28 .
drwxr-xr-x@ 2 user  staff      64  6 Sep 16:28 newDir
-rw-r--r--@ 1 user  staff       0  6 Sep 16:25 file1.txt
-rwx------@ 1 user  staff  321110  6 Sep 14:04 file2.txt
-rwx------@ 1 user  staff  363448  5 Sep 08:46 file3.txt
-rwx------@ 1 user  staff  835488 26 Aug 11:21 file4.txt

cp

copy files
-r: copy directories recursively
-p: preserve the attributes (mode,ownership and timestamps)

~/Desktop ❯❯❯ cp -r originalDir copyDir

rm

remove files and directories
-r: delete directories recursively
-f: Ignore nonexistent files, and never prompt before removing
-i: Prompt before removal
-d: delete empty directories

~/Desktop ❯❯❯ rm -d originalDir

mv

rename or move files and directories to another location
Adding a -v flag is to print source/destination directory

~/Desktop ❯❯❯ mv -v original.txt new.txt
original.txt -> new.txt

other

man

view manual pages for Unix commands
press q to exit

~/Desktop ❯❯❯ man ls
LS(1)                       General Commands Manual                      LS(1)

NAME
     ls – list directory contents

SYNOPSIS
     ls [-@ABCFGHILOPRSTUWabcdefghiklmnopqrstuvwxy1%,] [--color=when]
        [-D format] [file ...]

DESCRIPTION
     For each operand that names a file of a type other than directory, ls
.
.
.

clear

clear screen
shortcut is Ctrl + k

history

show history of previous commands

  300  ls -lat
  301  pwd
  302  cd
  303  man ls

★　extra tip!　★

If you want to make sure a prompt always appears before deleting files you can create alias by changing configuration file.

.bashrc: Bash shell
.zshrc: Zsh shell

~ ❯❯❯ echo 'alias "rm=rm -i"' >> ~/.zshrc

My First Step to Become a Front-End Engineer

yuki — Mon, 04 Sep 2023 02:58:57 +0000

Hello! Thank you for reading my post:)

My name is Yuki. I’m from Japan and currently living in Vancouver, Canada. In this post, I’d like to write a little about my background and my future goals.

About Myself

I have worked as a cloud engineer for over 4 years since graduating from university and am currently enrolled in the web development program at Cornerstone International Community College. In university, I majored in English Literature and Media Studies and also studied Japanese Language Education as a minor. Computer science is a completely different field, isn't it? Some of you may be wondering why I worked as a cloud engineer.

When I was a junior in uni, I went to Australia on a working holiday. I met many people there, and among them were IT engineers. I had never met an engineer before, so their stories were fresh and interesting. They really enjoyed their work and were proud of it. That made them very attractive. Also, ever since I was a child, I have loved to create, make and build things. So I decided to study HTML and CSS on my own. At first it was difficult because there were so many things I didn't understand, but as I was able to do more things, it became more interesting.

After graduating from university, I started working for a Tokyo-based company that developed web systems for clients, and was assigned to the infrastructure department. My primary responsibilities included setting up the AWS environment, monitoring logs and alerts, and designing the security architecture for various business needs. I really enjoyed working "behind the scenes" supporting web systems because it was really rewarding work. However, the more I wrote code to automate operations in Python and infrastructure code in IaC tools, the more I wanted to learn about front-end.

I also wanted to live in a different country and challenge myself. So I decided to come to Canada to learn web development. Two birds with one stone, don't you think?

My Goal

First of all, I want to graduate from the college successfully and find a job as a front-end engineer who can provide satisfactory user experiences and solve clients' problems. As I write this article, I have just finished the first week of the course. During this week, we learned the basics such as computer hardware and networking. It was very interesting to learn some of the parts I knew from my previous job in English. I am satisfied that the teacher in my class is very attentive to the students and explains things in a way that is easy to understand. My classmates are really kind and enthusiastic and I am happy to be one of them.

In the web development course, I hope to deepen my understanding of the areas I have studied on my own　and want to catch up on new technologies, as well as collaborate and grow together with my classmates from different backgrounds. I also want to improve my communication skills in addition to my coding and design skills, as I believe that cooperation is necessary to become a good engineer.

Aside from web development, I like eating, jogging, collecting sounds to make music, and watching Cirque du Soleil shows. Since Canada has people from various cultures, rich nature, and Quebec, the birthplace of Cirque du Soleil, I would like to enjoy experiences that can only be had in Canada!　
(It would be super fun to mix what I like and web development to create something!)

I know there will be many challenges in becoming a front-end engineer, but I will work towards my goal and enjoy learning! I will be posting on my blog about the traces of trial and error and what I have learned, so please watch my progress :)