On clevis.cz we have black&white images in portfolio. I wanted to colorize them on :hover.
I wanted to do it and had these goals:
- Without styles and/or JavaScript there will be just a gray image.
- I don’t want to create CSS sprite for each image, it’s time consuming and boring.
- I want to use <img> tag for specifying portfolio image in my code.
- I still want to preload both images (black&white and colored versions), I want to avoid blinking.
- I want to fade in and fade out colored version.
I knew I will have to use jQuery, because CSS can’t do this alone.
I begun with code of a portfolio image. Semantically it made sense to me to use new HTML5 elements <figure> and <figcaption>, see html5 doctor for further explanation.
Now I decided that this code is pretty nice and I don’t want to add any anything else just to enable desired effect.
I googled to find how others are solving this. After a while I found this great tutorial on The Art Of Hand Coding. It’s using CSS sprites but it gave me the idea that I can dynamically take url address from <img> element and set it to another element as background.
But I actually needed to change that url a bit to find the right colorized image to the black&white variant.
At first it seemed impossible to me, because I’m not much jQuery expert. But after a quick google search I found this wonderful plugin created by Mark Perkins, which allowed me to change the URL.
After a while I’ve putted together this script:
It loads the right image (colorized version of portfolio images are prefixed with “color-” and generated automatically by a little Automator script) and the image is placed behind the <img> element. The only thing left is now to fade in and to fade out the colored image, which is pretty easy in jQuery and I actually used the code from The Art Of Hand Coding. It works like this: you slowly let the <img> disappeared and then the background of the link is visible.
And that’s it! All 5 goals completed, it works awesome in every browser I tested it in. (from IE6 to the latest Webkit night build). Check it out at clevis.cz/co-delame.
What do you think?
While lunching new web site of company I work for - clevis.cz (which looks so awesome thanks to Josef Richter) - I run into a problem I had problem to solve semantically.
If you look at our site there’re headlines like this one:
I really love their style. However they introduce a problem. The text is specifically divided into two (or more) lines just to look better. No semantics in it at all. What to do with it?
On my personal site - honzasladek.com - I run to the same problem and tried to solve it with specifying precise width. I know, this attempt was doomed to fail. But it worked with some problems on Mac and Windows alike. But Opera sometimes just didn’t render a word on the next line, line-height got broken in several browsers and other horrible things happened.
This wasn’t the best way to go. Tired of it I used <br />, which I’m ashamed of till now, but didn’t find the time to change it yet.
On Clevis.cz I used <span> elements with display:block; for certain parts of text to cause the line-break. I’m not completely happy with it but it solves the problem and it doesn’t do anything when styles are off. (But the code isn’t as clean as it could be, you know ;))
Unfortunately I can’t think of any better solution. Can you?
February 4, 2010 at 10:33pm
0 notes
All our work, our whole life is a matter of semantics, because words are the tools with which we work, the material out of which laws are made, out of which the Constitution was written. Everything depends on our understanding of them.
— Felix Frankfurter on why we should care about semantics.
Yesterday (that is 2. 2. 2010) was officially lunched RDFa Working Group. It’s really an exciting news for everyone interested in semantics.
After W3C discontinued XHTML 2, many people thought, that RDFa is as good as dead. Obviously it’s not.
Among other things this group will support incorporating RDFa into HTML5 and, of course, will be updating and developing RDFa. I’m really excited about some ideas people are discussing in the group public email discussion. They could make RDFa much easier to understand and write for many people.
I’ll let you know if anything interesting happens.
Let me summarize few things:
- This site was created in July 2009 and since then I wrote about 5 real articles. Not good.
- Internet is full of blogs about web design.
- Nobody needs another blog about web design.
- I’m not a web designer.
If there’s one thing I’m possessed about, it’s semantics. It’s the next frontier of the web. So I’ll be writing about it.
What can you expect to read? A series about RDFa, news about: RDFa in HTML5, Microdata and Microformats, my thoughts on semantic markup and much more.
I hope one day I’ll have here guest posts about semantics and interviews with people who really care about semantics. But it’s just a plan for the future.
If you’re interested in semantics I suggest you to subscribe to my RSS feed.
P.S.: My personal thoughts about other aspects of life I’m going to publish only in Czech on my blog (sure, it’s powered by Tumblr).
December 24, 2009 at 10:37am
0 notes
This post is in Czech only.
Příběh Fakturoidu z pohledu člověka, který jeho vývoj sledoval tak nějak z povzdálí
Po světě spolu chodí spousta lidí, ale tihle dva se vyloženě hledali. Nevím, jak se vlastně nakonec našli, ale mělo to určitě něco společného s velikostí českého webového rybníčku.
Ze začátku vše probíhalo naprosto standardně. Nejdřív zjistili, že je baví si spolu povídat. Pak se z toho vyklubalo nějaké to pozvání na kafe.. A nakonec se jednou při diskuzi o tajemných Signálech dohodli, že si spolu pořídí děťátko.
Tedy abych byl přesnější - robotí děťátko. Normální děti už dneska prostě nejsou v módě a robotí děťátko má řadu výhod. Nejí, nespí, neřve. Akorát ho udělat trvá trošku déle.
I za použití nejmodernějších metod pro rychlý růst robůtků, jako je jízda na kolejích či ozařování jasným světlem z nakousnutého jablka ve dvě ráno, to trvalo rok.
Prenatální vývoj našeho robůtka probíhal poměrně dobře, přesně dle příručky pro mladé rodiče - Getting Real. Zodpovědní rodiče se věnovali každému detailu a velmi rychle si uvědomili, že by bylo chytré malého robůtka něco naučit, aby nebyl jako všechny ostatní děti pasivem, ale stal se aktivem.
No a co je na světě jednoduššího než český daňový systém? A tak se robůtek ještě před narozením začal učit vydávat faktury či hackovat se do databází Ministerstva Financí. Do toho musel hodně posilovat, aby vypdal k světu. Bylo rozhodnuto, že zelená s šedivou jsou dneska cool a tak nosí oblečení v těchto barvách. Jediný, komu se to nelíbilo, byly hlavičky u tabulek. A tak tabulky už hlavičky nemají…
V půlce vývoje byla touha pochlubit se malým robůtkem tak silná, že nešlo odolat. A tak byla velká párty pro pár V.I.P. hostů a ti mohli začít robůtkovi povídat, co by vlastně chtěli vystavit. Jenže zákeřní hosté si začali vymýšlet spoustu bláznovin, začali chtít řešit DPH a cosi jako Proforma faktury. Z toho se malému robůtkovi, i jeho rodičům, udělalo trošku nevolno, ale statečně to vydýchali a hosty nevyhodili. Místo toho společně strávili dlouhé hodiny učením robůtka. Rozhodně to bylo zábavnější než Windows 7 welcome párty.
No a po vyleštění robůtkových zubů (kvůli úsměvu do kamer) a koupení vánočního dárku (bílý jednorožec na hraní), nastal čas představit robůtka světu.
Přeji robůtkovi pod stromeček (a k jeho 0. narozeninám) Fakturoidovi hodně spokojených uživatelů a jeho tvůrcům, Lukášovi s Honzou, hodně platících uživatelů. :)
Osobně jsem měl to štěstí, že jsem se mohl účastnit beta testovací párty a byla to fakt jízda. Robůtek toho už spoustu umí a co neumí, to se velmi rychle učí. Zkuste ho taky!
December 12, 2009 at 11:48pm
0 notes
So I read today an article on Coding Horror by Jeff Atwood. It’s title says “Microformats: Boon or Bane?” and it really caught my attention. After reading it I just had to write this post.
The article says, among other things, one really true thing about Microformats. They’re really not perfect, they have their flaws. But I believe Jeff Atwood is wrong when it comes to what these flaws are.
His main problem with Microformats is that they’re using class attribute to make they’re magic. Read his arguments.
I believe that almost in every book about html & css will be a note on naming classes. It’ll say you something about naming them “semantic” and not to use something like “left-blue-column” because you could move the column to the right in the future and make it, I don’t know, orange. Unless the authors are completely stupid and nobody noticed that ‘till now, I suppose there is some true in they’re advices.
Then we have the all-mighty progressive enhancement technique. If I apply it to html + css coding, it basically says: “Write your html markup first - as semantic as you can, worry about the css later”. So if I would follow it to the letter, I would write my markup WITHOUT any class name and then use CSS3 selectors so heavily, that only nightly build of Webkit could display my site correctly. It would be nice, if all my costumers would be using nightly build of Webkit (which they, what a surprise, don’t).
So I need to add some classes.
So I think really hard to come out with the right set of semantic class names. But even I think I was really successful, someone else will always say - “hell, it’s stupid class name”. And we have one more thing to argue about in discussions.
Microformats, HTML5 and ARIA are about to change all that. I believe soon there won’t be any need to use my own class names. (Today I might use my own class names if I need to support some version of our bellowed IE.) We all will just use Microformats class names, ARIA attributes and new structural HTML 5 tags. That’s it.
I don’t know where this approach will take us (I can imagine some snippets libraries, OOCSS frameworks applied to it, some magic with JavaScript, etc.), but I can tell you - I’m looking forward for this future. What I found after 7 years in this beautiful industry, is one thing - we web designers are pretty creative and smart bunch of people. So if we take class names as given and focus our creativity to different areas, it’s likely to move the web design industry another step further.
And If you think the Microformats are piece of shit - that’s fine by me. Use RDFa instead. In the end it does the same thing from this point of view. You’ll just need a bit more advanced selectors. And when Microdata arrives? Still the same! (Except at RDFa and Microdata you won’t need to use classes at all. :))
Btw. if you’re thinking not using any of these, go right now and find yourself a new job. Because this is not a matter of choice since Google got on board.
Btw2. Andy Clark wrote a post about naming conventions about an year ago, so I didn’t invented this approach at all. I’m just it’s huge fun and I felt a need to share it with you today.
So don’t be afraid and start together this (r)evolution! Are you with me?
November 28, 2009 at 4:32pm
1 note
I think commenting your CSS files is really important thing to do. Recently I discovered cssdoc.net, a project aimed to port JavaDoc comment style to CSS. I tried to use it on one of my projects and I want to share here my comments structure and I humbly ask you for an opinion. Is it good? Do you see some space for enhancements? How do you comment your css files? I’m looking forward for your opinions, I hope we’ll together find some best practices.
Some notes:
This is the beginning of my CSS file.
This is basic structure of my CSS files for easier orientation.
This comments one part of my CSS file.
When this projects goes live I’ll share a link with you to see it in practice. Follow me on Twitter.
November 13, 2009 at 10:15pm
0 notes
I did most of the important work in my career to date using crappy old equipment. Unless you’re editing high-def video or creating feature film animation, you don’t need great hardware to do good work. You just need a passion for the work.
— Jeffrey Zeldman
November 12, 2009 at 10:00pm
0 notes
There are literally thousands of content management systems out there. Many of them open sourced or free to use, some of them as hosted services, some of them as classic shareware. And still many of us have an urgent need to WRITE OUR OWN CMS to fit our needs.
In 21. century, when there’s an library for almost everything. When everyone is using some framework. When everyone tends to do different things then reinvent the wheel. Isn’t it kinda stupid? I think so. But…
CMS as we know them are systems of the past. They look and work the same way today as they did in 2000. They didn’t respond to the Web 2.0 (or we may call it a “social networks era”). They didn’t catch the change of the web design industry. There were times when one man could be an expert in every part of web design process. When web sites looked mostly the same (header, navigation column, content and footer). Today we need a whole team to create really great sites. And today’s web sites? They definitely don’t look the same.
Today we tend to play with every word on the web site. And a typical page has a number of important areas, not only one “content” area. For instance your product advertisement, quick info about your clients, embedded Twitter and so on. And not even after a day of searching on Google for some CMS even remotely capable of handling these things, I ended up with empty hands. So the only option remains - to write your own CMS (or something similar) to address your needs.
And there comes the Question (oh yeah, big one). If you worked hard on the text, if you paid a lot of attention to every pixel, how much power should you give your CMS user? Should he be able to edit texts on the site? Or only few defined areas? Should he be able to add images where he wants? And isn’t it better to just ask him to send you an email when he’ll want to make changes? Maybe his site would in the end work much better.
And when building CMS just for yourself, should even you have such a power? Isn’t it better to do the process of changing something on live site a bit difficult to make you think before doing changes? (We all know what happens when you send an email when tired, right?)
Is it worth the costs to build an CMS? And if to build one - what should it be capable to do? In my opinion we need something like CMS but I think that what we’ll use in the future will have completely different approach to content, will support social networks etc. Unfortunately I don’t know how it will work or look like. I believe they will be be paid services and they’ll be hosted by some companies, not the creator of the web site. But the rest remains hidden. What do you think?
PS: Note that I’m not talking about CMSs for blogging, it’s completely different situation and I think that current CMSs handles this pretty well.
1.
