Zhongde Liu

This is my personal "Clipboard" of web development stuff I come across


Leave a comment

How CSS is structured at large sites

Recently some big players are describing how they are structuring their frontend (css) code. It’s about tooling, build workflow, coding styles, serving etc….

Github:
http://markdotto.com/2014/07/23/githubs-css/

Codepen:
http://codepen.io/chriscoyier/blog/codepens-css

Lonely Planet:
http://ianfeather.co.uk/css-at-lonely-planet/

Advertisements


Leave a comment

Stylesheet limits in Internet Explorer <= 9

One point on the web performance list is: “Concatinate and minify all your css into one file”. However in IE (version lower than 10), you have an internal limit regarding the stylesheet file.

These are the facts:

  • A sheet may contain up to 4095 rules
  • A sheet may @import up to 31 sheets
  • @import nesting supports up to 4 levels deep

The official statement on the MSDN blog here:  http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/internet-explorer-stylesheet-rule-selector-import-sheet-limit-maximum.aspx

If you eventually  get over these marks (and with an optimized generated css file, it is more likely) , you have to split your stylesheets into multiple files (in Production).

For example, github.com currently uses two css files for its normal website, named github.css and github2.css.

 


Leave a comment

Link: Awesome Website and Checkout process Relaunch, all responsive: Virgin America

Just stumbled upon on a great example for a successful relaunch. Regarding Visual appereance, Checkout process, general Usability and technical platform.

https://www.virginamerica.com/

The site makes fun to use, loads pretty fast and is compared to the old version a whole new type of website. (And it uses angularJs 😀 – like!)


Leave a comment

Build tools: Grunt – gulp – npm run

Grunt (http://gruntjs.com/) is the de facto standard regarding (frontend) build tools.

But there are alternatives.

Especially gulp (http://gulpjs.com/) is getting a bit of a momentum. gulp has a more “coding” mentality in contrast to the configuration heavy grunt setup.  It already has all the essential plugins (jshint, uglify, sass, less, etc…) for a sophisticated build workflow. In my opinion the coding style within the gulpfile offers  more readability than the big configuration objects  in gruntfiles.

Another way is to (“mis-“)use the “npm run” command to run scripts/commands, which are noted in the “scripts” field within the package.json file. James Halliday wrote a nice blog post about it: http://substack.net/task_automation_with_npm_run.

Of course there are the classical ways to perform a build: make, ant, rake, etc…


Leave a comment

Note: Whitespace raises jQuery error (Ajax, jQuery 1.9)

Just stumbled upon a bug/feature when migrating to jQuery 1.9.

So the case is: You are trying to convert following String:

"   <div>Hallo</div>"

into a jQuery object. Pay attention to the leading whitespace.

Prior to 1.9 you get what you would expect. With 1.9, you will get an error.  Reason is this core change, documented here http://jquery.com/upgrade-guide/1.9/#jquery-htmlstring-versus-jquery-selectorstring. As I’m not the only one with this issue, there are already several posts about it (the intention, the pros, contras…). This is the according thread in the jQuery tracker: http://bugs.jquery.com/ticket/13223 .

There is also mentioned to re-implement the old behavior.


Leave a comment

How-to: Proxy setting for “Github for Windows”

For setting the proxy you need to edit a file named .gitconfig. This file should be located in your user folder, C:\Users\[xxxxx]\.gitconfig with [xxxxx] being your windows username.

In this file you need to add following lines, adapted to your proxy:

[http] 
proxy = http://proxy.example.com:8080 

[https] 
proxy = http://proxy.example.com:8080


Leave a comment

Note: Fontpath for Compass

In the latest project using a sass/compass development environment, I had problems to get the fonts referenced correctly, after the scss had been converted to css.

But there is a (yet undocumented) config variable named “fonts_dir“, analogue to the other standard variables like css_dir, sass_dir and javascripts_dir, which compass uses in order to generate the correct path.

So add it to your config.rb and you are ready to go!


Leave a comment

Code: load handler with cached images and IE

Just had a strange case, that the load event of an image is not fired. After a short research I found the issue…

Not working code:
$('img').attr('src', 'image.jpg').load(function() {
//Do something - but it doesn't
});

Working code:
$('img').load(function() {
//Do something - it does
}).attr('src', 'image.jpg');

The thing is IE (and Opera) will load the cached image directly before your event handler is attached…

It is jQuery Notation but also applies to Vanilla JS.