Absolute Beginner | Simple Introduction to GIT ( Part I)

Version Control

Imagine you are a video editor and you just completed a job on a big youtuber’s video. But  feel like trying out some really cool editing technique, so  his/her subscribers would notice your artistry and want to find out more about you and possibly hire you for more work. Here are possible scenarios independent of version control system:

  • The new special effect was added, saved ,tested and was really cool. You send it to the YouTuber and he/she likes it very much and uploads it. everyone is happy.
  • Same as above but he/she says she prefers the previous version (without the special effect). Problem is: you did not save a copy of the pre-special effect video, so you only have the post-version. Darn it.
  • You made a copy, added the new special effect to the copy … everyone is happy.
  • Did the exact same thing but you suddenly got another idea. So you saved a third copy (1 original, first-special-effect copy, 2nd-special-effect-copy) .. this repeats like 10x: Problem : your storage

Personal Note: For a very simple project such as a presentation, I personally do not use GIT. I just often work with the copy and paste. However, VCS really shows its strength when collaboration and increased project complexity is in the picture. E.g. a Building a Web App  [Frontend Team, Backend Team, Web Designers, UX/UI Team, Q/A Testing Team] are all involved, ideally.

Summary of GIT VCS’ job

  • records changes made to a file
  • Permits reverting back to a specific version/state
  • makes comparing states
  • favours collaboration

Basic Terminology

Term Explained
Repository all tracking information are stored in form of git objects in the repository. This can be initiated by running either the git init or git clone <remote repository url> command
Branch Branching allows you to make a copy of a certain state of a directory. This is useful when you want to add a really cool feature unto a stable project but is untested. Working on a copy instead of the original project would be a safer route.
Remote repository Not local. Usually described as repositories that are hosted somewhere on the internet e.g. repositories on github, gitlab etc.
Local repository Simply a repository hosted on your local machine.
staging (area) This is a step before the commit step. When you run git add <file>, you are adding the file changes into the staging area. Sort of like; “hey git, I just want you to know about these changes I have made to this file. I plan on making a snapshot (commit) later”.
Config As the name suggest, it stores basic configuration information of the repository. Here you could set the repository owner name ad email (contact informaton), so just incase your repository goes public, people could figure out who created it.
Description Basically the frontend of your repository. What ever you write in the description file will be displayed in the gitweb (frontend: what users see).
Object This is where all the core tracked files are found. The most important types of objects created by git are blobs (the file contents squashed and compressed), tree object ( subdirectories information compressed : required to map out the directory structure) and the commit object ( contains pointer to the tree object, author info and commiter info).
Hooks A really nice feature in git is the ability to call actions before or/and after know git commands (e.g. pull, rebase, commit etc). These actions are called hooks. If you go inside the directory ( cd hooks) and list the files, try opening one (notepad <filename>).
Head Contains reference to the current branch. Since this repository was just created, the HEAD (current) branch is most likely the master branch.

VCS with Git Scenarios

Scenario I : Just you

initialize git

  • You just began writing your thesis and you are want to use git to manage the changes before the day of submission.
  • A master_thesis.docx or master_thesis.txt is created in directory /home/you/masterthesis/
  • After installing git, as instructed here, you initialise it by running the git init command in your command line.
  • A .git folder is now in your /home/you/masterthesis directory, which contains all necessary information for tracking the changes to your files within /home/you/masterthesis.
  • As shown above, there are 4 directories ( hooks, info, objects and refs) and the config, description and HEAD files.
  • This is all you really need to know as a beginner. There are more though, so do personal research if needed.

Track file/directory changes

  • You want to know what files within you directory are untracked or tracked. Simply run git status in the command line. Most likely, your master_thesis.docx file is untracked. Meaning git is not following the changes made to this file. To track it, you first run git add master_thesis.docx and then snapshot it by running git commit -m <message here>.
  • Every time you commit a file, git creates a hash via a specific algorithm (if a previous commit exists, compares the new hash against the previous one to see if changes were made) and stores the hash within the /objects directory.

view commit objects

  • In order to view the commits you have made within a repository, simply run  git log. The objects created are the commit, tree and blob object. So in this case, since this is the first commit, 3 objects are stored in /objects.

Add more changes, stage and snapshot again

  • Now you added a title, logo, table of contents and chapter names to your document. So you decide to stage this state of your thesis again: git add  and git commit -m .
  • Apart from the creation of a second commit, tree and 1 blob object, something else occurs. The new commit object, which already points to its own tree object, also points to the commit object immediately before it.

New branches

  • Let’s say you want to try out another word template and change the font, in the absence of vcs you would simply make a copy of the thesis and continue working on it. In git terms it is called “Branching”.
  • After creating a 2nd branch, you need to move your HEAD pointer to the new branch. Because if you do not explicitly tell HEAD to move to <newbranch>, any commit you make after will still be “connected” to the default branch master, a behaviour you probably do not want.
  • By using the git checkout <newbranchname> command, the HEAD pointer points to your new branch, meaning you are safe to make your template and font changes.

Overview

First commit

What happens when you git commit ?
What happens when you git commit ?

Second commit

What happens on subsequent commits ?

Creating a new branch

Creating new Branch
What happens when you create a new git branch and commit

Useful Commands

git repository

  • Initialise git repository in a given directory : git init
  • Copying a remote git repository into you local machine while adding a reference to the remote repository : git clone
  • Checking the tracked and untracked files within your repository : git status

git staging area

  • to track files or add to the staging / cache area :  git add <filename>
  • if however, you made changes, staged them but do not want them anymore = empty out the staging area : git reset 

git branches

  • Shows a list of all branches of a repository; highlights the one pointed by HEAD: git branch
  • Delete a repository: git branch -d or –delete
  • Moves HEAD pointer to another branch/ switch active branch: git checkout <branchname>
  • Create a new branch and immediately switch into it: git checkout -b <new branchname>

git help

  • Get information on a specific git command : git <command> –help

making snapshots

  • Takes a snapshot of all staged changes, creates commit, tree and blob objects: git commit -m
  • Stages or temporarily “caches” given file changes: git add <file>

