Batman needs his cape and mask to be awesome, Front-Ends need plugins and frameworks.
Nowadays, it’s hard to define an excellent Front-End Developer(or UI Dev, or freaking Front-End Engineer). However, you’re good at something if you know your shit. As the success, there is no straight line to it aaaand the ‘DEV’ world is majestically not easy. There was a viral article about ‘how it feels to learn JS in 2016’ – in 2017 nobody has time to write that. It’s too much. But that’s not a bad thing. We’re evolving, and every day we have a chance to be different than any other Front-End Developer. You have a chance to be the best Front-End developer for your app.
First of his name and the best of his kind, ATOM.IO
Github is the Wolverine of all devs. Is kicking ass! Atom is a wicked text/editor. You have a package(which you install) for almost anything you need (CSS hints, JS hints, auto-completing HTML, colouring your hex code etc). It has multiple panes and the best themes so far, and the community is huge! Also, Git is already integrated into.
Git? What is Git?
Well, I am going to be as simple as I can. Is a software which allows you to have “versions” of your project which shows/compare all the changes that were made to the code over the time. The cool part is that you can travel back in time and undo some bad changes.
Some excellent Packages for Atom:
Code CSS like a superhero with SASS.
SASS or Syntactically Awesome Style Sheets is a CSS compiler. It is the next level of CSS.
Nowadays, you are not cool if you don’t use SASS, LESS, HAML or PUG. But let’s just focus on SASS.
SASS Is a tool that helps you to write correctly organized and correctly indented CSS. SASS is powerful, you can create functions, import styles from a specific class to another, you can create variables and crazy animations.
One of the major benefits is Nesting. CSS does not have a clear nested and visual hierarchy. Sass allows you to nest your CSS selectors in a way that follows the same visual hierarchy of your HTML.
It’s not that hard to install it and understand it. It’s going to change the way you code CSS without a doubt.
Warm up done. Let’s talk about GULP.
- Bundling and minifying libraries and stylesheets.
- Refreshing your browser when you save a file.
- Quickly running unit tests.
- Running code analysis.
- Less/Sass to CSS compilation.
- Copying modified files to an output directory.
Think of it as a guide, which helps you to be more productive, which solves the problem of repetition and definitely is a pro way of developing an application.
First of all, I would suggest sketching all your project, on paper, wireframes software, paint or whatever, just do it!
Second of all, start building mobile-first! Start by developing small and smart. As a result out of this, your code is going to be clean, more organised and adequately responsive. It’s quite hard to explain common sense, but once you do it a few times you will understand that this is a must.
Let’s learn some fundamentals:
Set the viewport. Your app has to be optimised for a large variety of devices. Therefore, your head must include a meta viewport tag. The tag itself instructs the browser how to control the page’s dimensions and to scale.
<meta name="viewport" content="width=device-width, initial-scale=1">
Sizes according to the viewport. On small devices, the content obviously needs to fit in, as the user will not be forced to zoom out or scroll horizontally. How do you do that? Well in your media queries you will have to use percentage values (e.g. width:100%;). However, for font sizes you could use viewport size typography; Thanks to CSS3, not they implemented some new values for sizing things relative to the current viewport size:vw, vh, and vmin.
Write clean Media Queries. Avoid creating too many of those, as will not help the loading, experience and it’s always buggy. There are many ways to code them the right way. One of the ways is by applying media queries based on viewport sizes in separate files.
<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css"> <link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css"> <link rel="stylesheet" media="(orientation: portrait)" href="portrait.css"> <link rel="stylesheet" media="(orientation: landscape)" href="landscape.css">
It’s a must to start mobile-first, as it forces you to design focusing on content and functionality. It’s important to start with min-width rather have 100 max-width queries in the end.
In the end, it’s all about testing, not just on chrome-tools. After you feel comfortable about it, ask your most annoying friend to have a look.
As we were talking about responsiveness is worth mentioning some important tools:
- CSS grid
You may not know this, but back in the days, we didn’t have divs but tables. Dark days. Then flexbox was born, and it was the best tool to develop responsively. CSS Grid and Flexbox are systems which helps you to build responsive and maybe complex HTML layouts. CSS Grids is efficient when complex layouts are needed to build, and Flexbox is more stable and supported, making your life easy when it comes to alignment content inside of elements.
What is bootstrap or foundation?
- Open Source – you can use them for free.
- Mobile First (really responsive).
- 12-column grid system. Which helps you to lay out your app in a responsive friendly way.
Both come with pre-styled, ready-to-go components. Such as:
- Navigation bar
- Progress bar
- And more
- The Main difference is that Bootstrap has a more extensive community with many themes; therefore, it’s easier to build a web app with it, but Foundation has a more of a design-it-yourself philosophy; hence your website will not look that typical.
Worth to mention:
One of my favourite JS plugin/library regarding grid layouts is Masonry. I enjoy when my elements are correctly aligned not just horizontally but vertically as well! Have a look, it’s quite convenient!
jQuery vs Vanilla
JQuery is a JS library, not a framework, that helps you to write less code to achieve quite complicate stuff such as AJAX. JQuery was the best thing that happened to Front-End developers a few years ago. It made cross-browser JS extremely easy, we could create easy animation with few lines of code, and the community was huge. But smartphones killed it because JQuery was a bit fat. JQuery slowly evolved into something more light but meanwhile, Angular, React, Vue and many solutions were already the ‘new thing.’
First of all, jQuery is not helping you to be a better programmer, not at all, but writing plain JS could.
Second of all, performance wise Vanilla is definitely better, not just the fact that you don’t need to host a whole js library but based on many tests ( awesome test here) plain JS functions/commands are quicker than any jQuery.
Nowadays, you are going to use many JS plugins; therefore you may only use jQuery for some basic stuff which could be easily replaced by plain JS. This amazing website helps you to not use jQuery. If you need to use it, use it, but bear in mind that you might not need jQuery.
The key difference between a library and a framework is “Inversion of Control”. When you call a method from a library, you are in control. But with a framework, the control is inverted: the framework calls you.
Useful JS Plugins
WoW.js & ScrollReveal.js
<div class="wow fadeInDown> </div>
<i class="icon icon-social-facebook wow fadeInUp"></i>
Before Google Fonts, it was tough to get the right font. It would take hours of searching, and you would end up paying crazy money for them. However, Google offered the best solution for Front-End Developer and Designers. I would like to mention the fact that there are some fonts which are still worth buying but only if the client wants it badly!
Here are some reasons why you should only use Google fonts:
- First of all, it’s FREE TO USE!
- Cross-platform display: in some cases, different operating systems and mobile devices can cause font display errors.
- No license required.
- Unlimited usage.
- Some fonts look too perfect!
- Live-preview. That’s right you can test how your paragraph would look by changing fonts, size, and weight. Also, they’ve integrated the pairing system which helps you by suggesting what other fonts would work with your one!
- Embed-able, you don’t need for example to install a font to test it, you just have to import by CSS or HTML an embed code, and that’s it!
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <style> @import url('https://fonts.googleapis.com/css?family=Roboto'); </style>
Most of the Front-End Developers have a love and hate relationship with their browser choice. I am a hybrid I use both Mozilla and Chrome.
However, properly managing your inspector it’s a must!
I would like to start with a simple thing: you can easily change your inspector theme. I hate staring at white too much; therefore I prefer darker colours. In Chrome Inspector you just have to go to Settings and on Appearance tab pick the one you prefer.
You may want to use Shortcuts:
- Windows: F12 or also Ctrl + Shift + I - Mac: Cmd + Opt + I
Easily access any file within a current project or web page by pressing Ctrl + P(Cmd + P) when Chrome DevTools is open and searching for the name.
Preeeeeeettty Print, probably one of my favs as I tend to minify my code for some reason. When viewing a script in the Sources panel, click the Pretty-Print icon to transform a minified script into a more human-readable form.
You can disable Cache by Selecting the “Menu” button in the upper-right corner, then select “More tools” then “Developer tools“. You can also get to this screen by pressing Ctrl + Shift + I for Windows and Linux or Command + Option + I for Mac OS X. Then all you got to do is:
- The Dev Tools window appears. Select “Network”, - Check the “Disable cache” box.
As a conclusion, the inspector shouldn’t be hard to manage it’s quite straightforward, but as you can see, there are some unknown things about it.
Knowledge is Power
As a Front-End Developer, your life is all about coding and learning new API’s, frameworks, reading the documentation for plugins and learning other languages. However, you may need high-quality sources. Here are some decent ones:
Awwards (https://www.awwwards.com/) always visit this one! Here are the best websites which are properly analysed and where most of the nowadays trends were born. I visit this website daily as I need world-class inspiration.
When you run out of creativity well, https://tympanus.net/codrops could save your ass.
TheNextWeb is also decently handy, they have many tutorial packages which are useful!
I should mention another 4 websites:
FlatUIColors (https://flatuicolors.com/ ) when you can’t decide to pick a colour.
UIGradients (https://uigradients.com/) When you want some kick ass gradients!
Go to Web Meetups/conferences
Stay connected to the great world of tech. It’s impressive, and it’s worth it! Search for meetups around your city or conferences. Usually, the meetups are free, and they have free pizza and beer (UK). You will learn great stuff. For a couple of hours, you will be going to feel genuinely connected to the excellent tech community.
You may never know what opportunities will pop in; therefore I strongly suggest to join the dark side and be an awesome nerd warrior!
How would Melisandre end it:
Because the web is unresponsive and full of cats!
Please feel free to share this!