DEV Community: Anson Low Z.F

The Saddest Thing I Faced In Coding

Anson Low Z.F — Thu, 06 Aug 2020 02:23:04 +0000

No matter how long time I learned,
No matter how hard I learned,
No matter what I had learned.

I feel like not moving forward~
Like I'm stuck in beginner level for a long time~
I still don't know how to code well.

I code slow,
Research takes me at least half-day or a few days,
Don't know how to write the code without referencing the doc,
Some bugs like forever don't know how to settle, end up delete the entire project and start over again,
Not sure my code is right or not, it's seen working but the UI seen like something went wrong,

Are you facing the same situation?
What obstacle are you facing?

"Btw, I'm still proud of myself for starting my journey as a self-taught developer."

Explore Gatsby Theme Blog 2.0

Anson Low Z.F — Mon, 27 Jul 2020 00:46:36 +0000

I started my blog in April 2020 by using gatsby-starter-blog-theme. The good thing is out of the box; I could immediately begin writing a blog with the starter. The bad part is I not learning how to set up a blog theme with gatsby.

Gatsby release gatsby-theme-blog 2.0 in the second week of July 2020. I want to take this opportunity to learn the setup from scratch.

Let's get started.

Initial A Project With Gatsby Starter

I use the simplified bare-bones starter for this new blog site - gatsby-starter-hello-world

Open any terminal

cd desktop //cd to the folder where you want to save the project.

gatsby new ansonlowzf-blog2.0 https://github.com/gatsbyjs/gatsby-starter-hello-world

cd ansonwlowzf-blog2.0

gatsby develop

Note:-

If you are new to Gatsby, make sure you install gatsby-cli globally in your machine follow this guide.
ansonlowzf-blog2.0 is the name I choose for my blog, and you should use the name you want for your project.

I can see "Hello world!" appear in the browser.

Install gatsby-theme-blog

Ctrl + C to stop the local development server then go to the terminal

npm install gatsby-theme-blog

npm update

I always like to update all the modules to the latest.😊

code .

Open the file in VS Code

Configure Gatsby-config File

Open gatsby-config.js

You shall see something like below:-

module.exports = {
  /* Your site config here */
  plugins: [],
}

Add gatsby-theme-blog as a plugin

module.exports = {
  /* Your site config here */
  plugins: [`gatsby-theme-blog`],
}

Save the file and run:-

gatsby develop

You shall see a content folder appear in the root directory

Inside the content folder, there are:-

assets folder - to keep the blog images
posts folder - to write the blog post in Markdown

Ctrl + C to stop the local development server

Note:-

No need to visit http://localhost:8000/ to check anything yet. We just want gatsby-theme-blog to generate a content folder for us.

Create The First Blog Post

Create /content/posts/my-first-post.md and add the following code:-

Delete src/pages/index.js (This is important especially you want to render your blog list in index page.)

Save the file and run:-

gatsby develop

Visit http://localhost:8000/ in the browser

You shall see something similar to:-

As simple as that, a blog list in index page. 😊

You might already notice, my footer is different from yours, why?

Check out the next step.

Set Up Site Metadata

This site metadata I copy from my previous blog, you can also copy from the "gatsby-theme-blog" site and look for "additional configuration", or you can copy the code below and paste it after the plugins and change to your data accordingly.

module.exports = {
  /* Your site config here */
  plugins: [...code],
  siteMetadata: {
    title: `Anson LowZF Blog`,
    author: `Anson LowZF`,
    description: `A self taught front-end developer documenting and sharing his learning process`,
    siteUrl: `https://ansonlowzf.com`,
    social: [
      {
        name: `Twitter`,
        url: `https://twitter.com/ansonlowzf`,
      },
      {
        name: `Github`,
        url: `https://github.com/ansonlowzf`,
      },
      {
        name: `Proudly hosted on Netlify`,
        url: `https://www.netlify.com/`,
      },
    ],
  },
}

Save the file and run:-

gatsby develop

Now, you shall see the footer content change according to your data.

Shadowing The Bio Content

Click My First Post

You shall see:-

I would like to amend this part:-

In the gatsby theme, we just need to find out which component render this part and overwrite it. This is called shadowing.

