thechangelog:

CSS isn’t a subject we cover too often here on The Changelog. Most often, we are talking about Sass (drink!), Compass, Stylus, Less or some other blend of “pre-processor” we, fan boys, love to cover. What we need to realize, and not forget, is that all of these solutions regardless of how awesome they are - in the end they ALL produce CSS. That’s what the browsers consume, and in the end that’s what we are writing. This will be the case for the foreseeable future.

There’s Beauty in CSS Design

Back in the day (2003), we as a design community and a community that was facinated with what could be done with CSS alone flocked to Dave Shea’s CSS Zen Garden - it showcased what was possible with CSS-based designs. That helped prove what CSS was capable of in its early days and that lead to an explosion in the use of CSS on the web.

Well, a lot has changed since 2003, and there has been massive advancement of the CSS spec, and today you can do almost anything with only CSS. As CSS use expands, so does the average CSS file size. Large websites often sport CSS files in the 15-25k range - some even bloat all the way up to a megabyte! Whoa.

So what’s CSS1K about?

CSS1K, like CSS Zen Garden, invites you to show that web developers are more inventive than ever, and that limitations can spark creativity. Fork CSS1K at GitHub, craft your own CSS style and send your submission as a pull request. If you don’t have a GitHub account, you can send in your submission via e-mail.

In your CSS file, specify the name of the style, your name and URL (such as your homepage) if you would like them to link to you. Check out the example below - by the way, Columns by Alexander Makarov is one of my favs.

/* CSS1K entry
 * "Columns" by Alexander Makarov (http://rmcreative.ru)

Rules of participation

• Submissions must consist of only CSS
• Submissions may be up to 1K (1024 bytes) minified
• Vendor prefixes are not counted to the total number of bytes – submit your code un-prefixed and they will add necessary prefixes (sounds like a PITA)
• Any external resources and images, including data URI’s, @font-face and @import’s, are forbidden
• The page does not have to look the same in every browser, but graceful degradation is encouraged
• The submitted code is licensed under the MIT License

If you have any questions, reach out to Jacob on Twitter at @CSS1K.

Good luck and happy styling.

[Project on GitHub] [Homepage]

thechangelog:

Ron DeVera reached out to us a few weeks back to let us know about a new project he’s working on at Mint Digital called AssetHat.

AssetHat is a Rails gem that hopes to make the web a little bit quicker by making front-end assets (CSS, JS and images) load faster (especially on mobile devices). It does the usual magnification and concatenation, but unlike others, AssetHat automatically takes advantage of Google’s CDN and cdnJS for loading common third-party libraries. There’s even a little switch to enable LABjs mode, so you can quickly A/B test to see whether LABjs is right for their site.

Google said it best, “Every millisecond counts. Nothing is more valuable than people’s time.” So do what you can to save your users some time and make your project faster.

Example usage

AssetHat is super-easy to set up for Rails 3 (or even Rails 2.3 with Bundler):

Before AssetHat

app/views/layouts/application.html.erb:

<%= stylesheet_link_tag 'reset', 'application', :cache => 'application' %>
<%= javascript_include_tag Rails.env.production? ?
      'http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js' :
      'jquery-1.6.0' %>
<%= javascript_include_tag 'plugin1', 'plugin2', :cache => 'plugins' %>
<%= javascript_include_tag 'application' %>

app/views/layouts/admin.html.erb:

<%= stylesheet_link_tag 'reset', 'admin', :cache => 'admin' %>
<%= javascript_include_tag Rails.env.production? ?
      'http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js' :
      'jquery-1.6.0' %>
<%= javascript_include_tag 'plugin1', 'plugin2', :cache => 'plugins' %>
<%= javascript_include_tag 'admin' %>

After AssetHat

app/views/layouts/application.html.erb:

<%= include_css :bundle => 'application' %>
<%= include_js  :jquery, :bundles => ['plugins', 'application'] %>

app/views/layouts/admin.html.erb:

<%= include_css :bundle => 'admin' %>
<%= include_js  :jquery, :bundles => ['plugins', 'admin'] %>

Use a config file to keep your layouts lightweight config/assets.yml:

css:
  bundles:
    application: ['reset', 'application']
    admin:       ['reset', 'admin']
js:
  vendors:
    jquery:
      version: 1.6.0
  bundles:
    plugins:     ['plugin1', 'plugin2']
    application: ['application']
    admin:       ['admin']

Installation

Installation and configuration is easy, read the details at their site, or check out the readme for full details.

Learn more

• Read Mint Digital’s initial blog post for AssetHat with some nice performance stats from a bunch of production sites
• Check out the readme for a walkthrough on configuring and integrating AssetHat
• Read the Rdoc’s for deeper details of how AssetHat works

[Source on GitHub] [Homepage]

So I just came across this problem in a recent project when I was using font-face to embed some fonts for a tumblr website. It worked fine in all browsers except for firefox… I tried everything to solve the problem and then turned to google and found this great article about how firefox prevents fonts from loading from another server. Since tumblr is put up on its own server I had to embed the fonts using a base64 encoding to embed the font directly into the css instead of from an outside source… annoying to say the least and a massive amount of code. You can easily get it from fontsquirrel.com for any font you upload.

A helpful article about the quirks of photoshop and why sometimes you don’t get the exact pixels you want out of an image