git remote repositories

  • Shows a list of remote repositories linked to local repository: git remote
  • Links a remote repository to the local repository: git remote add <remote alias> <remote repository url>
  • Removes connection to a linked remote repository: git remote remove <remote alias>

In part II, We will learn about other git commands such as pull, fetch, merge and I will be describing a VCS collaboration scenario

References

Interesting Blog Posts

Operating System :  Windows 10

Exercise:  How would you stop all tracking without deleting the directory ? TIP (you have to delete something)

React Transition for Dummies | Difference between CSSTransition and Transition

Bounce, Fade, Animate

05/03/2019 11:56:52 PM

Intro into React Transitions

In case you are a newbie in the world of react transitions,  you should probably read this post (React Transitions for Dummies | Part 1 : Transition, Styled Components and RandomColor) before continuing.

<Transition>

If you want to animate a react component, wrap it with <Transition> component so that you can gain access to the state of what is being animated. There are four main states: entering, entered, exiting and exited.  The following is a simple example of using the transition to fade in a text box on click and fade out on the next click.

Example of <Transition> Component Usage

<CSSTransition>

This component is an extension of the <Transition> component and I mainly use this when I want to use CSS to animate my component rather than javascript. Here is an example of using this component to achieve the exact same goal as above.

Example of <CSSTransition> Component Usage

Note: The classes are added to the classList of the node you are animating one after the other  and removed. So you do not need to add a transition property in the style for each of the classes.

Examples

Here are slightly more interesting ways of using these components for you web application.

Transitions

The goal here was to animate the opening of each “item” from the list of items by expanding it to fill the room.

CSSTransitions

Compared to the above example, this one is very simple and straightforward. The goal here was to show different ways of animating a textbox on click. One way is to simply show the box, just after the action button had faded out, while the other method involved initially fading out the text in the  action button, then increasing both its width and its height and followed by a slow fade in of the text. So basically, one is over the top (unnecessary) and the other is simple. 

Further Reads

  1. React Transitions for Dummies | Part 1 : Transition, Styled Components and RandomColor
  2. Transitions
  3. CSSTransitions
  4. Material Motion

React Transitions for Dummies | Part 1 : Transition, Styled Components and RandomColor

04/29/2019 12:49:21 AM

Overview

Simply learning on how to use the React Transition Group “Transition” component to make websites look awesome!

Who is this for?

This should be useful for those who are confused as I was and (to some extent) still am about component and page transitions especially in React.

Why I wanted to learn this

As a “self-taught” frontend web developer, I am always curious about improving on my skills in frontend. Prior to learning about page transitions,  I really loved those websites on awwwards.com, where the page views are switched almost “musically”. No page reload just slide ups or fade ins etc. I tried using my basic React js skills (lacking precise understanding of transitions between views) and CSS  but ended up having very choppy transitions. They were choppy and so bad that a simple page reload with GSAP transitions of the components on mount would have been significantly better. So yea, this is why I am devoting the month of May and June to mastering transitions using React.js by creating tasks with incrementing levels of difficulty. Since this is the first part of the series, the task here will be very basic. You know, in order for one to be a master, one should master the basics first :D. Hope that made sense, sawwy.

Note: I will be breaking down certain sections of the code not only for you to understand but for myself. This way, I can confirm the extent of my comprehension on this subject.

Task Overview

The  goal here is to simply fade In a header, synchronously fade in and transform letters of a sentence one after the other when triggered to show by toggling a boolean variable . The opposite is carried out when the boolean variable is set to false.

Things to understand

React Components

Stateless

These components are usually termed functional or purely presentation due to the fact that they neither have nor manage any state (Disregard  the react hook useState here). These are recommended to be used more often since they are less “manipulative” than those that change the state.

An Example

Stateful / Class  (before Hooks)

Not all class components manage a state but they can. To setup the state in a class component, you will need to do this within the constructor method  which is called upon creation of an object modelled after a given class. 

An Example

Random Color

A script that allows you to generate colours randomly. Find out more about this module here .

ES6

New features added to Javascript to make our lives more complicat… I mean easier. Kidding :D. I really like the shorthand syntax because they reduce the source code size.  You can delve more into this topic here .

Spread Operator

Let say you have a function called add that takes a number of arguments of type integer or float and the function returns the sum of the numbers.

What if you have an array with numbers as its elements, whose first three elements you want to sum using the add function. How would you achieve this without ES6 ?

Option 1: by indexing

Option 2: By using  Function.prototype.apply

Read more…

Based on my understanding, when using this method, by adding a context ( object which becomes “this”) as its first argument and an array as its second,  the elements within the array are treated as individual variables, which can then be used by the function or method which called it.

However Es6 gives us a shorter and more playful alternative

Option 3: spreading

Template literals : string interpolation

I really love this feature. Prior to ES6, whenever I needed to add a variable into a string, I would need to use the + operator. But with template literals, I can actually ADD it to the string;well along with other symbols.

Object Property Shorthand

Another cool feature that saves you from unnecessary repetitions. Remember the D.R.Y principle.

Destructuring array and object items into variables

A very useful feature when it comes to transforming array elements (or even object properties) into actual variables.

I recommend you practice using these new features as they really make the coding process very enjoyable and the code readable.

React Transition Group : <Transition/>

<Transition> is a react component that allows you to determine a component’s behaviour from one state to another.  These states are : “entering, entered, exiting and exited”. Simply put, you could use this to fade in a blog article after the user clicks on an “open article” button and also use it to slide out the blog article when the user clicks on the “close” button. The props needed are: in and timeout. When the in prop is set to true, the transition begins its “ENTER” states (entering and entered ) else it begins its “EXIT” states (exiting and exited). On the other hand, the timeout prop defines how long the component remains in a state e.g. exiting. The <Transition> component takes in a function as a direct child which provides the STATE of the transition as a argument of the function. This function then returns the element you wish to transform. I know, you are confused. I was in the same confused STATE *winks awkwardly*.

How do actually use this transition to fade in on ENTER and fade out on EXIT ?

Mini Task

        1. Fade in a span element on button click and fade out on second click

Solution

