Category archives for "webdev"

parallax.js

Eltekintve az ivós játéktól (mondasz egy angol főnevet, ha van olyan főnév + js, iszol), egy újabb nyílt forráskódú webes technológiákkal fölépített látvány, amivel parallax effekteket készíthetünk weblapokhoz. Az öndefiníció szerint:

Simple, lightweight parallax engine that reacts to the orientation of a smart device

Érdemes megnézni a demót valami iPad-szerű táblás eszközön, beszarás!

Matthew Wagerfield és Claudio Guglieri készítették. Nem canvas rajzolgatás, hanem szépen elementeket mozgat. Előkészítése baromi egyszerű, csak létrehozunk egy scene ID-jű UL-t, benne az LI-k lesznek a sprite-ok, aztán két sorral megprallaxoljuk a scene UL-t. Githubon a forrása.

/via Nagy Balázs, Senses

Safari 6.1 prerelease

Kaptam egy formalevelet ma reggel az Apple-től, hogy letölthető a Safari 6.1 prerelease fejlesztőknek. Ez gondolom majd 10.8.5-tel érkezik mindenki számára, viszont cool, hogy feltehetem előbb is. Feltettem, “feels snappier“. Van benne néhány látványos újítás:

This pre-release version of Safari includes WebKit enhancements for better text, layout, and accessibility support. It also includes a redesigned Web Inspector with a streamlined toolbar, a new Activity Viewer, and other great tools for building and debugging your website. (…) Safari 6.1 has a new Sidebar with Shared Links, which displays links posted by people you follow on Twitter. Your Bookmarks and Reading List are also streamlined into the Sidebar for easy management and browsing. Top Sites has a new look and is even simpler to customize.

A teljes seed note itt, ebből:

Toggle pseudo-states for your elements to easily test and tweak your hover, active, and focus style rules.

Finally.

Timeline alapú animációkészítés HTML-ben

A Tumult cég szeptember 10-ig 50% árengedménnyel adja a “Hype” 2.0 változatát, amivel timeline alapú HTML5 animációkat készíthetünk. Nem canvas rajzolgatás a végeredmény, hanem mobilra optimalizált futtatható kód. Ráadásul most jelent meg az iPad companion app, amivel valós időben nézegethetjük a végeredményt a gép mellé állított deszkán. A program az 55 eurós ár helyett most €26,99.-ért vásárolható meg az App Store-ból szeptember 10-ig, de ha szeretnénk meggyőződni a tudásáról, kipróbálhatjuk a teljes értékű változatot két hétig. Mac only.

Alpha csatorna 8 bites PNG-hez

Kornel Lesiński ingyenes PNG és JPG optimalizáló szoftverét, az ImageOptim-ot már ismerhetjük régebbről. Ez a program a rádobált fájlokat optimalizálja tovább úgy, hogy kiszedi belőlük az extra metaadatokat, szín profilokat és megfelelően még át is kódolja a képeket. Érdemes kipróbálni.

Kornelnek van egy másik toolja, amivel kifejezetten PNG fájlokat tudunk még jobban optimalizálni, ez pedig az ImageAlpha. Aki webfejlesztő és exportált már PNG-ket, tudja, hogy elég nagy fájlméretet eredményez az, ha egy 24 bites nagy fotót akarunk alphával (gyk. “átlátszósággal”) exportálni. Vannak képek, amik jól viselkednek, jól tömöríthetők és viszont. Photoshopban lehet ügyeskedni, én is szeretem a 8 bitre konvertálást, viszont akkor veszítjük a 24 bites alphát és csak arra van lehetőség, hogy egyetlen színhez illesszük a képet:

Ennél a példánál én #F00 piroshoz:

Greg Roelofs és Jef Poskanzer viszont kitaláltak egy remek dolgot, ami alapján Lesiński megcsinálta az ingyenesen felhasználható libet, a pngquant-ot. Ez egy 24 bites PNG képet 8 bitessé alakít úgy, hogy megőrzi az alphát és rettenetesen szofisztikált módon válogatja a palettát hozzá. Íme a fenti kép ugyanúgy 256 színre exportálva, de valódi alpha csatornával:

A pngquant-ot bárki szabadon beépítheti a saját szoftverébe, ez került bele az ImageAlphába is. A Photoshopban előkészített valódi 24 bites képet érdemes tehát ebbe behúzni és finomhangolni az exportálást (ráadásul nem tudom, érdekel-e bárkit is, de ezek a PNG-k még IE6-on is jobban néznek ki).

De mi van a fotókkal, amikkel a JPG a király? Még egy okos ötlet, ami a PNG működését használja ki: tömörítsük át a képet olyanra, hogy a PNG algoritmus még jobban tudjon dolgozni! Ez már “lossy” eljárás lesz a javából, viszont abban az esetben, ha fájlméretet akarunk csökkenteni és nem zavar, ha a kép picit máshogy néz ki, eresszük rá a konvertert. Eredetileg Michael Vinther és William MacKay munkája alapján a példa, hogyan néznek ki ezzel az eljárással, a “Blurizerrel” megkezelt PNG-k:

