Як стати

хіпстером

веб-розробки

Денис Довгань

Учасник opensource, фронтендер Codeguida,

автор статей про ІТ, фрілансер, студент

Знати історію

Той, хто звертається до старого, здатний відкривати нове ― Конфуцій

Тім Бернерс-Лі

Винахідник Інтернету, HTTP, HTML, URI, засновник та голова W3C.

Брендон Айк

Написав JavaScript за 10 днів,

CEO Mozilla Corporation

Хокон Лі

Запропонував концепцію CSS,

головний інженер Opera Software

Для чого знати історію?

Аби мати комплексні знання
Аби розуміти процеси в ІТ
Аби отримати пинок під зад
Аби постійно зростати

Читати специфікації

Неможливо написати хороший код, якщо ти не знаєш як його писати правильно

Що нового в ECMAScript 6?

Блочні області видимості з let
З’являться класи та статичні методи
Модулі
Цикл for-of
Arrow-функії через =>

var squares = [1,2,3].map(function(x){
    return x*x
});

squares = [1,2,3].map(x => x*x);

Як щодо HTML5?

З’явились нові теги, що покращують семантику
Було додано потужний АРІ для роботи з медіа
Векторна графіка та <canvas>
Збережнення данних на стороні клієнта
Редагування вмісту елемента

Розумійте CSS3

Градієнти, тіні, трансформації, анімації
Властивості для роботи з 3D
Фільтри для роботи з зображеннями
@media, @font-face та інші фічі

CSS4 та HTMLNext?

Для чого це знати?

Щоб розуміти принципи
Щоб писати чистий код
Щоб писати простіше
Щоб знати до чого готуватись

Оптимізувати себе

Час працює на мене - він мене убиває... ― Сергій Жадан

Сліпий набір

Сніпіти, макроси та аліаси

Як економити час?

Швидкий набір
Зменшити кількість повторів
Дати програмам працювати за вас
Слідкувати за собою

Перейти на *nix

*nix простий. Але треба бути генієм, щоб зрозуміти його простоту ― Деніс Річі

Чому *nix краще ніж Windows?

*nix - традиційна для веб ОС
Чітка структура файлової системи
Пакетні менеджери та компіляція з сирців
Безпека
Гнучкість в налаштуваннях
Не вимогливий до апаратної частини
Можливість довго працювати без перезавантаження

Mac? Для чого?

10 годин від батареї
Unix BSD з приємним інтерфейсом
Adobe Photoshop + Illustrator
Купа нормально зробленого софту
Без геморою

Альтернативи Mac

Для чого *nix?

Тонке налаштування оточення
Більше коду
Права доступу
Надійність

Користуватись

препроцесорами та пакетними менеджерами

Використання синтаксичного цукру не призводить до синтаксичного діабету

  <section class=”container”>
    <h1><%= post.title %></h1>
    <h2><%= post.subtitle %></h2>
    <div class=”content”>
      <%= post.content %>
    </div>
  </section>

  %section.container
    %h1= post.title
    %h2= post.subtitle
    .content
      = post.content

.erb

.haml

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <title>Jade</title>
      <script type="text/javascript">
        if (foo) {
           bar(1 + 5)
        }
      </script>
    </head>
    <body>
      <h1>Jade - node template engine</h1>
      <div id="container" class="col">
        <p>You are amazing</p>
      </div>
    </body>
  </html>

  doctype html
  html(lang="en")
    head
      title= pageTitle
      script(type='text/javascript').
        if (foo) {
           bar(1 + 5)
        }
    body
      h1 Jade - node template engine
      #container.col
        if youAreUsingJade
          p You are amazing
        else
          p Get on it!

.html

.jade

# Змінні:
number   = 42
opposite = true

# Умови:
number = -42 if opposite

# Функції:
square = (x) -> x * x

# Існування:
alert "I knew it!" if elvis?

number = 42;
opposite = true;  

if (opposite) {
  number = -42;
}

square = function(x) {
  return x * x;
};

if (typeof elvis !== "undefined"
    && elvis !== null) {
  alert("I knew it!");
}

.js

.coffee

.box {
  color: #fe33ac;
  border-color: #fdcdea;
}

.box div {
  -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

$base: #f938ab;

@mixin box-shadow($style, $c)) {
  -webkit-box-shadow: $style $c;
  box-shadow:         $style $c;
}

.box {
  color: saturate($base, 5%);
  border-color: lighten($base, 30%);

  div {
    @include .box-shadow(0 0 5px, $base);
  }
}

.css

.scss

.box {
  color: #fe33ac;
  border-color: #fdcdea;
}

.box div {
  -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
  -webkit-box-shadow: @style @c;
  box-shadow:         @style @c;
}

.box-shadow(@style, @alpha: 50%) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}

.box {
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  
  div {
    .box-shadow(0 0 5px, 30%)
  }
}

.css

.less

body {
  font: 12px Helvetica, Arial, sans-serif;
}
a.button {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

@import 'nib'

body
  font 12px Helvetica, Arial, sans-serif

a.button
  border-radius 5px

.css

.styl

a {
  color: rgb(157, 149, 218);
}

pre {
  margin: 20px;
}

:root {
  --purple: #847AD1;
  --large: 10px;
}

a {
  color: color(var(--purple) tint(20%));
}

pre {
  margin: calc(var(--large) * 2);
}

.css

.myth.css

Пакетні менеджери

RubyGems

Мені точно це потрібно?

Додатковий рівень абстракції
Синтаксичний цукор
Перевірка коду при компіляції
Уніфікований стайлгайд

Слідкувати за новинами і трендами

Будьте голодними - будьте безрозсудними ― Стів Джобс

Chrome Canary

Firefox Nightly

Мати на своїй машині:

Читати ІТ-ресурси

Англомовні ресурси:

Codrops (tympanus.net/codrops)
Codyhouse (codyhouse.co)
CSS-Tricks (css-tricks.com)
...

Російсько та україномовні ресурси:

Frontender Magazine (frontender.info)
For Web (forwebdev.ru)
Codeguida (codeguida.com)
...

Дивитись скрінкасти

Англомовні канали:

Treehouse (youtube.com/user/gotreehouse)
Creativity Tuts (youtube.com/user/Creativitytuts)
Coder`s Guide (youtube.com/user/CodersGuide)
...

Російськомовні канали:

Sorax (youtube.com/user/ArtSorax)
uWebDesign (youtube.com/user/uwebdesign)
loftblog (youtube.com/user/loftblog)
...

Спілкуйтесь

Що дає спільнота?

Тримає в курсі новин
Навчає
Підтримує

Будьте OpenSource

Результат вільного програмування - програми, надійні та ефективні ― Річард Метью Столман

Семантичне версіонування

1

2

3 -rc.4

.

Мажор

Мінор

Патч

Метаданні

# Заголовок H1

Просто деякий параграф, який повинен бути
дуже довгим, щоб ви чітко зрозуміли, що це
параграф.

* Елемент списку 1
* Елемент списку 2
* Елемент списку 3

*Italic*, так само як і _Italic_.
**Bold**, так само як і __Bold__.

Посилання на [Markdown](//site.com/).

> Цитата деякого відомого ІТ-шника.

Результат

.md