+ 381 64 17 39 157 office@cyclopdesign.com

Kao web developeri uvek ćete nailaziti na bagove u kodovima, kao i na nove razvojne tehnike koje biste mogli da primenite na već postojećim sajtovima. Web sajtovi oslikavaju ukupno stanje digitalnog sveta i zbog toga bi trebalo da korisnicima ponude najbolje dostupne performanse. Vaš posao je da obezbedite da se to i dogodi.

Alati za web development mogu biti neverovatno spretno konstruisani. Pojavljuju se u svim formama, kao dodaci browser-ima i plagini što bi trebalo da vam omogući kreiranje najboljeg mogućeg sajta. Oni čine vaš rad produktivnijim i bržim, uz to vam pružajući uvid u najnovije tehnike. Neki browser-i imaju ugrađene web development opcije, ali još uvek je potrebno da nadgledate vaše sajtove u smislu korisničkog iskustva, da biste bili sigurni da su sve performanse na vrhunskom nivou, kao i da budete kreativni u upotrebi web-a.

Verovatno ste već koristili podršku koju pružaju veliki browser-i kao što je Google Chrome. Upoznati ste sa glavoboljom koju vam može stvoriti HTML5 kao i sa važnošću responsive sajtova. Ali šta se zbiva sa alatima koje verovatno do sada niste upotrebljavali?

Ukoliko znate kakve su im odlike lakše ćete proceniti da li vam mogu biti od pomoći, stoga evo pregleda nekih od najboljih dostupnih web development alata.

 

CSS Guidelines

CSS-Guidelines

Počinjemo sa nečim zaista veoma korisnim. CSS Guidelines su kreirani od strane nezavisnih Consultant Front-end Architect iz Ujedinjenog kraljevstva, i nisu namenjeni početnicima. Ovo su high-level saveti čija upotreba za rezultat ima bolji CSS. Čak i najbolji među web developerima bi morali povremeno da izglancaju svoje veštine.

Uputstva idu od sintakse preko formatiranja, komentara, imenovanja konvencija, CSS selector-a do delova pod nazivom Specificity i Architectural. Autori neprestano dodaju nove informacije tako da ste uvek u toku sa najnovijim zbivanjima na ovom polju.

 

Play Framework

Play-Framework1

Play Framework je vrhunski alat za izradu web aplikacija sa Java i Scala tehnikama. Ekstremno je developer-friendly budući da su browser i text editor sve što vam je potrebno. Ovaj alat koristi stateless web tier i potpuno asinhroni model baziran na Akka.

A sada muzika za naše uši: pravljen je sa mobile responsivnošću na umu i može da pravi aplikacije. Možete se pouzdati u njega, većina Java libraries može biti upotrebljena, a complier i runtime su na JVM što znači da vaše aplikacije neće imati problem sa brzinom.

 

Dimensions

Dimensions1

Ovo je open source Chrome Browser ekstenzija. Dozvoljava vam da izmerite sve što vidite u pretraživaču, kao što su slike, input polja, buttons, videos, gifs, tekstovi i ikonice. Posebno je korisna kada napravite mock-up sajta u PDF formatu, jednostavno je ubacite u browser i izmerite elemente. Možete da nasetujete shortcut sa tastature u Chrome setting-u na kraju liste ekstenzija tako da brzo možete da uključite ili isključite alat.

 

Apache Couch DB

Apache-Couch-DB1

Oni sebe opisuju kao „data bazu za web“. U pitanju je open source proizvod koji vam omogućava da skladištite dokumente i podatke na klaudu sa JSON dokumentima, zatim upotrebite Index opciju, kombinujete i transformišete svoj dokument koristeći Java Script.

Možete pretraživati svoje indekse preko vašeg pretraživača, via HTTP, a uz to imate notifikaciju izmena u realnom vremenu tako da možete da pratite vaš web development. Sve ovo dolazi u paketu sa interfejsom lakim za upotrebu, gledano sa administratorske pozicije.

 

Flynn

Flynn1

Flynn koristi integraciju različitih komponenti za kreiranje sistema. Komponente međusobno „razgovaraju“ i adaptiraju se, što znači da razvoj vaše aplikacije kao i vaše baze podataka mogu da budu lako upravljive. Alat automatski pokreće i radi scaling aplikacije, što biste inače morali da obavljate ručno stavku po stavku. Izgrađen je na setu sržnih API. Tako možete da proširite ili kastomizujete svoj proizvod u bilo kom okruženju.

 