Using the style prop:

                • Set the opacity of the span element to 0 on “entering”
                • Set the opacity of the span element to 1 on “entered”
                • Do the opposite on exiting → exited

NOTE : Since a change in state triggers “redrawing” of the components, it is necessary to have the show / in variable in a state object. Hope you understood that… (I have a feeling you didn’t: Sorry in Advance )

Styled Components

I recommend you read the documentation:D.

Task’s Solution

 

Question

Ich bin nicht sicher ob deutsche Leser gibt, aber falls Sie lieber den Beitrag  auf Deutsch lesen würden, dann sagen Sie bitte Bescheid im Kommentarbereich.

References

    1. https://logrocket.com/blog/pure-functional-components/
    2. https://medium.com/the-andela-way/understanding-react-components-37f841c1f3bb
    3. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor
    4. https://reactjs.org/docs/hooks-reference.html#usestate

 

Beginner Automating with Python | Converting MYSQL database tables into single CSV files

Things you might need before coding

Install python here

Since this solution is realised by using the programming language called python,  you should probably install it as instructed in the website linked above. Additionally, you may need to understand the programming principles independent of programming language and also learn the code syntax in python. An introductory course  can be found here .

Install MySQL connector via pip here

This allows you to connect to a MySQL database using python. Although there are other solutions, such as using a MySQL driver. I personally used the connector since it was simple to install and use immediately. Also, if you are planning on connecting to a MySQL database locally (e.g. localhost), make sure you already have MySQL installed.

Packages to install and why

CSV

Packed within this module methods that can be used to manipulate CSV ( Comma Separated Values) files. You can install this module in a similar fashion with the MySQL connector here . To use any module you install, simple import the module e.g. import csv, at the top of your python file.

OS

Another interesting module that allows you to play with operating system features. For this solution, I will be using the child module, os.path, mainly to validate and transform paths. As you did with the above module, install this module here and import os.path as well at the top of your python script.

SYS

In order to obtain a list of command line arguments, essential for this solution, I will be using the SYS module. More specifically, the command sys.argv. Similary, install module here and import into your file.

Overall logic or semi-pseudo-code

Prior to coding, it is essential to understand why you are about to type some code and how you plan on going about it. The task is simple:

Read a given database and transform its tables into single csv files

  • Obtain the database information from the user
  • Establish a connection to the database 
  • Access all the tables and their contents
  • Transform the tables into python dictionaries 
  • Write and save the csv files

This should give you an idea on how I will create a solution this the “problem”. So lets begin.

Code and its Explanation

Command Line Arguments

__name_ is a python variable that is defined by the python interpreter just before it executes the contents of the python script. If you ran your python script on the command line (ie python somescript.py), it sets the __name__ variable to a string value, “__main__”. Else if you imported the script, as you will with the CSV, SYS, and OS modules, the variable is set to the name of the script file without the “.py” (e.g. __name__ = “somescript”).  So the if statements allows me to define when the code should run automatically.

Using the sys.argv, the code extracts the command line arguments, assuming the script was ran from the command line and not imported as a module, and checks its length. Since the host, database name, username and password are all required for the database connection, the length of the arguments should be greater than 4. Why “greater than 4″ and not ” greater than 3″ ? well, the first element in the sys.argv list is always the name of the script, so name of script + 4 extra arguments = 5. Once the conditions are met, the dabatase connection is established via the function “connect_2_db”.

Connecting to the Database 

Simply out of “habit” and “paranoia”, I check if the values required for the database connections are available via the length. Once that is complete, the  connection is established within a “try, except, finally” scope. Just a fancier way ( compared to if and else statements in my weak opinion) of handling errors/exceptions. 

If the connection is established and confirmed using the is_connected method, the tables within the given database are transformed after calling the “tables_to_dictionary” function. Else if an exception is thrown, whatever lies within the except scope is executed. The finally statement allows you to trigger code regardless of how successful the try and except statement were.

Transforming MYSQL database to a python dictionary

This is where the fun starts and ends lol. It took me a while to figure this out. But I did it!  First the connection object is validated and the presence of the database name is confirmed before moving forward. An instance of the cursor is created which allows us to execute several SQL statements such SELECT, USE, DESCRIBE etc. 

Following the database selection using the USE statement, the names of the tables are extracted and inserted into a list called headers. Then we loop over the list, get all names of the columns within the current table and insert the table and its contents within a dictionary. Once all the tables have been analysed, the cursor and database connection are closed and the CSV files are written using the “write_data” function.

Writing dictionary into CSV files 

The following function is quite self-explanatory.  First it asks the user where the csv files are to be saved, then it loops through the table names within the dictionary given as an argument. Here comes the tricky part: since the columns within a table my vary in length, using hard-coded value for looping within the columns would cause an error. So I created another function called “get_longest_list” which loops through each of the columns of  a given table and determines the “longest”. The length of the longest column is used for the loop, so no hard-written value here, to make sure that all the rows of all columns in a table are not skimmed over and written to the CSV file.

Test Run

Local MySQL Database

I used the website to generate mock / placeholder SQL data which was imported into a database I created using the popular MySQL tool called MySQL workbench. As you can see below, the SQL data inserted a table named mock_data. The persons table was created by me for testing purposes. It is basically an empty table. The mock_data table contains 6 columns namely: ID, first_name, last_name, gender and ip_address. So if the script is “error free”, two CSV files called mock_data.csv and persons.csv should be created upon running the script in the command line.

 

 

 

 

 

 

 

The script ( which I named backuper.py: don’t ask why) and the arguments for database connection provided.

The result! two CSV files within the current directory one empty (persons.csv) and the other correctly filled. YEAAAAAAA!

Files here

Closing Word

 I hope this post helped you not only solve this problem but let you see the possibilities in using python to simplify repetitive tasks. See you in the next post.

HTML5 for Beginners 2019 : Interesting Elements | Part 1

So you are a learning web developer who uses a lot of <div>s right ? Well… what if I told you, there is a whole new world to be explored…..

Below are features you could have fun with during your web development escapades (don’t think that makes sense…but okay)

<sections>

You should use this, if or when you are defining a unique SECTION of an HTML page. e.g. A list of books, a description etc. If however you need a SECTION for styling, use the <div> instead. I read that somewhere…

