Koje sve alate koristiti za izradu odličnih web aplikacija?

Infobip ❤️ Netokracijašto akvizicija znači za vas - i nas?

Primjer ‘meme’ generatora: Koje sve alate koristiti za izradu odličnih web aplikacija?

Na ovogodišnjoj konferenciji WebCamp, Infinumov voditelj JavaScript tima, Krešimir Antolić, svojim je zabavnim i bogatim predavanjem dopustio posjetiteljima WebCampa zaviriti u zbirku alata koje svakodnevno koristi, kao i u one koje tek planira implementirati u budućim projektima.

Nerijetko se događa da se čvrsto držimo za nešto što smo dobro upoznali i svladali te nam je teško izaći iz zone komfora te upoznati novije i naprednije alate i tehnologije. Ako se pak odlučimo za promjenu i uvođenje noviteta, teško je uvijek izdvojiti i prepoznati ono što je najbolje. Na ovogodišnjoj konferenciji WebCamp Zagreb 2016, Infinumov voditelj JavaScript tima, Krešimir Antolić svojim je zabavnim i bogatim predavanjem dopustio slušateljima i gledateljima zaviriti u zbirku alata koje svakodnevno koristi, kao i u one koje tek planira implementirati u budućim projektima.

Predstavio je proces izrade projekta Meme Generator, čija je funkcija na sliku dodati tekst koji korisnik sam upisuje.

meme
Meme Generator na djelu 😉

Aplikaciju je namjerno prekomjerno ‘inženjerirao’ kako bi iskoristio i predstavio što više alata kojima se svakodnevno služi. Uz WebPack module bundler, ES2016 te SCSS, prezentirao je tehnologije koje su njegov kolosalni projekt učinile mogućim.

Pogreške se događaju i najboljima

Ljudski je griješiti, a Krešimir je svjestan da su i najbolji web developeri na kraju dana ipak samo – ljudi. Za provjeru svog napisanog koda preporučuje ESLint za JavaScript, koji ne samo da prepoznaje greške u sintaksi, već i provjerava ispravnost stila pisanja, koji svatko može definirati prema osobnim preferencijama.

Za provjeru SCSS koda služi se Stylelintom, alatom koji provjerava napisani CSS kod, također, ne samo u sintaksi nego i provjerava dogovorena pravila kodiranja (eng. Coding Conventions).

Što sve može moderan preglednik

Nije li vam se barem jednom dogodilo da ste se osramotili svojim nepoznavanjem pravopisa šaljući poruke internetskim putevima svojoj ljubavnici/ljubavniku ili novoj simpatiji? U današnje vrijeme krivnju možete prebaciti na developera koji je kreirao polje u kojem pišete svoje poruke – jednostavnim dodavanjem atributa spellcheck u HTML elementu za unos teksta, riječi koje su pogrešno napisane bi se podcrtale te je nesretni developer iz priče tako mogao spriječiti vaše sramoćenje.

Vjerovali ili ne – i danas postoje developeri koji nisu čuli da se internetom može surfati s drugih uređaja, osim stolnog računala. Nadajmo se da su prisustvovali predavanju Krešimira Antolića koji je objasnio i pokazao kako srcset atributom prikazujemo slike u različitim rezolucijama. Prikazivanje slika uvjetovano je veličinom i formatom ekrana putem kojeg korisnik koristi aplikaciju te smo aplikaciju tako učinili responzivnom.

Krešimir
Krešimir zna da osobu tešku osamdesetak kilograma sat tipkanja može “koštati” 61 kaloriju. Zašto ih ne biste uštedjeli alatima za prepoznavanje govora? 🙂 (Slika: WebCamp Zagreb)

Jedna od vrlina svakog dobrog developera je i – lijenost, koja je doprinijela krivulji napretka čovječanstva. Postoje ljudi kojima nije uvijek do tipkanja, a treba uzeti u obzir I da osobu od 80-ak kilograma polusatno tipkanje po računalnoj tipkovnici može koštati i čak 61 izgubljenu kaloriju. Kako bi se poštedjeli spomenutog napora, tu je Web Speech API i njegov SpeechRecognition, koji glasovni unos pretvara u tekst. Isti taj tekst vaš web preglednik može i pročitati za vas, uz pomoć SpeechSynthesisa.

Pristup web aplikacijama – i bez interneta