Bug Muncher

Bug-Muncher1

Web developeri stalno slušaju žalbe korisnika od momenta kada sajt bude napravljen, bez obzira na količinu sprovedenog testiranja. Uvek će biti bagova i ličnih preferenci. Bug Muncher obezbeđuje uvid u ovu vrstu feedback-a na jednostavan i lak način.

Klijenti jednostavno samo treba da hajlajtuju problem na vašem sajtu, a alat pravi screenshot od toga. Ovo otklanja potrebu za razmenom mejlova i telefonskih razgovora u kojima neko pokušava da objasni tehničku prirodu problema. Vitalni podaci, kao što su ime i verzija pretraživača i operativnog sistema, vam dolaze u izveštaju tako da na jednom mestu imate sve što vam je potrebno kada pristupite rešavanju problema.

 

Uptime Robot

Uptime-Robot1

Još jedna oblast web razvoja koja bi trebalo da se konstantno odvija u pozadini je monitoring performansi web sajta. Uptime Robot za vas radi baš to. Proverava 50 od vaših monitora na svakih 5 minuta, uključujući HTTP, Ping, Port kao i keywords. Možete da izaberete način na koji će vam stanje biti javljeno – mejlom, SMS-om ili čak putem Twitter-a. U mogućnosti ste da vidite uptime, downtime kao i response time.

 

Uilang

Unilang

Uilang je minimalistički i ui fokusiran programski jezik za web dizajnere. Dozvoljava vam da kreirate aspekte vašeg sajta, poput popover-a, tabova, galerija i overlay-a. Dizajniran je na način koji olakšava upotrebu onima koji nemaju mnogo prethodnog progamerskog iskustva. Jednom kada je kod ubačen korisnici mogu jednostavnim klikom na relevantno dugme da sakriju notifikacije, upotrebe toggle switch i vide drop-down accordions. Ovo dodaje interaktivnost sajtu.

 

Scala

Scala1

Još jedan programski jezik, Scala, dozvoljava vam da konstruišete elgantne hijerarhije za maksimalnu reupotrebu kodova i ekstenzibilnost, kao i za implementaciju njihovog ponašanja upotrebom funkcija višeg reda. Imate mogućnost integracije sa Javom dok Scala radi na JVM. Dodatno, fleksibilnost Jave se ogleda na Scali pomešana sa moćnim klasama za višestruko nasleđe. Odatle možete da odete u upoređivanje obrazaca i da kreirate funkcije višeg reda.

Postoji zajednica Scala korisnika, tako da nećete biti sami dok isprobavate njene mogućnosti.

 

Haml

Haml1

Kao prvo Haml je akronim za HTML abstraction markup language. Kao drugo njegov osnovni primcip sastoji se u tome da markup operaciju učini prelepom. Markup ne bi trebalo da bude samo teranje browser-a da renderuje željenu stranicu. On bi trebalo da bude user-friendly kao i renderovani rezultati poređani na korisniku lako razumljiv način.

Haml kreira čist kod budući da izbegava ponavljanje teksta kada je svaki elemenat imenovan dva puta; umesto toga on se uzda u indentaciju. Jasno i jednostavno on opisuje HTML bilo kog web dokumenta bez upotrebe inline koda. Inline page templating sistemi poput PHP, ASP i ERB su zamenjeni upotrebom Haml-a. Nema potrebe za eksplicitnim kodiranjem HTML u templejtu.

 

Converse

Converse1

Ovaj alat vam omogućava da opciju četovanja na vašem sajtu nasetujete kao single-user chat ili multi-user chat rooms. Korisnici mogu da pošalju zahtev za čet, da ga prihvate ili odbiju, a mogu i da dodaju statuse kao što  su „zauzet“ ili „dostupan“, kao i da prikažu trenutni status kucanja.

Ima mogućnost prevođenja na 15 različitih jezika i može da bude screencast-ovan za četovanje sa prijateljima na Gmail-u ili na jabber.org. Converse može da bude integrisan sa mnogim web platformama, kao što su WordPress ili Roundcube, a budući da je napisan u Javascriptu kreće se direktno kroz vaš pretraživač.

 

HumHub

HumHub1

Još jedan alat koji korisnicima vašeg sajta omogućava međusobno četovanje. Ipak HumHub ovo radi na daleko višem nivou budući da pomoću njega možete da kreirate sopstvenu društvenu mrežu. Ima user-friendly interfejs i čini da biznis, školski, project-group ili sajtovi prijateljskih grupa komuniciraju i sarađuju na jednostavan način.