Useful Links:

https://stackoverflow.com/questions/6939864/what-is-the-difference-between-section-and-div

<article>

Commonly used for blog posts, news articles, podcast descriptions and there can be multiple in an HTML page. This can be a parent element to <header>, <footer>, <section>, <p>, <h1 – h6>, <address> etc.

Useful Links:

https://www.bitdegree.org/learn/html-article

<nav>

Navigation links, menus, side-bars can be nested in this element. Commonly has either a <ul> or a <ol> element as a direct child.

Useful Links:

https://www.quora.com/What-is-the-use-of-nav-tag-in-HTML

<aside>

One could use this for side-bars or info-boxes. Frequently used to provide meta- information on content either placed within an <article> ,<section> or listing categories, tags etc.

Useful Links:

https://html5-tutorial.net/new-section-tags/aside-tag/

<footer>

You know that area in websites where you see something like this “© 2005-2019” or social media links ,sitemaps, paypal donation? Yea… that is usually the footer. You could also add another menu in this element even if you already have on in the <header>.

Useful Links:

https://www.techonthenet.com/html/elements/footer_tag.php

<header>

Most websites have or should have this section. Main navigation menus, logos, search bars, alert messages etc. could be displayed within this element. Sometimes sliders could also be tucked in here.

Useful Links:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header

<blockquote>

Used for citations and is indented by default. One could add the citation source (URL) by using the cite attribute i.e <blockquote cite=”http://ajalacomfort.com”> or by using the <cite> tag.

Useful Links:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote

<cite>

Usually a child element to the <blockquote> node and is used provide a text based citation source. or reference An <a href=””> can be used to provided the reference url.

Useful Links:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite

<details>

Creates a widget that shows “more” info on click. Similar to tabs on a lot of website. By adding a <summary> node within <details> element, a “summarized” text is shown before the click action. The text node directly within the <details> element should be the “complete” or “longer” content that is shown after the click action.

Useful Links:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

<summary>

Usually a child element to <details>. Displays a shorter version of the contents shown in the <details> element.

Useful Links:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary

<fieldset>

An element found in HTML forms. It is used to group sections within forms. Possible child nodes <input>, <legend>, <label> etc.

Useful Links:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset

<figure>

You probably may have already started using this one. This can be used as a parent element to the <img> and the <figcaption> node.

Useful Links:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure

<figcaption>

A child node of the <figure> element; used to display a caption of the sibling node <img>.

Useful Links:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption

<address>

If you want to provide your contact information or author contact information, you could use this element.

Useful Links:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/address

<video>

Well this should be self-explanatory.You can embed video unto the HTML document and add the video source url to its attribute src. But if the video has multiple sources, using the node <source> as a child element is possible. If you want controls to be displayed on your video, add the controls attribute to the video element. Also if for some reason, the linked video does not work or is inaccessible, the browser will render the fallback content ( child content within the video tag). You could also add your custom controls using available APIs. To find out more about adding subtitles, read this

Useful Links:

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content

<audio>

Similar to <video>, but for audio files.

Useful Links:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio

<source>

The source element via the src attribute provide the “source” for the video to be played. Another attribute is the type, where the video format is specified.

Useful Links:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source

<picture>

Huh? What about <img> ? The advantage of using this element over <img> alone is the option of displaying the same image in different versions ( dimensions). The browser will select the “BEST” match amongst the versions provided in the children <source> elements. If however no match is found, if an <img> element exist as a child of <picture>, it will be selected as the last resort.

Useful Links:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

<track>

This can be used to provide subtitles or captions for audios and videos.

Useful Links:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track

<object>

You could embed PDFs, audio,video, applets etc. on your website using this element. <param> is an associate element, which is used to provide parameters for the embedded object.

Useful Links:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object

<area>

I find this feature really cool and just found out about it LOL. This is like an advanced <a href> tag. Let’s say you have an image but you want to link different spots on the same image (e.g. an instagram picture with tagged people). You could use this element.

Useful Links:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area

<map>

This element is used to group all <area> nodes that are associated with the same image ( i guess 😀 ). This has a name attribute which is used in the associate <img> tag’s attribute called usemap.

Useful Links:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map

<iframe>

This element is so overused. If you want to display another HTML page on your website, you could use this.

Useful Links:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

<dl>

If you have a list of items that are each simply a title and content block, you may ost likely use <ul> or <ol> to group them. But a good alternative is <dl>. Although, unlike ul/ol, it lacks a default numbering system, it is a nice alternative. Child nodes are <dt> and <dd>.

Useful Links:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl

<dt>

A child element of <dl> node. This is used to display the title/ term of each item of the <dl> group. A sibling element is the <dd> node.

Useful Links:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dt

<dd>

Another child element of the <dl> node. This is used to display the description or longer content of the sibling <dt> node.

Useful Links:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dd

<pre>

Displays preformatted text. Useful for showing raw code e.g. in programmng related blog posts.

Useful Links:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre

There are still many more that you could work with. However this list contains the elements you are most likely going to work with.

Other elements can be found here

Korean Webtoon Summary: The part of you that I like (좋아하는 부분 )| Episode 77

Episode 77

Hey! Hope your week is going well ?

여러분 잘 지내시죠?

So where did we stop last time ? Oh yea, Minu standing behind Yoo-ju creepily. She describes the character that had been stalking her for a while and speculates that Eun-Hwa could be the culprit. Minu confirmed her suspicion and based it off on the “look in her eyes”. He further stated that he is very familiar with that LOOK from several females; a look that Yoo-Ju used to give him.

지난번에 어디까지 했죠? 아, 민우 씨가 유주 씨의 뒤에 소름 끼치게 서 있는 장면까지. 유주 씨가 민우 씨한테 자기 스토커의 모습을 설명하고 은화 씨가 범인이라고 추측하면서 민우 씨가 그 의심을 확인하고 은화 씨의 눈빛으로 알아냈다고 그랬습니다. 그리고 수많은 여자들한테 유주씨를 포함하여 그 눈빛을 많이 받았으니 익숙했대요.

