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