Svaki korisnik sajta ima sopstvenu „V card“, koja pruža pregled njihovog profila, uz to je moguće i pravljenje grupa. Korisnici mogu da postuju, slede, komentarišu i lajkuju sadržaje drugih ljudi, ili da jednostavno šeruju fajlove i pričaju o njima. Potpuno je bezbedan i predstavlja self-hosted rešenje, takođe je i prilagodljiv u smislu dodavanja aplikacija. Kao i svaka dobra društvena mreža i HumHub je mobile-friendly.

 

Impulse

Impulse1

Zasnovan na specifičnim interakcijama dinamičke fizike ovaj alat vašem sajtu dodaje interaktivnost. Na primer možete da kreirate Chat Heads poput onih Facebook-ovih, pull-down meni, inertia scroll-ovanje, Oridomi Cover i Bouncy Scroll. Sve opcije su dizajnirane tako da rade na mobilnim uređajima bez problema.

Kreiranje dinamičnog sadržaja pomoću Impulse-a radi bolje nego recimo CSS, a smanjeno je i kašnjenje između trenutka kada je animacija generisana i onog momenta kada počinje da se pomera. CSS se pokazao bolji za statične animacije. Impulse je kreirao mnoštvo animacija i uvek radi na novim i novim.

 

Duo

Duo1

Njihova filozofija sastoji se u kreiranju brzih proof-ova konepta, pisanju modularnih komponenti i izgradnji velikih web aplikacija. Duo to radi neverovatno jednostavno kroz jedan package manager, dozvoljavajući vam da napišete front-end kod brzo i bezbolno. Ima prvoklasnu podršku za Javascript, HTML i CSS a podržava i Coffescript i Sass.

Uz command line interfejs u unix maniru, Duo vuče izvore direktno sa GitHub-a sa semantičkim verzioningom. Takođe na zahteva manifest. Duo otklanja boilerplates, koje mnogi package manager-i imaju i zahtevaju da ih koristite tokom testiranja ideje ili izolacije bagova. Ima snažan ekosistem komponenti a scaling je prilagođen pravljenju celokupnih web aplikacija bez teškoća.

 

Monit

Monit1

Monit je fantastičan za nadgledanje vašeg servera i upotrebljava se za error recovery – ovoj jedna od onih aplikacija koje morate da imate da biste skinuli deo tereta sa pleća. Provodi automatsko održavanje i opravljanje i može da izvede smislene posledične akcije u error situacijama. Na primer ako sandmail prestane sa radom Monit će ga pokrenuti i obavestiti vas upozorenjem da biste mogli da brzo preduzmete odgovarajuće korake.

Možete ga koristiti za nadgledanje daemon procesa, kao i sličnih programa na localhost-u, čekiranju promena kao što su timestamp, checksum i size changes. Nadgleda network konekcije sa serverom, što je korisno ako radite na cloud-u. Takođe vam omogućava da testirate programe ili script-e. Obe free i open verzije BSD, mnoge Linux distribucije od .deb do .rpm packages-a, OS X i Solaris .pkg sadrže Monit.

 

Onsen UI

Onsen-UI

Alat namenjen aplikacijama, Onsen UI ima veliku selekciju web baziranih UI komponenti i Java i CSS frejmvorka za pravljenje HTML5, PhoneGap i Cordova aplikacija. Radi sa jQuery i AngularJS a kastomibilan je, na primer, upotrebom Font Awesome.

Naravno ima responsive layout za sve vrste uređaja, menjajući veličinu kolumni za mobilne i tablete. Korisničko iskustvo za browsing aplikacije čini superiornim i brzim, uz to je neverovatno jednostavan za upotrebu.

 

Cinematico

Cinematico1

Cinematico će kreirati responsivni web sajt za vas koji će, osim što je već elegantan i sofisticiran, biti i prilagodljiv vašim potrebama. Možete dodati svoj logotip i background image na primer, ili čak i potrošiti malo novca na tematsku razradu.

Ipak glavna namena ovog alata je apdejtovanje vašeg sajta kad god objavite novi You Tube ili Vimeo video. Linkuje vas sa vašim You Tube i Vimeo playlist-ama, kanalima i account-ima i automatski ih sinhronizuje. Sve ovo je uz to i besplatno, jer u pitanju je open source.

 

Pictura

Pictura1