Natjerajte svoju aplikaciju da koristi sva računalna osjetila, skinite prašinu sa svoje web kamere jer njome odsada možete preko preglednika uslikati svoje novonaučene grimase. Media Capture API pruža mogućnost slikanja, snimanja, a čak i prenošenje uživo digitalnog zapisa, uhvaćenog vašom kamerom.

Ponekad nas avanturistički život odvede u mračne kuteve svijeta, gdje nam internetska veza i njezine usluge nisu nadohvat ruke. Web aplikacije nisu više funkcionalne samo i isključivo uz pristup internetu, svoje slike i podatke možemo spremiti lokalno uz pomoć INDEXDB – koji omogućuje spremanje velikog broja podataka koje aplikacija može sinkronizirati Service Worker API-jem nakon spajanja na mrežu. Isto tako, Service Workerom možemo definirati ‘ponašanje’ aplikacije, ovisno o tome ima li ili nema pristup internetu.

Za otvaranje aplikacije, bilo offline ili online, svaki developer koji imalo ‘drži do sebe’ trebao bi korisniku pružiti mogućnost otvaranja aplikacije klikom na lijepu ikonu na zaslonu i primanje notifikacija. Web App Manifest je web tehnologija koja omogućuje upravo to – držite do sebe ;).

Nove mogućnosti web aplikacija su ogromne

Tek smo ‘zagrebali površinu’ novih mogućnosti web aplikacija, a napredak je velik. Osim spomenutih tehnologija, Krešimir je sastavio dodatni popis onih koje nije uspio integrirati u svoju aplikaciju ili onih koje planira tek isprobati u skorije vrijeme:

  • Pointer Events – ovisno o tome koristi li korisnik miš, olovku ili dodir prsta moguće je definirati ‘ponašanje’ aplikacije.
  • Web Audio API – pruža mogućnost manipulacije zvuka i mogućnosti su mnogobrojne npr. Violent Theremin.
  • Ambient Light Events – daje aplikaciji mogućnost detektirati promjenu intenziteta svjetla u korisnikovom okruženju.
  • Online And Offline Events – provjerava ima li pristupa internetu
  • Page Visibility API – sada znamo kada su korisnikove oči na našoj aplikaciji, a kada je preglednik van fokusa tj. u pozadini ili minimiziran.

Kako se mnoge funkcionalnosti web aplikacija sele na klijentsku stranu, frontend zahtijeva sve više inženjeringa od strane developera, a jedan od razloga su nativne aplikacije. Veći su nedostatak web aplikacija performanse ili brzina odziva, u kojoj nativne još uvijek prednjače, dok su druge razlike sve manje.

Budućnost web aplikacija dolazi i izgleda dobro, bitno je držati korak i ostati konkurentan. Ponekad nije lako zakoračiti u nepoznato i susresti se s novim izazovima, ali treba imati na umu da svakim novim učenjem, osim vještina, učimo i – učiti.

Sukladno članku 94. Zakona o elektroničkim medijima, komentiranje članaka na Netokraciji dopušteno je samo korisnicima koji ostave svoje ime i prezime te mail adresu i prihvate pravila ponašanja.

Pravila ponašanja

Na Netokraciji za vas stvaramo kvalitetan, autorski potpisan sadržaj i zaista se veselimo vašim kvalitetnim, kontruktivnim komentarima. Poštujmo stoga jedni druge prilikom komentiranja, kao i Zakon, držeći se sljedećih pravila ponašanja:

  • Ne budite 💩: Nema vrijeđanja, diskriminiranja, ni psovanja (osim ako nije osobni izričaj, ali onda neka psovka bude općenita, a ne usmjerena prema nekome). Također, upoznajte se sa stavkom 2. članka 94. Zakona o elektroničkim medijima prije no što ostavite komentar.
  • Samo kvalitetna rasprava, manje trolanja: Ne morate se ni sa kim slagati, ali budite konstruktivni i doprinesite raspravi! Svako trolanje, flameanje, koliko god "plesalo" na granici, leti van.
  • Imenom i prezimenom, nismo Anonymous 👤: Autor sadržaja stoji iza svog sadržaja, stoga stojite i vi iza svog komentara. Koristimo ime i prezime te pravu email adresu.

Kako koristimo podatke koje ostavljate? Bacite oko na našu izjavu o privatnosti.

Sve ostale komentare ćemo s guštom spaliti, jer ne zaslužuju svoje mjesto na internetu.

