Hi my name is Thomas Nguyen. I'm a software engineer looking to help create a better humanity with software

A new beginning, again!


🙌, My name is Thomas Nguyen. I’m a software developer based in the Bay Area.

Every year, I aspire to write out my thoughts in a blog **but** every-time the results are the same. I spend a great 1-2 weeks building the blogging platform and then by the end of January, I drop the writing. The blogging project is abandoned

The truth is, blogging is _hard, very hard_. Expressing technical thoughts is one of the most difficult skills to master as an engineer. On top of that, writing takes time, **a lot** of time.

With that being said, I want to attempt this endeavor again. But this time, aiming at a different angle and with a new sense of discipline.

## 💪 This year will be different

The hardest part of starting any habit is getting started. Looking back at the years, there was simply too much friction with starting a blog post. This includes the writing process as well as putting it together visually.

Now as a more capable engineer, I’m able to automate tasks that would normally have taken me hours.

Additionally, I’m going to spend less time on technical writing. My interests goes beyond coding and I have desires to write about them.

Such as Bumi, [my puppy Corgi.](https://user-images.githubusercontent.com/14298038/103112874-d5799900-460c-11eb-9f5f-7a030244069f.jpg) ♥️

## Enjoy

I hope you guys enjoy reading these writing as much as it does for me to create them. 2021 will be a great year I promise.


Box-sizing: Code Layouts Intuitively


![Box Model CSS](https://user-images.githubusercontent.com/14298038/106364246-82b59000-62e2-11eb-97bb-f9b42955ea7a.png)

Padding messing up with your layout? It can be because of confusing browser default styling with box-sizing.

## What is boxing-sizing?

Box-sizing is a CSS property that tells the browser **how** the total width and height of an element is calculated. This factor comes into play often when setting the width/height to a percentage (most often 100%)

Box-sizing takes in 2 possible values, `content-box` and `border-box`

1. Content-box: Default browser behavior. Any padding or border values with be added to the initial width.
2. Border-box : calculates width but also account for borders and padding values

## Scenario

You might be thinking why this would ever be needed? Look to the example below with the following code.

![Step 1: Initial Layout](https://user-images.githubusercontent.com/14298038/103330613-25929a00-4a17-11eb-86e3-acfb82b6233a.png)

```html
<div class="parent">
  <div class="child">
    <a>Home</a>
    <a>Logout</a>
  </div>
</div>
```

The parent container has a total width of 500px. You want to add a menu child element with the width taking up the full container you have. Logically you set the child’s width to 100%. Makes sense and it works as below:

```css
.parent {
  background: gray;
  width: 500px;
}

.child {
  width: 100%;
}
```

Alright, that’s nice but your designer now wants you to add 10px padding on both sides left and right as seen below. Sounds simple, you now add this styling to your child class

```css
.child {
  width: 100%;

  padding-left: 10px;
  padding-right: 10px;
}
```

Oh no!, your page is now rendered as like this. What happened? Well the initial width is 500px but since you added the 20px worth of padding (left+right), the **total** width is now 520px.

![Step 2: Oh darn it messes up the layout](https://user-images.githubusercontent.com/14298038/103330529-bddc4f00-4a16-11eb-8e2b-0214880d43e0.png)

A possible solution to this is calculating the initial width with the `calc` function but unless you’re heavily using CSS variables, it just adds more overhead when we need to change those padding values.

Just slapping in the border-box property value fixes things and makes it more maintainable.

Ok:

```css
.child {
  width: calc(100% - 10px 10px);
}
```

Better:

```css
.child {
  width: 100%;
  box-sizing: border-box;
}
```

![Step 3: Yay we did it!](https://user-images.githubusercontent.com/14298038/103330658-5d014680-4a17-11eb-83e3-1ac7f0e27274.png)

As you can see, the browser is able to calculate the total width with the consideration from the padding. As said earlier in this post, it actually takes into account borders as well.

## BORDER-BOX EVERYTHING!

Border-box just makes so much more sense and it’s how we humans logically think when building layouts. There’s only a handful times I can even think of where I would use the default value `content-box`. Because of that, whenever I start a new project I add box-sizing to all the elements.

```css
/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
```

If I need to switch back to `content-box`, I simply just override the element with that styling. Simple and less headaches.

# Conclusion

Yep! That's all folks and if you want to see the final code check the codepen below.

Additional Resources:

1. [Codepen Working Example](https://codepen.io/toshiru/pen/VwKQZgN)
2. [box-sizing - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing)


Jumpstart your career


Some quick advice to any new engineers starting their new career.

## 1. Ask questions (put your pride away)

Engineers only know one thing, and it's that they don't know everything. Especially for _entry-level_ engineers, you're going to have a **lot** of questions and that's _ok_. Don't feel like your team is going to think less of your skills. It's better to ask questions than fail because you didn't know about the requirements.

Put your ego aside and ask questions early.

It's exponentially better to ask questions early so that you can plan project beforehand. It's okay to have questions down the line as you work towards the goal but try to have more of it before the project starts.

Your team will thank you for it. Seriously, they have much more patience in the beginning than the end.

With that being said however, be cognizance of bombarding your team members questions. Remember they have their own work too. My advice is to always do you research (aka stack-overflow) if you think you are asking too many questions.

## 2. Imposter Syndrome happens to everyone

Essentially Imposter Syndrome is the feeling of not belonging to the team or somehow being a fraud. This phenomenon happens to everyone in the engineering community, even 10+ year experienced devs.

The problem with imposter syndrome is that it takes a lot of your headspace and can cause worrying levels of stress / anxiety. Keeping untreated stress can cause dips in productivity.

From my experience, an actionable task to tackle this problem is

1. Focus on your strengths. There are legitimate reasons why your employer has chose you. Figure them out and embrace it. Write them down and share it with a friend

2. Find a mentor - someone that can help you when you get stuck. The most important thing a mentor can do is to tell you that it's ok to struggle (and that everyone goes through them)

3. Create a brag document. Truthfully you have accomplished a lot already in your career. Every win, make sure you have them documented somewhere. This psychology enforces positivity and self worth.

Luckily Imposter Syndrome, it has been heavily researched, and I recommend you read some more on it. I recommend starting on the wikipedia page.

## 3. Don't assume you are always right

When diving into a codebase, it can very tempting to refactor everything but realize many times developers have already thought it through and decided to do it that way.

Example:

You see this code

```javascript
let bool;
if (isDirty) {
  bool = isAbove0;
} else {
  bool = false;
}
```

and want to refactor it to this because you're thinking this is so much cleaner. Well is it really? Even if it is, is it worth the time? A senior engineer might not think so especially if coding standards have been established that way.

With that being said though, it doesn't hurt to have a conversation with your team about it _casually_;

```javascript
const bool = isDirty ? (isAbove0 ? true : false) : false;
```


Thomas Nguyen

Hello! I’m 👋
Thomas Nguyen

Front-end Engineer

Amazon AWS

Fullstack Engineer

Cedar

Front-End Engineer

Suki AI

Front-End Engineer

Education Elements

Fullstack Developer

Santa Clara Valley Water District

UI Developer

Code For San Jose

Thomas Nguyen

Hello! I’m 👋 Thomas Nguyen

Front-end Engineer

Amazon AWS

Fullstack Engineer

Cedar

Front-End Engineer

Suki AI

Front-End Engineer

Education Elements

Fullstack Developer

Santa Clara Valley Water District

UI Developer

Code For San Jose

Hello! I’m 👋
Thomas Nguyen