However, it seems like he had not completely regained his memory, especially the part where Yoo-Ju was stalker-level bat shit crazy. You could easily tell by him leaning forward to her saying:

“You are different from those girls, which is why I like you”:

So Gyu-min pops up again. arrg..h.. so irritating. He is still blaming Kang- Han Byul for his failed attempt at getting the girl. We all know he is simply a dude with low self esteem, a trait that puts off several women. I am unsure about this, but he seems to be planning out ways to ruin Kang- Han Byun even if he needs to make something up.

The final scene shows Yoo-Ju pushing Minu away and explaning why she feels uncomfortable with him being so friendly . As she walks out of the room, she trips and the papers she was holding flew all across the room. This scene was similar to that where she swore never to be with Minu again and flung the money she had planned to give him. This triggered Minu and in a partly unfortunate way helped him regain his memory about the “humiliating” version of Yoo-Ju.

His shock slowly transformed into a creepy smile upon the realisation that Yoo-Ju was indeed just like ” those girls”.

See you next week, off to read episode 77.

단어장

EnglishKorean
last time지난번, 아까 , 저번에
where did we stop 어디까지 V했죠?
creepily오싹하게,소름 끼치게, 찌질하다 , 소름돋는
describes as을 N라고 말한다, 로 묘사한다
for a while 잠깐만, 얼마동안
speculates 추측하다
culprit범인
confirm suspicion의혹을/ 의심을/혐의를 확인하다
look in eyes의 눈빛
to be familiar with~에 친숙한, 익숙한
However 그러나, 하지만,다만
not completely완전히 아니다/ 없다/ 지 않습니다
regain memory기억을 되찾다
one can tell that딱 봐도 ~ 은 게 보이다
to lean forward앞으로 구부리다 / 숙이다
to be different from와 다르다, 서로 다르다

Korean Webtoon Summary: The part of you that I like (좋아하는 부분 )| Episode 76

Episode 76

How was your week! Mine was amazing! I just completed my Master thesis and am planning to travel soon! YEA.

여러분 한 주 동안 잘 지내셨습니까? 제 일주일 너무 대박이었더라고요. 제 석사 논문을 완성했고 여행을 계획 중이거든요.

So let’s get right to it!

시작합시다

The manager (Gyu-Min) tried to reveal more on what he discovered about Kang Han-Byul’s past, but fortunately his crush stopped him from speaking any further. While being led away from the scene, Kang-Han Byul stood still in shock of how is greatest fear happened right in front of him. Even his coworkers began questioning the validity of what Gyu-min said. What made it worse was that Kang-Han Byul just stood there shaking without defending himself. Making the whole situation look bad for him; even to the extent of him doubting his own memory.

규민 이라는 그 매니저가 강한별 씨의 과거에 대해서 더 알려주려고 했는데 자기 첫사랑은 걔한테 그만 얘기하라고 해서 자세히 계속 못 말해 주었습니다. 그는 끌리어가면서 강한별 씨는 서 있는 채로 자신한테 가장 큰 두려움이 자신 앞에서 생기는 사실에 너무 놀랐던 것 같습니다. 자기 동료들도 규민 씨의 말이 사실인지 않은지 의심하기를 시작했다. 더 안 좋았던 건, 자신을 방어하지 않고 그냥 서 있어서 그 상황을 더 의심스러워졌습니다. 자기의 기억을 의심하기 시작하는 것까지.

“was I the one truly at fault?” – Kang-Han-Byul

저는 잘 못 했던가요 ? 냐고 강 한별 씨 물었습니다.

His crush confronts him about what he, Gyu-Min, said and questioned him on the source. She seemed very disappointed, but seeing that she was more lenient towards Kang-Han Byul, he asked:

첫사랑은 자기 한 말에 대해서 자신한테 다가갔고 어디서 그 정보를 얻었는지 물어 봤어요. 규민 씨는 첫사랑이 강 한별 씨를 이상하게 신경을 많이 쓰고 그 일 때문에 실망하는 모습을 보고 그녀를 질문했다.

“why are you acting like this? You of all people should know what kind of person he is!”Also why did you avoid me when I fell down ? why do you get worked up over things concerning him? why!!”

‘왜 저래? 다른 사람들 몰라도 걔가 어떤 놈인지 잘 알야야 되는 건 아닌가요? 그리고 내가 넘어갔을 때 네가 하필 나를 왜 피했어?’ 그 놈의 일에 대해서 왜 그렇게까지 신경을 쓰는 거야? 너?

“Do you have feelings for him?”

‘걔한테 감정이 생겼어?’

Out of her justified frustration, she said:

‘그 말을 듣고 화가 나며 그녀가 이렇게 말했다:

“I thought that if I helped you, you would take it the wrong way. I was afraid you would misunderstand my intentions..”

“도와 주면 오해할 줄 알았어서 그랬어요. 나의 의도를 오해할 까 봐 그랬어요.

Gyun-Min stood there, mouth wide open.

규 민씨가 입 벌리고 서 있었어요.

OH Karma works at high speed..ha!

업보가 무섭고 바르게 일을 하네요…ㅋㅋㅋㅋ

The episode ends with Minu standing behind Yoo-Ju with a very ambiguous look in his eyes.

편이 민우 씨가 유주 씨 뒤에 유주 씨를 애매한 표정으로 쳐다 보는 장면으로 끝났습니다.

This episode was both exhilarating and depressing.

이 편은 너무 짜릿한 반면 우울했습니다.

Till next week! Bye.

다음 주에 또 뵙겠습니다. 안녕

Will be updated during the course of this week | 이 글이 이번 주 중에 업데이트 될 것이다

Corrections from friends on Hellotalk

제 일주일 너무 대박이었더라고요.

제 일주일은 정말 대박이었어요.

제 석사 논문을 완성했고 여행을 계획 중이거든요.

왜냐하면 제 석사 논문을 완성했고 곧 갈 여행을 계획 중이거든요.

제 일주일 너무 대박이었더라고요.

제 일주일 너무 대박이었더라고요. -> 저는 일주일 너무 잘 보냈습니다.

제 석사 논문을 완성했고 여행을 계획 중이거든요.

