Ivana Vasilj | Blog

RWD = performance

2013-09-14T00:00:00+00:00

To be prepared for tomorrow’s problems, we have to include performance as an essential consideration, as the desktop-centered web is disappearing before our eyes.

Responsive Design is Not About Screen Sizes Any More is the most comprehensive piece on best practices in RWD, performance, and optimisation that I’ve read recently.

To achieve truly lightweight sites, performance shouldn’t only be a concern, it should be treated as a design feature.

Performance is like any other issue. Sites that overcome it are the ones who acknowledged it from the beginning. And the ones that overlook it are the ones that suffer for it in the end.

“You don’t get to decide which devices access your site, your users do”
—Karen McGrane

On classes and IDs

2012-11-27T00:00:00+00:00

I’m a big fan of Nicole Sullivan and Object Oriented CSS. One of the practices I embraced, also thanks to CSS Lint, is not to use IDs in CSS selectors. The main benefits from this practice:

code maintainability,
performance (better page load times),
avoiding specificity wars.

Oli Studholme illustrates it nicely in his article Don’t use IDs in CSS selectors?.

I also really enjoyed reading Jeffrey Zeldman’s view on this, In defense of descendant selectors and ID elements, and I agree:

There is nothing wrong with id when it is used appropriately (semantically, structurally, sparingly). There is plenty wrong with the notion that class is always preferable to descendant selectors and semantic, structural ids.

The main point I see in his article:

Please understand: I’m not disparaging my friend Nicole Sullivan’s Object Oriented CSS as an approach to otherwise unmanageable websites. No more would I disparage a steam shovel for cleaning up a disaster site. I just wouldn’t use it to clean my room.

Nevertheless, not using IDs, but only classes in CSS selectors, has done a lot for my productivity, solely from the perspective of code maintainability, so I’ll continue “keeping my room in order” with this practice.

Don't forget the address

2012-11-12T00:00:00+00:00

Though its role is quite simple, the address element seems to be easily forgotten, or even misunderstood – it is named somewhat misleadingly. In short, you should use it to indicate the contact info for a web page, like an email or website address.

The spec is crisp about it: The address element represents the contact information for its nearest article or body element ancestor. If that is the body element, then the contact information applies to the document as a whole.

(For example, I wrapped the “contact me” link on my homepage in it.)

Have a look at the address element in the HTML standard, it’s a short read.

Important note: Don’t use the address element for marking up addresses in general, such as postal addresses (unless they represent the actual contact, of course). For that purpose, use the adr format, a property of the hCard microformat.

New Look

2012-11-11T00:00:00+00:00

ivana.im has a new look! I’ve kept it simple, but included some girlish colours and Avenir, currently my favourite typeface. Not many lines of CSS.

Baseline and multi-column grids with CSS3 linear gradients

2012-10-31T00:00:00+00:00

I wrote these snippets using SCSS (with a dash of Bourbon to forget about vendor prefixes). They can be quite helpful when composing a page both vertically and horizontally, all within few lines of code you can write yourself, no need for extra CSS frameworks. I hope you make use of them for your grid layouts as well, or at least get the general idea.

Podcasts I like

2012-09-02T00:00:00+00:00

It’s becoming impossible to keep up with all of the great ones out there (right now there’s more than 40 podcasts to listen in my Instacast), but here’s my narrow selection.

Web development:

Shop Talk Show - About front-end web development & design, featuring awesome guests, with questions from listeners.
RailsCasts

Education & Comedy:

Radiolab (up to 60 min) - “Science meets culture” in a form of stories, investigations, and experiences.
60-Second Science (1 min) - Daily commentary on some of the interesting news in the world of science.
The Moth or “True stories told live” (~ 20 min)
a show with zefrank (~ 3 min)
Savage Lovecast (~ 50 min) - Advice columnist Dan Savage answers questions about sex and relationships. Insightful, provocative, and funny.

Language:

Learn French with daily podcasts (~ 5 min) - Useful to stay in touch with your existing (beginner to intermediate) French, and expand your vocabulary. Funny accent included. (Louis is adorable.)
Grammar Girl Quick and Dirty Tips (5–10 min) - English grammar, punctuation, and style.
Lexicon Valley (20–30 min) - Simply about language.

I only recently discovered The Art of Photography and really like it. I also occasionally listen to Big Ideas, Ruby Freelancers, and Back to Work.

Take a hike

2012-05-14T00:00:00+00:00

Nowadays, almost any information is within our reach in a blink of an eye, at all times, and in abundance. We have to schedule our minds to rest, have some time in isolation, free from the information greediness on the loose. While we can take certain actions to disconnect on a regular, daily or weekly basis, everybody could use a major reset every once in a while.