Create /src/gatsby-theme-blog/components/bio-content.jsx

How do I know to create this file could overwrite the bio content?

Check out the shadowing guide by Gatsby.

I find out which component is rendering the bio content part in gatsby theme blog's Github

Check out the components, I find out the bio content component is rendering the part mentioned. The code is as below:- (Check gatsby theme blog's Github)

import React, { Fragment } from "react"
import { Styled } from "theme-ui"

/**
 * Shadow me to add your own bio content
 */

const BioContent = () => (
  <Fragment>
    Words by <Styled.a href="http://example.com/">Jane Doe</Styled.a>.
    <br />
    Change me. This is all quite default.
  </Fragment>
)

export default BioContent

See the file above, very obvious right?

I shadowing the bio-content.jsx with my code as below:-

import * as React from "react"
import { Styled } from "theme-ui"

const BioContent = () => (
  <>
    A self-taught developer documenting and sharing his learning experience.
    <br />
    React.js &bull; Gatsby.js &bull; Next.js soon. More{" "}
    <Styled.a href="/about-me">about me</Styled.a>
  </>
)

export default BioContent

Save the file, and restart the development server.

You shall see:-

Add Avatar

If you check the bio compnent source code:-

As long as you name your image avatar with jpeg, jpg, gif or png extension and put in the asset folder, it will pass to bio component. (Check out the source code)

I grab a handsome face photo, rename it to avatar.jpg and drag to the assets folder.

Restart the development server

Tada~

If your avatar not showing up, try gatsby clean to delete the cache file and start the development server again.

Change The Site's Font

The default system-ui font looks a bit skinny and un-organized for me.

I want to change to Roboto. How to change it?

Create src/gatsby-plugin-theme-ui/index.js

export default {
  fonts: {
    body: `Roboto, "Helvetica Neue", sans-serif`,
  },
}

Save the file, and you'll see the entire website change to Roboto font.

You may ask why we don't need to import Roboto font in the first place?

If you check the source code, you'll notice Roboto font already built into gatsby theme blog.

Conclusion

It's not much different compare to version 1.

I'll continue to explore gatsby-theme-blog 2.0 and write my experience about it.

(I'm a new to writing, if you found any part I can improve or mistake, please leave me a comment. Thank you in advance)

Learning To Be A Mouse-Less Web Developer In VS Code (Updated: 22 July 2020)

Anson Low Z.F — Mon, 29 Jun 2020 06:50:08 +0000

Updated: 22 July 2020

Add "Clear the terminal inside VS Code"
Add "Backward and Forward" (Essential)
Add "Move a line up or down"

Updated: 02 July 2020

Add "select a line" shortcut
Add "toggle the problem panel"
Remove and organise the import modules
Navigate between terminal

Note: Select the title inside the quote and use Ctrl + F to quickly find the newly added section

After using PC for so many years with a mouse or trackpad, we so used to point and click everything we want on the screen so fast and concise. Drag and drop, left-click, right-click, scroll the web page up and down with mouse wheel.

There are some arguments in the web development community mention that writing code without a mouse could be faster.

I'm curious to try it out. My target is to focus 90% on using the keyboard. I don't think we can 100% avoid using a mouse in a graphic user interface (GUI) environment, especially when we want to check the navigation link, button and form.

I will try my best to use the keyboard shortcut, terminal and command line in VS Code. Then document my learning to be a mouse free developer (Ops, it's should be a mouse-less developer).

I not sure I can get used to it or not. What I pretty sure is my coding speed will decrease dramatically.

If you could also share how you code without using a mouse would be much appreciated. Let's learn together.

Below are the keyboard shortcut and navigation I learned so far, I'll continuously update this article when I learn something new.

--First Few Days--

I use mouse unconsciously, and I always have to remind myself not to use it.

--Change Cursor Colour--

I change my cursor colour to yellow. So, I can see it easily.

--Open a file--

Method 1: Use Go To File

I often toggle the sidebar off with Ctrl + B. I navigate from file to file with Ctrl + E (you can also use Ctrl + P) then search the keyword of the filename and press Enter to open a file.

Example:-
Your filename is how-to-build-a-website-with-gatsbyjs.md, you can type gatsbyjs or build a website, VS Code will filter and show you every file match your search.

Method 2: Use Breadcrumbs
Ctrl + Shift + . (Period) to focus your current breadcrumbs folder.
Use Ctrl + right/left arrow to navigate between folder.
Use up/down arrow to navigate between the file.
Press Enter to open a file.

--Navigate between editor and explorer--

I seldom navigate folder and file this way. I share this method with people who might find it useful.

Method 1

Ctrl + Shift + E to focus on the explorer and Ctrl + Shift + E again to focus back to the editor.

Use the up/down arrow to navigate between the file or folder.
Use the left arrow to go up one directory, and right arrow to go inside a directory.
Press Enter to open a file.

Method 2

Ctrl + 0 (Zero) (not working in number pad) to focus on explorer, Ctrl + 1 (not working in number pad) to focus back to the editor

Use the up/down arrow to navigate between the file or folder.
Use the left arrow to go up one directory, and right arrow to go inside a directory.
Press Enter to open a file.

--Navigate between the editor's tab--

Method 1
I use Ctrl + PgUp to focus on the previous tab and Ctrl + PgDn to focus on the next tab.

Method 2
You can use Ctrl + Tab to focus on the next tab or Ctrl + Shift + Tab to focus on the previous tab.

--Close a tab--

Ctrl + W to close the current tab

--Delete entire line--

Method 1

Press Backspace deletes one character to the left

Method 2

Press Delete on the keyboard delete one character to the right

--Delete a word--

Ctrl + D to select a word (whether you are in front, back or within the word), press Delete in the keyboard to remove the word.
Place your cursor at the end of the word you want to delete, then Ctrl + Backspace to delete the word.
Place your cursor in front of the word, and then Ctrl + Delete to delete the word.

--Insert a new line--

Ctrl + Enter to move my cursor to a new line (go down 1 line). Ctrl + Shift + Enter to push existing line down and add a new line.

--Select a line--

Ctrl + L to select the entire line

--Moving cursor in the editor--

(Sorry for including this basic)

The right arrow moves one character to the right
The left arrow moves one character to the left
The up arrow moves the cursor up one line
The down arrow moves the cursor down one line

--Move a line up or down--

Instead of Ctrl + X to cut a line and Ctrl + V to paste a line, you could use _Alt + Up/Down Arrow _ to move a line up or down

--Moving cursor by word--

Ctrl + right arrow moves the cursor to the end of a word
Ctrl + left arrow move the cursor to the beginning of a word

--Moving cursor by section--

Home in the keyboard move cursor to the beginning of a line
End in the keyboard move cursor to the end of a line
Ctrl + Home move the cursor to the beginning of the page
Ctrl + End move the cursor to the end of the page
PgUp moves the cursor to the top of the editor.
PgDn moves the cursor to the bottom of the editor.

I use it to scroll editor sometime.

--Select a word--

Method 1

Ctrl + D to select a word

Method 2

Ctrl + Shift + Right Arrow to select a word toward the right
Ctrl + Shift + Left Arrow to select a word toward the left

--Move and select a word--

Ctrl + Shift + right arrow move the cursor and select the word toward the right.
Ctrl + Shift + left arrow move the cursor and select the word toward left.

--Scroll the editor--

Ctrl + up arrow to scroll one line up.
Ctrl + down arrow to scroll one line down.

I use it to adjust the editor view.

--Open the Terminal inside VS Code--

Ctrl + `(backtick) toggle terminal panel on & off

--Open Terminal side by side--

Ctrl + shift + 5 to open second terminal

--Navigate between terminal--

Alt + right/left arrow to navigate between the terminal.

--Open an external Terminal--

If you always forget to stop the development server before closing the VS Code.

Use Ctrl + Shift + C to open an external terminal

if you want to change external terminal, Open VS Code setting and search External: Windows Exec

--Clear the terminal inside VS Code--

Type clear and press Enter
Ctrl + L in the terminal

--Show All Command--

Method 1

Ctrl + Shift + P to see all commands

Method 2

I prefer pressing F1 to see all commands

--Toggle the problems panel--

When you see your file become red colour, VS Code detects a problem in your file.

Ctrl + Shirt + M to focus on the problems panel.

--Remove and organise the import modules--

After you remove some components, usually, you need to remove the import module manually.

You can remove those un-used components or modules automatically by pressing Alt + Shift + O.

The drawback
VS Code organise all import statement in its preference way. I like to put react import statement at the top. But, after pressing Alt + Shift + O, En... maybe you try it see whether you like it or not.

--Backward and Forward--

Imagine you are in line 1034, and you want to import a module at the top of the editor. You Ctrl + Home to navigate to the top and import the module. How are you going back to line 1034?

You might need to remember the line number and use Ctrl + G option. What if you don't want to squeeze your memory muscle to remember the line number?

You can use Alt + Left Arrow to backward (This does not change and undo anything, it just back to previous location or action)

Why did I say it also back to the previous action?

If your previous action is select a line, at this moment, you navigate to the top and then Alt + Left Arrow. It will back to select a line.

Please note that if you in file 1, and you go to file 2 and import a module. At this moment, you Alt + Left Arrow. You will go back to file 1.

Alt + Right Arrow to go forward

I want to continue writing, but dev.to fenced block syntax highlighting is not working.

Below is the result I get:-

`html

I'm a button

I not sure how to fix it, could anyone give me some hint or guide me to fix it?

(I end up putting 4 back-tick above and 3 back-tick below to make the fenced block syntax highlight work.

<div>
  <article>
    <a>I'm a button</a>
  </article>
</div>

Dev.to's team, what is happening?

I'll continue...

--Emmet--

<div>
  <article>
    <a>I'm a button</a>
  </article>
</div>
```



**Remove Tag**
I want to remove the article tag. 

1. Place the cursor inside the tag until the beginning and the ending tag is glowing. 
2. Press **_F1_**
3. Type **remove tag**
4. Press **_Enter_**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kltt1kv3vp7oqvkzsgq1.png)


**Update Tag**
Same concept above

**Wrap with Abbreviation**

I want to wrap the word "link" with an anchor tag.



```
<p>Please check out this link</p>
```



1. Put the cursor in front the word "link"
2. **_Ctrl + D_** to select the word
3. Press **_F1_** and type **wrap**
   ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8s5hup911otx77ux9o9c.png)
4. Type **"a"** and press **_Enter_**

Thank you for reading~

**Hi, Do you have any similar tips could share with me?**

How To Create React Parallax Effect With React Hooks

Anson Low Z.F — Wed, 24 Jun 2020 09:10:02 +0000

This is my first post in Dev. Thank you for reading~

I want to create a hero section with parallax scrolling effect, the text and image move at a different speed without using any library.

It’s easy to do with vanilla JavaScript:-

// Target parallax container and slow down image's Yoffset for 50%
window.addEventListener("scroll", function () {
  const parallax = document.querySelector(".parallax")
  let scrollPosition = window.pageYOffset

  parallax.style.transform = `translateY(${scrollPosition * 0.5}px)`
})

What if I want to implement the same code in React? I'm stuck for quite some time.

I googled around, most of the guides, tutorials and articles are using:-

When I try to a find solution in Stack Overflow. Most of the solution is either in Class component or React Refs code.

I started to learn React around mid of the year 2019. It’s the React Hooks era. I skipped learning Class component. Hence, I not sure how to resolve Class component and convert it to a functional component with React Hooks.

Create Parallax React Component

I want to write the Parallax JavaScript code in React Hero component. How to do it?

Convert HTML mark up to JSX:-

<div className="App">
  <section className="hero">
    <img
      src="https://picsum.photos/800/600"
      alt="test"
      className="parallax"
    />
    <div className="text-wrapper">
      <h1 className="headline">Parallax</h1>
      <h2 className="sub-headline">Scrolling effect</h2>
    </div>
  </section>
</div>

My First Try

I thought I can just wrap the JavaScript code with parentheses, like how we execute JavaScript code in JSX:-

<div className="App">
  <section className="hero">
    <img
      src="https://picsum.photos/800/600"
      alt="test"
      className="parallax"
    />
    <div className="text-wrapper">
      <h1 className="headline">Parallax</h1>
      <h2 className="sub-headline">Scrolling effect</h2>
    </div>
  </section>
  <!-- Make space to scroll -->
  <section className="overflow"></section>
</div>

{window.addEventListener("scroll", function () {
  const parallax = document.querySelector(".parallax")
  let scrollPosition = window.pageYOffset

  parallax.style.transform = `translateY(${scrollPosition * 0.5}px)`
})}

Of course, it's failed! What a genius!

Second Try

I continue my research and read more article. Oh, I see, if I want to addEventListener, I should write the parallax code in useEffect Hooks.

Without thinking further, I insert the parallax code in:-

export default function App() {

  useEffect(() => {
    window.addEventListener("scroll", function () {
  const parallax = document.querySelector(".parallax")
  let scrollPosition = window.pageYOffset

  parallax.style.transform = `translateY(${scrollPosition * 0.5}px)`
  }, []);

  return (
    <div className="App">
      <section className="hero">
        <img
          src="https://picsum.photos/800/600"
          alt="test"
          className="parallax"
          style={{
            transform: `translateY(${offset * 0.5}px)`
          }}
        />
        <div className="text-wrapper">
          <h1 className="headline">Parallax</h1>
          <h2 className="sub-headline">Scrolling effect</h2>
        </div>
      </section>
    </div>
  );
}

I have lousy React fundamental. I'm sad!

Final Try Before Asking For Help

More googling with different keywords,

React parallax effect
parallax scroll
parallax with React Hooks
scrolling in React
React onScroll event
More

Continue reading more articles. This time, I feel like more pro in React now. Yes, I can do it! Just do it! Come on!

export default function MyApp() {
  const [offset, setOffset] = useState(0)

  useEffect(() => {
    window.onscroll = () => {
      setOffset(window.pageYOffset)
    }
  }, [])

  return (
    <div className="App">
      <section className="hero">
        <img
          src="https://picsum.photos/800/600"
          alt="test"
          className="parallax"
          style={{
            transform: `translateY(${offset * 0.5}px)`,
          }}
        />
        <div className="text-wrapper">
          <h1 className="headline">Parallax</h1>
          <h2 className="sub-headline">Scrolling effect</h2>
        </div>
      </section>
    </div>
  )
}

En~ then what? Where should I write the parallax code? Oh my god, I'm despair.

Asking For Help

I need to trouble my big brother again, Malcolm Kee. He is a React expert and a fanatic. He always guides and helps React beginner in my country - Malaysia. He organises React KL's meetup to gather React developers and share tips and tricks and latest information about React to the Kuala Lumpur React's community.

I reach him out with Twitter and send my code to him though CodeSandbox.

He replies me the following with code:-

import * as React from "react"
import { useEffect, useState } from "react"
import "./styles.css"

export default function App() {
  const [offset, setOffset] = useState(0)

  useEffect(() => {
    function handleScroll() {
      setOffset(window.pageYOffset)
    }

    window.addEventListener("scroll", handleScroll)

    return () => {
      window.removeEventListener("scroll", handleScroll)
    }
  }, [])

  return (
    <div className="App">
      <section className="hero">
        <img
          src="https://picsum.photos/800/600"
          alt="test"
          className="parallax"
          style={{
            transform: `translateY(${offset * 0.5}px)`,
          }}
        />
        <div className="text-wrapper">
          <h1 className="headline">Parallax</h1>
          <h2 className="sub-headline">Scrolling effect</h2>
        </div>
      </section>
    </div>
  )
}

Oh man, I can understand the code. All my learning are like went into the deep sea. I cannot recall when I want to use it. Then I have the a-ha moment when see people write the code.

I think Malcolm solves it in 1 min, but I struggle for many hours.
I need to strengthen my React fundamental. Thank you, Malcolm, I understand React a little bit more today.

Check the Parallax effect in CodeSandbox

Thank you for reading~ If you don't mind to make friend with a React Noobie. Reach me out @ Twitter

Anson LowZF

@ansonlowzf

Rewrite the article after learning "technical writing". I want to keep on improving my writing—cheers to myself, and thanks for reading my article.
ansonlowzf.com/how-to-create-…

08:48 AM - 24 Jun 2020

0 0