DEV Community: Gabriel Laroche

Internet Explorer is dead and we killed it

Gabriel Laroche — Wed, 15 Jun 2022 13:11:43 +0000

Today is June 15th 2022 and Internet Explorer 11 is dead. For those who don’t know, I built Death to IE11 in 2019 out of frustration and desperation. Now I know that it is only technically dead on Windows 10 and onward, but it is great news nonetheless, the common developer won’t have to support it anymore.

Some stats about my silly little project:

Website analytics (since September 2020):

total of 148.1K unique visitors (and counting)
total of 285.6K page views (and counting)
~7k Monthly unique visitors
~13.6k Monthly page views

Github (repo created in March of 2019):

187 commits
67 pull requests (including dependabots)
26 contributors

These numbers might not seem super big to most people, but it's still impressive to me that a project that I built out of frustration got as much attention as it did.

Thank you for all the contributors and thank you Microsoft for finally pulling the plug on Internet Explorer 11.

Luck Is More Important than Hard Work and the Story of I Got into Tech

Gabriel Laroche — Tue, 27 Apr 2021 11:56:50 +0000

I grew up thinking that if I worked hard I would be successful or at least capitalism's definition of successful. In the past year I started reflecting on my career and my life as a whole and I realized that luck (and privilege) played a way bigger role than hard work. I think it's the same for most people. Just because we work hard, it doesn't mean we weren't lucky at key points in our life. This post is basically the story of my life and how I got into tech.

