Hey all! In May this year i landed my first web dev job, and i wanted to write a retrospective of all the learning curves and brick walls that had to be maneuvered and hurdled with the most inelegant of self taught strategies. I want to focus on all of the things that struck me as either odd ways of doing things, painfully obvious solutions, or things that are generally not discussed at all on FFC or udemy courses, but are actually a large majority of the job we are doing as web devs. To give some context, while some projects ive worked are React native, most of what ive been working on is legacy code that is using javascript 5, jquery, and very old versions of node. Subsequently, its actually this older tech/legacy code that gave more problems since writing newer technology from scratch is a profoundly easier process than jumping into a 5 year old script that no one at the company knows anymore.
-
Most of this job is NOT WRITING CODE. Web dev is not memorization. Its google mastery. Its problem solving. And its not writing complex algorithms, it is not writing a lot of code at all. Its bug fixes, its css tweaks, its confirming a file even exists
-
Before you start, take a deep breath, and wrap your head around what you are trying to do? Did you read the requirements? Are you SURE you are doing the right stuff? Dont skim… this is where you kick yourself for those times you forgot to put your name on a test…
-
Chome Inspector…Network Inspector…File Inspector…
This is hands down the most used tool on the job. Most of my debugging starts here. This is where we are informed of where to look for our issues in the code.
A few key points to know/take away:
- HTML status codes when reading network tab
- Searching the DOM
- Searching for event listeners in the DOM
- Adding breakpoints to events
- viewing the page source to see it clean of javascript to confirm something actually exists in the dom
-
When writing new CSS changes, just do them in the inspector first to see how the changes affect the specific element in real time instead of: write new css in file, waiting for a refresh on your bundler, and then checking on the change, in brower…Its a huge waste of time!
-
Console logs are your friend. How many times did i waste time reading through a file for a half hour only to realize i’m reading the wrong file of the same name. Be careful when searching for files in a project, be sure to check for repeat names like main.js or something generic…because sometimes there are more than one!
-
Break code to learn it. When trying to decipher a large file its best to step through your code. But dont read it, interact with it instead: console log everything that you think is relevant. Start deleting things…What happens when you delete a return statement? What happens when return nothing? What happens when you only one piece of data through the return? Watch the codes behavior change to inform you on where you are, and where you need to be. Ive tried using a debugger, but holy hell can it get annoying
-
I had a big problem with not wanting to make mistakes…and more importantly not pushing up code with mistakes…but the beauty of working in git with dev branches, staging branches, deployment branches, etc: you literally never have to worry about writing bad code. You can just remove or update that bad PR
-
Speaking of git… Some of my favorite git commands
- When jumping branches temporarily: git stash // git stash pop
- When jumping branches for a long time: git add . / git commit -m “” and when returning: git reset HEAD~1 to undo the commit (you can stash with names, which you can do instead of this)
- You can confirm how clean your PR will be with this beautiful command: git log --graph --decorate
- When you forget to delete that one console log in your PR but you dont want anyone to see you write a second commit just for that: git reset HEAD~1 --> git add --> git commit -m --> git push origin + (that plus is what forces the push) WARNING: only do this before it is reviewed because it does break stuff for other people
-
How to start your work day: get water, drink coffee, git fetch upstream
-
ALWAYS PULL NEW CODE INTO YOUR DEV/FEATURE BRANCH or else you will face the wrath of a 100 merge conflict avalanche
-
When asking people for help, always tell them the steps you have taken so far, or else they will start doing those things in front of you.
-
buy the dev ops team nice things and give them praises
-
If your team doesnt use a linter/beautifier then scream until they do.
-
Omg this website: https://www.diffchecker.com/diff
-
and this: ohshitgit.com
Thanks for reading, and i hope it was helpful! <3
