New Learnings: JavaScript and Hugo

calendarMar 18, 2023 · 2 min read · learning javascript hugo  ·
Share on: linkedincopy

Yesterday I kicked off blogging using Hugo. I also carried on with Scrimba's Frontend Developer Path.

Hugo

What: Hugo is a lightweight framework for building static websites that are fast.

Why: Blogging the next day enhances learning. It enables producing knowledge which is the next necessary step after consuming knowledge. I decided to use Hugo as it is lightweight and comes with very nice themes to pick from. I picked a themes based on VMWare's Clarity Design System.

How: It's very easy to get going.

  1. Install Hugo
  2. Create a new site
  3. Add content
  4. Configure the site
  5. Publish it

I copied the theme's example site as it gives me a good starting point. I also added a GitHub Actions workflow, so that I have a nice deployment pipeline that takes my changes to production immediately.

Learn more about Hugo here

JavaScript

I continued with learning frontend skills and gaining hands-on experience using Scrimba's Frontend Career Path. Yesterday I re-started Module 5: JavaScript Essentials. Key concepts I went through yesterday:

  1. How to have a modal removed from the normal flow of elements and get position fixed to the view port. The steps in CSS are:
    1. position: fixed;
    2. top: 0px;
    3. left: 0px;
    4. bottom: 0px;
    5. right: 0px;
    6. margin: auto;
  2. Hide an element using display: none;
  3. Use setTimeout() to run some function after a set timeout in milliseconds.
  4. Change the style of an element using [element].style.[property] = "[value]"
  5. Forms and submitting forms