CSS Preprocessors (SCSS & LESS)

или ти по нашки CSS предпроцесори.

Ја сам се до сада сусрео са два дотична предпроцесора ЅCSS и LESS.

Од два најпознатије frameworks за развој у FrontEnd, један је написа са LESS (Boostrap) а други је написан са SCSS (Foundation), па ћемо ми сада погледамо оба а вама остављам да изабере онај који вам се више допада. За примере ћу користи CodePen.

Па да почнемо… :)

Променљиве:

SCSS
  $white: #fff;
  $spacing: 25px;

  .classname {
    color: $white;
    margin: $spacing;
  }
LESS
  @white: #fff;
  @spacing: 25px;

  .classname {
    color: @white;
    margin: @spacing;
  }

Скоро па идентично, зар не?

Угњеждавање и њихова правила

SCSS
ul {
  margin: 20px auto;
  list-style: none;
    
  li {
    padding: 10px 20px;
        
    a {
      color: #333;
      
      &:hover {
        color: #000;          
      }
    }
  }
}
LESS
ul {
  margin: 20px auto;
  list-style: none;
    
  li {
    padding: 10px 20px;
        
    a {
      color: #333;
      
      &:hover {
        color: #000;          
      }
    }
  }
}

Апсолутно идентично.
Ово су биле основе, сада крећемо у мало напредније ствари где ће почети да се појављују прве разлике између два предпроцесора…

Mixins

Миксеви(нећу проналазити српску реч за ово) су скупови својстава које могу да се убаце у својства неког елемента позивање. Такође, миксеви се могу понашати и као функције и прихватати аргументе.

SCSS
@mixin razmaci($razmak: 10px) {
  padding: $razmak;
}
@mixin crvena-zvezda-scheme {
  background-color: white;
  color: red;
  border: 1px solid red;
}

@mixin partizan-scheme {
  background-color: white;
  color: black;
  border: 1px solid black;
}

// Upotreba
.delije {
  @include razmaci;
  @include crvena-zvezda-scheme;
}

.grobari {
  @incldue razmaci(20px);
  @include partizan-scheme;
}
LESS
.razmaci(@razmak: 10px) {
  padding: @razmak;
}
.crvena-zvezda-scheme {
  background-color: white;
  color: red;
  border: 1px solid red;
}

.partizan-scheme {
  background-color: white;
  color: black;
  border: 1px solid black;
}

// Upotreba
.delije {
  .razmaci;
  .crvena-zvezda-scheme;
}

.grobari {
  .razmaci(20px);
  .partizan-scheme;
}

Ево и тога примењеног.

Функције

Oба предпроцесора долазе са подршком за основне математичке функције, као и још неколико врло корисних и практичних функција које вам могу помоћи приликом развоја сајтова.

SCSS
$razmak: 20px;
$crvena: red;
$bela: #fff;
$crna: #000;

.delije {
  background-color: $crvena;
  color: $bela;
  padding: $razmak / 2; // 10px
  margin: $razmak * 2; // 40px
  
  &:hover {
    color: darken($bela, 20%); // potamni boju
  }
}

.grobari {
  background-color: $crna;
  color: $bela;
  padding: $razmak + 10; // 30px
  margin: $razmak - 10; // 10px
  
  &:hover {
    background-color: lighten($crna, 20%); // posvetli boju
  }
}
LESS
@razmak: 20px;
@crvena: red;
@bela: #fff;
@crna: #000;

.delije {
  background-color: @crvena;
  color: @bela;
  padding: @razmak / 2; // 10px
  margin: @razmak * 2; // 40px
  
  &:hover {
    color: darken(@bela, 20%); // potamni boju
  }
}

.grobari {
  background-color: @crna;
  color: @bela;
  padding: @razmak + 10; // 30px
  margin: @razmak - 10; // 10px
  
  &:hover {
    background-color: lighten(@crna, 20%); // posvetli boju
  }
}

У неком од наредних чланака, ући ћемо у детаљније и још напредније ствари које можете да радите са предпроцесорима…

SCSS
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

… као петље на пример? ;)

Read More

FrontEnd development – alatke

Verovatno najbitniji aspekt rada jednog programera su alatke koje koristi za kvalitetniji i produktivniji rad. Međutim i tu postoje aplikacije koje su bitnije od ostalih a to je, naravno, ona u kojoj svi mi pišemo naš kod…

Dakle, editori.

Ja sam ljubitelj SublimeText-a, koji ću vam ukratko predstaviti sa objašnjenjem zašto je baš isti moj omiljeni editor i zašto biste trebali da ga, barem, probate.

* Multi cursor podrška
* Plugins & snippets
* Brzina

