Four things I want to explain to my past self as a Frontend Developer
I’ve been working some years already as a noble Front End Developer. During those years I’ve noticed two things:
- My past self did loots of stupid things that now I consider a blasphemy.
- My mother will never understand what my job is.
I’ve already gave up on n. 2, but I think it’s a good occasion to write some tips that my past self could have used.
So now I’m talking to you, Blai from the past, these are the things you should listen carefully that could help you a lot:
1. Be organised, don’t mix languages in the same file.
Ok, you’re started building websites, you know HTML, CSS and JavaScript, but you’re still learning jQuery.
So you want to drag a box around the screen. You’ll look around and land on jQueryUI.draggable(), with the following documentation:
<!doctype html> <html lang="en"> <head> <title>jQuery UI Draggable</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> ... <style> #draggable { width: 150px; height: 150px; padding: 0.5em; } </style> <script> $(function() { $( "#draggable" ).draggable(); }); </script> </head> <body> <div id="draggable" class="ui-widget-content"> <p>Drag me around</p> </div> </body>The example is good. It’s self explanatory and it’s also compact. An experienced developer doesn’t need to check anything else.
But you, as the newbie you are, are focused on making just the box draggable. Since you’re still not used to all the best patterns, you’ll copy and paste multiple snippets until you achieve your goal, and then you will forget where did you wrote that.
But that’s bad. This makes me say a lot of WTFs when I check your projects, it’s hard to find what you did and where you did it.
So, to start, don’t mix languages. Spend some time arranging your files. Create at least one file per language. So the css definitions to style the box should be on style.css (or .scss , .less), the script that starts the drag should be on script.js and everything else should be on index.html.
2. Do not rely too much to libraries.
I understand that you’re still not comfortable enough with Javascript. That’s normal. So with every new feature or functionality you need to implement you’ll go and check if anybody has done it already.
But before adding any big library just to handle a new effect, why don’t you consider trying to do it in a simpler way. You’ll be surprised sometimes that you can achieve the same result without relying on big libraries. Bookmark this: You might not need jQuery and use it every time you’re thinking I need to add jQuery so I’ll be able…
Next time you need to get a property like height, just check that site, you’ll be surprised that with one line you get exactly the same result without loading a full library.
3. Don’t write raw CSS, use a preprocessor.
I know what you’re thinking. Writing CSS sucks. It’s not easy configurable, it’s a pain in the a** to declare classes nested to other classes. And oh my, those vendor prefixes -webkit, -moz, that sometimes are needed, sometimes not, a big headache.
Lucky for us, this is a problem of the past. Forget of ever writing a css file again. Use LESS or SASS instead.
What do they offer? Lots of things, but the most important for you are
- Variables Define a variable and use it anywhere. Remember all those times you had to search & replace a hex value? Just put a variable for that colour and update that single variable definition.
- Nesting Oh boy, in complex project you get tired really fast of writing complex selectors like:
.modal { background: #020304; } .modal .header { color: #CCDDEE; } .modal .header .title { font-weight: 300; }You can write them nested this way. Once compiled will output normal css, like the previous example.
.modal { background: #020304; .header { color: #CCDDEE; .title { font-weight: 300; } } }Even if it feels longer, it’s much easier to update and less prone to fails.
I could talk about other usfeul preprocessor features but I’ll stop here. And also as a general advice, don’t over-select your CSS classes, it will make things harder in the future.
And what about those vendor prefixes. Lucky for us, somebody created Autoprefixer. Just write standard CSS and autoprefixer will add the prefixes to any css property that needs it, according to http://caniuse.com
4. Indent the code as if your life depends on it.
Seriously. I know what you’ll say. The IDE can do it at any moment. But you know what, just do it, stick to it.
Once you get the habit, you’ll wonder why weren’t you bothering about it. You eventually will become OCD. It’s normal, just try to not cross the limit. Nothing good comes from discussing tabs vs spaces for hours.
Just choose whatever you’re more comfortable with and respect other’s opinion. Use your IDE only if you need to reformat your identation.
Bonus: Focus on what’s important.
When you’ll be comfortable with all these features, some interesting tools will cross your path and you will fall in love for them.
At some point your live will depend on NodeJS, npm, yeoman, bower, Grunt, Gulp & others. But they will require a good time investment. Since you still busy learning the general patterns, just use Codekit meanwhile.
So, to conclude my letter, I want to say that no matter what, no matter how many WTFs per minute the code produces, I’ll be happy as long as you always learn something new.
You future self,
Blai
Originally published at www.blaipratdesaba.com.
