March 22, 2017

Začínáme se Stylusem - CZ

V rámci vývoje webových aplikací, se mluví hodně o dvou populárních CSS preprocesorem a to jsou Sass a Less. Ne tak často se mluví o Stylusu.

Proč si vybrat Stylus

Jednoduchá odpověď, z několika důvodů:

Třeba proto, že Stylus je na bázi NodeJS, nemusíte si instalovat další technologie jako například Ruby pro Sass.

Stylus nevyžaduje závorky, dvojtečky nebo středníky, syntaxe je čistá.

Je celkem dost mixin knihoven pro Stylus.

Samozřejmě Stylus poskytuje standardní vlastnosti a funkce jako každý jiný preprocesor. Jako je vnořování tříd, vytváření mixinů ,funkcí, import stylů a nastavení proměnných. Pojďme se podívat tedy na základy Stylusu.

Instalace

Stylus je open source projekt a můžete ho najít na GitHubu. Můžete ho nainstalovat jednoduše použitím NPM:

npm install stylus

Koncovka CSS souborů v syntaxi Stylusu by měla být .styl a tyto soubory mohou být umístěny kdekoli v rámci vašeho projektu. Žádný konfigurační soubor není potřeba (ale je dobré využít například Gulp a Gulp-stylus), kompilaci kódu je možné jednoduše spustit nástrojem Stylusu pro generování CSS:

stylus stylus/styles.styl --out /css --compress

Tento příkaz zkompiluje styles.styl do CSS souboru se stejným názvem a v minifikované verzi.

Syntaxe

Základy syntaxe jsou velmi podobné jako u jiných CSS preprocesorů:

/* Nastavení proměnné */
main-font-size = 16px
/* Základní nastavení barvy a pozadí elementu body */
body
color #000
background #fff
/* Vnoření */
nav
margin 10px
ul
list-style-type none
/* Import dalších souborů Stylusu */
@import '_variables.styl'

Mixiny

Mixiny jsou neuvěřitelně užitečné v CSS preprocesorech pro řadu situací. Syntaxe mixinů ve Stylusu je:

/* Základní mixin a jeho použití */
vendorize(box-sizing, border-box)
vendorize(property, value)
-webkit-{property} value
-moz-{property} value
-ms-{property} value
{property} value

Závěr

Stylus je vynikající CSS preprocessor a nabízí širokou škálu základních a pokročilých funkcí. Instalace je rychlá bez žádných dalších vyžadujících technologií. Je to neuvěřitelně zábavné, jednoduché a rychlé psát v syntaxi Stylusu. Dejte Stylusu šanci a zkuste ho!


November 5, 2016

Úvod do Node.js - CZ

Vítám vás všechny u článku o Node.js, kde bych chtěl představit tuto platformu a ukázat nějaký příklad. Článek je psán především z důvodu, že zdrojů a článků v češtině není tolik. Tak jdeme na to ..

Co je Node.js?

Node.js je platforma, ekosystém, software navržený pro psaní škálovatelných webových aplikací (webových serverů). Tyto aplikace jsou psané v jazyce JavaScript, který se v poslední době těší velké popularity. Node.js se skládá z V8 JavaScript engine od společnosti Google a několika standardních knihoven. Zajímavostí a podstatnou věcí u Node.js je, že není spouštěn v internetovém prohlížeči, ale na straně serveru.

Základním kamenem v Node.js je javascriptový interpret V8 od společnosti Google a další knihovny. Můžeme zde také najít některé implementace ze specifikace CommonJS. Celý Node.js je multiplatformní, to znamená, že poběží aplikace na OS X, Microsoft Windows i Linux.

Zde jsou uvedeny některé z důležitých vlastností, i kvůli kterým se Node.js stává první volbou softwarových architektů a vývojářů: asynchronní události, velmi rychle staví na Google Chrome JavaScript V8, vysoce škálovatelný, bez vyrovnávací paměti.

Kde použít Node.js?

Zde jsou uvedeny oblasti, kde se Node.js osvědčuje jako dokonalé technologické řešení: I / O aplikace, Data Streaming, real time aplikace, aplikace na bázi JSON API, Single Page aplikace.

Kdo používá Node.js?

Společností, které již využívají platformu Node.js pro své projekty je plno. Jsou to například společnosti jako eBay, General Electric, Microsoft, PayPal a Yahoo!.

A na závěr příklad

Na závěr si ukážeme příklad použití Node.js. Jak už to tak bývá, jako první příklad si ukážeme server Hello World:

var http = require(‘http’);
http.createServer(function (request, response) {
response.writeHead(200, {‘Content-Type’: ‘text/plain’});
response.end(‘Hello World\n’);
}).listen(8000);
console.log(‘Server running at http://localhost:8000/');