今日推薦開源項目：《UI設計 ant-design》
今日推薦英文原文：《A day in the life: how a frontend developer solves a 「simple」 bug》
今日推薦開源項目：《UI設計 ant-design》傳送門：GitHub鏈接
推薦理由：Ant Design 是一套企業級 UI 設計語言和 React 組件庫，服務於企業級產品的設計體系，基於確定和自然的設計價值觀上的模塊化解決方案，讓設計者和開發者專註於更好的用戶體驗。
今日推薦英文原文：《A day in the life: how a frontend developer solves a 「simple」 bug》作者： Abou Kone
原文鏈接：https://medium.com/code-divoire/a-day-in-the-life-how-a-frontend-developer-solves-a-simple-bug-565292ec2c31
推薦理由：一個看似簡單的 bug 說不定能給我們上一課
A day in the life: how a frontend developer solves a 「simple」 bug
I have been working lately with junior front end developers, as well as mentoring aspiring developers and one of the questions that they ask me is how to become a better/senior developer. That』s a question that is hard for me to answer quantitatively but the one quality that I know about senior developers is their ability to solve problems, in a timely fashion. In this post I wanted to illustrate that aspect, but also to give an anecdotal insight into what a day might look like in the life of a front end developer, and the twists and turns that it can take to solve a seemingly simple problem.
The Bug
I had implemented a new report page for one of our applications, where the user can create a spreadsheet like report by setting a few parameters. I say spreadsheet like because although it visually looks like a spreadsheet to the user, I implemented it as a flexbox based grid of individual grids, due to other requirements that made it difficult to achieve with a regular table. So far so good, except that to maintain the table appearance, I really need pixel perfect coherence between the individual grids which after a little tweaking with padding and margins I achieved on Chrome on my Macbook. The code is deployed, everything looks good except for my colleagues running on Windows, they observed a slight shift one some of the columns, breaking the table illusion. To give you an idea, this is what they were observing:
(Wrong alignment!)Easy enough I told myself 8:30ish AM that morning, it』s just another rendering issue, I just need to reproduce it and fix it.
Lesson 1: 「It works on my machine」 should never be a valid developer』s answer to a bug. Unless you believe that other people at delusional, you should use it as a basis to start your investigation knowing that at least it works somewhere. It should never be from your perspective the end of it.
Reproducing the issue on Chrome/Mac
Like i said, my colleagues on Windows 10 were definitely seeing that bug so I first tried changing the resolution on my Chrome browser to see if it might be related to a responsiveness issue, no dice that way. Next I changed my focus to the operating system and thought that maybe the issue was related to a difference in the Chrome rendering depending on the OS.
Reproducing the issue on Chrome/Windows 10 with BrowserStack
Next then was trying it in Chrome on a Windows 10 instance of BrowserStack. After many tries, again no dice. Let』s try something else. I remembered I had a IE11/Windows 10 VM lying around for my (non Chrome) Edge. By this time, with standup included, it』s 12:00ish PM.Reproducing the issue on Chrome/Windows 10 with VirtualBox
I fired up the VM and tried to reproduce the issue, still no luck. I further probe with my colleagues and it became clear that the issue was resolution related. Their laptop was running on a 1920x1280 resolution and they were easily able to reproduce. i spent the next hour or so trying to get VirtualBox to render my Windows 10 VM guest using that same resolution to no avail. Somewhere in my Googling somebody mentioned using Parallels, which I had already installed.
Reproducing the issue on Chrome/Windows 10 with Parallels
With Parallels fired up, I was quickly able to fire up a Windows 10 VM with the correct resolution, install Chrome, which led me to one of my favorite snark for my Windows colleagues:https://twitter.com/abookone/status/1230929236082425859
and lo and behold on accessing our dev server, the bug was there as soon as the page loaded. After a quick debugging session, I found the culprit behind the rendering issue.
Lesson 2: Be good at accepting when it』s time to fold. If you』re going down one road and it』s not working, learn to quickly re-assess and try something different that will get you closer to your goal.
The Problem
While defining one of the borders for a particular grid, I had used the following code:
border-top: dashed
border-top: dashed 3px;
border-top: dashed 1px;
Lesson 3: With CSS, be as specific as possible when creating your rules and don』t assume.
The Fix
Here again, while trying to work on the fix, I ran into another snag. Our Angular app runs on port 4200, and our API on 8080, which means that even after setting Parallels to be able to access my Mac localhost from my Windows VM, I was still unable to launch the app because of CORS issues. There are many different ways of solving this issue, i quickly tried:- Editing my
/etc/hosts - ngrok
The Angular Proxy
I was defining the different api proxy paths in
proxy.conf.json as: 「/api」: {
「target」: 「http://localhost:8080/api",
「secure」: false,
「logLevel」: 「debug」,
「changeOrigin」: true
},
/api/reports would proxy to http://localhost:8080/api instead of http://localhost:8080/api/reports. WTF? After re-reading the documentation many times, it finally jumped at me what I was doing wrong and the Angular/Webpack-dev-server people will correctly point out that ,y target was wrong, I should not add the context path in the target url but just the host. After changing the configuration to: 「/api」: {
「target」: 「http://localhost:8080",
「secure」: false,
「logLevel」: 「debug」,
「changeOrigin」: true
},
Lesson 4: Pay attention to details, especially syntax and spelling. That』s why practices like pair programming and code reviews are important. Having a second set of eyes going over your code will help catch these little errors that we make that take too long for us to catch because we are used to our own code.
Summary
What looked like a simple visual CSS bug created a journey that involved of course Google, VirtualBox and Parallels Desktop VMs, Browserstack, Angular and some high level networking (
etc/hosts). I』ve learned a few things during that process and here are some of the advice from that experience in that day that I would share with aspiring front end developers:- Whoever told you that as a front end developer, you would only be dealing with HTML, CSS and Javascript lied. As you have seen, producing applications require a lot more knowledge that usually, you can』t teach directly. It』s something that you pick up with experience.
- As a developer, your number one skill to develop is your problem solving. As illustrated here, solving code issues is sometimes not a straightforward affair. You will have to solve problems within problems.
- Take ownership of your work. You are ultimately responsible for the code you produce and it is your duty to ensure that it is of the highest quality.
- Embrace the process. This is what makes our industry so fun but so frustrating at the same time. Things will not always run right, even if (you think) you』re doing everything right. Things will break or malfunction, even with your best efforts and part of your job is to figure out how to get them working again.
- For non-coders on the team, it』s important to understand that things that look 「simple」 can turn out not to be so simple, either in implementation or in correcting when it comes to estimations.
- For my non English speaking friends, up your English skills. Like i said, navigating those issues required a lot of Googling and I can』t imagine how much slower I would have gone had I not been proficient in English. There is a lot of good information out there and the absolute majority of it is in English, so having a good grasp of the language definitely helps.
下載開源日報APP：https://openingsource.org/2579/
加入我們：https://openingsource.org/about/join/
關注我們：https://openingsource.org/about/love/
