CSS Sprites

Posted by & filed under Javascript, Programming, Uncategorized, Web Development.

I found a few handy resources for generating CSS sprites. Using sprites and sliding CSS “windows” it is possible to consolidate images into one single image, and then only display the portion of the main image that contains the image to display.

Why would you do all of this? HTTP Requests. Each time your browser has to make a request to the server for a resource, there are multiple steps occurring. Each of these requests is guaranteed to take a minimum about of time to happen plus the time it takes to transfer the actual data payload (in this case a image).

So in our example scenario, let’s say we have 35 images on our page and one CSS file linked in for styling the site. When a user visits the website, their browser makes one request for the actual web page, one request for the CSS file, and 35 separate requests for each image. So by creating a single CSS sprite out of the 35 images, we are effectively reducing the number of requests by 34. This will help page load time quite a bit. Also, similar techniques can be applied to other web resources like js files, and CSS files.

It’s not so much that these tools are required to do CSS sprites, but they do make creating them much easier.



How NetFlix does disaster recovery and testing with an army of monkeys

Posted by & filed under Networking.

The cloud is all about redundancy and fault-tolerance. Since no single component can guarantee 100% uptime (and even the most expensive hardware eventually fails), we have to design a cloud architecture where individual components can fail without affecting the availability of the entire system. In effect, we have to be stronger than our weakest link. We can use techniques like graceful degradation on dependency failures, as well as node-, rack-, datacenter/availability-zone and even regionally-redundant deployments. But just designing a fault tolerant architecture is not enough. We have to constantly test our ability to actually survive these “once in a blue moon” failures.

Imagine getting a flat tire. Even if you have a spare tire in your trunk, do you know if it is inflated? Do you have the tools to change it? And, most importantly, do you remember how to do it right? One way to make sure you can deal with a flat tire on the freeway, in the rain, in the middle of the night is to poke a hole in your tire once a week in your driveway on a Sunday afternoon and go through the drill of replacing it. This is expensive and time-consuming in the real world, but can be (almost) free and automated in the cloud.

This was our philosophy when we built Chaos Monkey, a tool that randomly disables our production instances to make sure we can survive this common type of failure without any customer impact. The name comes from the idea of unleashing a wild monkey with a weapon in your data center (or cloud region) to randomly shoot down instances and chew through cables — all the while we continue serving our customers without interruption. By running Chaos Monkey in the middle of a business day, in a carefully monitored environment with engineers standing by to address any problems, we can still learn the lessons about the weaknesses of our system, and build automatic recovery mechanisms to deal with them. So next time an instance fails at 3 am on a Sunday, we won’t even notice.


MW3 Custom Class Fun

Posted by & filed under Uncategorized.

There is a neat easter egg in MW3 that lets you insert stuff into your class names. This also applies to clan tags, but I’m not really a fan of modding clan tags, so you can figure that out yourself.

Insert the following into your class name:

ÁA - A Button
ÁB - B Button
ÁC - X Button
ÁD - Y Button
ÁE - LB Button
ÁF - RB Button
ÁN - Start Button
ÁO - Back Button
ÁP - LS Stick
ÁQ - RS Stick
ÁR - LT Button
ÁS - RT Button
ÁT - Upwards DPad Arrow
ÁU - Downwards DPad Arrow
ÁV - Left DPad Arrow
ÁW - Right DPad Arrow

You can also add pretty colors:

^1 – Red
^2 – Green
^3 – Yellow
^4 – Blue
^5 – Light Blue
^6 – Pink
^7 – White
^0 – Black

Both of these items are accomplished by logging into Elite and editing your class names and sending to the game.

HAM Radio Licensing

Posted by & filed under Uncategorized.

Amateur Radio enthusiasts know that there’s a lot of knowledge and training that go into being a successful Amateur Radio operators (hams). Before you can get on the air, you need to be licensed. The rules for earning an Amateur Radio license vary depending on which country you live in. You need to know the rules to operate legally. You also need to know how to operate safely and you’ll need some knowledge and training to operate successfully. Getting licensed is a long standing tradition for hams. US licenses are good for 10 years before renewal, and anyone may hold one except a representative of a foreign government.


GNS3 – Graphican Network Simulator

Posted by & filed under Networking, Uncategorized.

GNS3 is an excellent complementary tool to real labs for network engineers, administrators and people wanting to study for certifications such as Cisco CCNA, CCNP, CCIP and CCIE as well as Juniper JNCIA, JNCIS and JNCIE.

It can also be used to experiment features of Cisco IOS, Juniper JunOS or to check configurations that need to be deployed later on real routers.