Although I only started my career as a front end developer three years ago, my relationship with coding and tech started before I was even born. Back in the 90s my dad fixed and built computers for a living and continued to build and fix computers as hobby after he left that job. In 1995 the internet was a new thing in Québec and my dad was invited to talk about it on TV, because he worked at a prominent local computer store and none of the other employees believed the internet would be a big thing. He also wrote various programs in visual basic as a hobby my whole life and nowadays he builds various things with 3D printers, raspberry pi and Arduino (by the way he has a blog about that if you're curious or interested). So I was always surrounded in computers and tech, lucky me.

I was born in Québec, but I was raised in Alberta and did most of my schooling there (kindergarten to 9th grade). My parents moved to Alberta because they wanted their three kids to learn English. In Alberta, kindergarten starts at around 4 years old and has a total of 13 years of mandatory schooling (including kindergarten). And in Québec kindergarten starts at around 5 years old and has a total of 12 years of mandatory schooling (including kindergarten). So when we moved back to Québec in 2012, I was 14 years old and most 14 year olds are in the 9th grade, but since I already completed that year in Alberta, I was put in the 10th grade. That means I graduated high school at 16 years old instead of 17 years old, lucky me.

In the 11th grade (last year of high school in Québec) I had a class that was pretty random that had modules on wood working, job searching and business development. In the job searching module I basically had to figure out what I wanted to do later in life or at the very least what program I wanted to enroll in at cegep or at the technical school. My criteria was simple: desk job, regular hours, no math requirement and easy barrier to entry. That ruled out the computer science program, because they asked for advanced math and I barely passed regular math. I narrowed my search down to two choices. One was the computer technician program at the technical school and the integration and multimedia program at the cegep. I visited the technical school and spoke with some teachers and students of the computer technician program and I learned that I could basically only work at the Geek Squad at Best Buy, which could've been cool, but it wasn't really what I wanted to do. The cegep program on the other end really spoke to me. Its focus was web development with a side of web design, animation, video editing and photography and I didn't need to take advanced math. This program was given in about three or four different cegeps around the province and turns out that the one that was most focused on web development, listened to the needs of the job market and produced some of the best web developers was the one in my city, lucky me.

I talked to my guidance counselor about my plans of entering this program and since I was a very average student but had low grades in a class. he told me that I would probably won't get in the program and he advised me to enroll in the Tremplin DEC program which is a program that consists entirely of the basic cegep classes (French, English, Philosophy and Physical Education) for a year. So that's exactly what I did. Since I had a low course load during that year I was able to learn a little bit of HTML and CSS in my free time, lucky me.

When I started the integration and media program, I already had most of the basic classes under my belt, I was able to focus my energy and brain power on my program specific classes. A privilege that most of my classmates didn't have. We started the program with about 65 students and we graduated with only 15. the other 50 people that didn't graduate with me either completely dropped out of the program or decided to do the program over four years because the workload was too much. I could've easily been one of those students if I didn't take a year to only do the basic classes, lucky me.

During my last year in cegep, we had to start looking for an internship, it was required to get the degree. Luckily we had a class that prepared us for that process. We learned how to write a C.V. a cover letter, the dos and don'ts of portfolios and we were also given a list of places and mandates that we could chose from to do our internship. most of the places were either web development agencies or government agencies. I applied to one of the web agencies and I was the only one from my class who applied there, so I didn't have any competition. I was over prepared for my interview and I was super nervous. The interview was pretty quick, it clicked they really liked the fact that I was bilingual, because they have offices in the rest of Canada and even the world and most of the clients were national or international companies. They took me in as an intern and once my internship was over, they hired me as a permanent employee and at 20 years old I started my career, lucky me.

I am a very average person, but I am very lucky and privileged. I was rarely at the top of my class in primary school, high school or cegep. The reason why I'm a front end developer now is because I had little bouts of luck in key moments of my life, it also helps that my skills were never questioned because of my gender, skin colour or anything. Sure, I work hard, but there are definitely other people who work harder than me, but don't have the same privileges or luck as me.

I hope you enjoyed this post, it was definitely fun to write. I don't always write this kind of content, so be on the lookout for more technical content, I have a few articles in my pipeline that I am quite excited to share.

What I Learned in the First Three Years of Working as a Web Developer

Gabriel Laroche — Fri, 23 Apr 2021 12:51:12 +0000

The last time I wrote a post like this was when I was three months into my career and I feel like I should make a post now, since my thought process and my feelings towards certain things in the field has changed. If you're looking for an article talking about concrete technical things I learned like "Oh I learned these really cool and useful features in JavaScript", This is not the post for you. This post is about how my opinions evolved and changed over the years. A common thing you might see during this post is that in the last three years, I realized that I had (and still have) a lot of privilege and my way of thinking some things were born out of that and I had opinions that were unintentionally gatekeepy.

Passion

I used to be super passionate about web development and I would work on silly side projects after work and I used to think it was important for other devs to be passionate about their work and I would look down on people who are just in it for money or aren't passionate about the field. This has changed, I still enjoy coding and I still code in my spare time from time to time, but I don't think it's super important to be passionate about web development and I think it's fine if people are in it for the money, at the end of the day, it's just a job, we all have to survive, we all have to live, who am I to judge other people's motivation to come in to work? Who am I to judge if people are not plugged in 24/7? Who am I to judge if people don't have a portfolio or side projects?

Vanilla JavaScript First V.S. Frameworks/Libraries First

I used to think that learning vanilla JavaScript before frameworks/libraries was the best and most efficient way to be a better front-end developer. That may be true for me and my way of learning things but it doesn't take into account people who don't necessarily have the time to learn JavaScript first, like people who switch careers later in their life. I had the luxury of going to a post-secondary school in my home city at the ripe age of 16 for 4 years. I had the time to learn the "fundamentals" first. While I'm on that note, when what do we mean by "fundamentals"? How much knowledge is enough to start diving into frameworks and libraries? People who start with React or Vue before Vanilla JavaScript doesn't invalidate them as developers. This logic also applies to CSS frameworks. Often times I see people who start with frameworks and libraries want to learn the backbone of their tech stack and become really proficient in CSS/JS.

Are HTML and CSS programming languages?

Okay this might be my most controversial opinion so far, but they both are programming languages, mostly because in the last three years I have seen amazing things done with these two languages. I was never one to consider HTML and CSS as unimportant, because I write a lot of HTML and CSS in my day to day. Even then, I used to say "Well HTML literally means 'Hypertext Markup Language' and CSS is a stylesheet language" and yes they are Markup and stylesheet languages respectively, but why don't we consider these types of languages as sub types of programming language? JavaScript is technically a scripting language, but no one argues its validity as a programming language.

On a personal note

even if this whole post is opinionated, this section is very specific to me and my experience.

After working two and a half years at a wonderful agency, I decided to work for a different company. There were three main factors that I looked for.

Interesting projects and challenges
Small company that isn't a startup
Embraces remote culture, even after the pandemic

Interesting Projects and Challenges

This is the main reason I wanted to change companies. Although the projects could be interesting for some/most developers, we mostly built big marketing websites for big corporations. That was fun for the first year or so in the industry, but after that I was starting to want to build products and Saas style projects and that was not something we did at our company.

Although I don't think passion is important. I feel like it's important that I at least tolerate or enjoy the projects I work on. That can come in many forms like enjoying the tools you are working with, the team, the goal/mission of the project, the challenges you face, the client, etc.

Small Company That Isn't a Startup

Going from a company with thousands of employees and is owned by one of the biggest marketing and communications company to a small twenty-ish employees company was quite a bit jarring, but in a good way. Obviously not all big companies are the same and same thing for smaller companies. After all, I've only worked at two tech companies that did very different things. Going into this small company, I saw myself cutting through a lot less red tape, especially when it comes to PTO and project architecture. At the bigger company it was a pain trying to add small npm packages to projects that it was usually easier to build solutions in-house, whereas the smaller company, there were a lot less friction when adding packages. At my current company I feel more independent while still having a good support system and that my opinions and ideas matter and aren't completely disregarded.

Embraces Remote Culture, Even after the Pandemic

Now, this is something that my previous company did very well. after three months of being fully remote they announced that the company will keep the office, but will be remote first for the foreseeable future and I applauded this decision. I grew to really love working remotely, I feel like I'm more focused, productive, eat home cooked meals 99% of the time and don't have to deal with the harsh Canadian winter or buses. It was one of the first things I asked my new employer because their only office is in a city three hours away from me and they were 100% on board.

Final words

In conclusion, I learned to see things with more nuance and compassion than before.

In conclusion, it was fun writing this post and reflecting on my career so far. I hope to write more articles like this as I progress in my career. Let me know what you think and feel free to share your own opinions and challenge mine. 🙂

My Unbelievably Long Journey to Make my Personal Website

Gabriel Laroche — Sat, 22 Jun 2019 19:27:26 +0000

Like my website, I started this post a while ago but wanted to finish it once I published my website, so this will probably end up with a lot of rambling and absolutely no structure.

I began building my website a few years ago. I wrote some code, then deleted everything countless times, I still have a few .psd and .ai of my half-designed website laying around in my computer. I knew I wasn't going to respect any design I made, so I decided I'd just wing it and go with the flow.

This version of my portfolio, took me around 3 months before I pushed the code to prod, I only wrote code for this project when I felt like it, so not that often. Since I mainly used 2 different computers for this project, I decide to put my project on github and while I was at it, I made the code open source.

One of the main reason I never fully finished mt website is because I lacked personal projects to showcase, I only had my IE11 death countdown. I wanted to have a few more projects before releasing my website. And the funny thing is that I'm not even looking for work, I just wanted a website because any web developer should have a website I guess.

I wrote the website in PHP, SASS and TypeScript. When I first started this project I wanted to only use HTML5 Pure CSS3 and vanilla JS, but I wanted my site to be bilingual (French and English), so I thought of using JSON files and deal with the translation in javascript and use web components to build the different sections, but then I realized it might not be the best bet for performance and if javascript is disabled, so I decided to use a mixture of PHP and JSON files to deal with the translation (Posts coming to explain this choice). Before choosing JSON to store the translations, I wanted to use gettext and Poedit like we did in school, but that knowledge is so far away and all the tutorials online were unclear. Therefore, I decided to use a less maintanable method using JSON files and PHP.

I apologize for this rambling post, but I had to talk about my journey to make my personal website, you can check it out here : gabriellaroche.dev and the repo right here. It really feels like a weight has been lifted off my shoulders, it's far from perfect, but I'm happy with the final result and I'm happy I finally finished this project.

Tip #3 A Very Basic Html Structure

Gabriel Laroche — Tue, 14 May 2019 17:17:48 +0000

This series is about all the neat little HTML/CSS/JS tricks I found and keep finding. Most of these are things that initially took me quite a long time to find or figure out and some are just useful tricks that I use in my day to day.

There might be some stuff missing in the head, but I think this code is a good jumping off point to start a simple project

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width">
    <link rel="canonical" href="https://dev.to/" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link rel="icon" type="image/png" sizes="32x32" href="">
    <link rel="icon" type="image/png" sizes="16x16" href="">
    <link rel="stylesheet" href="" />
</head>
<body>
<a href="#content" class="visuallyhidden">Skip Nav</a>
<header>
    <nav></nav>
</header>

<main id="content">
    <h1></h1>
</main>
<footer></footer>
</body>
</html>

Tip #2 : Reset a button's style

Gabriel Laroche — Tue, 07 May 2019 16:55:18 +0000

This tip is not something that I struggled with on the past, it's more of something that I use often and provides a clean slate to build awesome buttons.

button {
  padding: 0;
  background: none;
  border-radius: 0;
  border: none;
  cursor: pointer;
}

That's it :)
Have fun making amazing buttons!

Tip #1 : Centering elements without flexbox and automatic margins

Gabriel Laroche — Tue, 07 May 2019 01:07:31 +0000

This neat little trick allows you to center elements anyway you want in almost any situation. I found this trick when I was trying to vertically center a relative element in its container. I found out that you can use this trick to also horizontally center elements. Useful when margin: 0 auto; or flexbox doesn't work. Anyway here's the code :

Note only use this method as a last resort, if you can use to automatic margins or flexbox, use those methods instead

I initially found this trick here

The code bit by bit :

Horizontal centering

.container {
  position: relative;
}

.center__horizontal {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

Vertical centering

.container {
  position: relative;
}

.center__vertical {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Vertical & Horizontal centering

.container {
  position: relative;
}

.center__both {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Center a relative Element to its container

.container {
  width: 550px;
  height: 150px;
  background: #eaeaea;
}

.center__relative {
  position: relative;
  width: 50px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

I created an IE11 end of support countdown

Gabriel Laroche — Tue, 16 Apr 2019 21:02:52 +0000

Check it out!
A few months ago, I was working on a nasty ie11 bug and I was wondering when that horrible browser would stop being supported by Microsoft and subsequently, us. When I found that info, I thought it would be quite fun to create a little countdown to that date.

As a little ironic joke, I made sure that this little app wouldn't work in ie11 by using es6 arrow functions and other fun stuff

The repo is public, so if you want to contribute you are more than welcome

gabLaroche / death-to-ie11

Countdown for IE11 end of support

Death to Internet Explorer 11

this is a fun little app that counts down to the end of support of Internet Explorer 11 + a few more features like a list of articles/websites that tell you why you should stop supporting IE11 and a list of websites that already dropped support.

check it out in action

Want to contribute by adding a few reasons why people should stop supporting IE11 or by adding websites that stopped supporting IE11? How to contribute

Running Locally

Install dependencies: yarn install

Run the project: yarn dev

navigate to the src directory and have fun! :)

View on GitHub

What I learned in the first three months of working as a web developer

Gabriel Laroche — Sat, 01 Sep 2018 19:35:34 +0000

This is my very first post on here, let's get started :)

Before we get to the three months of work, let's talk about my background first. So, I'm a 20 year old developer who studied web development in Québec, Canada. Here, we don't have code bootcamps (or well recognized ones) and we don't go to university right after high school, we have to go through cegep first. Now, what the hell is a cegep? It's a general and vocational college. In a cegep, you have 2 choices, you either go into a pre-university program that usually lasts 2 years and you go to university(as the name suggests) afterwards, or you go into a technical program that usually lasts 3 years and you can typically get a job right afterwards and that diploma also grants you access to university.

I chose a technical program, Techniques d'intégration multimédia(it's in french, sorry) to be precise. This program varies from cegep to cegep, But the program at Cégep de Sainte-Foy (The cegep I attended) is regarded as the best one for web development in the province. It's the best, because they are very in tune with the industry and the needs of employers. In the 3 years I was there, we learned about web design, front-end development, back-end development, agile meetings, client meetings, we even learned video production and animation. They really wanted us to be prepared to do and to be anything once we graduated. in the first two semesters, we only learned the basics (obviously) and we only learned vanilla everything. We didn't touch any libraries until the third semester and to my knowledge, we never used any frameworks, the only non-vanilla technologies we used were jQuery, Sass, suzy(that was before css grids), a tiny bit of laravel and a tiny bit of wordpress. They were very adamant about mastering the basics before diving in the endless pit of frameworks and librairies, at first, it really bothered me, I felt like we were behind everyone and that we didn't learn enough. I felt like that until my internship during the last two months of cegep.

I interned and currently work at Nurun Québec from March 18 2018 to May 11 2018. During those two months I learned a lot. I worked on two very different projects as a front end web developer, I can't talk much about the first project, but we used mostly jQuery, Sass and handlebars. I never learned handlebars before, but with the documentation, helpful coworkers and some prior experience with twig, it was fairly easy to pick up.

The second project, however is a completely different beast, a bunch of different git repos that do different things, a team of over 30 people, about 10 or 15 of them developers. My biggest challenge was to learn Angularjs (and the whole project structure). I was legitimately scared, I never used Angular before, I didn't even know what it was used for, but again, with the official documentation, helpful coworkers (well mainly one coworker, because he was the only one with angular experience), a dash of "Google-fu" and nearly three years of experience with vanilla JS, I was able to learn and become one of the go-to angular guy in just a few months. Now, I'm nowhere near being an expert of any kind, I wasn't even at the top of my class in school, but I was able to succeed due to my knowledge of the basics, my ability to listen to the people around me and to my sweet sweet google search skills.

All this rambling and backstory telling to say that you don't need to focus to be a "Angular developer" or "React developer" or "Vue developer" or any other framework developer. Simply focus on being a good developer, become a master of the basics and you will be able to master and conquer any framework or library that comes your way. If you're still not convinced about that, I suggest you read these two articles, written by people way smarter than me:
Why You Shouldn't Use A Web Framework
The Web I Want

And if you made it this far, thank you very much for reading this and I apologize for all the rambling and grammar mistakes, I'm always opened for constructive criticism and to have my ideas challenged.