Pencils Down

This weblog is about my experiences in software development

Browsing Posts tagged CSS

Went to meetup given by Phillip Tellis from Soasta/log normal

Some notes I took:

  • Gzip static
  • Image optimize, reformat png with lesser bits
  • Cache control public max age
  • Turn off last mod header
  • Turn off etags
  • Serve root domain thu CDN
  • Css on same domain
  • Include js critical in head; load enhancements js async (use attribute on script tag)
  • Chrome audit css – excellent tool for evaluating css usage
  • Parallelize downloads
  • Flush early, often
  • Gzip chunking
  • Add Mod_pagespeed
  • Parallelize, predict, cache
  • Prefetch next page
  • Anon iframe fir css and js
  • Link rel dns-prefetch, sunresource, prerender

His slides are here

Working with a client where the designer they hired produced a nice looking design.  However, even though promising to just use standard fonts there are a couple of very conspicuous parts of the design that use non-standard fonts.  Sound familiar?

Google to the rescue! (I don’t know how they control what people spend time/money developing)  I saw a reference to Google Fonts in a HN post the other day.  What’s that?

Google Web Fonts provides high-quality web fonts that you can include in your pages using the Google Web Fonts API.

Just like everything else you can use google for, (especially CDN access to includes and the like) you can make reference to some non-standard font in the Google font set and then use it pretty much like any other font in CSS (have to quote the font name versus plain text(=standard font)).  Again, with their simple example:

<html>

<head>

<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Tangerine”>

<style>

body {

font-family: ‘Tangerine’, serif;

font-size: 48px;

}

</style>

</head>

<body>

<div>Making the Web Beautiful!</div>

</body>

</html>

So, next time you are graced with a design present you can just smile.

Someone smart figured out a way to get rounded corner tabs in HTML/CSS without using any images at css-tricks.com.  You can see an example at http://css-tricks.com/examples/RoundOutTabs2/.

Here is an image of the sample (note, the round outs at the bottom of the selected tab):

http://www.chengyinliu.com/whatfont.html

Simple: point and click

I have been struggling on a Joomla site that started out with the quaint idea of table-less design.  If you read any of the jibberish out there the current web development thinking is that tables are passe’ and css-only layout is the way to go.

Great idea.  Let me know when you find a browser that does anything consistently. 

Surprisingly, I have been finding that IE does a better job at layout than FF.  I guess this makes sense as IE accounts for all kinds of developer hacks whereas FF and the like take the high road: if you don’t follow the rules I quit.  However, the result is that IE appears to layout ‘better’ than FF.  So, taking a noble approach really doesn’t work.  Yet another surprise, huh?

Some of the simple things that can be done easily with a table layout but can be done painfully using css: virtually any vertical spacing, being exact about width, ditto height.  These are not unusual features of a web page.  I think it’s great that the W3 committees get together and design really interesting features, but give me something that works, today.