Учасник opensource, фронтендер Codeguida,
автор статей про ІТ, фрілансер, студент
Той, хто звертається до старого, здатний відкривати нове ― Конфуцій
Винахідник Інтернету, HTTP, HTML, URI, засновник та голова W3C.
Написав JavaScript за 10 днів,
CEO Mozilla Corporation
Запропонував концепцію CSS,
головний інженер Opera Software
Неможливо написати хороший код, якщо ти не знаєш як його писати правильно
var squares = [1,2,3].map(function(x){
return x*x
});
squares = [1,2,3].map(x => x*x);
Час працює на мене - він мене убиває... ― Сергій Жадан
*nix простий. Але треба бути генієм, щоб зрозуміти його простоту ― Деніс Річі
Mac? Для чого?
Використання синтаксичного цукру не призводить до синтаксичного діабету
<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
Будьте голодними - будьте безрозсудними ― Стів Джобс
Результат вільного програмування - програми, надійні та ефективні ― Річард Метью Столман
Мажор
Мінор
Патч
Метаданні
# Заголовок H1
Просто деякий параграф, який повинен бути
дуже довгим, щоб ви чітко зрозуміли, що це
параграф.
* Елемент списку 1
* Елемент списку 2
* Елемент списку 3
*Italic*, так само як і _Italic_.
**Bold**, так само як і __Bold__.
Посилання на [Markdown](//site.com/).
> Цитата деякого відомого ІТ-шника.
Результат
.md
Просто деякий параграф, який повинен бути
дуже довгим, щоб ви чітко зрозуміли, що це
параграф.
Italic, так само як і Italic.
Bold, так само як і Bold.
Посилання на Markdown.
Цитата деякого відомого ІТ-шника
vk.com/denysdovhan
denysdovhan.com
email@denysdovhan.com