Ez még csak az egyik nightlyben van benne. A fenn ismertetett dolgokról egy ennél részletesebb összefoglalót találunk erre, illetve a program forráskódját itt.

/via @ba78

Absolute centering

A poénnal kezdem én is:

Absolute Centering only requires a declared height and these styles:

.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}

Eredetileg a jsFiddle-re tolta be valaki és meglepően jól működő eljárás. A leírásból:

Absolute Centering was tested and works flawlessly in the latest versions of Chrome, Firefox, Safari, Mobile Safari, and even IE8-10.

One user reported that the content is not vertically centered in Windows Phone’s browser, but otherwise this technique works as expected.

A publikációt készítő @shshaw még egy sor más vertikálisan középre igazító technikát is ismertet a picit markup nehéz, de ultimate Table-Cell eljárással egyetemben. Jó tudni még, hogy a Flexbox egy szép napon majd megoldja ezeket a gondokat, de ma még elég vendor-prefix súlya van és IE10 alatt nem is megy.

/via @rszaloki

Responsive News

A BBC nagyon klassz kis szakmai blogja a reszponzív webfejlesztő kérdésben:

When we started the responsive refactoring of BBC News, one of the core strategies was to take performance really seriously (super serious). Because of this we decided to use a collection of micro JavaScript libraries instead of a monolithic one. But that was in 2011, and this month we made a change you may find odd.

Van itt még tőlük egy érdekes cucc, a Wraith. Két különböző böngészőből készít screenshotot és kékkel jelöli az eltéréseket.

/via @felhobacsi

PSD.rb

A LayerVaultosok csináltak egy nyílt forráskódú PSD parsert Rubyban:

PSDs are very widely used, yet Adobe has never produced an easy way for developers to work with the format. Indeed, some developers have gone mad trying to parse PSDs. We know the feeling.

For some time, we’ve been meticulously building a tool to open the Photoshop format. It’s a Ruby library for reading and writing PSDs, and it’s called PSD.rb.

/via @hipra

IE tesztelés virtualizálva: modern.IE

A Browserstack.com-on ugyan mindenféle platformokon tesztelgethetjük a website-unkat, viszont pénzbe kerül. Az, aki csak Windowson szeretné próbálgatni az épülő website-ját, általában valamilyen virtualizációs megoldás után nyúl. Ez azt is feltételezi, hogy megvásároljuk hozzá az OS licencet, ami adott esetben nem kerül kevés pénzbe (főleg, ha XP, Vista, 7 és 8 licenciákban is gondolkodunk).

Februári hír, de a Microsoft gondolt egyet, és webfejlesztők számára elkészítette szinte az összes OS-ének Guest OS image-eit, ezeket bárki ingyen letöltheti és használhatja böngészőkompatibilitási szempontokból. A szolgáltatás neve: modern.IE

Ráadásul összefogtak a Browserstack-esekkel is, aki 2014. január 10. előtt regisztrál be, az most három hónapot ingyen kap a Browserstack.com-on. (Nem próbáltam és nem derült ki számomra a weblap vizsgálgatása során az sem, hogyan lehet igénybe venni.)

Mac / Linux / Windows platformokra érhetők el az image-ek, Macre Parallels, VMware és VirtualBox image-eket tölthetünk le. A Microsoft célzottan fejlesztőknek adja ezeket, így a telepítéshez is érteni kell picit a command line-hoz, például a letöltés után nem lehet egyből beadni a VMware-be, ki kell csomagolni őket a első lépésben a chmod +x IE6.XP.For.MacVMware.sfx, második lépésben indítani a ./IE6.XP.For.MacVMware.sfx paranccsal – részletes információk itt.

Nagyon fontos: időlimitációsak az image-ek, viszont bármikor újratölthetjük őket és akkor újra működőképesek lesznek. Fontos poszt a Rey Bango (MS Tech advocate) blogról:

All of the VMs have a time limit before the images will become either limited or unusable. Here’s what they are:

IE7 – IE10: 90 days of total time from the moment you first use the VM. Basically it’s 30 days usage with two 30-day rearms.
To rearm, go into a command prompt and type in “slmgr –rearm“
IE6 on WinXP: Will expire 90 days from the time we upload it to modern.IE. There’s no rearm it but we’ll keep this refreshed when the 90 day kill date nears.
At the end of the 90 days, here’s what will happen:

IE7 – IE10: You’ll be able to use the VM for an hour before it shuts down
IE6/WinXP: You’ll be prompted for an activation key with no way to get past it

Sajnos IE6/XP alatt megjelenik az aktivációs képernyő, viszont 30 napig így is használhatjuk.

