CSS
How to speed up your WordPress Blog
I finally got around to speeding up my WordPress blog and wanted to share with everyone the various things I did. I reduced my average page load time on certain pages from 15 seconds to about 1.5 seconds. That’s a big change.
My favorite test was a quick click through. On my new host I timed 6 page loads down to about 5 seconds. When I did the same test on my old setup, it took about 20 seconds (I know, below the 15 seconds average, that was really only for 1 page, but one of my most trafficked pages).
Basic jQuery Tutorial: Modify CSS classes and attributes, Hover and Toggle example
This tutorial will cover:
- Modifying CSS attributes with jQuery
- Setting a class for a page element
- Removing a class from a page element
- Testing if a class exists
- A quick toggle click behavior example
The final example will use all of the other elements in a single exercise.
HTML 5 Presentation on HTML5
Saw a great HTML5 presentation today at Apirocks.com: HTML5 Presentation. Has tons of useful demos of new HTML5 technologies that you can actually USE TODAY.
10 CSS Tools: Cheat sheet, CSS Desk, Lorem 2, CSS Guide, etc.
Recently I saw some css links that I thought were useful:
- CSS Desk – Real time development tool for trying out CSS changes
- CSS Cheat Sheet – Look up some of those properties that you always forget. It is italic or italics?
- Don’t use @import – A comparison of performance using both @import and link
- Complete CSS Guide – In depth guide of the various controls we have in using CSS (probably more for beginners)
- Position is Everything – An entire blog devoted to CSS and web browser bugs
- CSS Working Group Blog – Stay up to date on CSS3 decisions, and CSS conversation
- CSS Type Set – A CSS tool that allows designers (and developers) to see how copy will look with various CSS controls, and the resulting CSS
- Lorem 2 – A “better” way to use Lorem Ipsum? I’ve always used Lorem Ipsum, but this looks promising.
- CSS Text Wrapper – I’ve always wondered why CSS didn’t support (and still doesn’t really) more complex shapes. This tool attempts to allow us the control we’ve been wanting, although the output is complex, it may fit the bill for a few sites out there.
- CSSTidy – Open source CSS parser and optimizer.
IE6: Graphical Illustration of Problems with CSS
Posted on flickr, css mess, is one artist’s (atzu) homage to the problems all web developers face in IE6. As the creator says:
By the way, I wanted to thank all these major sites as Youtube, Facebook, Google that are not supporting Internet Explorer 6 anymore.
– atzu
Click for Larger Version
IE6 and IE7 limit CSS links to 30
Help! Working in Drupal and having trouble getting stylesheets to work? Did they break all of a sudden in Internet Explorer only?
I can’t see my stylesheets anymore in IE6 or IE7!
Internet Explorer limits the number of stylesheets included with a LINK tag
That’s right. If you include an additional CSS file beyond 30, it will break other CSS files.
This problem is only in IE6 and IE7. Officially I’m sure Microsoft says the fix is to upgrade to IE8.
What code causes the problem? Perfectly valid code below:
[sourcecode language='html'][/sourcecode]
Just repeat that 31 times, and you will see an error.
The Solution
While <link> tags may have issues beyond 30 stylesheets being included, you can cheat with using @import.
For example, include CSS using the following instead:
[sourcecode language='html']
[/sourcecode]
If you’re working in Drupal, there’s a module that implements this fix for you, IE Unlimited CSS Loader.
How do I use transparent PNGs in IE6: Using AlphaImageLoader
Internet Explorer is a tough beast. It was very popular years ago. Unfortunately, it’s still in use in out there.
This site, www.seangw.com, has a fairly technical crowd. We still see approximately 3% of our visits from IE6 (Firefox is the most popular at 64%, then IE7 at 14%, Safari at 10%, then Chrome at 5%).
I don’t believe IE6 should be supported anymore. In many jobs, that isn’t our decision to make. We can recommend ignoring IE6 specific issues, but should do so intelligently:
- Identify the current IE6 audience (knowing it will probably decrease over time)
- Approximate the cost of supporting IE6 (depends on what you are trying to do)
- Present the pertinent information to the client, and let them make an informed decision
- You should tell the client what you feel, but make sure they understand the difference between emotion and facts
Note: If your client makes $1,000,000 online every year, ignoring that minor 3% audience means possibly ignoring about $30,000 in revenue. Math is enlightening sometimes.
At that, you are here, and STILL want to do transparent PNGs in IE6.
How to implement transparent PNGs in IE6
It’s pretty standard the method for implementing transparent PNGs in IE6 by now.
This method is for implementations in CSS (you are using CSS, aren’t you?).
Frequently I find myself making a quick browser detect for IE6 (since there are oh so many issues that only affect IE6). I use basic IE conditional comments:
<body> <head> <link rel="stylesheet" href="style.css" type="text/css" /> <!-- [if lte IE 6]> <link rel="stylesheet" href="styleIE6.css" type="text/css" /> < ![endif] --> </head> <body> </body> </html>
There you go, now when you setup your styles in style.css and realize they don’t work in ie6, edit them in styleIE6.css to get them working again.
Assuming you defined a logo in style.css as follows:
#logo {
width: 300px;
height: 150px;
background: url(images/logo.png) no-repeat left top;
}
You will find that the PNG does NOT work in IE6.
The fix is easy, we tell IE6 to use the Microsoft DXImageTransform AlphaImageLoader to render the PNG. So we add an IE6 specific change ot the styleIE6.css file:
#logo {
background: transparent;
filter: progid:DXImageTransform:Microsoft.AlphaImageLoader(src='images/logo.png', sizingMethod='scale');
}
There you go. It should work now.
The background: transparent thing tells the browser to ignore the originally defined background used in the original CSS document.
jQuery 1.3 Released – How to use jQuery
jQuery is a “fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.”
jQuery version 1.3 was released yesterday.
Some new features in 1.3 are:
- Sizzle – a brand new CSS selector engine
- Live Events – event delegation with a jQuery twist
- jQuery Event Overhaul – simplified event handling
- HTML Injection Rewrite – Lightning-fast HTML appending
- Offset Rewrite – Super-quick position calculation
- No more browser sniffing!!
- New API Browser - http://api.jquery.com/
I have yet to play with jQuery 1.3, but will post my impressions after I get some hands on time with it.
Are you new to jQuery?
jQuery is a library that you can include on your web projects. jQuery enables HTML and JavaScript developers to rapidly deploy functionality that traditionally is more complex. Through browser independent APIs, developers and designers can implement event handling, CSS changes, animations, popular web 2.0 effects, or other common function of web 2.0+ sites.
Downloading jQuery
You can get jQuery by going to jQuery.com and downloading the version of jQuery you want:
- Production version – 18kb – Minified for production environments (don’t try to debug this, its a nightmare)
- Development version – 114kb – Developers can go in and see how things work with this version, but the footprint is huge
Getting Started with jQuery
jQuery provides a series of useful tutorials.
Some favorites are:
- Getting Started with jQuery – by Jörn Zaefferer - Goes through the basics of jQuery, all the way up to building plugins.
- jQuery Crash Course – by Nathan Smith – Great overview of what jQuery is and how to start using it.
- Submit a Form Without Page Refresh using jQuery – by Eric @ NETTUTS – Everyone starting out with AJAX wants to know how to do those cool form actions without the page refreshing. Here’s how.
- 5 Tips for Better jQuery Code – by Mark Grabanski – Useful tips to keep in mind when working with jQuery — slightly more advanced, but a good taste of what is to come
- The 20 Most Practical and Creative Uses of jQuery – by Drew Douglass @ NETTUTS – From scratch, how to creatively use jQuery in modern websites.
- jQuery Tip: Animation and CSS Queuing – by Drew Douglass – Queuing up animations is something we all run into and scratch our heads, Drew makes it sound easy.
There are so many more tutorials out there.
Favorite Software for Web Development
Sometimes when you start out doing something on computers, it seems so hard until you get the tools that everyone else uses.
In this post I’m asking everyone else for feedback, what do you like to use? Go ahead and comment it in there, I’ll add it to the article as I see em.
Below are some of my favorite pieces of software for web development, some will be very obvious (Flash, Photoshop, etc.) … some maybe not so much:
TextPad
I love textpad for basic text changes from everything PHP, to HTML, to writing notes. It’s great to have multiple documents, line numbers, quick global / file / local search and replaces etc. I use this when I’m working with source files, XML definition files, CSS files, to CFM or other formats. I love it.
HomeSite
Those of you who know homesite, will know it’s pretty much gone nowadays. The heyday was many years ago. The direct FTP editing was amazingly useful. It has some features that I still go back to now and then. Mostly search and replace functionality, FTP based editing (right on ther server … mostly), document formatting (code sweeper), and other utilitarian functions.
CuteFTP Pro
Working on the web, we all are in constant use of FTP (more so than we should be). Cute FTP has always been a staple of my software toolbox. It’s so easy to launch connections to all the FTP servers you use throughout the day, keep them open for jumping between projects. The number of protocols it supports is flexible (FTP, FTP w/ SSL, SFTP, HTTP, HTTPS, etc.), and it always seem to be able to connect. The speeds and setting are highly configurable. It’s nice having 50 simultaneous downloads going at a time.
Tortoise SVN
Whoever isn’t using SVN, should be using SVN (or CVS or whatever other version control system you can think of). Tortoise SVN is an essential windows interface enhancement to integrate SVN into the file browser. For those of you who use CVS, there’s a Tortoise CVS as well. It is easy to look at version histories, compare files based on modification dates, and to pull down new updates.
Subversion
Source control is underutilized in my experience. So many sites aren’t run with source control. Think of the advantages: automatic source control, automatic offsite backup (if you use an external host — which I would love to recommend svnrepository.com, a very cheap hosted SVN repository). Read about it, get used to it, it will save a project.
Eclipse
You were waiting for me to say it weren’t you? An open source IDE. Technically it started as a Java IDE (most Java developers should be intimately familiar with this). Thanks to add-ons developed by the community, it supports, quite adeptly, PHP and other web development technologies. It has built in SVN support, supports deployment scripts… its amazing. Try it, explore the community around it. Check out the Subclipse add-on, as well as the Web Developer Tools, and Eclipse XML Editors and Tools.
Adobe Flash (Adobe Creative Suite 4 Design Premium
Pretty much a no brainer, you need Adobe Flash to develop flash. It’s a great tool, worth every penny.
Adobe Photoshop (Adobe Creative Suite 4 Design Premium
Another obvious one. Photoshop is a requirements for all web development. No, you shouldn’t be doing web design work as a developer. However, there is always the need to look at colors, size things, cut up images, process original artwork, the list goes on forever. I really recommend the Adobe Creative Suite, we use almost all of the software anyway.
Microsoft Word (Microsoft Office
You will always need this (or another decent word processor). Yes, you can get by without it. However the sheer amount of things Word can handle: Estimates, Proposals, Letterheads, Envelopes, Labels, the list goes on and on.. you will wish you had it someday.
Microsoft Excel (Microsoft Office
Another one that you don’t always think about, but excel makes writing estimates so much easier. You can update your entire estimate based upon a new discount, manage hours, track changes. I’ve used Google’s online spreadsheets before – they are great. But they aren’t fully able to replace excel yet.
Microsoft PowerPoint (Microsoft Office
Those proposals are much better with an accompanying presentation. Tell your clients what you do, what they need, in a way that can impact people in a conference room. Everyone yawns when it comes to yet ANOTHER powerpoint presentation, but you look unprofessional without one in most cases.
MySQL
Normally this is on a hosted platform, but you need a database to do the cooler web development projects. MySQL is cheap, but if you want you can substitute in Microsoft SQL Server, or even Oracle. In my experience if you know why you want MS or Oracle, you can pay for them. If you don’t know why you want either of those, just go with MySQL.
PHP MY Admin
Administration software is just as important as the backend engine, at least for development. It lets you manage a database online, easily, and export simply. If you haven’t used it, try it.
SQL Server Management Studio
Another tool for development on SQL servers. Same as PHP My Admin, arguably much more helpful, but it is a client app. If you’re working with Oracle, or prefer these desktop applications to the PHPMyAdmin web interface — check out Aqua Data Studio.
There are really dozens more tools I consider very useful. Not exluding:
- Versions of all browsers
- VPN Connectivity software
- Remote Desktop
- VNC Client
- pcAnywhere (not so much anymore)
- Outlook / Email Client
Last but not least, is Google. It is the best tool you will have when working in web development.
CSS in IE8 will support “Tables”, fixes problems in CSS
There’s a great article at Digital Web Magazine, Everything You Know About CSS Is Wrong.
One of the problems that has always plagued CSS is absolute positioning, relative positioning, and the need to set things up like a “table”. By that I mean setting up three divs to look like the following:
<div class="outerContainer">
<div class="textContainer">... longer text ...</div>
<div class="textContainer">... shorter text ...</div>
<div class="textContainer">... shorter text ...</div>
</div>
The problem here, being that if the first text container grows, we want the other 2 containers to grow with it.
Obviously, we could specificy a specific height for the textContainer class, and they would all match. But what if the first container copy grows, or maybe the copy in the 2nd or 3rd container grows longer than the first container.
This becomes even more complex when specificying multiple rows of textContainers, where there are vertically spanning cells as well.
In traditional “non-css” HTML this was done simply through tables, very simply actually. Now that everyone has turned to CSS to make page sizes smaller, make styling effective, and increase flexibility of layouts — we try to avoid tables unless we are presenting a .. Table.
Normally I would have created a clever background image that has a top, bottom (both divs above and below the textContainers), and a tiling vertical background to appear like all columns have the correct sizing (when in fact they don’t). Effectively removing control over each textContainer’s background, and the main container’s background from the CSS and putting it into a series of images.
It worked but we sacrificed flexibility.
Take a look at the article, again, Everything You Know About CSS Is Wrong, as they detail how IE8 aims to fix this behavior through a series of CSS display properties.
Please share, it makes me happy:
Subscribe to Email Alerts
Make a Donation
Popular Posts
Follow Me
Recent Posts
Archives
Tags
Blogroll
- 456 Berea St
- ActionScript 3 Design Patterns
- adactio – home of Jeremy Keith
- ajaxian
- Boxes and Arrows
- Chris Brogan
- CSS Globe
- InsideRIA
- Jarrod Michael Studios
- Johan Brook: Designer and Developer
- Mad Vertices
- NETTUTS
- Portsmouth Community Calendar
- Roomware Blog
- Signal vs. Noise
- Six Revisions
- Snook
- Style Grind
- Tiago’s Weblog
- Viget Extend
- Vitamin
- Whats the latest
- Woork
- zupko.info