I’ve had mine 2 weeks ago: hiking and camping in the southern part of Velebit, which belongs to Paklenica, a national park in Croatia. We spent 4 days climbing (including the highest peak, Vaganski vrh, at 1757m), walking from morning till dusk, sleeping in tents, making fire to cook food and warm ourselves after tiring whole-day hikes.

Reasons I love hiking and spending time in mountains:

focusing on one thing only: putting some effort in each step that will bring you closer to the destination;
disconnection, being able to spend time only with people that are with you, without disturbances;
physical exercise, with all the health benefits it brings; you don’t need to be particularly in shape for hiking, the only prerequisite is sheer will power;
the obvious: enjoying the scenery;
once again coming to appreciate the everyday comforts we take for granted.

(A little note on the disconnection part: the signal coverage is actually pretty good on Croatian mountains, so I had to turn the flight mode on – there’s just something out of place in receiving an SMS from your city friend inviting you to theatre while you’re looking for a “number two” hiding spot.)

Mountains are amazing. Instead of reading this, you should be planning your next hiking trip.

More photos from this trip in my set on Flickr.

iPhone 365

2012-02-12T00:00:00+00:00

Yesterday I finished my "iPhone 365":iPhone365 project, a photography project I started 1 year ago. Well-known among photographers, 365 is a project for taking a photo each day for a year. There are no other rules: you choose your photo equipment, subjects you photograph, when to start with it. It allows a lot of space for creativity with a simple goal: to become better at photography. I decided to make it an iPhone 365 project for 3 simple reasons: # I "started a 365":56/365 once before that, only to quit it after less than 2 months. I wasn't always eager to carry a bulky SLR with me, and editing photos required way too much time and dedication on a daily basis, to the point where it became a real drag. # It's a euphemism to say that I worship my iPhone 4, mostly because of its fabulous camera; it never leaves my side (and needless to say, the best camera is the one that's always with you). # There are so many great iPhone apps for taking and editing your photos. I will list the ones I used.

h2. My favourite photo apps # Built-in camera app. With its irreplaceable HDR setting, it's still my most preferred app for shooting. I used all the other apps only for editing (apart from Hipstamatic). # "Camera+":http://campl.us/. Really the ultimate photo app, I used it for 90% of the shots. Not only for its great effects, but it also offers a variety of white balance choices, built-in timer, etc. I could have easily renamed my project to Camera+ 365. # "Instagram":http://instagr.am/. The most social photo app, fast and with beautiful effects. Everybody knows it, everybody loves it. # "Hipstamatic":http://hipstamatic.com/the_app.html. The name says it all. I love its look, retro feel, and the random mode. The "most lomo" app, just shoot and don't look back. # "CrossProcess":http://bananacameraco.com/crossprocess/. Admirably emulated cross processed film, great results.

h2. The experience The greatest benefit I got from doing this is the community feedback from my Flickr friends, great number of them coming from "The Daily Shoot":dailyshoot project, which unfortunately is no longer active, but it had great daily assignments that kept me motivated, and connected with people who are doing the same thing. Staying motivated is a real bummer here: I certainly had plenty of days where I would just point to and shoot the first thing I saw ("one example of that":downExample). Having a great idea for a shot for 365 days (and execute it) is hardly likely, so there were plenty of ups & downs. My favourite (and totally unexpected) ups were the "3 of my photos that got explored on Flickr":explored. We all know that practice makes perfect. What makes 365 a great project is that you can do it even if you never had a camera in your hands. Even if you don't become much better at photography, and you definitely will, you'll have one year of your life in photos, a unique and irreplaceable souvenir worth having.

[iPhone365]http://www.flickr.com/photos/ivanavasilj/sets/72157626061095120/ [myFlickr]http://www.flickr.com/photos/ivanavasilj/ [56/365]http://www.flickr.com/photos/ivanavasilj/sets/72157624849736463/ [explored]http://www.flickr.com/photos/ivanavasilj/sets/72157626980783451/detail/ [dailyshoot]http://dailyshoot.com/assignments [downExample]http://www.flickr.com/photos/ivanavasilj/6521979279/in/set-72157626061095120/

My Echoes On The Web

2010-07-23T00:00:00+00:00

Recently I created a page here called Echoes that aggregates my social activity from various sites such as Twitter, Flickr, Delicious bookmarks and more. Because this site is static, I needed a service that can:

Grab the feeds from multiple sources,
Aggregate, transform and filter content so the end result only contains recent activity,
Output the result as JSON-P so I can pull it into my site with JavaScript.

Yahoo Pipes is a service that can perform all of the above and, because of its graphical interface of connecting balloons with pipes, it’s also tons of fun to play with for days.

My Echoes pipe is public, so feel free to view the source or clone it. You can also view the JavaScript code that fetches the pipe output and merges it with the markup of the Echoes page.