Ebből következően nem alkalmas a dolog arra, hogy Windowst használjunk otthon, hiszen mindig friss image-dzsel kell újrakezdenünk a munkát, viszont arra nagyon jó, ha szeretjük a virtualizált környezetben történő tesztelést (és például nem akarunk Browserstack előfizetők lenni). Ha nem akarunk fizetni, vagy még nincs Fusion/Parallels licencünk, akkor használhatjuk az Oracle VirtualBoxot is, aminek a központi csomagja ingyenes.

Szépen fejlődik az SVG

Tavaly ősszel még nem tudta az SVG azt, hogy egy megjelenített weblapból Macen exportált PDF-be a vektorok és ne mindenféle “homályos” PNG-k kerüljenek. Ma újra megnéztem a kérdést és lám-lám, az utolsó Chrome (27.0.1453.116), illetve a 7-es Safari már tudják. (A Chrome bárki számára most is elérhető, nem Canary kiadás, a Safari 7 pedig az ősszel megjelenő Mavericksben lesz. Win alatt is megy.)

Eredetileg a dán Jakob Truelsen wkhtmltopdf (értsd: WK HTML to PDF) nyílt forráskódú megoldása volt a válasz erre a kihívásra, bár Truelsen cucca ennél sokkal többet tud, ugyanis a teljes weblapot átfordítja szépen egy vektoros PDF-é. Az SVG ikonok maradnak szintén vektorosak is, de a layout sem módosul.

Aki ki akarná próbálni: rakjuk valamelyik mappába a wkhtmltopdf.app-ot, utána váltsunk abba a folderbe, majd írjuk be Terminálban:

./wkhtmltopdf.app/Contents/MacOS/wkhtmltopdf plastik.hu plastik.pdf

Sajnos nem aktívan fejlesztett projekt, az utolsó kiadás még tavaly volt valamikor és sokat lehetne fejleszteni rajta – már ha ez lenne a cél. A reszponzív weblapokkal és webfontokkal például nagyon rosszul bánik el, nem lehet megmondani neki, hogy mekkora képernyőn menjen neki a site-nak, így mindig telefon méretet kapunk.

update: véletlenül jöttem rá, hogy a Paparazzi képes ugyanerre és lementi ugyanígy PDF-ben a weblapot, ráadásul reszponzívban is jobb, az előbbi minta Paparazzival.

Why are software development task estimations regularly off by a factor of 2-3?

The line is about 400 miles long; we can walk 4 miles per hour for 10 hours per day, so we’ll be there in 10 days. We call our friends and book dinner for next Sunday night, when we will roll in triumphantly at 6 p.m. They can’t wait!

Michael Wolfe rettenetesen élethű posztja a szoftverfejlesztés becsléseiről egy túrázás analógiáján keresztül. Lásd még a szakirodalmat is: planning fallacy. (thx @robix!)

Megjelent az Adobe Creative Cloud

Az Adobe a mai napon elérhetővé tette az új grafikai és kreatív szoftvercsomagját, a Creative Cloudot. Ebben van egy sor új szoftver, például a Photoshop CC is, amit már hagyományos értékesítési modellben nem kaphatunk meg, kizárólag online letöltős formában – havi előfizetési díj ellenében.

A teljes csomag havi előfizetési díja bruttó €92,24.- (kb. 27500 forint), ha egy évet vásárlunk belőle, akkor €61,49.- (kb. 18500 forint). Figyelem, ezért az összegért (220 ezer forint bruttó) tehát az összes Adobe alkalmazást megkapjuk egy sor más szolgáltatással egyetemben:

Legjobban azok járnak, akiknek CS3 vagy későbbi licencük van, egy teljes csomag licencelése ebben az esetben mindösszesen €36,89.- (kb. 11 ezer forint) havonta egy éves hűség esetén. Érdemes megfontolni a Photoshop / Illustrator párost is €49,18.-ért (kb. 14700 forint).

Az Adobe CC-t ezen a címen lehet előfizetni.

Next Generation Web Layout: National Geographic Forest Giant

Hatalmas tempóval fejlődik a web. Az Adobe a National Geographic-kel közösen készített egy olyan fícsör cikket, amiben egy sor ma még csak kísérleti stádiumban levő technológiát mutat be a Chrome Canary-n keresztül. Érdemes végignézni a videót, elolvasni a blogposztot, kipróbálni a site-ot, mert ezek a dolgok rohamos tempóval jelennek majd meg a mindennapokban.

A videóban bemutatott új technológiák a layoutra és sallangokra:

1. CSS exclusions – ezzel csinálnak igazi drop cap-et, azaz a betűt körbe tudják rendesen folyatni szöveggel, illetve képekre is befolyatják rendesen a szöveget (hello DTP)

2. Balanced pullquote – JavaScript polyfill, hogy szebben törjön a pullquote (nem szavanként törik, hanem félbe)

3. CSS regions – hasábkezelés és szöveg folyatás

4. CSS filters – a bemutatott példában fekete-fehérből színesre vált a kép, de itt rengeteg lehetőség van, illetve jönnek majd a különféle, eddig csak Photoshopban látott compositing funkciók