Time to get tooled up
Like in any profession, you need to master the tools of the trade. Another trinity (after html/css/js) is coming your way, this time it’s the terminal, an editor and the browsers development tools.
Off course, this is where it get’s specific, specific to what computer you are actually using. I, like most developers nowadays, am on a mac. If you are too, good for you, if not, it’s either Linux, and then you can probably skip this post, or a windows flavour, in which case you’ll have to adapt and google on your own.
The terminal
No, not the movie, but that basic black window that you see in any movie when it gets to a hacker doing something. Where they type cryptic, things into, that once you learned more are actually quite funny. This mother of all programs is really a relic from the past, from when computers were big and really really expensive, and everybody just got a screen and keyboard (a terminal) to access it.
You type commands into it, and it does what you tell it, executes the commands. Commands, usually a short name, have options, that start with “-” or “ — “, and sometimes several arguments. If you copy from somewhere, options and arguments are delimited by space, usually it doesn’t matter how many.
To be more precise, the terminal is running a shell which actually interprets your input and executes it. Many shells exist, i usually use bash (bourne again shell, yes that is how funny developers are), but most of them work very similar, and have most of the following features:
- they remember commands, so arrow up will get the last one back (saves retyping), also “history” will show all typed commands
- Alias (or shortcuts) can be defined, so often typed commands can be abbreviated.
- Environment variables can be set. These can be tested inside programs to change the behaviour, without changing the code (very handy).
- autocompletion means when you start typing a command or filename and hit tab, the shell will complete the command or show options.
I personally use iterm2, but the mac comes with an adequate terminal (called terminal, in the utilities folder). In windows, if i remember correctly, it is called command prompt (and the slashes are the wrong way). You should start one up and poke around a little, learn some basic commands, especially the file related ones (pwd, ls, mkdir, cd, rm …). Also process related ones are good to understand, like ps, top and kill.
An editor
A good text editor is needed, because just about all the files you will need to create and edit are, yes, text based. And the “based” is really just sugar, as they are text, alas with machine readable syntax.
This is an area where the developers personality really shines through: you would not believe the intensity of belief or hours spent, discussing this topic. The short is, anything that works for you.
If you don’t have one yet, or you are like me and think that it’s just for typing your code, i suggest atom. It has a good community support and good functionality. I especially like the code highlighting packages, but also other coding related ones (like git integration).
The syntax highlighting is imho quite essential as it makes the code much easier to read. You can see for example the method names in yellow, and the keywords in violet. I find the black theme is easier on the eyes when working longer (this one is called seti).
Most important though is not which editor, but that you learn to use it. By that i mean that you learn to:
- move around without using the mouse. Eg, in atom alt-right moves a word to the right and is thus much faster.
- select words and lines (eg alt-shift-right in atom)
- indent automatically
- comment and uncomment regions
- generally work on your typing speed, especially the symbols used in languages like {}()[]<>&: etc..
Just like you need to be proficient in switching applications without the mouse, you need to learn to switch tabs in the editor (and terminal) without using the mouse. Remember: moving the hand to the mouse is always slower.
Browser Developer Tools
The last tool is probably the most difficult as it hosts a lot of functionality for things that you won’t understand yet. But not to worry, you just start small and work your way around the thing in time.
In most browsers you can right click (ctrl-click) on any part of the page and select “inspect” from the menu. The devtool (on the right) can usually be docked either right (here), bottom or kept as a separate window (for big or multiple screens). You can see the highlighted left (light blue) side is also highlighted on the top right, in the html view (dark blue). Below the html you can see the styles on the left, and the box dimensions on the right (you can just about see that the box is 32px high, and the font-size is 28px).
If you move around in the html, the browser will highlight were that html is on the screen (and update the box too). This in itself is a very helpful tool to understanding what is going on. Also the devtools shows you all the css, but strikes any rules that are not applied through. Remember i talked about inheritance of css rules, and the more specific one wins; well there you see it. The very bottom right shows all the applied styles (as opposed to defined ones on the left), and if you open a rule, it’ll show the file and line where the definition was made. Also very handy as systems grow.
As you may see, there is a lot there. I suggest you poke around and see. Try to understand, maybe read up on specific css properties. Explore! Some of the more advanced stuff i will point out in future posts, but as a developer it is really your drive to learn, which will make you learn.
And beyond
Off course these are just the basic tools. Many things you will do, you will do using these same tools. But that does not mean that there is not more.
The terminal is just a way to start other programs. And there are oh so many many programs out there to learn. Just as it always the same editor that you edit any text in, but there are a lot and lot of languages. Now you’ve heard of the basic html, css and javascript, but before you can get a job the list of languages that you can read will be over 10 for sure.
