Category archives for "webdev"

Safari 9.1 goodies

Apple yesterday announced the feature set from the upcoming update coming to iOS and OS X. They will also ship Safari 9.1 with dozens of new features – here is the changelog. It will support CSS variables (no need to preprocess those), drops prefix from CSS filters, the usual improvements to the Inspector and so on, but here is something I like, the landing of the picture element:

I remembered that I’d blogged about this three years back to the day in 2013. The picture element is nice, the browser will decide what size of asset it has to download for the device. For older browsers that don’t support the element, well, they’ll fall back to IMG SRC.

Twitter “fav” animation

A cssanimation összerakta (via @TheHedgehog) HTML/CSS-ben is a Twitteren nemrég bevezetett látványos csillag animációt. Ez nem a Twitter implementációja, viszont egy remek trükk, hogyan tudunk egy, a frame-eket horizontálisan egymás mellé rakott képet visszajátszani animgif-szerűen.

Hogy miért? Mert például így lehet 24 bites alpha channeles képeket is csinálni, illetve lehet még akár vezérelni is. A dologban a megoldás az, hogy egy element backgroundját lehet animálni lépésekkel, így mondjuk egy hover állapot így írható le:

.fave:hover {
background-position: -3519px 0;
transition: background 1s steps(55);
}

Jópofa. (Mondjuk én a Twitter animációt már picit soknak érzem, de ez legyen az én bajom.) Arról sajnos nincs információ, hogy egy animációt, vagy képek sorozatát hogyan tudunk lapra helyezni, ha valakinek van erre vonatkozóan információja, igazán megoszthatná.

Maszkolt JPG képek SVG-vel

Átlátszó képeket eddig PNG-vel kellett feldolgozni, ami fotók esetén bizony indokolatlanná tette a használatukat. Ha nagyon kellett nekem valami alfás kép, akkor Image Alphát használtam, erről kb. egy éve már írtam. Viszont itt van egy tök jó ötlet: mentsük ki JPG-vel a képünket, szépen kompakt formában, az alpha channelt viszont SVG-vel kombináljuk rá!

Nagyon jól működik, de van néhány apróság: inline SVG kell hozzá (amit túl lehet élni, minta), IE8 és alatta nem megy, régi Androidokon sem megy, ráadásul picit körülményes a feldolgozás. Ettől függetlenül statikus sitebuildeknél még jó hasznát vehetjük.

HTML email coding / Responsive Email Patterns

Igaz, hogy egy HTML email ugyanúgy viselkedik, mint egy sima weblap, viszont ha azt is szeretnénk, hogy megjelenjen a lehető legtöbb email kliensben (ideértve a Gmailt is, amit mindenki adottságnak tekint, pedig egyáltalán nem az ebben a tekintetben), akkor bizony alaposan fel kell kötnünk a gatyánkat. A MailChimp blogról:

TABLES and SHIM.GIFs are your friend. Keep it simple, because email programs use different HTML rendering engines.

(…)

And we’re not talking about IE, Firefox, and Safari. We’re talking about Outlook, Outlook 2007, Outlook 2003, Outlook Express, Thunderbird, Apple Mail, Eudora, Lotus, Gmail, Yahoo!Mail, AOL, AOL Web, Hotmail, MSN, Comcast, Earthlink, and on and on and on. How to cope? Keep it simple. TABLES. 600 pixels wide max.

(…)

Gmail, Yahoo!Mail, Hotmail, etc., will strip out your DOCTYPE, BODY, and HEAD tags. Makes sense—they don’t want your code to potentially override theirs. Anything you’d normally code inside those tags (bgcolors, embedded CSS, JavaScript, background music files, etc) will also get stripped.

(…)

99% of your CSS won’t work (especially not in the browser-based email services like Gmail, Yahoo!Mail, etc.). That means no CSS-positioning, DIVs, etc. (…) Inline CSS is safer, and plain-old FONT tags are safest (code like it’s 1996, remember?).

Ennyi bevezető után jöhet az érdemi rész, ilyen keretek között reszponzív layoutok készítéséhez remek könyvtár a “Responsive Email Patterns” weblap, ahol mindenféle remekül méretező tábla alapú HTML és CSS kódot találunk. Ezek elvileg tesztelve vannak ilyen szempontból.

Jótét lelkek.

Heti Meteor logó

Aki azt gondolná, hogy nem lehet három posztra elnyújtani a Heti Meteor logó tervezését, bizony téved!