석사 논문을 다 썼고/완성했고 여행을 계획하고 있거든요.

규민 이라는 그 매니저가 강한별 씨의 과거에 대해서 더 알려주려고 했는데 자기 첫사랑은 걔한테 그만 얘기하라고 해서 자세히 계속 못 말해 주었습니다.

규민 이라는 그 매니저는 강한별 씨의 과거에 대해서 더 알려주려고 했다.
그 사람은 자기 첫사랑얘기를 그만 하라고 해서 자세히 말해주지 못했습니다.

그는 끌리어가면서 강한별 씨는 서 있는 채로 자신한테 가장 큰 두려움이 자신 앞에서 생기는 사실에 너무 놀랐던 것 같습니다.

그는 끌려가고 강한별 씨는 서 있는 채로 가장 큰 두려움이 자신 앞에서 생긴다는 사실에 너무 놀랐던 것 같습니다.

자기 동료들도 규민 씨의 말이 사실인지 않은지 의심하기를 시작했다.

자기 동료들도 규민 씨의 말이 사실인지 의심하기를 시작했다.

더 안 좋았던 건, 자신을 방어하지 않고 그냥 서 있어서 그 상황을 더 의심스러워졌습니다.

더 안 좋았던 건, 자신을 방어하지 않고 그냥 서 있어서 그 상황이 더 의심스러워졌습니다.

저는 잘 못 했던가요 ?

제가 잘못한건가요??

냐고 강 한별 씨 물었습니다.

냐고 강한별씨에게 물었습니다.

다른 사람들 몰라도 걔가 어떤 놈인지 잘 알야야 되는 건 아닌가요?

다른 사람은 몰라도 걔가 어떤 놈인지 잘 알아야 되는 거 아닌가요?



단어장 선물 | Vocab List Gift

EnglishKorean
how was your week한 주 어떻게 보냈나요?;지난 한 주 다 잘 보내셨나요?; 일주일 어떻게 보내셨나요?;어떻게 지내셨어요? 한 주간?;한 주 동안 잘 지내셨어요?
to be amazing대박이다; 대단하다; 신기하다;멋지다;훌륭하다
complete thesis논문을 완성하다, 논문을 끝내다 ;논문을 탈고하다
planning to~을 계획 중이다 / 있다; ~을 예정이다; ~을 생각이 다; ~려고 하다
led away을 데리고가다, 끌리어 가다
stood still가만히 있다; 현상을 유지하다
shocked about에대 놀랐어다, 충격이였어다 , 충격을 받았다
question the 을 의심하다
defend himself자신을 방어하다 ,스스로를 변호하다
to confront다가가다
questioned about…에 대해 질문[의심]하다, 에 대해 심문했다, 에 대해 질문을 받았다
why are you acting like this너 왜 이렇게 행동하는거야?,왜 저래? , 너 오늘 왜 이러니?
You of all people 다른 사람은 몰라도, 남들은 몰라도 너는 , 다른 사람도 아닌 너라면
avoid someone피하다
have feelings for 한테 관심을 가지다 , 한테 감정이 생기다
Out of anger화가 나서
justified당연한
take the wrong way오해하다, 나쁘게 받아들이다
misunderstand my intentions나의 의도를 오해하다
mouth wide open입을 딱 벌리고,
karma 업보
ambiguous 애매하다
exhilarating 짜릿하다
depressing우울하다

Korean Webtoon Summary: The part of you that I like (좋아하는 부분 )| Episode 75

Episode 75

The episode starts off with the overly obsessed coffee shop manager smiling while doing his work. How I hate this character… argh… He is apparently still hung up on the “info” he got in the previous episodes about Byul’s tragic high school story and seems excited to tell people about it. You know like, “Finally, I can finally tell all those naive girls about what a piece of s*** Byul really is.

75화는 그 너무 집착한 커피숍 매니저가 자기 일을 하면서 너무 의심스럽게 웃는 거부터 시작됩니다. 이 캐릭터를 얼마나 싫어하는지 모릅니다… 어후. 그는 지난 화에서 강 한별 씨의 아주 슬픈 고등학교 때 생긴 일에 관련된 정보를 얻었다는 것을 아직 많이 신경을 쓰는 모양이었습니다. 그리고 다른 분들에게 그 얘기를 알려 주는 것도 수상하게 엄청 기대한 것 같습니다. 이런 갓…. “드디어 그 순진한 여자들한테 한별 씨가 어떤 나쁜 자식인지 알게 만들 수 있다” …. 이런 기쁨

I HATE HIM!

그를 싫어합니다!

So fast-forward, another creepy character pops up. The female (stalker) teacher, Eun Hwa (은화), that is obviously into Minu ( the dude that exploited Yoo Ju). She is still loitering around Yoo Ju, I guess in hopes of seeing Minu. She really creeps me out but I really want to know more about her.

그리하여 감기를 해보면 다른 소름 돋는 개릭터 나와요. 그 스토커인 여자 선생님이말입니다. 은화이라고 하는데 우주 씨를 이용 당한 민우라는 남자에 그녀가 집착 하는 것 같습니다. 민우 씨에 대해 더 알아낼 수 있다는 희망으로 우주 씨를 따라 가는 겁니다. 너무 소름 끼치는 캐릭터이긴 하지만 그녀를 더 알고 싶습니다.

Final Scene

마지막 장면

So the scene switches back to the coffee shop, where we see the low self esteem manager going insane over Byul arriving 2 minutes late to work. He went on about how others had to stand for him and how much of a burden he is to other coworkers. Like, dude, 2 minutes!!!!!! you can tell he is using every opportunity to embarrass Byul. Ironically, everyone, in that scene, had exactly the same response: “why did he go that far?”. The manager made Byul clean as a punishment.. His jealousy was too obvious.

