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.

 

GULP is a tool which improves your workflow. How? Well, GULP is a task & build runner, which helps you to write valid code, minify your files like a PRO and linting javascript. What can you do?

  • 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.

 

Responsiveness

 

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
  • flexbox
  • bootstrap/foundation

 

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?

 

They are Frameworks: both are an open source toolkit for developing with HTML, CSS, and JS, or a front-end web framework, with these frameworks, is extremely easy to build an application responsively.  You have all the CSS, HTML components, classes, functionalities, and javascript functions you need to build a proper bespoke responsive app.

 

Similarities:

  • 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
    • Buttons
    • Pagination
    • Labels
    • Progress bar
    • And more
  • Optional JavaScript extensions. They have easy-to-implement javascript plugins which make it easy to add certain kinds of more advanced front-end features—like sidebars or pop-up modals, complex sliders, video banners etc.
  • 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.’

 

Vanilla means simply using plain Javascript without any additional libraries such as jQuery.
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.

 

Best JavaScript Frameworks

 

First of all, I would talk about the difference between a library and framework. Well, the definition is this:

 

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.

 

The framework is the ‘boss,’ and the ‘boss’ could own a library, but a library can’t own a framework; also the framework is the ‘boss’ of your code. A library is just a collection of functions and your code is in charge and is using whatever it needs from the library by calling functions particularly. On the other side, a framework is an implementation of an application. Your code is just a detail to the whole picture. The framework is like a brain which invokes your usability whenever the body/the system needs specifics from you.

 

There are many powerful frameworks out there: Angular, React, Ember, Vue etc.
But, I find Vue.js easier than any other and Vue.js has many similarities with React, which gives you perspective.
I personally believe Vue.js is the most approachable for beginners.

 

Primarily why I suggest starting Vue.js is the fact that it allows you to write simple JavaScript easily. The documentation is really detailed and easy to follow that’s why you don’t need to read tutorials all the time yet the community is big that’s why getting started with Vue.js is extremely easy. Everybody can agree that Its source code is very readable. You can use jQuery but it’s  fine if you don’t want to. Furthermore, you won’t need to install any plugins, even though many interesting ones are available.
As I mention above I suggest considering vanilla JS as it works smoothly with Vue.js

 

If you have seen some JavaScript libraries, it’s not that hard to start to develop something just with by ‘reading’ the documentation.

 

In the end, I can’t say which one is the best, they are all, but the needs of the project will determine which would be better for the job. However, I would still suggest giving Vue.js a try.

 

Useful JS Plugins

 

The following plugins are useful only for animations, layouts manipulation and UI needs.

 

Typed.js

 

Typed.js allows you to create text/string animation by manipulating elements. The plugin will take your string data and create a ‘machine-typing-effect’ filling your container.
The plugin is light, useful and fun to watch! This plugin could be the ‘X Factor’ in your website.
For example, did you notice the intro ‘typing effect on my website? Well, I gotta say a big thank you to typed.js.

 

Swiper.js

 

Sometimes we need sliders. This is why Swiper.js is a suitable solution as it is free and the most modern mobile touch slider with hardware accelerated transitions and amazing native behaviour.
It works very well on mobile websites, mobile web apps, and mobile native/hybrid apps.
If you want to use a plugin for sliders, don’t use a jQuery based on but this one!

 

Greensock

 

My favourite JS animation plugin is Greensock. It’s light, powerful, reliable and freaking fast. You can combine it with many other plugins, such as Scroll Magic. It is not that hard to work with you just need some basic JS skills, for some standard animations. I would like to mention that the community is amazingly active and plentiful.

 

 

WoW.js & ScrollReveal.js

 

Any of these two plugins would be useful, is just a personal preference I guess. But if you never used a JS plugin I suggest starting with wow.js is decently light and the interactivity it adds is priceless! However, you could try ScrollReveal.js as well. You just have to add classes to your elements, and that’s it, let’s have a look:
<div class="wow fadeInDown>

</div>
By adding the class wow the JS is going to know which elements it has triggered and the .fadeInDown class, well it’s quite obvious, isn’t it? You have many other options such as: .fadeOutTop, .fadeInLeft etc.

 

I know, this is easy, but it looks way too pro.

 

Simple-line-icons

You may already know about font-awesome, which can be buggy sometimes, but the alternative is simple-line-icons. If you don’t know what font-awesome icon is, this plugin is all about icons you need to use in your app but you don’t want to spend time by inserting svgs. All you have to do is add an HTML element with specific classes for the type of icon you may want to use, for example:

 

 <i class="icon icon-social-facebook wow fadeInUp"></i>

 

As you can see you the icon-social-facebook class is going to insert  ::before to the <i> element which will have a “content” attribute that will load the Facebook icon. As an extra, notice the wow .fadeInUp class which whenever the user is going to scroll to the icon section the animation will trigger, which results in a happy experience for the user. It looks clean, and it’s quite handy!

 

There are many other JS animation plugins, but these are easy to use, and yet some of them could be extraordinarily complex.

 

Google Fonts

 

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>


Inspector Tips

 

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.

 

Tips:

 

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.

 

JavaScript Breakpoints. Debugging JavaScript can be easier if you learn to set breakpoints as you will easier identify the faulty. You can set breakpoints by clicking on the line number you want to break. After the reload/refresh the page will then run right to that breakpoint.

 

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.

Hackernoon (https://hackernoon.com/) the articles by these guys are mental! This article is my favourite: how-it-feels-to-learn-javascript-in-2016.

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!

The last and the best: CODEPEN.IO! Yes, sisters and brothers, CodePen.io is the best invention and tool for all Front End Developers. “CodePen.io is like a playground for developers. CodePen.io is great for testing out bugs, collaborating, and finding new inspiration. It works by allowing you to create “pens”, which are sets of HTML, CSS, and JavaScript. You can create amazing UI components, or you can look at others work so you could learn and be inspired! The community is fantastic and extremely innovative at creating stuff! Once, during one of my successful interview, the interviewer focused mostly on my CodePens and didn’t even mention my CV, at all!

 

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!

FlatIcon (https://www.flaticon.com/) When you just need some good-looking svgs/icons.

 LiveStyle.io (http://livestyle.io/) When you want to see your code instantly updating in the browser.

 

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!