Odgovori

Tvoja e-mail adresa neće biti objavljena.

Popularno

Karijere

Gdje je mobile development danas? “Skoro sve se promijenilo…”

Da je itekako moguće profesionalno rasti radeći samo u jednoj tvrtki, ako imaš dobre uvjete, pokazuje karijera Dine Sulića, koji je prije 9 godina kao student došao u Endavu (nekadašnji Five). S Dinom smo popričali o njegovu profesionalnom putu, dinamičnom svijetu mobile developmenta te kako kroz NowInMobile meetupe planiraju dijeliti znanje u široj mobile zajednici.

Startupi

Sportening je imao skoro milijun korisnika. Unatoč tomu, nisam prikupio investiciju i morali smo pivotirati

Znanje i iskustvo koje je Ivan Klarić stekao građenjem Score Alarma (koji je akvizicijom postao Superology i dio Superbet grupe), a posebno njegovih društvenih funkcionalnosti, planirao je iskoristiti da stvori globalnu društvenu mrežu koja okuplja obožavatelje sporta. Za Netokraciju je ekskluzivno i iskreno opisao što je na tom putu napravio dobro, u čemu misli da je pogriješio, što je naučio u godinu dana koliko je živio u San Francisku gdje je razgovarao s više od 200 investitora te što slijedi za Sportening kao tvrtku i tim.

Programiranje

Kupujmo hrvatsko: Domaći developerski alati

Zašto domaći osnivači razvijaju sve više proizvoda iz niše developerskih alata - toliko da se predviđa da bi jedan od njih mogao biti sljedeći hrvatski jednorog, i kakve veze s tim imaju - lopate?

Što ste propustili

Izvještaj

Što se “džemalo” na Game Jamovima u Hrvatskoj?

Global Game Jam (GGJ) u Hrvatskoj poprimio je veće razmjere nego ikad dosad, na tri lokacije okupilo se više od 200 natjecatelja, a pobjedničke videoigre iako su imale zajedničku temu na različite su je načine interpretirale.

Društvene mreže

Gotov recept za dobar TikTok ne postoji, ali slovenski Dunking Devils Studio ima par savjeta

San svakog marketingaša je ostvariti milijunske preglede na TikToku i to organski, ali možemo li uopće utjecati na popularnost TikTokova koje objavljujemo? Slovenski Dunking Devils Studio podijelio je par dobrih taktika.

Zabava i zanimljivosti

Kako Domagoj Pavlešić zarađuje na besplatnoj aplikaciji za ugašenu platformu?

Vrlo je ugodno iznenađenje kada ti sjednu prihodi od aplikacije koju si napravio prije 8 godina, ali kako je to moguće kada platforma za koju je aplikacija napravljena ne postoji već 3 godine?

Intervju

Dan sigurnijeg interneta uz hrvatski CERT: AI čini napade sofisticiranijima, ali će i pomagati u obrani

Obilježavamo Dan sigurnijeg interneta, no sudeći prema podacima hrvatskog CERT-a, Internet je sve osim siguran. U razgovoru s glavnim nacionalnim tijelom za prevenciju i zaštitu od računalnih ugroza otkrili smo kako širenje uporabe AI modela utječe na sigurnost, koje vrste prevara su se povećale za 600% prošle godine te kako dijeljenjem podataka pomažemo napadačima.

Tvrtke i poslovanje

Proglašeni su pobjednici LAQOthona – natjecanja posvećenom održivom razvoju

Nakon više od 250 pristiglih prijava na nagradni natječaj idejnih tech rješenja na temu održivosti, u sklopu Bug Future Showa proglašeni su pobjednički projekti.

Startupi

Sportening je imao skoro milijun korisnika. Unatoč tomu, nisam prikupio investiciju i morali smo pivotirati

Znanje i iskustvo koje je Ivan Klarić stekao građenjem Score Alarma (koji je akvizicijom postao Superology i dio Superbet grupe), a posebno njegovih društvenih funkcionalnosti, planirao je iskoristiti da stvori globalnu društvenu mrežu koja okuplja obožavatelje sporta. Za Netokraciju je ekskluzivno i iskreno opisao što je na tom putu napravio dobro, u čemu misli da je pogriješio, što je naučio u godinu dana koliko je živio u San Francisku gdje je razgovarao s više od 200 investitora te što slijedi za Sportening kao tvrtku i tim.