Frontend development

Hi, I'm Mantas!

  • Frontend developer @ NFQ
  • Hometogo team
  • 5 years in frontend
  • CSS, HTML & JavaScript ninja

An interface between the user and the backend (data access layer).

A fast paced survival game.

Bunch of high complexity technologies, methodologies and other tooling.

The holy trilogy

  • HTML - HyperText Markup Language
  • CSS - Cascading Style Sheets
  • JavaScript (ECMAscript standard)

...And DOM (Document Object Model)

  • Structure / skeleton / tree / API of your code. This is the core of your web page.
  • Markup will define it.
  • CSS will style it.
  • JavaScript will make it do stuff.

HTML

Use the HTML semantic to define the meaning, structure, or style of a word, line, or any arbitrary piece of text.

Semantic HTML

  • Aids accessibility.
  • Tends to improve placement on search engines.
  • Code is shorter and so downloads faster.
  • Code is easier to understand.

WRITE SEMANTIC HTML!

CSS

#titanic {
  float: none; 
}

.ninja { 
  visibility: hidden;
  color: black;
}

CSS

a.fancy {
  color: red;
  text-decoration: none;
}

[selector] {
 [property]: [value];
}

CSS selectors

.class, #id, *, element, element > element, element + element, element ~ element, [attribute], :active, ::after, :focus, :last-child...

CSS

  • OOCSS
  • SMACSS
  • BEM

  • Atom
  • STUICSS

Use styleguides / methodologies:

CSS: BEM

  • Block (Standalone entity that is meaningful on its own)
  • Element (No standalone meaning, semantically tied to its block)
  • Modifier (Flags on blocks or elements, appearance or behavior)

Key elements of the methodology:

CSS: BEM

HTML implementation:

<header class="header">
    <!--
    `header__button` — element of the `header` block;
    `button` — block;
    `button_theme_islands` — modifier.
    -->
    <button class="header__button button button_theme_islands">...</button>
</header>

USE BEM!

css preprocessors

Nowadays, they are the key ingredients and must have tools for CSS development.

css preprocessors

Pre-processors extend CSS with variables, operators, interpolations, functions, mixins and many more other usable assets.

CSS PREPROCESSORS

  • Sass
  • Less
  • Stylus
  • Lots more...

Sass

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Sass

$ sass input.scss output.css

Sass

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

Sass Project structure

styles/
|
|-- admin/           # Admin sub-project
|   |-- modules/
|   |-- partials/
|   `-- _base.scss
|
|-- account/         # Account sub-project
|   |-- modules/
|   |-- partials/
|   `-- _base.scss
|
|-- site/            # Site sub-project
|   |-- modules/
|   |-- partials/
|   `-- _base.scss
|
|-- vendor/          # CSS or Sass from other projects
|   |-- _colorpicker-1.1.scss
|   |-- _jquery.ui.core-1.9.1.scss
|   ...
|
|-- admin.scss       # Primary stylesheets for each project
|-- account.scss
`-- site.scss

SAss

One more thing: don't use Ruby Sass and/or Compass extension, use NPM's node-sass package instead!

Use sass!

RWD

  • Responsive web design makes your web page look good on all devices.

  • Responsive web design uses only HTML and CSS.

  • Responsive web design is not a program or a JavaScript.

Viewport

  • The viewport is the user's visible area of a web page.

  • The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.

  • Problem: Browsers on mobile devices scales down the entire web page to fit the screen.

Viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Grid-view

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

media queries

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }
}

Javascript

  • Airbnb JavaScript Styleguide
  • Google JavaScript Styleguide
  • And probably others...

Styleguides:

Javascript: eslint

A pluggable linting utility for JavaScript.

Javascript: eslint + Airbnb

Airbnb JavaScript Styleguide provides Airbnb's .eslintrc as an extensible shared config.

Use airbnb's styleguide & eslint!

JS: frameworks & libraries

  • Bootstrap
  • Foundation
  • jQuery
  • Zepto
  • Lots of others...

USE jquery and bootstrap!

Task runners

  • Gulp
  • Grunt
  • Yeah, many others...

Task runners: gulp

  • Minify CSS, JS & concat to single file.
  • Preprocess Sass, lint JS.
  • Move stuff from place to place.
  • Setup automated watchers.
  • Many more...

Use gulp to manage your tasks!

Package managers

  • npm
  • Bower
  • yarn
  • others...

USE NPM package manager!

eventually...

  • Write semantic HTML.
  • Use BEM.
  • Use SASS.
  • Use Airnbnb's JavaScript Styleguide & eslint.
  • Use jQuery and Bootstrap.
  • Use Gulp to manage your tasks.
  • Use npm package manager.

Tips

  • Automate
  • Simplify and unify
  • Lint
  • Test
  • There is no single best thing
  • Use style guides
  • Try new things

QA

deck

By Mantas Kaveckas

deck

  • 1,121