Dovoljno je da čovek ode na sajt [sublime text](http://www.sublimetext.com/) kako bi mogao da vidi koliko multi-cursor podrška znači u svakodnevnom radu sa kodom.

MultiCursors

 

SublimeText ne dolazi sa instaliranim menadžerom za pluginove ili snippets ali instalirati isti je izuetno lako. [Package Control](https://sublime.wbond.net/). Podržava stare(a i nove) Textmate bundles. ;)

PackageControl

U pitanju je tkzv “fuzzy search” koja radi po principu traženja patterna u bilo kom delu reč ili čak rečenice. Vrlo korisno kada se traži nešto zašta nemamo jasno definisani naziv ili znamo kako bi se možda moglo zvati.

 

Brzinu ćete najbolje videti kada budete instalirali program i počeli da kodirate u istom…

Uživajte!

Read More

Crtanje laptopa samo sa CSS-om :)

Danas je bio spor dan na poslu, pa između gomile prototipova koje sam napravio za razno razne potrebe, slučajno sam napravio nešto što je ličilo na ekran laptopa… 10minuta kasnije napravio sam ovo:

Screen Shot 2013-07-10 at 7.35.30 PM

CSS:


.notebook {
  position: relative;
  width: 350px;
  margin: 25px auto;
}
.notebook .display {
  width: 250px;
  height: 175px;
  margin: 0 auto;
  background-color: #796cce;
  border: 10px solid #333;
  -webkit-border-radius: 10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0;
  border-radius: 10px 10px 0 0;
}
.notebook .display:before {
  content: '';
  position: absolute;
  top: 2.5px;
  left: 50%;
  margin-left: 2.5px;
  width: 5px;
  height: 5px;
  background: #ccc;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
}
.notebook .bottom {
  position: relative;
  width: 350px;
  height: 12.5px;
  background: #cccccc;
  margin: 0 auto;
}
.notebook .bottom:before {
  content: '';
  position: absolute;
  top: 0;
  top: 0px;
  left: 50%;
  margin-left: -25px;
  width: 50px;
  height: 5px;
  background: #8e8e8e;
  -webkit-border-radius: 0 0 10px 10px;
  -moz-border-radius: 0 0 10px 10px;
  border-radius: 0 0 10px 10px;
}
.notebook .bottom:after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  border-top: 4px solid #959595;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}

HTML:


<div class="notebook">
  <div class="display"></div>
  <div class="bottom"></div>
</div>

Codepen mozete pogledati ovde

Read More

DevOps – zajednica IT profesionalaca

Danas sam dobio vrlo interesantno pitanje od mojih kolega iz firme i glasi: Da li postoje organizovana okupljanja programera (prvenstveno ovih što rade web) u Beogradu? (inače, moja firma je u Berlinu i ja često putujem tamo, pa sam prilikom svakog odlaska bio na barem jednom od meetup-a, dal na temu JS ili Ruby dev.)

Generalno za “vrlo razvijeno” kako mnogi nazivaju IT segment u Beogradu, mislim da smo vrlo zaostali po pitanju svih mogućih oblika socijalnih povezivanja, počev od manjka sajtova pa do činjenice da jedini posvećini forum developmentu je više nego mrtav.

Zanimaju me vaša mišljenja i iskustva, kao i predlozi kako unaprediti našu dev scenu, kako po pogledu više socijalne interakcije kroz tematska(javascript, php, ruby on rails… itd) okupljanja, tako i kroz prizmu bolje povezanosti radi lakšeg ostvarivanja ciljeva po pogledu razvoja pojedinačnih i grupnih(čak i startup) projekata.

p.s.
Beograd sam naveo kao primer, jer sam ja iz istog… ali naravno da bi bilo kul da se povežemo svi iz cele Srbije i da se organizuju dotična okupljanja i po drugim mestima, ne samo u Beogradu.

Ovako sam započeo temu na benchmark forumu koja je bila odgovorna za početak saradnje između Igora (kutija) i mene i pokretanje DevOps sajta koji će služiti kao prvi korak ka bolje integrisanoj IT sceni (za sada) u Beogradu.

Vidimo se na DevOps.rs

Read More

Projekat “Oglasi” – rana alpha faza

Pre mesec dana sam, potpuno isfrustriran sajtovima koje koristimo za oglašavanje, pogotovo njihovom “anti-mobile” strategijom, odlučio da razvijem besplatnu platformu za male oglase, koja bi bila (dobro si pogodio/la), “mobile friendly”.

Pošto napraviti sajt a kamoli celu platformu nije lak posao, ja sa došao do tog momenta kada sam u fazi da mogu da podelim sa svima šta je do sada urađeno i da pre nastavka rada na servisu dobijem od svih zainteresovanih povratnu informaciju sa naglaskom na onome što ti se ne dopada.

Sajt možete pogledati ovde i ostaviti mi komentar o tome šta mislite o istom.

p.s. predlozi o imenu/domenu sajta su više nego dobrodošli. :D

Read More

Korisna Javascript skripta za proveru širine ili visine viewporta browsera korisnika

Pozdrav svima

Pre izvesnog vremena sam radio na jednom projektu gde sam imao potrebu da prikazujem dodatne helper elemente u relativnoj poziciji u odnosu na input za koji su bili vezani.

Pošto je na širim rezolucijama bilo moguće pozicionirati helper element u desnom od input elementa, trebao mi je način da kroz jednostavnu JS skriptu proveravam širinu viewport-a samog browsera i da na taj način odredim da li će biti pozicionirano desno od input polja ili ispod(na mobile uređajima…).

Ovo je skripta:

function viewportSize(side) { 
  var w = window, 
      d = document, 
      e = d.documentElement, 
      g = d.getElementsByTagName('body')[0], 
      x = w.innerWidth || e.clientWidth || g.clientWidth, 
      y = w.innerHeight|| e.clientHeight|| g.clientHeight;

    return side === 'width' ? x : y;

}

Upotreba je vrlo jednostavna:

viewportSize('height');

Read More