UI Developer Path. From White Belt to Black Belt
How to Become a Skilled Layout Developer
Hi, everybody! Today I want to tell you how nowadays a layout developer can grow from a beginner’s position to Layout Team Lead.
Why would you believe me? Because that’s the story of my life. That’s what I managed to do myself. So you can too!
When I started, I knew nothing. All I wanted was to make progress in this sphere. So I began with gathering information and a lot of practice.
Just two and a half years later I became who I am now— Layout Team Lead. Now it's time to share my knowledge!
So how to divide the progress path into stages («belts») and achieve good results, knowing the final goal?
The field of web development evolves quickly and dynamically. The complexity of layout has grown enormously. The design has become more technological and, respectively, more perfect. Now our websites are more like applications.
In modern realities it is a great success to find a good layout developer. Therefore, the HRs are ready to chase such specialists. This area in web development is one of the most interesting ones. Moreover, it progresses quickly.
Base (fundamentals)
The path of any developer begins with fundamentals. Therefore, our path begins with the main markup language (HTML) and styles (CSS). At this stage, we need to learn tags, properties, a block model, ways of styles connection, scripts and how to impose semantically (to use tags for a designated purpose).
To obtain this knowledge and a «white belt» certain services of online training in programming will be of use, such as https://htmlacademy.ru/, https://www.codecademy.com/, etc. I strongly recommend completing a basic course on one of these services to receive a good base for future progress.
Useful info:
Advanced level
We grow, move forward and want to learn more and more. At this stage, we need to learn the following: what grids are (how to create and use them), the new CSS3 properties, the HTML5 tags, the principles of adaptive websites. Also, we have to get acquainted with «mobile first» and Flex.
Such services as https://htmlacademy.ru/ or https://www.codecademy.com/ will be of great help in reaching this goal. In addition, I would like to recommend you to get acquainted with Bootstrap or Semantic UI library that can help you:
- see the whole picture of what you have to know;
- «look under the hood» and see the principles of creation and the structure of such libraries.
If you have pumped up all skills at this stage, then you can easily put on an «orange belt» and move further.
Useful info:
Automation era
At this point, we have a base, the foundation is laid. The basic principles of layout are clear for us. But we are concerned about one thought! How to automate our process of layout? As we want to make the layout more dynamic and efficient, reduce the number of mistakes in code to a minimum, clean the infinite repeatings of elements in HTML and make our CSS smarter.
In this case, preprocessors, postprocessors, and template engines will be of great help.
Well, in order to make our CSS smarter and more flexible, we need to use the SASS, LESS, Stylus, PostCSS pre- and postprocessors. By the way, concerning PostCSS, I want to make a correction. Basically, it’s not a postprocessor, it’s just a processor. Because on its own, it’s nothing. All its power is in its plug-ins (Autoprefixer, Stylelint, PostCSS-nested). Also, PostCSS can be applied with any other preprocessor and this decision will be even more technological and flexible. For example, Stylus works perfectly well together with PostCSS. It will add even more cool libraries such as lost, nib. Also, it will bring a simpler syntax.
Just compare the code in CSS:
body,
html {
background: #7fc2d8;
}.base-style,
div {
color: rgba(255, 255, 255, 0);
text-shadow: 1px 1px 10px tgba(255,255,255,0.75);
font-weight: 600;
box-shadow: 0 0 1px rgba(0,0,0,0.1);
transition: box-shadow 0.75s ease-in-out, background 0.5s linear,
color 0.5s ease-in, tex-shadow 0.5s ease-in, transform 0.1s ease-out, margin 0.2s ease-in;
}.base-style: hover, div:hover {
box-shadow: 0 1px 2px rgba(0,0,0,0.4);
color: #fff;
text-shadow: 0 0 38px rgba(0,0,0,0);
}div {
padding: 5% 5%;
font-size: 2rem;
box-sizing: border-box;
}dis p{
text-align: center;;
}
The same in Stylus:
@import "nib"red = lighten(rgb(200,75,75),10%);
green = lighten(rgb(75,200,75),10%);
blue = lighten(rgb(75,75,200),10%);body, html
background darken(lightblue, 15%);.base-style
color: rgba(white, 0);
text-shadow: 1px 1px 10px rgba(255,255,255, .75);
font-weight 600;
margin: 10px;
box-shadow: 0 0 1px rgba(0,0,0,.1);
transition: box-shadow 0.75s ease-in-out, background 0.5s linear,
color 0.5s ease-in, tex-shadow 0.5s ease-in, transform 0.1s ease-out, margin 0.2s ease-in;
&:hover
box-shadow: 0 1px 2px rgba(0,0,0,.4);
color: white;
text-shadow: 0 0 30px rgba(0,0,0 .0);div
@extended .base-style;
padding: 5% 5%;
font-size: 2rem;
box-sizing: border-box;
p
text-align: center;.red
background: red;
&:hover
background: darken(red, 25%);.green
background: green
To make our HTML smarter, we need to use template engines, such as Jade (pug), Slim, Haml. They will make your HTML more flexible, the amount of code will be significantly reduced, the code itself will become clearer. You need to at least know the basics of Javascript to use the template engines.
Among the template engines, I prefer to use Jade (pug). A very pleasant syntax, an extensive documentation, a strong community and a lot of examples for almost all occasions.
Let’s look through the examples!
In HTML a certain amount of code can be shown like this:
<aside class="box" id="so-special">
<h2 class="box-title">Related
</h2>
<ul class="box-list">
<li class="box-item">
<a class="box-link" href="#">Item 1
</a>
</li>
<li class="box-item">
<span class="box-link current" href="#">Item 2 and current
</span>
</li>
<li class="box-item" id="third" data-dash="fine" aria-live="polite">
Item 3 not even a link
multi-line
block
</li>
<!-- -var parent = 'other' problem of scope 1 guess -->
<li class="box-item">lorem ipsum dolor sit amet
</li>
</ul>
</aside>
<footer class="footer" role="conetentInfo">
<div class="footer-inner">@ Comapny - 2014
</dv>
</footer>
And in Jade (Pug) the same code can be presented like this:
mixin e(element_name)
-var a = attributes;
-var element_class = attributes.class;delete attributes.class
-var element_name = element_name || 'div' //if no parameter
given
if element_class
-var element_class = parent + '-' + element_class
else
-var element_class = parent
#[element_name]&attributes({'class': element_class}, attributes)
block
-var parent = 'box'
+e('aside')#so-special
+e('h2').title Related
+e('ul').list
+e('li').item
+e('a'){href=#}.link Item 1
+e('li').item
+e('span').item#third(data-dash='fine', aria-live='polite') Item 3 not even a link
| multi-line
| block
// -var parent = 'other' problem of scope 1 guess
+e('li').item lorem ipsum dolor sit amet
-var parent = 'footer'
+e('footer')(role='contentInfo')
+e.inner @ Company - 2014So, to achieve a «red belt» we need:
- to know at least 1 CSS preprocessor;
- to learn PostCSS and understand how to apply it;
- to use a template engine.
Useful info:
Collectors, package managers
After we have already used preprocessors and template engines, another thought appears: «How to manage it all?».
We have a large number of libraries, plug-ins, add-ins. Therefore, we need to unite them all and put them together in one place. This problem is solved by collectors (Gulp, Grunt, Webpack). Today the most popular ones are Gulp and Webpack.
For example, the Gulp version:
var gulp = require('gulp');
var gutil = require('gulp-util');
var bower = require('bower');
var concat = require('gulp-concat');
var sass = require('gulp-sass');
var usemin = require('gulp-usemin');
var minifyCss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var sh = require('shelljs');
var rev = require('gulp-rev');
var clean = require('gulp-clean');var paths = {
sass: ['./www/css/**/*.scss']
};gulp.task('default', ['clean_css','sass']);gulp.task('sass', function (done) {gulp.src(['./www/css/**/*.scss'])
.pipe(concat('all.scss'))
.pipe(gulp.dest('./www/css/'))
.on('end', () => {
gulp.src('./www/css/all.scss')
.pipe(sass({
errLogToConsole: true
}))
.pipe(gulp.dest('./www/css/'))
.pipe(minifyCss({
keepSpecialComments: 0
}))
//.pipe(concat('style.css'))
.pipe(rename({extname: '.css'}))
.pipe(gulp.dest('./www/css/'))
.on('end', (res)=>{
done()
});
})});gulp.task('clean_css', function () {
//return gulp.src('./www/css/style.css', {read: false})
// .pipe(clean());
return gulp.src(['./www/css/all.css', './www/css/all.scss'], {read: false})
.pipe(clean());
});gulp.task('watch', function () {
gulp.watch(paths.sass, ['clean_css','sass']);
});gulp.task('install', ['git-check'], function () {
return bower.commands.install()
.on('log', function (data) {
gutil.log('bower', gutil.colors.cyan(data.id), data.message);
});
});gulp.task('git-check', function (done) {
if (!sh.which('git')) {
console.log(
' ' + gutil.colors.red('Git is not installed.'),
'\n Git, the version control system, is required to download Ionic.',
'\n Download git here:', gutil.colors.cyan('http://git-scm.com/downloads') + '.',
'\n Once git is installed, run \'' + gutil.colors.cyan('gulp install') + '\' again.'
);
process.exit(1);
}
done();
});gulp.task('usemin', function () {
return gulp.src('./www/index.html')
.pipe(usemin({
css: [minifyCss(), 'concat'],
js: [uglify({
compress: true,
beautify: false
})]
}))
.pipe(gulp.dest('build/'));
});
The same in Webpack:
const webpack = require('webpack');
const helpers = require('./helpers');const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;
const HtmlElementsPlugin = require('./html-elements-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');const METADATA = {
title: 'MovingPipe WEB',
description: 'MovingPipe Web Application',
baseUrl: '/'
};module.exports = {metadata: METADATA,entry: {'polyfills': './src/polyfills.browser.ts',
'vendor': './src/vendor.browser.ts',
'main': './src/main.browser.ts'},resolve: {
extensions: ['', '.ts', '.js', '.css', '.scss', '.json'],
root: helpers.root('src'),
modulesDirectories: ['node_modules']},module: {
preLoaders: [{
test: /\.js$/,
loader: 'source-map-loader',
exclude: [
helpers.root('node_modules/rxjs'),
helpers.root('node_modules/@angular'),
helpers.root('node_modules/@ngrx'),
helpers.root('node_modules/ng2-bootstrap'),
helpers.root('node_modules/ng2-branchy')
]
}], loaders: [ {
test: /\.ts$/,
loader: 'awesome-typescript-loader',
exclude: [/\.(spec|e2e)\.ts$/]
}, {
test: /\.json$/,
loader: 'json-loader'
},
{
test: /\.css$/,
loaders: ['raw-loader']
}, {
test: /\.scss$/,
loaders: ['raw-loader', 'sass-loader']
}, {
test: /initial\.scss$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader?sourceMap')
}, {
test: /\.woff(2)?(\?v=.+)?$/,
loader: 'url-loader?limit=10000&mimetype=application/font-woff'
}, {
test: /\.(ttf|eot|svg)(\?v=.+)?$/,
loader: 'file-loader'
}, {
test: /bootstrap\/dist\/js\/umd\//,
loader: 'imports?jQuery=jquery'
},
{
test: /\.html$/,
loader: 'raw-loader',
exclude: [helpers.root('src/index.html')]
}]},
plugins: [
new ExtractTextPlugin('initial.css', {
allChunks: true
}),
new ForkCheckerPlugin(),
new webpack.optimize.OccurenceOrderPlugin(true),
new webpack.optimize.CommonsChunkPlugin({
name: ['polyfills', 'vendor'].reverse()
}),
new CopyWebpackPlugin([{
from: 'src/assets',
to: 'assets'
}]),
new HtmlWebpackPlugin({
template: 'src/index.html',
chunksSortMode: 'dependency'
}),new webpack.ProvidePlugin({
jQuery: 'jquery',
'Tether': 'tether',
'window.Tether': 'tether'
}),
new HtmlElementsPlugin({
headTags: require('./head-config.common')
})
],
node: {
global: 'window',
crypto: 'empty',
module: false,
clearImmediate: false,
setImmediate: false
}
};
In addition, we still need to know what a package manager is (NPM, Yarn). It serves for installation of all our libraries, plug-ins, their updates, the establishment of dependencies, thereby forming a tree of packets.
That’s what it looks like in Package (npm):
{ “name”: “some-project”,
“version”: “1.0.0”,
“description”: “some-project: An Ionic project”,
“dependencies”: {
“grunt”: “⁰.4.5”,
“grunt-wiredep”: “².0.0”,
“gulp”: “³.5.6”,
“gulp-concat”: “².2.0”,
“gulp-minify-css”: “⁰.3.0”,
“gulp-rename”: “¹.2.0”,
“gulp-sass”: “~2.2.0”
},
“devDependencies”: {
“angular-swipe”: “⁰.4.0”,
“bower”: “¹.3.3”,
“cordova-plugin-android-support-v4”: “²¹.0.1”,
“cordova-plugin-googleplayservices”: “¹⁹.0.3”,
“gulp-clean”: “⁰.3.2”,
“gulp-rev”: “⁵.1.0”,
“gulp-uglify”: “¹.2.0”,
“gulp-uglifyjs”: “⁰.6.2”,
“gulp-usemin”: “⁰.3.11”,
“gulp-util”: “².2.14”,
“onesignal-cordova-plugin-pgb-compat”: “¹.9.1-pgb-compat”,
“shelljs”: “⁰.3.0”
},
“cordovaPlugins”: [
“cordova-plugin-device”,
“cordova-plugin-console”,
“cordova-plugin-whitelist”,
“cordova-plugin-splashscreen”,
“com.ionic.keyboard”,
{
“locator”: “https://github.com/phonegap-build/PushPlugin.git”,
“id”: “com.phonegap.plugins.PushPlugin”
},
“com.pushwoosh.plugins.pushwoosh",
“cordova-plugin-x-socialsharing”,
“cordova-plugin-statusbar”,
“cordova-plugin-geolocation”,
“cordova-plugin-camera”,
“cordova-plugin-dialogs”,
“ionic-plugin-keyboard”,
“onesignal-cordova-plugin@1.12.4”
],
“cordovaPlatforms”: [
“ios”,
{
“platform”: “android”,
“version”: “5.1.1”,
“locator”: “android@5.1.1”
}
]
}
We need collectors for the following reasons:
- to collect our project for development and production environment;
- to collect several bundles of JS/CSS/HTML;
- to use features of the future (CSS4, ES6/7);
- to use sprites, pictures and many other things.
For a start, I recommend you to get acquainted with Gulp. It is very simple to master and it will give you a good idea of how the collector works.
Webpack will be suitable for more advanced developers. With it, you need to have a good knowledge of JS and an understanding of why we need it.
So, to receive a «purple belt» you need:
- to know what package manager is and to be able to apply it in the project;
- to know what collector is and to be able to write the configs and tasks.
Useful info:
https://github.com/peterramsing/lost/
https://www.youtube.com/watch?v=y9ERi0PhHEo
Methodologies
So now, we have already approached one of the most serious «belts». At this stage, a meeting with methodologies of maintaining of our code, creation of the project, creation of scalable and flexible code lies ahead. In the modern world, there is a large number of methodologies, but I would like to allocate the most popular of them. Those that proved themselves well around the world in big and small projects (BEM, SMACSS, atomic web-design).
BEM (Block_ _ Element _ Modifier) is the methodology created by the Yandex company that suggests us to divide our future website into blocks that have elements and modifiers. This methodology introduces a number of rules in project creation, in particular, the class naming.
SMACSS is a «scalable and modular architecture for CSS». The creator is Jonathan Snook.
The essence of the methodology is in dividing your application into the following categories:
- A basis is basic styles for simple selectors by default. For example, Clearfix.
- A structure is a definition of a framework.
- A module is a group of elements that form the module together. For example, header or side button.
- A state contains the description of various conditions of elements.
- A subject is a definition of the visual representation of elements.
- Atomic web-design (Brad Frost).
The idea is in the following: using chemistry terminology, one may say that a basic component of the matter is an atom. Brad has transferred it to CSS and has told that all our pages are constructed of atoms.
The label, span, and other elements can act as an atom.
The form element with the input and button elements can be a molecule.
An organism is an combination of molecules. For example, it is possible to place the navigation and form elements into the header.
Templates are groups of organisms, they also form a page.
A page is specific copies of templates.
To receive a «brown belt», you need:
- to know several methodologies of code maintaining;
- to apply methodologies in your projects proceeding from complexity and features of the project.
Useful info:
Drafts
We are at the top now, butterflies fly in our heads, the projects please the eye and not only ours!
But nevertheless, one thought haunts us: «Where do the new properties come from and why not all the browsers maintain them equally?» At this stage, we need to delve into the very depths. First of all, we need to know a starting point from where we should deal with all the principles and basics of the web.
W3C (World Wide Web Consortium) is an organization that develops and implements technological standards for the World Wide Web. The W3C mission is to achieve the full potential of the World Wide Web by creating protocols and principles that characterize the long-term development of a network. This organization decides whether some CSS property will or will not exist. Only after that, such giants as Google, Apple, Microsoft, Mozilla apply these properties in the browsers. It is even possible to learn in advance the properties that are not yet released. Also, you should know that all these specifications are stored on GitHub in open repositories. Moreover, we can even affect this or that property, having sent a pull request or an issue.
Finally, to receive a «black belt» you need:
- to know all the browser engines;
- to know what a draft is and learn it seriously.
Useful info:
https://www.youtube.com/watch?v=VoA-aQu75Xk
https://developer.microsoft.com/en-us/microsoft-edge/platform/status/
https://platform-status.mozilla.org/
Conclusion
In this article, I wanted to show step by step how anyone, beginning from the «zero» stage, can grow to the level of a skilled UI developer. Certainly, this way is not easy, but it is worth it.
A skilled UI developer will increase the speed and the efficiency of any application or website creation significantly. As one of the main tasks falls on him and that is the product cover. And that, in its turn, is the face of the company and, in particular, the face of the project.
If you liked this, show your support by clapping us to share with other people on Medium.
Follow us on Facebook, Instagram, LinkedIn, Behance, Medium and visit our corporate blog for more news and articles on smart solutions.
Any questions? Feel free to contact us!