Traženje slika za web sajt često može biti radno zahtevan zadatak. Iako izgleda da je u pitanju lak posao najčešće to ne bude baš toliko jednostavno.

Pictura vam može biti od pomoći za pretragu Flickr-a bez napuštanja vašeg dizajnerskog okruženja. Nećete biti ometani drugim slikama niti ćete morati da ih downloadujete pa da ih onda ubacujete u svoj posao. Alat direktno pretvara vašu izabranu fotografiju u layer i smešta je na vaše platno. Radi sa filterima tako da možete da izaberete royalty-fre slike bez copyright restrikcija lako i jednostavno.

 

Rollerblade

Rollerblade1

Za slike koje se razlikuju ovo je savršena aplikacija. Dozvoljava korisnicima na smartphone-ima, tabletima i desktopovima da slajduju sliku s leva na desno, a ovo će pokazati pogled iz svih uglova. Radi za prikazivanje zgrada ili lokacija, ili jednostavno za prikaz proizvoda. U situaciji kada je online shopping sve veći biznis ova aplikacija pruža potrošačima maksimalno realno iskustvo.

Sve što web developeri treba da urade je ubacivanje koda na vrhu strane sa vašim CSS, nakon čega sledi nekoliko zahvata na podešavanju rotatora da bi radio ono što želite. Možete imati koliko god želite image rotatora, kao i promenu osetljivosti i izbor da li će se rotacija obavljati automatski ili će biti izvedena korisnikovim vučenjem.

 

Icon Maker

Icon-Maker1

Ikonice i emotikoni su danas svuda prisutni, a lako je shvatiti zašto je tako: jednostavan osmeh može da doda toplinu svakoj komunikaciji, čak iako je u pitanju malo žuto lice. Sa Icon Maker-om možete da kreirate sopstvene ikonice i da ih dodate svom sajtu.

Dovoljno je jednostavan da bi svako mogao da ga koristi, a možda je samo dodatni zabavni element za iskusne web developere u potrazi za sopstvenim personalizovanim ikonicama. Za svega nekoliko minuta možete da kreirate flat ili 3D ikonice sa dropshadow-ima i ostalim efektima.

 

Delorean

Delorean1

Ukoliko želite da primenite Flux koncepte na vaš interfejs, Delorean će vam taj posao veoma olakšati. U pitanju je potpuno agnostički Javascript frejmvork, tako da nećete morati da zavisite od bilo kog frejmvorka. Vaša app-logika će postati jednostavnija od MVC zbog unidirectional data flow-a, uz to će podaci postati konzistentniji kroz celu aplikaciju. Održavajte podatke apdejtovanim bez potrebe za ručnom proverom i data changes izlistavanjem.

Veoma je jednostavan za instalaciju uz upotrebu nekoliko različitih opcija.

 

Cyclon JS

Cylon-JS

Na kraju liste susrećemo se sa budućim svetom robota. Premda je internet prisutan već neko vreme on još uvek nije u potpunosti integrisan u svaki dom. Ovaj alat omogućava developerima da kreiraju mrežu između 35 podržanih platformi. Ovo uključuje Nest i Pebble, plus vaše osnovne postavke kao što je tastatura ili za marketinške svrhe upotrbu Salesforce-a.

Poseduje NPM module tako da može biti direktno aktivan u vašem browser-u, ili ga možete aktivirati u mobilnom preko Chrome konektovane aplikacije ili preko Phonegap mobile app. Podržava HTTP i Socket.io APIs, dozvoljavajući vam da šaljete komande, real-time podatke i da nadgledate vaše robote.

 

Zaključak

Dakle ovo su najbolji alati za web developing na koje možda još uvek niste naišli. Upamtite da uvek postoje alati koje neko razvija da bi vam pomogao u svakodnevnom životu web developera. Savki web developer nailazi na probleme i želi da razvije način za njihovo efikasno rešavanje.

Primetićete i da su svi navedeni alati besplatni, izuzev nekih dodataka koje možete da kupite kada poželite da apgrejdujete alat. Ovo je stoga što oni koji su ih razvijali žele da pomognu drugim ljudima u situaciji kada se nađu pred istim problemom. Takođe, zajednica na webu voli da se međusobno pomaže.

Pregledajte ovu listu alata i vidite da li može da unapredi vaše iskustvo u web developingu. Možda ćete se zapitati kako ste se uopšte snalazili bez nekog od njih.

Share this:

Pin It on Pinterest

Share This