HeadJS — The only script in your

Posted by & filed under Programming.

Load scripts like images. Use HTML5 and CSS3 safely. Target CSS for different screens, paths, states and browsers. Make it the only script in your HEAD. A concise solution to universal issues.

With Head JS your scripts load like images – completely separated from the page rendering process. The page is ready sooner. Always. This is guaranteed even with a single combined JavaScript file.

Non-blocking loading is the key to fast pages. Moreover Head JS loads scripts in parallel no matter how many of them and what the browser is. The speed difference can be dramatic especially on the initial page load when the scripts are not yet in cache. It’s your crucial first impression.

Pages no longer “hang” and there is less or zero “flashing” between pages. User only cares when the page is ready. Unfortunately current networking tools don’t highlight this crucial point. They focus on the overall loading of assets instead.

Head JS can make your pages load 100% or even 400% faster. It can make the largest impact on client side optimization.


WordPress theme framework

Posted by & filed under PHP, Web Development.

Roots is a starting WordPress theme made for developers that’s based on HTML5 Boilerplate, Blueprint CSS (or 960.gs) and Starkers that will help you rapidly create brochure sites and blogs. It has built in support for HTML5 Boilerplate, Twitter’s Blueprint CSS, and 960Grid, along with a whole host of handy features.


IPv6 Cheat Sheet

Posted by & filed under Networking.

A handy cheat sheet for identifying IPv6 CIDR and showing total hosts in network.

      ||| |||| |||| |||| |||| |||| ||||
      ||| |||| |||| |||| |||| |||| |||128--1
      ||| |||| |||| |||| |||| |||| ||124---16
      ||| |||| |||| |||| |||| |||| |120----256
      ||| |||| |||| |||| |||| |||| 116-----4,096
      ||| |||| |||| |||| |||| |||112-------65,536
      ||| |||| |||| |||| |||| ||108--------1,048,576
      ||| |||| |||| |||| |||| |104---------16,777,216
      ||| |||| |||| |||| |||| 100----------268,435,456
      ||| |||| |||| |||| |||96-------------4,294,967,296
      ||| |||| |||| |||| ||92--------------68,719,476,736
      ||| |||| |||| |||| |88---------------1,099,511,627,776
      ||| |||| |||| |||| 84----------------17,592,186,044,416
      ||| |||| |||| |||80------------------281,474,976,710,656
      ||| |||| |||| ||76-------------------4,503,599,627,370,496
      ||| |||| |||| |72--------------------72,057,594,037,927,936
      ||| |||| |||| 68---------------------1,152,921,504,606,846,976
      ||| |||| |||64-----------------------18,446,744,073,709,551,616
      ||| |||| ||60------------------------295,147,905,179,352,825,856
      ||| |||| |56-------------------------4,722,366,482,869,645,213,696
      ||| |||| 52--------------------------75,557,863,725,914,323,419,136
      ||| |||48----------------------------1,208,925,819,614,629,174,706,176
      ||| ||44-----------------------------19,342,813,113,834,066,795,298,816
      ||| |40------------------------------309,485,009,821,345,068,724,781,056
      ||| 36-------------------------------4,951,760,157,141,521,099,596,496,896

Special use ranges

::/0 Default route
::/128 Unspecified
::1/128 Loopback
::/96 IPv4-compatible*
::FFFF:0:0/96 IPv4-mapped
2001::/32 Teredo
2001:DB8::/32 Documentation
2002::/16 6to4
FC00::/7 Unique local
FE80::/10 Link-local unicast
FEC0::/10 Site-local unicast*
FF00::/8 Multicast

Additionally, there is the IPv6 PDF cheat sheet with a lot more useful information here. Doc found on the excellent packetlife.com.

Gliffy — Online diagrams — visio style

Posted by & filed under Networking.

With a tool that makes it easy to create, share, and collaborate on a wide range of diagrams, Gliffy users can communicate more clearly, boost innovation, improve decisions, and work more effectively.

But why the name Gliffy?
It comes from the word glyph, a symbol or character that imparts information non-verbally. Gliffy is an online diagramming service that helps users communicate with a combination of shapes, text, and lines.

The best part? You can try it right away with zero registration or other annoyances.


Raphaël javascript library

Posted by & filed under Uncategorized.

Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.

Raphaël [‘ræfeɪəl] uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object you create is also a DOM object, so you can attach JavaScript event handlers or modify them later. Raphaël’s goal is to provide an adapter that will make drawing vector art compatible cross-browser and easy.

Raphaël currently supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.