Headings in HTML4 & HTML5

2010-05-18T00:00:00+00:00

Headings are for organizing content into sections. Nice heading structure represents document outline, improves accessibility, may help with search engine rankings — it's simply beautiful.

New elements in HTML5, such as section, article and hgroup, have changed the way of marking up headings a bit. So let's compare "the old" and "the new" way.

Headings in HTML4

These are the rules of heading structure I follow in HTML4:

Nest headings properly, do not skip levels (h1 is followed by h2, h2 is followed by h2 or h3, etc.)
Use one h1 element per document / page (the main, top level heading for that page)

Those are basically accessibility techniques and have little to do with HTML 4.01 Specification (which only notes that some people consider skipping heading levels to be bad practice). Check out Techniques for WCAG 2.0 (in case you haven't before), particularly these:

This is the example of use from HTML4 spec:

    
<DIV class="section" id="forest-elephants">
  <H1>Forest elephants</H1>
  <P>In this section, we discuss the lesser known forest elephants.
  ...this section continues...
  <DIV class="subsection" id="forest-habitat">
    <H2>Habitat</H2>
    <P>Forest elephants do not live in trees but among them.
    ...this subsection continues...
  </DIV>
</DIV>

So, there's a main div.section starting with the h1, and a div.subsection starting with the h2 element.

Headings in HTML5

First, let's take a look at the examples of use from HTML5 specification draft. Snippet #1:

    
<body>
  <h1>Let's call it a draw(ing surface)</h1>
  <h2>Diving in</h2>
  <h2>Simple shapes</h2>
  <h2>Canvas coordinates</h2>
  <h3>Canvas coordinates diagram</h3>
  <h2>Paths</h2>
</body>

and its equivalent snippet #2:

    
<body>
 <h1>Let's call it a draw(ing surface)</h1>
 <section>
  <h1>Diving in</h1>
 </section>
 <section>
  <h1>Simple shapes</h1>
 </section>
 <section>
  <h1>Canvas coordinates</h1>
  <section>
   <h1>Canvas coordinates diagram</h1>
  </section>
 </section>
 <section>
  <h1>Paths</h1>
 </section>
</body>

Both are correct in HTML5. What's the difference then, if you can just continue with your HTML4 practice?

Sections may contain headings of any rank, but authors are strongly encouraged to either use only h1 elements, or to use elements of the appropriate rank for the section's nesting level.

Authors are also encouraged to explicitly wrap sections in elements of sectioning content, instead of relying on the implicit sections generated by having multiple headings in one element of sectioning content.

This actually means you should only use h1 for headings; start with a new section (or other elements of sectioning content: article, aside, nav) and its h1 for each level. Snippet #1 is "HTML5 transitional". Snippet #2 is the way to go.

Cool thing about the new way of usage is that you can aggregate any section from a document in other documents, it will fit into the external document’s outline.

Why have 6 heading levels then?

Why not just h (like in XHTML2)?

Backward compatibility
hgroup — heading might have multiple levels (subheadings, taglines, alternative titles) — though I cannot think of an example with headings other than h1 and h2

hgroup

There's also a new kid on the block. hgroup is also a heading, more precisely an element for grouping h1–h6 elements, in cases when heading has multiple levels, like:

      
<hgroup> 
  <h1>Monochrome daydreaming</h1> 
  <h2>Homesite of Ivana Vasilj</h2> 
</hgroup>

In document outlines, the text and rank of hgroup elements will be the text and rank of their highest ranked (or the first if many of the same rank) h1–h6 descendant. So the hgroup from the example above, would appear in an outline only as the h1 element with the text (Monochrome daydreaming) it encloses.

More on the subject

Wonder if you've done your heading structure right? Check your document outline with HTML 5 Outliner. Also check out Headings in HTML 5 and accessibility, a nice article by Bruce Lawson. And, of course, the best resource, Sections in HTML 5 specification.

For one not-from-spec example of use, here's the markup (the relevant part) of this document:

      
<body>
  <hgroup> 
    <h1>Monochrome daydreaming</h1> 
    <h2>Homesite of Ivana Vasilj</h2> 
  </hgroup>
  
  <article>
    <h1>Headings in HTML4 & HTML5</h1>
  
    <section>
      <h1>Headings in HTML4</h1>
    </section>
  
    <section>
      <h1>Headings in HTML5</h1>
  
      <section>
        <h1>Why have 6 heading levels then?</h1>
      </section>

      <section>
        <h1>hgroup</h1>
      </section>
        
      <section>
        <h1>More on the subject</h1>
      </section>
    </section>

  </article>

</body>

First Post

2010-05-10T00:00:00+00:00

Well it was about time for me to have my site & blog.

Here I'll be writing about various stuff of my interest, which you may find useful or interesting, so stay tuned.