How to use CSS Line-Height

Quirks of using line-height in CSS

Guowei Lv

2 minute read

There are 4 ways to specify line height in CSS: /* The number way/ line-height: 1.5; / The em way/ line-height: 1.5em; / The percentage way/ line-height: 150%; / The pixel way*/ line-height: 24px; In simple settings, they are pretty much interchangable. For example: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>Document</title> <style> p { font-size: 16px; line-height: 1.5; } </style> </head> <body> <p>I'm a paragraph.</p> </body> </html> Here p can use all 4 ways and there would be no difference.

Guowei Lv

2 minute read

For JavaScript beginners (I envy all of you because your brains are not damaged by this yet), () can be a huge confusion. Example 1 const createPerson = name => {firstname: name}; console.log(createPerson("Guowei")); Of course it logs undefined. Let’s ask JavaScript what was it thinking when it executed the code. Me: Hi, JavaScript. JavaScript: Hi! Me: What the heck has happened? Where is my returned object? JavaScript: Wait.

How Scanf Works

Shows in detail how scanf works and its gotchas

Guowei Lv

3 minute read

scanf is essentially a “pattern matching” function that tries to match up groups of input characters with conversion specifications. An Example No blah blah blah, let’s see an example. int i, j; float x, y; scanf("%d%d%f%f", &i, &j, &x, &y); // input // <space><space>1-20.3-4.0e3<ret> Here is how scanf would process the new input: Skips the leading 2 spaces. Conversion specification: %d. The first nonblank input character is 1; since integers can begin with 1, scanf then reads the next character, -.

Making Sense of React's Render Props

React's render props is easy if you understand FP

Guowei

4 minute read

I came across render props when checking out Apollo GraphQL’s tutorial. Now I think I finally figured it out, I try my best to explain it as easy as possible here in my own words. The highlight is in the last part where I shed a FP light onto it. So stay tuned! First, stop trying to understand the name render props. Instead, look at the following example. I want to build a React Component which has 2 buttons cat and dog.

SICP Goodness - Stream (VIII)

Expoloring the stream paradigm

3 minute read

Do you think Computer Science equals building websites and mobile apps? Are you feeling that you are doing repetitive and not so intelligent work? Are you feeling a bit sick about reading manuals and copy-pasting code and keep poking around until it works all day long? Do you want to understand the soul of Computer Science? If yes, read SICP!!! One more example from the book and one related exercise.