Why 100vw causes horizontal scrollbar

Tepy Thai — Fri, 05 Jun 2020 02:17:58 +0000

This post is from my personal blog here

Do you ever wonder why sometimes your site just has a horizontal scrollbar appeared out of nowhere? Today I just ran into it again (as always 😆) and I somehow figured out how to remove it. So here is the step I took to debug and fix it.

Try the global border or outline color trick to find which element is causing it:

* {
  border: 1px solid red;
}

Find elements with width bigger than the document's width (more from csstrick)

var docWidth = document.documentElement.offsetWidth;

[].forEach.call(document.querySelectorAll('*'), function (el) {
  if (el.offsetWidth > docWidth) {
    console.log(el);
  }
});

Most of the times, I always find the 100vw value on the width that is the cause of the overflow. So, if that is the case, you can try replacing it with width: 100% instead and see if it works. Try with its inner elements as well if present.

So, back to the title, why would 100vw be the cause? Well, the answer is:

When you set an element's width to 100vw, the element's width now will be the whole view width of the browser and the important part is 100vw does not include the vertical scrollbar's width into its calculation at all. Therefore, when there is a vertical scrollbar, the total width will be the sum of the element's width and the vertical scrollbar's width, which causes the overflow on the x-axis and thus the horizontal scrollbar.

Hope this helps!

Feel free to correct me if you think there is something wrong 😃

My Programming Journey To Frontend Dev

Tepy Thai — Thu, 04 Jun 2020 16:36:33 +0000

I hope this writing could be an inspiration to someone 😃

Hi, I'm Tepy, a Frontend Developer from Cambodia 🇰🇭 who is currently studying Computer Science in Japan.

I decided to become a Frontend Developer about 2 years ago after I started learning about Web Development, especially React.js.
The reason I chose to become a Frontend Developer despite having interest in being a Fullstack Developer as well
is that I enjoy seeing the result of my works immediately and I am quite interested in beautiful UI/UX as well.

Before entering the web territory, I think I have had quite a long story about how I even got myself into the programming world in the first place.

High School

Mathematics Lover

During my 3 years in high school, I had a dream goal of getting into The Top 10 rank in the National Mathematics Olympiad in 2012.

I spent all my free time studying Math just for that competition. Thanks to the lack of internet availabilty at my hometown (I live in a rural area), I was able to put all my concentration in studying Math.

As the result of endlessly solving many Math problems everyday for 3 years, I was able to achieve my dream goal where I placed 1st in the National Mathematics Olympiad. It would be a lie if I told you it was not my greatest achievment in my life 😄.

After High School

Clueless about future goal

Even though I achieved my dream goal, I barely knew anything related to what I want to become in the future. Due to the lack of information, I chose to study Civil Engineering as it is quite a common major for a student who is good at Math to choose back then in Cambodia.

Since the university that I was in is an international one, there was a compulsary course about general knowledge of computer and internet (CS101?). The course introduced me to a lot of stuffs I don't really know back then and it somehow opened the door for me. However, after that course, I only understand the general thing of computer, nothing more nothing less.

My first line of code

After hanging out with a few Computer Science friends of mine, I started my first line of code in Lua (using 2D game engine) while trying to make mobile game with them. I started out as I was really curious about how people make games and applications by that time, but eventually I got hooked into the world of programming without knowing it myself.

Later on, I kept finding myself spending more and more time learning different things related to programming. Starting from taking Python class for one of my elective courses to publishing my first ever mobile game. It was a clone of Flappy Bird game since that game was super popular at that time. However, what I did was creating just my own assets and wrote some really lame logic for the flying logic (I knew nothing about physics logic for game) for the bird 😄 and I could not understand at all when it comes to much more difficult code.

Coming to Japan

New journey begins

Fast forward to 2015, I decided to change my major to Computer Science as I started my new chapter in Japan as a college student here. During my 1st year in Japan, I needed to take Japanese class over the course of 1 year, so during that time I could only learn programming during my spare time.

As I started out as a self-taught programmer, it really took me quite a long time to finally understand the Foundation of Programming. I could recall being confused between i++ and ++i for quite some time. Also, as a beginner I could not understand well how while and for loops really work at all.

Into the real-world development

What keeps me going

After I finally have solidated the foundation in C, I started building Android Applications with Udacity's Nanodegree Online Course. Since I like seeing the result of my work immediately, building applications really encourages me to learn to code much better than just learning the basics.

While building mobile application, I have learned to understand how an application is built with seperated pieces. It is mostly composed of the UI(frontend) and the Data and many other parts together. As a native app developer, I spent most of the time implementing the UI look of the app and fetching data from API to use in the app.