장면은 커피숍으로 돌아가서 그 적은 자부심을 갖고 있는 매니저는 한별 씨가 2분 늦게 출근하기 때문에 화가 나는 게 보입니다. 다른 동료들은 그의 일을 해야 되고 한별 씨가 그들한테 부담이 얼마나 되다는 말까지 했습니다. 그런데 개인적으로 2 분 늦었기 때문에 그렇게까지 화나는 건 그냥 너무 하는 거라고 생각합니다. 이 장면으로 매니저가 한별 씨를 얼마나 질투하고 그를 창피하게 만든 마음을 볼 수 있습니다. 그런데 너무 웃기는 게 다른 사람들이, 그 장면에서, 매니저가 왜 그랬냐?같은 생각을 했던 것 같습니다. 그 일 때문에 벌로 한별 씨에게 화장실을 청소하라고 그랬습니다. 질투하는 마음이 티 나네요.

The girl he likes tried to assist Byul with the cleaning.

매니저는 좋아하는 여자 동료 한 명이 한별 씨가 청소하는 것 좀 도와 주려고 했습니다.

Dude, I cracked up!


The manager got really pissed! Even went on a mental rant about how people favour good looking men while ignoring good men like “him”.

매니저가 도와주는 걸 본 순간 정말 정신이 버린 것 갔습니다. 너무 웃겨요. 게다가 사람들이 자신 같은 착한 남자들을 무시하는 반면에 잘 생긴 남자들만 신경 쓰는 게 문제라고 생각하며 더 화나요.

So, one thing led to another and we see the manager tripping, face flat on the floor. Oh the embarrassment. No one except for Byul lent a hand… This ticked the manager off!

어떻게 하다 보니 매니저가 앞으로 넘어지는 게 보입니다. 얼마나 당황하다. 한별 씨 빼고 아무나 그 매니저한테 도움이 주지 않아서 정말 화가 났습니다.

He blurted out Byul’s past in front of every body…. yall!

한별 씨의 슬픈 과거 얘기를 모든 앞에서 해버렸습니다. 헐!

THE PLOT THICKENS!

Will be updated during the course of the week.

이 글을 이번 주 안에 업데이트 될 것입니다.

Corrections courtesy of friends on Hellotalk | Hellotalk 앱에서 알게 된 한국 친구들한테 받았던 교정

75화는 그 너무 집착한 커피숍 매니저가 자기 일을 하면서 너무 의심스럽게 웃는 거부터 시작됩니다.

75화는 집착하는것을 좋아하는 커피숍 매니저가 자기 일을 하면서 너무 의심스러운 행동과 웃는 표정을 짓는것 부터 시작됩니다.

이 캐릭터를 얼마나 싫어하는지 모릅니다… 어후.

이 캐릭터를 얼마나 싫어할만한지 알게 될겁니다..

그는 지난 화에서 강 한별 씨의 아주 슬픈 고등학교 때 생긴 일에 관련된 정보를 얻었다는 것을 아직 많이 신경을 쓰는 모양이었습니다.

그는 전편에서 강 한별 씨의 고등학교 때 생긴 아주 슬픈 일에 관련된 접보를 얻엇다는 것에 아직도 많이 신경을 쓰는 모양입니다.

그리고 다른 분들에게 그 얘기를 알려 주는 것도 수상하게 엄청 기대한 것 같습니다.

그리고 다른 분들에게 그 얘기를 알려 주는 것도 수상하게도 너무 기대한 것 같습니다.

이런 갓….

이런 젠장

“드디어 그 순진한 여자들한테 한별 씨가 어떤 나쁜 자식인지 알게 만들 수 있다” ….

“드디어 그 순진한 여자들한테 한별 씨가 어떤 나쁜 자식으로 보이는지 알게 만들 수 있다” ….

이런 기쁨

이런 기쁜일이

2nd correction

장면은 커피숍으로 돌아가서 그 적은 자부심을 갖고 있는 매니저는 한별 씨가 2분 늦게 출근하기 때문에 화가 나는 게 보입니다.

커피숍 안에서의 이 장면에서는 열등감을 갖고 있는 매니저가 2분 늦게 출근한 한별씨 때문에 화가 나는 게 보입니다.

다른 동료들은 그의 일을 해야 되고 한별 씨가 그들한테 부담이 얼마나 되다는 말까지 했습니다.

다른 동료들은 자신의 일을 해야 해서, 한별 씨가 그들한테 얼마나 부담이 되겠냐고 하는 말까지 했습니다.

그런데 개인적으로 2 분 늦었기 때문에 그렇게까지 화나는 건 그냥 너무 하는 거라고 생각합니다.

그런데 개인적으로 2 분 늦었기 때문에 그렇게까지 화가나는 것은 그냥 너무 하는 거라고 생각합니다.

이 장면으로 매니저가 한별 씨를 얼마나 질투하고 그를 창피하게 만든 마음을 볼 수 있습니다.

이 장면으로 인하여 매니저가 한별 씨를 얼마나 질투하고 그를 창피하게 만들고 싶은 마음 이었는지 알 수 있습니다.

그런데 너무 웃기는 게 다른 사람들이, 그 장면에서, 매니저가 왜 그랬냐?

그런데 너무 웃기는 게 다른 사람들이, 그 장면에서

같은 생각을 했던 것 같습니다.

같은 생각을 한 것입니다.

3rd correction

얼마나 당황하다.

얼마나 창피했을까.

한별 씨 빼고 아무나 그 매니저한테 도움이 주지 않아서 정말 화가 났습니다.

한별씨 외에는 누구도 매니저를 도와주지 않아서 매니저는 정말 화가 났습니다.

Free Vocab List | 무료 단어장

