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,139