That's also when I've first learned about API. At first, I was not sure how the API really works at all. All I knew was that I could retrieve data from it and use it in my application. After a while, I got used to calling the api to get some data with some libraries and using it in the app. Then eventually I got to touch the Database of the app when I tried to store data that I got from the api for offline usage. Writing database's query was something new to me as I was always dealing with just the UI of the app. So I found it somehow confusing most of the time. I also first learned a bit about the application archeticture such as MVVM, MVP, MVC etc.

From Native Mobile to the Web

Expanding knowledge

While I learned a lot building native application, I felt something is missing with my current knowledge. Yes, it's the How is the API built?. That thought of wanting to learn and build my own api brought me to venture into the web domain.

React.js

Where it all started again

I started off with the thought of wanting to build my own api, but what got me hooked was the Frontend part of the web instead. That was because, again, I am quite interested in the UI/UX part myself.

That's when I got introduced to React.js 2 years ago. I chose React as the web framework (well, React is basically a library) not because of any specific reason. It was just because it was pretty popular than the others at that time. However, the more I learn about React and use it, the more I like about it.

Over the last 2 years, React has taught me many new aspects of developing application. I believe it would be the same experience with other web frameworks, not just with React.

You can read more about how what I have learned from React here.

Internships

Gold opportunities

Uzabase as a software engineer for 5 weeks:

Agile development, pair programming, real life work

As lucky as I was, I was introduced by a senior for my 2019 summer internship at Uzabase. It was also my first time having an interview with a CTO. Even though it was not a technical interview, it was a great opportunity for me to talk with him about my experience as a developer.

During my very first internship, I was able to experience the real world of developing and maintaining a production ready website. Even more, I got to work with the team that composes of more than 10 people working together. That was a great lesson in communication for me as I was required to communicate a lot with the team.

Not only I learned about how people work in the real world, it opened a new door for me to the other side of what I have been doing (frontend stuffs). Since the team uses Agile Development and Pair Programming, I got to understand how important those 2 pieces are for a prodution team.

At first I felt a bit off doing pair programming with the engineers there since I was used to coding by myself all the time. However, after doing it for a week and receiving an explaination of how we should do pair programming from them, I felt like it was one of the best way to improve any developer's skills. Pair programming doesn't only give you the opportunity to think first before you start to code, but also train you to properly explain your solution to your peer. By learning to do so, you will be able to train yourself to give better explanation in a precise way to other people, which is an absolute important skill every developer should have.

Wantedly as a Frontend Engineer for 2 weeks:

React, Graphql, Typescript, GitHub (get used to PR, Issues etc...)

This time, it was my first time being a Frontend Developer and I got the opportunity to use React as well as my other favorite stack such as Graphql, Typescript.

During the period of just 2 weeks, I was able to learn a tremedous amount of knowledge from working on the project as well as from my mentor's advice . I got the chance to apply what I have been learning about React to improve the project and got myself adapting to working with a large codebase as well. Also, since the stack that they are using there is really cutting edge, it suits me really well since I also love to test out those cutting edge stuffs too.

It was also an eyes opener for me as well to see that there are many new things about React that I didn't know or haven't seen before. One of them was the technique that is used to sync the state of UI with the URL. Well, it is fairly just a technique, but before I've had seen it, I didn't think of having to do so at all. That's why it surprised me. Another one was the usage of useMemo. I did read about it and also quite understand about it, but since most of the projects that I were working on by myself are quite small, I didn't think of optimizing the performance much at all from the start. That is why I didn't really utilize the usage of useMemo at all.

Furthermore, I also got the chance to get used to creating Pull Request and Issues on GitHub as well. Since most of the communication was done within GitHub, I was able to train myself to write more Docs and Discussion on the platform as well.

Current

Finding my first fulltime job

As I am going to graduate in March 2021 and I want to become a fulltime Frontend Developer (or Software Developer), I am actively applying and searching for a job right now. Since I plan to live in Japan for at least a couple of years after my graduation, it would be nice to get the job in Japan. However, I am also open to negotiation with any offers, so do not hesitate to ping me up 😄.

Besides finding the job, I think it is really the time for me to get myself giving back to the community of developers where I have been learning from all this time. I plan to regularly write blog post about what I have learned, especially React/Frontend Dev. Also, I am looking forward to giving myself the time to make some video tutorials as well. So please keep an eye on my twitter as well.

Ending thought

Keep on learning

First of all if you read this far, thanks for reading. This is my very first blog post so I hope you enjoy it.

I have come all the way to what I am now by mostly learn everything online. And after coming to the web world, I became really curious about learning all these cutting edge stuffs that are progressively being created as I am writing this post. So I really look forward to checking out more stuffs and possibly teach people back about what I learn along the way.

Again, thanks for reading this.

DEV Community: Tepy Thai