DEV Community: Yong S Choi

Mondrian Painting

Yong S Choi — Tue, 25 Jul 2023 03:18:07 +0000

Using CSS grid system to do this!


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mondrian Project</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh
    }
    .container {
      display: grid;
      width: 748px;
      height: 748px;
      grid-template-columns: 320px 198px 153px 50px;
      grid-template-rows: 414px 130px 155px 22px;
      gap: 9px;
      background-color: #000;
    }
    .box1{
      background-color: #E72F24;
    }
    .box2 {
      background-color: #F0F1EC;
      grid-column: span 3;
    }
    .box3 {
      background-color: #F0F1EC;
      grid-row: span 2;
    }
    .box4 {
      background-color: #F0F1EC;
      grid-column: span 2;
      grid-row: span 2;
    }
    .box5{
      background-color: #004592;
      border-bottom: 10px solid #000;
    }
    .box6{
      background-color: #F0F1EC;
      grid-row: span 2;
    }
    .box7{
      background-color: #F0F1EC;
    }
    .box8 {
      background-color: #F9D01E;
    }
    .box9{
      background-color: #232629;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    <div class="box6"></div>
    <div class="box7"></div>
    <div class="box8"></div>
    <div class="box9"></div>
  </div>
</body>

</html>

Here is result!

Learning to code is a bit like going to the gym.

Yong S Choi — Fri, 21 Jul 2023 04:06:07 +0000

Rule 1: Trick Your Brain with the 20 Minute Rule

Learning to code is similar to regularly hitting the gym. Both tasks require consistency, and finding time for either can be challenging. To overcome this challenge, you can trick your brain using the "20-minute rule."

Understand that humans have an inherent inertia, which can be exploited to our advantage. If you convince yourself to engage in coding practice for just 20 minutes right after you arrive home, you may likely end up coding for an hour or more due to your brain's perception of the task's duration and effort.

Task-switching can be difficult, especially after a long day, which makes it even more important to start coding right away. You're more likely to give in to relaxation activities like watching TV if you sit down first. Thus, the moment you get home, committing to a brief period of coding can maximize your learning time.

Additionally, it's crucial to develop a habit. This typically requires performing the task daily for a month. To track this habit, draw a continuous line on a calendar for each day you successfully code. The psychological urge to maintain the continuity of the line can encourage you to stick to your daily coding practice, thus developing a habit.

Remember, the main goal is to trick your brain into starting the task and using the inertia to keep going, turning what initially felt like a chore into an enjoyable and fruitful exercise.

(Source: The App Brewery, www.appbrewery.com)

My Shift from Vanilla JS to React

Yong S Choi — Wed, 19 Jul 2023 00:42:50 +0000

Hello everyone! I've started learning React, a JavaScript library, after working with Vanilla JavaScript at the Codeup(coding bootcamp in Dallas), I want to share why I think this switch is a big step forward for me.

With Vanilla JavaScript, I often had to write the same code for similar functions. React's reusable components have changed this. I can now write a component once and use it multiple times. This reduces errors and makes the code easier to handle.

React's virtual DOM is very attractive feature. In normal JavaScript, each UI change updates the entire DOM, which can slow down larger applications. React uses a virtual DOM to speed this up. It updates changes in the virtual DOM first, then only updates those parts in the real DOM. This makes apps run faster.

Lastly, React's large community has been a great help. It offers many resources and tutorials, making it easier to learn than Vanilla JS.

In short, learning React is my next step. It offers tools that make coding more efficient than with Vanilla JS. If you're considering it, I recommend trying React to see these benefits yourself. Keep learning and adapting to grow in this field.