Rogie's Blog

Rogie is a hyper social blogging illustrator and designer.

  1. $ alias server='open http://localhost:1337 && python -m SimpleHTTPServer 1337'  
    $ cd //Enter your Directory here  
    $ server

    On the Fly Local OS X Server with Python

    So simple,  yet so powerful. Declare a local server in a directory and open in on the fly with this command. Simply use the code above to declare an alias to the command “server” and then open Terminal and change to the directory you want. Then start your server with that directory by typing server the following at the prompt:

    Oh, and another thing. That alias command only applies to the current terminal session, so if you close terminal, that server command is dead. If you want to keep that server command around for all times, do the following, edit your bash profile by entering nano ~/.bash_profile and then adding the line alias server='open http://localhost:1337 && python -m SimpleHTTPServer 1337' and saving it.

    Thanks, Anthony Garand for the tip. * P.S. You don’t type the “$”, silly.

  2. '➜'.charCodeAt(0).toString(16);
//outputs '279c' (in a browser console)

    Find a glyph’s CSS unicode

    I find myself in situations where I’m using CSS generated content to add a glyph to a tag using :after to add more meaning, say a check mark for a list of features, or an arrow to a next link. Most times, I’ll find a glyph using Jesse Gardner’s fantastic SymbolAssist or by simply pressing Command-Option-T ⌘⌥T on my Mac to pull up the characters palette.

    Ok, now enter the scenario. Imagine you’ve got some CSS like so, but you’d like to use the standard unicode for that character:

    a.next{
	... //styles for this link
}
a.next:after{
	content: "➜";
}

    First, use a browser console and run the aforementioned snippet. The output for the arrow glyph using Firebug (my console of choice) is: 279c. I’ll simply insert that unicode into the CSS like so:

    a.next{
	... //styles for this link
}
a.next:after{
	content: "\279c"; /*Hexadecimal unicode from the javascript snippet
}

    If you’d like to find the unicode for any other character, simply swap the character you want for the arrow above, like so:

    '⌘'.charCodeAt(0).toString(16);
//outputs '2318' (in a browser console)

    That’s it. Now you’ve taken a character and converted it to unicode. Easy peezy.

  3. <html>
	<head> … </head>	
	<body>
		<script>
			var b = document.documentElement;
		  	b.setAttribute('data-useragent',  navigator.userAgent);
		  	b.setAttribute('data-platform', navigator.platform );
		</script>
		…
	</body>
</html>

    An HTML5 boilerplate addon for CSS browser nitpicks

    Gone are the days of CSS hacks for browsers…wait, no they’re not. Those days aren’t gone. There are still little rendering hiccups in both major and minor versions of Safari, Chrome, Firefox, Internet Explorer. The hacks to target those newer browsers are few and far between.

    Just recently, I ran across a radial gradient bug found only in Chrome 13.0x. Good luck searching for a CSS filter to apply a style purely for that browser. Good luck trying to use Modernizr to detect the glitch in gradient rendering. This was a specific bug to a specific browser. What I wanted was a Modernizr-ish way of using CSS to swap out an image for a radial gradient, but only for that version of Chrome. I’m sure you’re feeling me here. I’m sure you’ve hit some similar snags.

    The thing is, some of all the old hacks work just fine on older browsers. IE6/7 hacks, blah blah. I found it harder to find hacks for the newer browser because, yes, you guessed it, they typically are better, so less vulnerabilities, less hacks. Hence, I came up with aforementioned snippet of code to help me with newer browsers.

    Enter the code. What you need to know about the snippet of code is that it produces output like this:

    <html 
	data-useragent='Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/13.0.782.112 Safari/535.1' 
	data-platform='MacIntel'>

    Or for IE9, code like this:

    <html 
	data-useragent='Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)'
	data-platform='Win32'>
	...
</html>

    Oh, but it gets more interesting. Now we can target iPads easily. How so?

    <html 
	data-useragent='Mozilla/5.0(iPad; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B314 Safari/531.21.10'
	data-platform='iPad'>
	...
</html>

    Now, voila! I have an attribute. And guess what? I can use CSS attribute selectors to style something. Let’s look at a snippet of CSS that will fix that Chrome issue I had.

    html[data-useragent*='Chrome/13.0'] .nav{
	background:url(img/radial_grad.png) center bottom no-repeat;
}

    Using the *= wildcard attribute selector, I can now match any portion of the string, in this case, I wanted to target the useragent of Chrome 13.0x. If I wanted to apply the fix only to Chrome 13.0x browsers on Windows, I’d simply use a rule like html[data-useragent*='Chrome/13.0'][data-platform='Win32']. Want to target iPad? Easy business, friend. Just use html[data-platform='iPad']. Fun. Fun. Fun. Looking forward to the weekend :P

    And that’s it! Feel free to use this code however you see fit. Let me know if you see a better way this could be implemented :)