EnglishKorean
coffee shop커피숍
suspiciously수상하게,의심스럽게
starts off with으로부터 시작하다, 로 시작한다, 하면서 시작된다
to obsess 에 집착하다
manager 매니저
hung up on에 집착하는 것같다, 에 신경을 쓰는 것같다,
to get info 정보를 얻다
related with에 관련된
previous이전
tragic 비극적인
naive순진하다
seems excited굉장히 신이나 보였다,신났네요
You know,like,뭔가 그런 거 있잖아요.
fast-forward앞으로 감다
creepy 소름 끼치다 ,소름 돋다,징그럽다, 엄산다, 무섭다
pops up나타나다
stalker스토커
be into something~에[을] 관심이 많다[좋아하다]
exploited 이용 당하다,착취 당하다
loitering around 를 어슬렁거리고 있다
creeps me out괜히 쫄리다,소름끼치게 만든다
switch back to로 다시 전환됩니다
in hopes of 는 희망으로, 을 바라며, 을 희망하며,의 희망을 가지고
to have low self esteem적은 자부심을 가지고 있다,자존감이 낮아요
go insane미쳐 버린다
arriving N minutes late to로 분 정도 늦게 도착하다
how much of a N someone is얼마나 N다운지/인지
to be a burden to/on에게 짐이 되다, 에 부담이 되다
other coworkers다른 동료들
can tell (that)을 알게 될 것이다, 인지 알 수 있어, 을 티난다
to embarrass someone당황스럽게[어색하게/쑥스럽게] 만들다, 당황시키다, 곤란하게 만들다,창피하게 하다
to use every opportunity to기 위해서 모든 기회를 사용하세요
Ironically반어적으로
as a punishment벌로
there is a twist반전이 있습니다
tried to assist를 돕기 위해 노력하다, 를 도우려고 노력하다
to crack up엄청 웃다, 웃음이 터지다
help with는데 도움이,는 거 좀 도와주다,
to get really pissed정말 화나다
go off on a rant
to favour someone
while ignoring을 무시하면서
one thing led to another 어떻게 하다보니,어찌어찌 하다보니
trip over…에 발이 걸려 넘어지다.
fall (flat) on one’s face앞으로 넘어지다,엎드리다
lend (somebody) a (helping) hand (with something)(~으로) (~에게) 도움을 주다
tick somebody off ~를 화나게[귀찮게] 하다
blurt something out 불쑥 말하다
will be updated업데이트됩니다
during the course of this week이번 주 안에

Spanish Learning Plan 2019

I am an absolute beginner in Spanish and barely know how to introduce myself.

My 2019 goals for this languages are primarily, “learn as many basic phrases” and “use learned phrases in conversation with natives”.

How do I plan on going about this?

Speaking with natives

No biggie really. I will either use Tandem or Hellotalk to find compatible friends that understand my newness to the language and tolerate that.

Video Inspiration

Simple Plan for 2019

Daily: Shadow spanish beginner audio for 10 minutes; I bought this book ( kindle version) and hope it will help me work on my pronunciation and vocabulary

Once or 2x Weekly: 15minutes conversation with natives

I know this plan is not robust and is almost void of “learning grammar”. But I prefer starting very simple and building up the complexity of the process with time. Hopefully in 2020 I can focus more on grammar with my feet already wet in Spanish.

Wish me good luck! Gracias! (did I spell that right tho?)

Korean Language : Intermediate to Advanced level up plan 2019

I am going to take my Korean language learning even more seriously this year. So this is my weekly plan:

DayMorningcasually during the day (optional)Evening
MondayShadowing TTMIKMemrise Read a webtoon: 1 Episode
Tuesday
Shadowing TTMIK
Memrise 		Blog about read episode; Hellotalk chat with native speaker
Wednesday
Shadowing TTMIK
Memrise 		Blog about read episode; (continuation and completion)

Thursday
Shadowing TTMIK
Memrise 		Describe episode and upload on youtube

Friday
Shadowing TTMIK
Memrise 		Translate random Korean Youtube VID
Saturday
Shadowing TTMIK
Memrise 		Read random naver article, watch documentaries on youtube ;
Hellotalk chat with native speaker
Sunday
Shadowing TTMIK
Memrise 		Naver’s today’s Korean Conversation : week review

Let me explain

화이팅!


Memrise

Improvement Areas : Vocabulary

Plan: Simply active memorisation of words; I hate this task, so I might only do this 2x or once weekly.

Goal: Vocabulary expansion

Shadowing TTMIK

Improvement Areas: Listening and Intonation

Plan : I will be listening to one IYAGI episode daily for 1 to 2 weeks until I know all the words in its transcript. I also hope to learn the “music” of the language my Imitation

Goal: Vocabulary expansion; Increased speed at reading the transcript

Current IYAGI Episode : Priority Seating For The Elderly – 노약자석

Read a webtoon

Improvement Areas: Exposure to slangs and more commonly used terms

Plan: Read a very interesting webtoon ( 1 episode) so as to not get bored. No attempt at memorising words since I will be using the “Shadowing TTMIK” plan to absorb new words. This is just to increase my exposure to the words that I have already learned.

Goal: Repeated exposure to already learned words

Current Webtoon: 좋아하는 부분 &여신강림

Blog about read episode

Improvement Areas: Writing, Summarizing read text, vocabulary

Plan: Write a short summary of the episode I read on the previous day, using my own words. This lets me actively use words I already know and increase my experience with these known words.

Goal: Active usage of known words

Describe episode and upload on youtube

Improvement Areas: Usage of known words in speech

Plan: 1 – 5 minutes long audio clip describing the webtoon or some topic I studied on during the previous days.

Goal: Investigation of problem areas during conversations; Improvement in speed of vocab recollection;

Translate random Korean Youtube

Improvement Areas: Listening; Vocab; Accents

Plan: Pick a video; check if the “add translation” is public

Goal: Exposure to known words; Improvement of listening; Exposure to different Korean accents

Youtube Channel: Oluwatimilehin

Read random naver article, watch documentaries on youtube

Improvement Areas: Reading advanced texts; Listening to official clips;

Plan; Read text once; no need for re-reading; no active learning of new vocab;

Goal: Improvement of grammar

Recommendations: Naver School (seems less advanced) , Naver Wedding (for romance lovers), EBS documentary, MBN Entertainment, 뉴스TVCHOSUN

Naver’s today’s Korean Conversation : week review

Improvement Areas: Grammar; Phrases

Plan: Actively memorise phrases not words; Repeat and use during conversation practice with native

Goal: Grammar improvement; sound more naturally

Website: Naver

Hellotalk chat with native speaker

Improvement Areas: My pronunciation

Plan: Pick two topics ( for two conversations); Research on topic; actively memorise phrases and words for that topic; Use them during conversation; Notice if native speaker understood me and if the phrases I used weren’t awkward.

Goal: Pronunciation; Grammar in actual conversation; Vocab recollection;

Hope this helps yall!