Először is Gazvezir írt nekem, hogy az Illustrator sajnos az SVG megnyitásakor figyelmen kívül hagyja az abban definiált artboardot, ezért csak akkor lesz pixel griden az oda betöltött SVG, ha előzetesen létrehozunk egy akkora artboardot, mint az SVG, majd bezárjuk, utána nyitjuk meg az SVG-t. A Sketch-nek szerencsére nincsenek ilyen gyermekbetegségei.

Másodszor Kiricsi Zoltán kiszúrta, hogy a “HETI” logóban az “E”, “T” és “I” betűk nem #000 feketék, hanem az Illustratorból átjött a sötétszürke fekete #231f20, ezt tehát javítottam.

Végül Sárai Ferenc (Sandokan) írta, hogy a három csillagból egyet lehet definiálni szimbólumként, utána pedig megrajzolni őket ahhoz képest. Hasonlóan meg lehet csinálni a “METEOR” logóban levő kettő “E” betűt is. A dologban a poén még az, hogy nem kell a koordinátarendszerben 0,0-ra rendezni a pontokat, például elég egyszerűen megfogni az első csillagot, aztán a többi pozícióját ehhez képest állítani. Először definiáljuk a csillagot:

<defs>
 <symbol id="CSILLAG">
  <polygon fill="#BD4A3E" points="318,171 326,144 305,129 331,127 341,103 351,127 377,129 354,144 364,171 341,156"/>
 </symbol>
</defs>

Ezt pedig a következő módon építjük be:

<g id="CSILLAGOK">
 <use x="0" y="0" xlink:href="#CSILLAG" />
 <use x="252" y="0" xlink:href="#CSILLAG" />
 <use x="506" y="0" xlink:href="#CSILLAG" />
</g>

A végeredmény nálam még 1 kb javulást is eredményezett. 🙂

SVG logórajzolás

Nem mondom, remek szombati foglalatosság volt Chek eredeti logója alapján elkészíteni a Heti Meteor új website logóját SVG-ben. Én is most már abba a csoportba tartozom, akik, ha tehetik, SVG-ből építik a logókat, ikonográfiát és bizony CSS-ból színeznek, baromi klassz és szemantikus is az egész. A PNG-s élet már a múlté! Retinában 2x-et exportálni? Ikonfontok? MUHAHA!

A HM logófabrikálást leginkább XP gyűjtésnek fogtam fel, de az biztos, hogy rengeteget tanultam közben. Eleve két hete még fogalmam sem volt arról, hogy mi az az “Artboard”, meg arról sem, hogy azon belül hogyan van a koordinátarendszer és hogyan kell optikai pixelekre igazítani a dolgokat. Mindez már a múlté, kikóseroltam magamnak azt a workflow-t és tudást, amivel már neki tudok lendülni akár valamilyen éles projektnek is.

A legnagyobb szopás az volt, hogy egy névjegykártya (!) PDF-ből elkészítsem a pixel gridre igazított logót. Ez annyira apró és pepecs munka, hogy tényleg csak azért csináltam végig, mert ebből website-ot akarok kiélesíteni egy meg nem nevezett időpontban. Az összes rohadt anchor pontot kézzel igazítottam a gridre, vagy rajzoltam be (gyorsabb), de hazudnék, ha azt állítanám, hogy gyorsan ment, mert kb. háromszor kezdtem újra az egészet, mire kitaláltam, hogy kell hozzányúlni az anyaghoz.

A pixel gridre igazításnak más előnyei is vannak: mivel a koordinátáknak nincs tört részük, sokkal kompaktabb lesz az SVG állomány is végül. Arról nem is beszélve, hogy a teljeset újraépítve az ember sok felesleges dolgot tud összekombinálni, illetve kivágni, a layer csoportokat elnevezve pedig tényleg egy szemantikus objektum lesz a vége.

A végeredmény rétegei nálam így néztek ki:

A következő ábrán látszik, hogy miket csináltam. Felül az eredeti, alul az újrarajzolt árnyék:

Az “O” betű szélein az árnyékot, az “R” jobb alsó szárán az árnyékot és ugyanitt a hasán levő görbéket javítottam, illetve a betűben levő csíkot is kikövérítettem picit – no, nem nagyon, 6 optikai pixel egységesen. A felső ábrán látszik, hogy az “O” betű közepét nem négy anchorból rakja össze, hanem össze-vissza, mindenféle vegyes felvágottból keletkezik valami, ami nagyjából hasonlít az eredetire. Az alsó részen a tisztázott változat – minimális, pixel gridre igazított pontokból kirakva. A pixel gridből egy részlet:

A végeredmény logó mindösszesen egy 6 kilobyte-os szövegfájl az eredeti 20 kb-ossal szemben. A csillagok például ennyiből definiálhatók:

