Huge time saver: Automatic inline CSS generation – Blog – Campaign Monitor
Huge time saver: Automatic inline CSS generation – Blog – Campaign Monitor
|
|
Huge time saver: Automatic inline CSS generation. Published February 20, … The problem is, adding that CSS inline is fiddly and takes a long time, not to …
Similar Posts
- I published 99 articles, or an average of a little more than eight per month.
- You-all have left 670 comments(!). That’s an average of 56 per month, or roughly seven comments per article. And I appreciate it!
- Alexa gives CSS Newbie a 3-month average traffic rank of 124,122… and a 1-week average of 58,318. Growth is in the cards!
- 152,907 unique visitors have stopped by this year, generating 293,329 page views.
- 50% of my traffic came from other sites. Thanks to all of you who linked here!
- 38% of visitors get here through search engines.
- The CSS-Only Accordion Effect
- A Semantic List-Based CSS Calendar
- Equal Height Columns with jQuery
- Book-Style Chapter Introductions Using Pure CSS
- Intelligent Navigation Bars with JavaScript and CSS
- The CSS-Only Accordion Effect
- Six Ways to Style Blockquotes
- Horizontal CSS Dropdown Menus
- Intelligent Navigation Bars with JavaScript and CSS
- Show/Hide Content with CSS and JavaScript
5 Ways To Optimize Your CSS
Recently I have been working on a social networking site that was experiencing downtime due to the amount of stress its users were putting on the server. I spent a good amount of time looking for ways to improve the speed of the site, and one of this was through CSS optimization.
Structure your CSS and HTML elegantly
“CSS” Stands for Cascading Style Sheets. Notice the first word, “Cascading”? The power of this language is readily available, and it is up to you, the designer, to maximize its use. It is an interesting concept that is not too difficult to grasp. Try to find instances wherein this can be applied.
For example, the code below:
<p class="someClass">First</p>
<p class="someClass">Second</p>
<p class="someClass">Third</p>
<p class="someClass">Forth</p>
<p class="someClass">Fifth</p>
Can be rewritten this way:
<div class="someClass">
<p>First</p>
<p>Second</p>
<p>Third</p>
<p>Forth</p>
<p>Fifth</p>
</div>
But what if our code looks like this:
<p class="firstClass">First</p>
<p class="someClass">Second</p>
<p class="someClass">Third</p>
<p class="someClass">Forth</p>
<p class="someClass">Fifth</p>
We can take advantage of CSS by rewriting HTML this way:
<div class="someClass">
<p class="firstClass">First</p>
<p>Second</p>
<p>Third</p>
<p>Forth</p>
<p>Fifth</p>
</div>
Then, cascade rules defined in “firstClass” to overwrite styling principles in “someClass”.
This is just one simple example, and I hope you understand what I’m trying to get at. Just keep in mind the concept of cascading rules and it won’t be long before things like this become second nature and automatic.
Re-structure your CSS
I am a huge fan of single line CSS style. Not only does it save up space, it is also more readable. The readability bit is debatable, though. Simply put, I find it easier to locate relevant tags if the tag names are all on the same left-hand side and I do not have to scroll so much to find what I need to change. After all, designers are only concerned with CSS selectors, not the rules that are applied to it.
Optimize Your CSS
Some time ago, I wrote an article about improving website performance using CSS optimizers. I still use CSS Optimiser up to this day. For very large CSS files it is a quick and easy way to rewrite things that may otherwise prove too time-consuming to optimize manuallyt.
Use CSS Shorthand Rules
When I was still learning CSS, I found shorthand rules to be quite daunting and confusing at times. But I strived to learn the shorthand syntax for every rule simply because I am lazy and do not want to bother typing the same thing over and over not to mention having to memorize all the rule names.
Compare the example longhand its equivalent shorthand below.
Original longhand:
#someid {
background-attachment: fixed;
background-color: #000000;
background-image: url(images/image.png);
background-repeat: no-repeat;
background-position: left bottom;
}
Shorthand version:
#someid { background: #000 url(images/image.png) no-repeat fixed left bottom; }
The folks over at SitePoint has a good introduction to the art of CSS Shorthand that I can recommend to anyone who’s willing to learn.
Server-side Compression
Server-side compression techniques have long been put to use by large scale applications for two main reasons. First, bandwidth is precious and expensive. Second, it does not require having to modify code for it to work. What it does require, however, is supported server software (or hardware). Hence the term “server-side”.
One such solution can easily be deployed on Apache servers. Once again SitePoint has written an introduction to server-side compression using Apache and mod_gzip.
The drawback to this is increased CPU load. Indeed, server-side compression is a double-edged sword, but usually the pros far outweigh the cons.
CSS Inliner Tool | MailChimp Labs
… an email campaign, you know that if your CSS is not coded inline, it is likely … CSS inline can be time consuming, and repetitive. MailChimp has a CSS …IE 7 via Automatic Updates
According to a post on IEBlog, IE 7 will be distributed via WIndows Automatic Updates. I’m confused now, because in the interview with Chris Wilson that I linked to yesterday, Chris seemed to definitely say that Microsoft won’t go that route in distributing updates. Or maybe when he said “pushing it out” he was referring to something other than Automatic Updates…?
Hmmm…Read | Permalink | Email this | Linking Blogs | Comments
How to Fix WordPress Feedburner Plugins After Converting to Google Feedburner
I ran into (yet another) Feed Count + Feedburner problem recently, shortly after writing my last article on accounting for Feedburner’s subscriber count mistakes. And since I heard from a few people who are also using the Feed Count plugin, I thought I should share this info.
The Backstory
As I’m sure all you Feedburner users out there are well aware, Google purchased Feedburner quite some time ago. But until recently, that didn’t mean much: the same people were working on the code, your information was stored in the same place and was represented the same way, and so on.
But recently Google has begun bringing Feedburner more fully into the fold. As a result, all Feedburner users are being required to convert their Feedburner accounts into Google accounts. That created quite a few headaches for lots of people (including myself) right off the bat, as it took a good week for Google to nail down my subscriber numbers with any accuracy – one day I would have thousands of subscribers, the next I might have zero, and the day following only a few hundred.
A New Problem
However, even once Google started reporting my Feedburner numbers correctly, I still had a problem: my Feed Count plugin no longer grabbed my subscription statistics. Now, this wasn’t as huge a problem as it could have been, because I had my jQuery Feeburner fix in place… but I still wanted my real subscriber stats back at some point.
After a bit of digging, I found the problem: as part of their conversion from Feedburner to “Google” Feedburner, Google changed the location of their API. Thus, any plugins that used the old Feedburner API ceased functioning once that user’s account was successfully ported to Google.
The Solution
Long-term, the best solution would be for the plugin developers to update and release new versions of their plugins. But as of now, the Feed Count plugin has not been updated – and since it hasn’t seen an update since last July, I’m not going to hold my breath on a new version. So I decided to take matters into my own hands and edit my copy of the Feed Count plugin.
Note: this solution is specific to the Feed Count plugin, but any brave souls out there could probably modify and use this information to update other plugins as well.
I opened up my copy of the Feed Count plugin file (feedcount.php) and found this function:
function mapelli_fc_get_defaults() {
return array(
'map_fc_feedurl' => '',
'map_fc_queryurl' =>'http://api.feedburner.com/awareness/1.0/GetFeedData?uri=',
'map_fc_lastcount' => 'N/A',
'map_fc_lastupdate' => 0,
'map_fc_updateinterval' => 60, // 1 h
'map_fc_error_updateinterval' => 5, // 5 min
);
}
This function mostly sets all the plugin defaults, but it also sets the “queryurl” – the website that the plugin hits to find your subscriber count information. This URL is not customizable anywhere inside WordPress, and since this URL has now changed, we’re forced to edit the plugin itself.
All I had to do was change the “map_fc_queryurl” line to read this instead:
'map_fc_queryurl' =>'https://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=',
Then I saved the plugin, uploaded it to my server, and my stats started showing up again! However, it’d still recommend putting something like this JavaScript fix in place for those random times when Feedburner drops the ball (and your subscriber count).
Note: Your stats probably won’t start showing up again instantly. You’ll have to wait for the duration of your “update interval,” which can be configured in WordPress under Settings -> Feed Count:
If you’re using a different plugin and have run into this same problem, please give this solution a try and let people know in the comments if it worked. Thanks!
A List Apart: Articles: Practical CSS Layout Tips, Tricks, & Techniques
Advanced techniques of CSS website design. … The trick takes a list and makes it display inline, or horizontally. So instead of: …Mandarin Design: Cascading Style Sheets CSS
Mandarin Web Design sample of CSS style sheet use. … For one-time or occasional use CSS Inline Style works fine. … This is inline CSS. …CSS at the Bottom
Make sure to view this page in IE to see the blank white screen problem. Current time: 06:38:23. In this example the stylesheet’s LINK tag is included at the bottom of the document …The Year In Review: 2008
Photo by yewenyi.
2008 was a great year for CSS Newbie. And in the same nostalgic spirit of CSS-Tricks, Smashing Magazine and (I’m sure) countless other web entities, I thought I’d take a minute or two to step back and reflect on what the year has brought for CSS Newbie.
Although I first purchased cssnewbie.com some time in the middle of 2007 and wrote my first “intro to CSS” article in November of last year, I didn’t officially launch the site until February 1, 2008. Thus, this article also serves as History of CSS Newbie – before 2008, there wasn’t such a website, and now there is. And thanks to you fantastic readers and commenters out there, it’s become a better and more rewarding website than I had imagined it could.
Growth
On January 1, 2008, CSS Newbie had exactly zero visitors – it seems even I was too busy recovering from my celebrating to stop by! Luckily, that trend hasn’t continued. I published my first “official” article on the site (talking about how to create book-style article introductions) on February 1st. That day I saw a huge jump in traffic… 11 visits!
By the end of the week, that one article had gained me a couple hundred visitors, and a milestone against which to work. Although the number was small, that first week’s worth of traffic meant a great deal to me. It proved, if nothing else, that maybe I wasn’t entirely crazy to think that I could put together a website talking about CSS. Maybe, just maybe, a few people would find what I had to say interesting.
That first successful article gave me the drive to write a second, and so forth until here we are at the end of 2008 and the CSS Newbie table of contents is chock full of interesting tidbits, so much so that I often find myself looking through the archive to remember how to do things I’ve forgotten! That’s one benefit of writing for CSS Newbie that I never expected.
Statistics
I’m a bit of a statistics nerd. As such, here are some interesting stats that help visualize the year’s progression.
The five most responded-to articles of the year were:
And here are the five most popular articles of the year in terms of traffic:
Progression
And where will CSS Newbie go from here? Well, I certainly hope to increase both overall usefulness and visitor levels between the end of this year and the end of 2009. But how that happens could have a lot to do with you, the reader.
To that end, I’ve started a new survey to find out what you’d like to see happen with CSS Newbie over the course of the next year. I’ve made a few suggestions for ideas that I’ve thrown around, but if you can think of anything that I should be doing that I haven’t considered, please let me know about it in the comments.
The survey:
Note: There is a poll embedded within this post, please visit the site to participate in this post’s poll.The survey is also available in the footer of every page on the site. Please take a second to let me know what you’d like to see from the site over the next year – I’ll take your suggestions into very serious consideration.
Thanks
Thank you, the reader, for making CSS Newbie what it is today, and for helping me make it what it will become in 2009. Thanks to my guest authors for the year: Scott Philips, Chris Coyier, and Aaron Webb. Thanks to Jeremy Harrington for designing the new CSS Newbie that launched at the beginning of this month. Thanks to my coworkers and friends for helping me talk through my article ideas and suggesting fantastic articles of their own. And thanks to the Twitter crowd for expanding my online and inlife communities in ways I never imagined.
Here’s to a fantastic 2008, and an even better 2009!