<g id="CSILLAGOK">
<polygon fill="#BD4A3E" points="824,171 832,144 811,129 837,127 847,103 857,127 883,129 860,144 870,171 847,156"/>
<polygon fill="#BD4A3E" points="570,171 578,144 557,129 583,127 593,103 603,127 629,129 606,144 616,171 593,156"/>
<polygon fill="#BD4A3E" points="318,171 326,144 305,129 331,127 341,103 351,127 377,129 354,144 364,171 341,156"/>
</g>

Ezek a számok nem mások, mint egész számú koordináták az 1140×560 logikai pixeles artboardon. Az SVG renderer nem csinál mást, mint berajzolja a pontokat, összeköti őket és kiszínezi a megadott színnel – hopp, csillag!

Akit érdekel, itt megtekintheti az eredeti, PDF-ből kibányászott szűz SVG logót, itt pedig a végeredmény, letisztázottat, amit majd fel fogunk használni a weblapon is. Az sem véletlen, hogy az egyik piciben jelenik meg, ott nincs rendesen beállítva az artboard, a másiknál viszont logikai pixelekre van pozícionálva minden. (Aki Illustratorben akarja megnyitni, jobban teszi, ha előbb egy üres dokumentumot erre az artboard méretre állít, különben nem lesz pixel griden az egész. Természetesen a Sketch-nek nincsenek ilyen problémái.)

Szemfülesek azt is érszrevehetik, hogy a “HETI” árnyéka más, mint az eredeti, hiába, azt is újraraktam layer effektekből, aztán kézzel behúztam magasabbra a türkiz rész szárait. Súlyos nördizmus volt az egész, viszont nem tudom, ti hogy vagytok ezzel, de én imádom tekergetni, forgatni a görbéket, míg összeáll egy koherens egységgé az egész.

WTF, HTML and CSS?

Mark Otto (ex-Twitter Bootstrap):

Reasons your HTML and CSS may be fucked. A curated list of commonly frustrating HTML and CSS quandaries, miscues, and dilemmas.

Tudtátok, hogy az IE9-ig csak 4096 selectort lehetett írni, a többit egyszerűen kihajította a böngésző? Ez is benne van, de ennél hasznosabb ez a kis best-practice gyűjtemény gyakorló sitebuildereknek.

A Szent Grál nyomában – függőleges középre rendezés CSS-ben

Három sor:

.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}

A posztban ugyan azt írják, hogy a szülő elemnek nem kell magasságot adni, de nekem a body, html tagekre is rá kellett raknom a height: 100%;-ot, hogy működjön. Hasonló dolgot flexbox-szal oldottam meg. Ez is ugyanúgy megy, csak ott előbb a szülőn létre kell hozni a flex kontextust, az alábbi példában a wrapper osztály:

body, html { height: 100%; }

.wrapper {
display: flex;
align-items: center; /* centers vertically */
justify-content: center; /* centers horizontally */
width: 100%;
height: 100%;
}

Ez után a wrapper alatti első szintű gyermekek center center pozícióban héderelnek majd.

iOS 7.1 alatt opcionálisan kikapcsolható a Safari toolbar

Kipróbáltam, szépen megy. Nálam:

<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, minimal-ui">

Ennek eredményeként eltünteti az also toolbart abban az esetben, ha a képernyő alján koppintunk. A toolbart természetesen elérhetjük a címsor koppintásával is. Kikapcsoltam, mert megtévesztő UX a Plastik esetén, de webappnál valóban jó ötlet a kikapcsolása.

Responsive Strategy

Brad Frost webdesign tehetség, előadó, szerző blogposztjában foglalja össze a responsive stratégiákat. Nem mindenki teheti meg ugyanis, hogy az összes web property-jét kidobja és “mobile first” módszerrel felépítse előbb mobilon, aztán fokozatosan alakítva ahhoz fölfelé a többit. Nagyvállalati környezetben vannak, akik oldalanként mennek, de léteznek komponensenként haladók is.

Pixel Perfect Precision

ustwo:

The original PPP was born out of necessity really. Back in those days I’d receive an email every couple of weeks asking how to set up colour profiles so that there were no colour shifts when saving out of Photoshop.

Remek cuccnak ígérkezik, ingyenes, sem regisztrálni nem kell hozzá, sem tweetet küldeni, csak klikkelni. Ne tévesszen meg a “pixel perfect” dolog sem, nagyobb léptékű dolog.

/via @sithlords

What Screens Want by Frank Chimero

Így kell prezentációt készíteni a weben – vegyük észre, hogy a vertikális scrollozástól nem kell félni és nem is kell parallax JS bele. Persze a prezentációban levő tartalom is érdekes, minden webdesigner palántának kötelezővé tenném a végigolvasását.