PugetWorks.com

Resources from Mobile Boilerplate

Adam — Tue, 17 Apr 2012 04:59:28 +0000

I’ve been playing around with Mobile Boilerplate, because the HTML5 Boilerplate project has been an excellent resource and I’m always looking for ways to make developing mobile websites easier on myself (The next redesign of the Pugetworks site is going to have to reflect a mobile-first approach, but I want to give our fancy portfolio a short stay of execution, given all the work involved in setting it up. Have you tried it yet?) Overall, Mobile Boilerplate is a good setup, and I’ve decided I’ll use it on an upcoming personal project. In the meantime, their wiki pointed me to a couple of excellent resources I wanted to turn around and recommend to you:

The Idiot’s Guide to viewport and pixel is an excellent, no-nonsense explanation of the challenges presented by mobile viewport and media queries, and the current working solutions to them. It explains why MB is set up to the way it is, but it’s 100% generalizable to your web site whether you’re using the templates or not.
Webkit Remote Debugging is something I have not tried yet, but it promises to allow you to run the Web Inspector tool from Safari on web pages displayed on another browser, even on another computer. This includes mobile devices like the iPhone, if you do a couple tweaks in xcode. Given the difficulty of developing mobile apps without a good built-in debugger, this could change everything.

Making Gradients Along a Path in Photoshop and Illustrator

Adam — Sun, 08 Apr 2012 04:23:26 +0000

In Photoshop

It’s easy enough to apply a simple gradient to a shape or vector path in Photoshop. You can use the gradient tool, or apply a blending layer. You can apply linear gradients, radial gradients, simple gradients and more complicated ones. You can also apply a gradient to the interior of a shape, but it’s slightly less obvious how to do this. Here’s the easiest way I know of.

Begin with your shape, in its own layer. Select that layer in the layers panel.
Apply a stroke: Right click on the layer, select Blending Options… then Stroke. Another way to do this: in the file menu, select Layer ►Layer Style ►Stroke…
In the Stroke dialog, apply the gradient by selecting Position: Inside, Fill Type: Gradient, and (the most important part) Style: Shape Burst. Choose your own gradient, and adjust the size of the stroke to suit your needs.

In Illustrator

The process for making these path gradients in Illustrator is more complicated, but also more versatile. It involves making the gradient out of a blend, turning that blend into a brush, and applying the brush to just about anything you want.

Make a blend. The blend will be your gradient, so adjust it accordingly. Also, the width of the blend will become the width of the stroke when you’re done.
Select your blend, and drag it into the Brushes palette. When you do, the New Brush dialog pops up.

Select “Art Brush” then click OK.
In the next dialog, make sure “Stretch to Fit Stroke Length” is selected, then click OK. A new brush has been created.

Now, whenever you select a stroke you want your gradient applied to, just click the new brush you created and it will be made for you.

What is Skeuomorphic Design and When to Use It

Adam — Thu, 05 Apr 2012 00:48:51 +0000

Design is full of trends and rebellions against those trends. Some technique, element or outlook becomes fashionable, then a backlash forms seemingly out of nowhere proscribing it. I find it difficult to keep up on trends, and I try to base my process on my own experience rather than the mode of the times. It’s hard enough coming up with the best design for your requirements without ruling anything out ex facie . However, there are some popular design trends that just don’t suit the needs they’re commonly applied to, and skeuomorphs are a good example of this.

What are Skeuomorphs?

Skeuomorphs are design elements that serve no purpose, but stick around because they used to be useful. Software products that do something analogous to an older physical product often contain skeuomorphs: for example, circular knobs to change the volume in a music player, or pages that have to be flipped in a document reader. You don’t need to flip knobs or turn pages in a digital world, and it’s quite a bit of extra effort to implement these special controls.

While cute, these elements transfer the limitations of the analog world to the digital one, where they’re unnecessary and sometimes even counterproductive. Don’t make me turn pages for no reason!

Why use them?

So why use them? Apple uses skeuomorphs in apps like iCal, Find My Friends, even on their standard virtual keyboard. They claim these artifacts evoke an emotional response in users and immediately orients them to how to use a product.

While it is usually difficult to argue with Apple’s design rationale, I’m suspicious of this argument simply because I see no research to support it, and the history of user interface design provides plenty of anecdotal examples to the contrary¹.

I suppose the real reason for skeuomorphism on first-party iOS applications is simply that they look really, really cool, and even if they don’t actually make an application more intuitive to use, they make it more approachable. These elements don’t contribute to usability, they contribute to marketability. In other words, they help inform you about an app does rather than how to do it.

But I can think of at least one case when the use of skeuomorphism adds genuine value to a user’s experience: aiding in the transition between a physical process and an analogous digital process.

For example, a fine artist used to blending colors on a palette may not at first understand the discrete ” RGB color picker” model that is the standard in graphic applications like Photoshop. Instead, they may want to select primary colors (or a set of predefined colors mapping to common paints) and mix them together to get the hue they’re looking for. This works at first, but it’s inefficient and unnecessary, and as they become familiar with the application they’ll probably outgrow it. So, why not let them blend colors together on a palette, but also let them select that color, browse through variations of it (a slightly warmer tone, a slightly brighter one, etc.) and then save the color for later use. In other words, use skeuomorphs to help the user approach the application, but do not limit functionality according to any artificial constraints.

Note that the transition between analog and digital processes could go both ways. You could also use skeuomorphic design to help people on a computer to understand how to use physical tools. For example, on a GPS-enabled phone, you can easily locate North with (or even without) the push of a button. On a manual compass, it’s slightly more involved — let the magnetic arrow settle, align directions on the housing to the arrow, and change your orientation relative to the compass. But how about a GPS-enabled application that teaches you how to use a manual compass by retaining the artificial limitations and forcing them into the interface?

I’m skeptical of the use of skeuomorphic design when it is claimed to benefit the usability of a design. I generally believe skeuomorphs serve a mostly decorative purpose and while that’s not necessarily an argument against them, form should always follow function rather than dictate it.

¹I’d even wager to guess that the trend towards skeuomorphism is cyclical, rising in prominence as new platforms emerge, and waning as these platforms become more familiar. See for example early desktop computer interfaces, which ultimately resolved into the WIMP model, then early web site designs, from which emerged the standard web site interface we’re all pretty familiar with. No doubt the standard interface for touch-based mobile applications is still being shaken out.

Minimum touchable area on mobile devices

Adam — Thu, 23 Feb 2012 22:44:00 +0000

A recent article on Smashing Magazine discussed the challenge of fitting buttons on mobile devices to the size of a user’s fingertip. It’s a useful article, and I don’t take issue with its overall message, but it did remind me of something I’d been meaning to write about for some time.

A lot of guides for mobile app design quote the minimum touchable area (which you may read as “button size”) as 44px. This number comes from the original iPhone Human Interface Guidelines document from the 1st generation iPhone. The Smashing Magazine article also quotes sizes given by Microsoft and Nokia in their own guidelines (34px and 28px, respectively), then goes on to dismiss them as “not consistent with each other, nor … consistent with the actual size of the human finger.”

The thing is, listing different minimum pixel sizes doesn’t necessarily mean the guidelines are inconsistent. On different devices, the minimum touchable area will be different, and should be. When deciding on a minimal button size, the important thing to consider is the pixel density of the device’s screen in Dots Per Inch (DPI) or Pixels Per Inch (PPI), which are the same thing as far as I’m aware. The pixel density is the number of pixels over a linear diagonal inch (yes, on the diagonal, rather than on a side). So, on devices that crowd more pixels into an inch, the density will be higher, and the fingertip will touch more pixels when it presses the screen.

For example, older iPhones have a minimum touchable area of 44px, and a resolution of 320×480 pixels. iPhones with the Retina display have twice the resolution (640×960 pixels) but the same physical screen size, thus they have twice the pixel density. As you would expect, the minimum touchable area on Retina displays is twice that of older displays, or 88px.

The message here is that if you develop applications for multiple mobile devices (as many of us increasingly do), you can’t just memorize a single “best” button size and use that for every screen. You’ve got to base it off the density of the screen in order to keep it consistent with what actually matters, which is the size of the fingertip.

How to figure out the minimum button size on any mobile device

We assume an average fingertip of 1cm. This is a the width of a hefty finger, or about the size of an average thumb.

If you know the resolution (in DPI or PPI) of your screen (which should be available on the manufacturer’s website) you can easily estimate the size of that fingertip on your screen with this equation:

Radius of minimum touchable pixel area = (PPI / 1.414) / 2.54)

If you don’t know the DPI/PPI of your device, you can easily figure it out using the Pythagorean Theorum.

I took the liberty of figuring out the minimum button size for a number of popular mobile devices. This list is already a bit out of date, and will certainly be even moreso by the time you’re reading this, but the methodology should still apply even in your futuristic era, dear reader.

Common fingertip sizes on different devices (in px)

45iPhone 4G
74Motorola Droid
71Google Nexus One
65Samsung Galaxy S
60HTC Inspire
58Samsung Infuse
45iPhone 3G
37iPad

Phone	DPI	Size of
HTC Arrive	259	72px
HTC Desire	252	70px x 70px
HTC Evo	217	60px x 60px
HTC Inspire	216	60px x 60px
HTC Sensation	256	71px x 71px
HTC Thunderbolt	217	60px x 60px
Google Nexus One	254	71px x 71px
iPhone 3G	163	45px x 45px
iPhone 4G	326	91px x 91px
iPad	132	37px x 37px
Motorola Defy	264	73px x 73px
Motorola Droid	265	74px x 74px
Motorola Droid Incredible	252	70px x 70px
Samsung Infuse	207	58px x 58px
Samsung Galaxy S	233	65px x 65px
Samsung Galaxy S II	219	61px x 61px

Django Tips: FileField and uploadto

Bill — Wed, 22 Feb 2012 23:18:14 +0000

The following tip, should help in understanding how the FileField handles the path and url for a file referenced in the database.

The Model Object

The FileField model in Django is used to store files in Django. The file itself is not stored in the database but on the filesystem, with a reference to the file location saved in the database. Once saved, the file can be easily accessed with 2 functions:

document.path – returns the absolute location to the file in relation to the filesystem
document.url – returns the absolute location to the file to be used in a web browser

Settings

The Django docs reference 2 settings variables that should be set:

MEDIA_ROOT – Absolute path to the directory that holds media…
MEDIA_URL – URL that handles the media served from MEDIA_ROOT

Now, I don’t like to expose my filesystem structure to the internet, so I set MEDIA_URL to a specific directory. Then use apache (or a dedicated url configuration) to serve the files. For example:

MEDIA_URL='/media'

I also like to isolate my media so that there can be no conflicts, so I use 2 settings variable to store the media root:

MEDIA_ROOT = os.path.join( os.path.dirname(__file__), 'media/').replace('\\','/')
MODEL_DOC_ROOT = os.path.join( 'model', 'documents' ).replace('\\','/')

The url configuration is:

( r'^model/documents/(?P.*)$', 'django.views.static.serve',
        { 'document_root': '%s/%s' % ( settings.MEDIA_ROOT, settings.MODEL_DOC_ROOT ) } ),

uploadto

Default

The Django docs for FileField say:

A local filesystem path that will be appended to your MEDIA_ROOT setting to determine the value of the url attribute.

This is important, because if you include the complete path, then document.path will be correct, but document.url will have the complete filesystem path in the url…ack!

As a function

The Django docs also say:

This may also be a callable, such as a function, which will be called to obtain the upload path, including the filename. This callable must be able to accept two arguments, and return a Unix-style path (with forward slashes) to be passed along to the storage system.

If I expect many files to be uploaded, it is cleaner to split them into subdirectories. My function turned out like the following:

def doc_location( instance, filename ):
    root_path = path.join( settings.MODEL_DOC_ROOT, instance.name.slug ).replace('\\','/')
    full_path = settings.MEDIA_ROOT + path.join( '/', root_path ).replace('\\','/')
    
    if not path.exists( full_path ):
        mkdir( full_path )

    return path.join( root_path, filename ).replace('\\','/')

Obscure Pitfalls

The above works quite well…. but what the docs don’t say is:

If MODEL_DOC_ROOT starts with ‘/’ then MEDIA_ROOT is NOT appended as indicated the docs!
In the doc_location function, if settings.MEDIA_ROOT is included in path.join it doesn’t get added!?

Android Thread Handling

Paulin — Wed, 12 Oct 2011 14:39:01 +0000

Almost every Android application has two parts. On one side is the user interface that the user controls and views the information with. On the other side is a network component for talking to a server or updating its information. When you write an Android application you are always given control of the thread that lets you change the user interface. But, this bit of software processing is only for updating the user interface. Sure you can use it to make network calls but, this is a big “no no”. The problem is that the Android application needs to be able to use the UI Thread to make updates, so if you send it off on an errand to retrieve some data from a server, then the application has no way to update the controls. So essentially the party stops and waits until the network call is complete. From a users perspective this is awful. They pushed a button, and now… nothing. Then suddenly everything is back.

In my experience its find to start creating the application this way but, before you can release it you will need to split the network calls into a separate thread.

This article is about doing just that.

Step 1. Isolate your network calls with a thread call.

Its assumed at this point that you already have an Android app that is making network calls. So first go through your code and surround all of them with a block of code that looks like this.

Essentially change this

makeNetworkCall();

into this

new Thread(new Runnable() {
   @Override
   public void run() {
      makeNetworkCall();
   }
}).start();

When you do this, what you are is spinning off a new thread to run out and do the waiting work. The new problem is, what happens when this new thread is done?

Step 2. The Handler

Behind the scenes is a Java class call the Handler.

This little class can be used build a sort of callback in your main UI Thread so the new threads will have some way to notify it when they are done. To use it add this bit of code to your Activity class.

private Handler handler = new Handler() {
   @Override
   public void handleMessage(Message msg) {
      updateTheUI(); //This method is for whatever needs to happen after the network call is complete
   }
};

Now anytime you want to actually make a call back to your UI Thread you will simply have to make this call.

handler.sendEmptyMessage(0);

That is the basics but, it leaves a big question. What if I want to send more information than just update?

Step 3. Smarter Messages

If you want to send a better message than just update, you need to figure out how many types of messages you want and what they should be. They have to be integer values so it would make the most sense to create a bunch of constants in the class to represent these calls. For instance…

private static final int REDRAW = 42;

You will then need to modify your handler to look for this particular code.

private Handler handler = new Handler() {
   @Override
   public void handleMessage(Message msg) {
      if(msg.what == REDRAW) {
         updateTheUI(); //This method is for whatever needs to happen after the network call is         	
      }
   }
};

Finally, to call this special method you will need to modify your handler calling code to look like this.

handler.sendEmptyMessage(REDRAW);

In conclusion

Use a handler when you want to spin off new threads too keep the UI Experience responsive. If you have lots of threads going, then create some custom callback messages. This will make all of your apps feel instantly responsive.

Part One: Compass and Sass

Jolovic — Sat, 08 Oct 2011 17:39:13 +0000

Problem

As a Ruby on Rails developer, you have a lots of choices for creating visually wonderful websites. And with the introduction of Sass in Rails 3.1, CSS has become easier to code then ever. But, say, your Rails app grows and with it so does Sass and CSS. With such growth, your files expand. You begin distributing Sass and CSS code to different files, files such as header, footer, content, but, all this becomes a messy business. Get the picture? What if you could consolidate each file to, say, just a file or two? Well, with Compass and Sass, you can!

This article deals with the introduction and installation of Compass and Sass and their basic features.

Solution with Compass and Sass

Compass is a generic-framework that heavily uses Sass to generate CSS output. Sass, on the other hand, is a metalanguage that implements programming functions such as “nested rules, variables, mixins, selector inheritance, and more”. Compass and Sass are tightly coupled and are marriage in heaven for web designers: the two eliminate redundancy if you were to code everything in CSS. And, if you are currently implementing CSS3, then you’ll love Compass and Sass. Compass has many great CSS3 functions, such as box-shadow, that saves you so much time typing vendor prefixes.

Compass and Sass Features

Top Level
1. CSS Rest
2. Basic Element Styling
3. Basic Structural Rules
4. Rules for Browser Inconsistencies
Form and Table Styling
Typography
CSS Grid

Installing

For this example, I am using iMac and its Terminal to generate necessary files and move around file structure. My Ruby and Rails are run on RVM.

With the RVM installed on your computer (and I hope you have RVM installed on your system, if not, take a look at the RVM site for the installation guid), initiate the following command;

gem install compass

However if you are not using RVM, initiate the following command;

sudo gem install compass

Now make sure compass is installed:

compass version

If all went well, you should see compass’s version number as well as its credits.

Creating a Compass Project

To create a Compass project, it’s very simple.

compass create /path/to/project --using blueprint

Notice at the end of the command, I am using the option flag --using and blueprint as the CSS framework for the project. I could have left out both of these and would have ended with the project itself. But I like blueprint, so I am going to leave it the way it is. Oh, and if you wish to have something other then the blueprint, you can. Just make sure you have the right type of framework compatible with Compass. Here are a few for your creative juices. However, it isn’t necessary to have any frameworks. Compass has it’s own CSS library too!

This command also spits out initial file structure Compass has created for you, and it also tell you to place the last part of this message, which is the stylesheets location, in your index.html page. Do that and you are ready to move on to a final step before getting into the application itself. Here is my stylesheets code:

   href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css"
   href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css"
   href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css"

During this final step is make sure that Compass watches for any changes in your files. In this case, files that end with .scss or .sass. These files will then be converted to CSS (generated into CSS) as the final output! Wow. That’s going to be a lot of CSS! Yes, but it will be a compressed CSS that’s much faster for browser rendering. To do so, issue the following:

compass watch /path/to/project

That’s it! From here onwards, all we need to do is get into one of those .sass or .scss files and start coding.

Next Article Coming Soon

Software Application Pills

Paulin — Mon, 12 Sep 2011 21:13:39 +0000

A friend of mine once pointed out that when you are creating software, a very good way to look at it is “how dependent will your users be on your software?”. Then in his usual clever way, he related it to pills. Well, not pills so much but, pill like items. In this regards how do you want to package the software for easy consumption? How often do you want people to use it? How hard do you want it to be for your clients to walk away?

It turns out that his metaphor splits nicely into 4 categories; candy, vitamins, medicine and heart meds.

Candy

At the candy level you are talking about fun software. You are looking to have a huge base of people that might try this out on an impulse. It’s right there at the check out stand. You don’t really need it, you could walk away. But, somehow candy keeps on selling. It’s a treat, it’s fun, it’s colorful, playful, and something new. There are lots of apps like this. The whole game industry is built around candy apps. In no way, shape, or form do I need to be playing; minecraft, angry birds, or any of these other huge distractions. But, it is great amusement and enjoyable. Thus… candy.

Do notice that the price point and volume have to reflect this. I don’t buy designer candy. I’m not even sure if that exist. Candy is cheap, but it makes up for that in volume. Also think about the life cycle of your relationship with candy. It’s short, maybe you come back for that brand of candy but, it isn’t something you half to have.

Vitamins

Next come the vitamins. These are like nuggets of hope and prevention all wrapped into one easy to consume package. At the root, why do you take vitamins? It’s a type of insurance right? It keeps you from getting sick, or helps you get stronger. These are your anti-virus software, your backup software. They are a little investment of time now for a lot less problems later.

Now also think about the volume of these sales. People take vitamins regularly. Well… sort of. They don’t have to take them so sometimes you skip, or you come back to it later. But, the point is to do something regularly. It is more expensive than candy but, you don’t eat a bunch of vitamins like you would candy. The same goes for software. You only need a couple of these apps. You probably don’t try out anti-virus software packages like you would games. You pick one and stick with it. Same sort of mentality.

Medicine

You are even more dependent on medicines than vitamins. You might choose to not take a vitamin but you feel foolish not taking your medicine. There is software like this as well. Its core to your business. Software that keeps things moving. You could get rid of it but, it would be a bad idea and you would need to find an equivalent. This is software you don’t want to ignore.

Heart Meds

Finally there are heart meds. These are a type of medicine you have to take every day or you might die. That makes them very important to you. These are expensive, you plan around them, you budget for them, you make sure that at all cost this is available. Some software is like this as well. In many industries there is that one vendor or programmer that the entire venture hinges on. This is what is most important to you. This isn’t the same as an off the shelf equivalent, but more like a custom software package that is integrated into the company. The point is dependency. With a heart med type software your users must have it. Usually these are older pieces of software that are well wedged into the system. Think about salesforce applications or business process applications.

Conclusion

So when you are thinking about creating software, it might help to think about how dependent you want your users to be. Do you want the high volume transient sales of candy, or the low volume pricey heart meds. You need to price and plan for this accordingly. People don’t buy super expensive candy. So why would you make a game to sell for $100?

Also consider that with this comes the development cost and the cost to get these introduced to new customers. For instance, I bet it is much easier to make and sell candy than it is to sell designer drugs. It’s just a hunch.

VMWare and Ubuntu High Load issues

Bill — Fri, 22 Jul 2011 05:46:18 +0000

Intro

Recently I was involved in moving a large website from Slicehost to an ASP (Application Service Provider) closer to the client. Everything went well, until DNS was updated. Load on the server was high all the time and would increase to a point where web pages wouldn’t be served any more.

Comparison

Slicehost and the ASP provided essentially the same server setup, as per our request:

	Slicehost	ASP
# CPUs	4	4
Ram	3 gig	3 gig
OS	Ubuntu Lucid	Debian 6.0
VM	Xen	VMWare ESX

The website contains over 50 gig of images with sizes up to 1.5 meg. All the pages are dynamically created with PHP connected to mySQL. There is a lightly used Ruby app also running via mod_passenger. On an hourly basis a php script is run to fetch an XML file which is then parsed and imported into the database. None of this is very complicated, and there are numerous points of optimization that could be done.

Statistics

After the move, the server load would range between 6 and 25. Once the server hit 15, the websites would become start to become unavailable. But ‘top’ was only showing around 20% overall CPU usage!

So I started toying with the standard stat programs:

# mpstat 1 20
Linux 2.6.32-5-686 (pmm) 	07/13/2011 	_i686_	(4 CPU)
01:21:45 PM  CPU  %usr %nice  %sys %iowait %irq %soft %steal %guest %idle
01:21:46 PM  all  0.27  0.00  0.53  72.27  0.00  0.00  0.00   0.00  26.93
01:21:47 PM  all  0.73  0.00  0.49  72.37  0.00  0.00  0.00   0.00  26.41
01:21:48 PM  all  4.49  0.00  0.47  31.68  0.00  0.00  0.00   0.00  63.36
01:21:49 PM  all  8.15  0.00  0.99  42.22  0.00  0.25  0.00   0.00  48.40
01:21:50 PM  all 11.86  0.00  0.77  41.49  0.00  0.26  0.00   0.00  45.62
01:21:51 PM  all  7.07  0.00  0.25  38.38  0.00  0.00  0.00   0.00  54.29
01:21:52 PM  all  6.93  0.00  0.80  51.20  0.00  0.00  0.00   0.00  41.07
01:21:53 PM  all  6.83  0.00  0.68  35.54  0.00  0.00  0.00   0.00  56.95
Average:     all  8.94  0.00  0.57  41.86  0.01  0.04  0.00   0.00  48.57

#w
13:22:05 up 48 days, 12:43,  2 users,  load average: 12.00, 11.50, 10.10

CPU %usage from mpstat matched what top was indicating, but the %iowait was very high. To me, this means the processors are waiting for data to work on.

# iostat (edited)
Device: rrqm/s    wrqm/s     r/s       w/s     rsec/s    wsec/s  avgrq-sz  avgqu-sz     await     svctm     %util
sda      0.00     25.00      0.00     10.00      0.00    280.00     28.00      0.04      4.40      1.20      1.20
sda      0.00      0.00      1.00      0.00      8.00      0.00      8.00      0.00      4.00      4.00      0.40
sda      0.00     20.00      3.00      9.00     72.00    232.00     25.33      0.06      5.33      2.00      2.40
sda      0.00      0.00      0.00      0.00      0.00      0.00      0.00      0.00      0.00      0.00      0.00
sda      0.00      0.00      1.00      0.00      8.00      0.00      8.00      0.01      8.00      8.00      0.80
--- import starts ---
sda      1.00   1216.00     11.00    135.00    984.00  10808.00     80.77     20.06    137.37      2.93     42.80
sda      0.00    137.00     65.00    973.00   1168.00   8880.00      9.68      0.95      0.92      0.76     79.20
sda      0.00    148.00     81.00   1414.00    704.00  12496.00      8.83      0.93      0.62      0.55     82.00
sda      1.00    165.00     42.00   1468.00    432.00  13064.00      8.94      1.04      0.69      0.55     83.20
sda      0.00    160.00     24.00   1125.00    192.00  13136.00     11.60      0.84      0.73      0.69     78.80
sda      0.00    148.00     56.00   1571.00    448.00  13752.00      8.73      0.71      0.44      0.44     70.80
sda      0.00    172.00     43.00   1327.00    376.00  11992.00      9.03      0.79      0.58      0.56     76.80
sda      0.00    142.00     55.00   1306.00    464.00  11584.00      8.85      0.82      0.61      0.53     72.00

Wow! There appears to be a lot of disk I/O going on here. What it really means, I’m not sure.

# iotop (recreated since I don't have a historical version)
Total DISK READ: 267.11 K/s | Total DISK WRITE: 0.00 B/s
  TID  PRIO  USER     DISK READ  DISK WRITE  SWAPIN     IO>    COMMAND                                           
20876 be/4 mysql       0.00 B/s   15.71 K/s  0.00 %  68.00 % mysqld --basedir=/usr --da~ld/mysqld.sock --port=3306
28051 be/4 www-data  129.63 K/s    0.00 B/s  0.00 %  40.44 % apache2 -k start
28061 be/4 www-data  137.48 K/s    0.00 B/s  0.00 %  31.12 % apache2 -k start
28059 be/4 www-data    0.00 B/s    3.93 K/s  0.00 %  23.00 % apache2 -k start

Once again, lots of I/O going on. It is interesting that apache requires so much I/O for reading. I expected mySQL to require much more I/O since it is reading AND writing to the database.

# apache2ctl status (edited)
                       Apache Server Status for localhost
   --------------------------------------------------------------------------
   CPU Usage: u319.69 s97.34 cu.05 cs0 - 4.88% CPU load
   36 requests currently being processed, 14 idle workers

 _WWC_W_W_WWWW_WLW_CWCW_W_WW______WC.............................
 ................................................................
 ................................................................
 ................................................................

   Scoreboard Key:
   "_" Waiting for Connection, "S" Starting up, "R" Reading Request,
   "W" Sending Reply, "K" Keepalive (read), "D" DNS Lookup,
   "C" Closing connection, "L" Logging, "G" Gracefully finishing,
   "I" Idle cleanup of worker, "." Open slot with no current process

Apache doesn’t think it is using much load, but there are a lot of open connections.

Watching ‘top’ over time, I noted that the import process was consuming 99% of one of the 4 cpus. The other cpus were generally 98% idle, but apache requests would occasionally use between 5-12% of each cpu. I knew the import acted this way beforehand, and it wasn’t a problem on the Slicehost server. So that wasn’t the root of the problem.

Actions Taken

Apache

I turned ‘KeepAlive off’ thinking each ‘client browser’ was hogging an apache process, and eventually all the available forked processes would become blocked. My thinking was that the high I/O was being caused because the images couldn’t be read from disk and passed out fast enough. So open apache processes were constantly waiting for data to be sent.

I set a specific number of apache processes to run according to the available memory left over from mySQL. This has the effect that once memory is assigned to the apache forked process it doesn’t go away. I also set the number of Ruby threads to a very low number to also help control memory usage.

These changes gave a little breathing room when load increased above 15, but the problem was by no means solved.

mySQL

I tweaked mySQL to better utilize all the remaining memory, thinking the import process was making mySQL work harder than the default settings could handle. I switched the db engine from myisam to innodb. That appeared to make the webpages appear faster, but the import was taking 20% longer!

I ran some benchmark tests that I found on the document titled Virtualization for MySQL on VMware

This document uses sysbench to run a test using mySQL and a temporary database. I didn’t delve into the details, but wanted to see a rudimentary comparison of the engines and how the test would affect server load.

An example command-line usage:

# ./sysbench  
--num-threads=4  
--max-time=900  
--max-requests=50000  
--test=oltp  
--mysql-user=root  
–mysql-host=localhost 
--mysql-port=3306  
--mysql-table-engine=innodb  
--oltp-test-mode=complex –oltp-table-size=8000000 run > 
MYRESULTS.txt

I tested myisam and innodb. The test results were interesting by themselves. When I ran the tests, each of which took 5 minutes, the load was around 2-4, but the load did NOT increase while the tests were running!

Even though the tests indicated that innodb is faster by almost a factor of 2, it was slowing down the import process, so we switched back to myisam.

System

Someone pointed out that a 32-bit OS was installed. Ugh, not much can be done about that, and I don’t believe it would cause problems of this proportion.

Then someone found the following Article that suggests changing the IO Scheduler from cfq to noop. Huh?

It turns out to be very easy. All you have to do is run the following command:

# echo noop > /sys/block/sda/queue/scheduler

And… load has stabilized and been where we expect it to be.

To make this persist after a reboot in Debian, just modify the ‘GRUB_CMDLINE_LINUX’ line in /etc/default/grub.cfg to be:

GRUB_CMDLINE_LINUX="elevator=noop"

Then run:

# update-grub

To make this persist after a reboot with RedHat/CentOS just add “elevator=noop” to the end of your kernel line in /boot/grub/menu.lst:

title CentOS (2.6.18-238.12.1.el5xen)
        root (hd0,0)
        kernel /xen.gz-2.6.18-238.12.1.el5 dom0_mem=256M elevator=noop
        module /vmlinuz-2.6.18-238.12.1.el5xen ro root=/dev/VolGroup00/LogVol00
        module /initrd-2.6.18-238.12.1.el5xen.img

Resolution

It turns out the OS has a scheduler that manages low level I/O operations. The default scheduler, Completely Fair Queuing (CFQ), tries to distribute the available I/O bandwidth equally among all I/O requests. This is great if all those requests are being sent to one piece of hardware in the local machine that handles all I/O. In our case this server is using a Network Appliance connected via FiberChannel, which should be fast enough to handle anything we throw at it. I didn’t find this out until late into the troubleshooting phase.

The NOOP scheduler assumes whatever data is sent to the I/O device will be handled by that device in the most efficient manner. Most of the links I’ve found reference NOOP with SSD drives, but it also makes complete sense once you factor in our particular setup, because the Network Appliance is much faster than any local drive could be.

Conclusion

The statistics pointed to an I/O issue, and that was in fact the root of the problem. As for knowing about such a setting, I can only say that is something that you just learn from experience. In the troubleshooting process, we also found other things that needed be tweaked and pointed out things to consider as this site grows.

What’s better for web design, Photoshop or Illustrator?

Adam — Sun, 03 Jul 2011 20:20:37 +0000

A lot of people ask whether Photoshop is better than Illustrator for web design. This is really a misleading question, because they’re both useful in different ways. Personally, I use them both, usually drawing shapes in Illustrator and then sending them to Photoshop to be colored and textured.

It’s a bit like an assembly line for cars, where they’ve built robots for very specific purposes. There’s a robot that puts together door panels, and a robot that paints door panels. Which robot is better? Well, neither! It’s best to use both to make a single product that neither could do as well on its own.

Now, Photoshop is a raster-based drawing program, and Illustrator is vector based. To some degree, each of these programs do a little bit of both, but it’s still a pretty fundamental difference between them, and one that Adobe has every incentive to sustain in order to keep selling both programs separately. In other words, there’s probably never going to be a single, clear, unequivocal ‘best’ program so long as there’s a market for two different ones.

To be fair, Photoshop works well enough for vectors, and it does a lot of other raster stuff that Illustrator wasn’t ever meant to do. It’s got the basic components; a pen tool that works pretty much the way it should, and a direct selection tool that behaves a lot like the one in Illustrator. If you HAD to, you could certainly get away with only using Photoshop, and skipping Illustrator altogether. Many designers do.

However, if you have access to both, I think it’s worth it to include Illustrator in your design workflow in many cases. Particularly when you need to draw complicated polygonal shapes and then manipulate the heck out of them.

With that in mind, here are just a few advantages Illustrator has over Photoshop for vector drawing.

Selecting shapes

In Illustrator, the interface for selecting vectors within a document is highly streamlined. You can group a collection of shapes, or even a collection of groups, and then grab any combination of them using the group selection tool. In Photoshop, you’d use a combination of selection tools, the Layers palette and the Paths palette to do the same thing.
Pathfinder

The pathfinder toolbar lets you modify shapes using other shapes. Photoshop includes the basic shape modes (add, subtract, intersect, exclude) but Illustrator adds more complicated methods like divide, trim, merge, and crop. I use these frequently to turn combinations of simple shapes into (for example) geometrically-inspired logos.
Changing colors

Photoshop has pretty sophisticated coloring tools, many of which Illustrator doesn’t even try to mimic, but one thing it doesn’t let you do is easily change the color of an entire shape or set of shapes. In Illustrator, you can either drag a swatch onto a shape, or select a shape and click the color you want it to be. You can even select all shapes by their color and change every blue in your document to a red.
Warp

Illustrator’s Warp filter lets you non-destructively change the shape of a vector. Usually this means turning a box or a circle into a shape it would be difficult to draw by hand (say, a flag or a teardrop). I use this a lot for logo design, and I’m not sure if there’s a Photoshop equivalent — there certainly isn’t one that’s as easy to use.
Pixel Preview / Pixel align

Traditionally, you’re used to seeing pixels in Photoshop and smooth vectors in Illustrator. As of CS5, Illustrator allows you to view and edit your vectors in Pixel Preview mode, to see how they will look on the Web. This lets you spot where your fractional pixel widths might cause fuzzy edges and distortion so that you can fix them on the fly. Plus, there’s the Align to Pixel option that shuffles your vector around to make the edges smooth (not an exact science, unfortunately). I use this feature when making iOS tab bar icons, and it’s probably saved me days of work all by itself.
Perspective grid

Another new CS5 feature, the perspective grid is a tremendous aid to drawing images with depth. You get to set up a grid in 2-or 3-point perspective, and then draw shapes as usual. Illustrator will force a perspective on what you draw: rectangles elongated toward the horizon, right-angles become obtuse, evenly-spaced objects foreshorten, all for free.
Color Guide

Lets you adjust all the selected colors in your document at once. For example, you could make all your blues slightly greener, or less saturated, or exchange one color for its counterpart on the color wheel. It does a lot of other stuff too, but this alone is worth the price of admission. Photoshop does this as well (for example the Selective Color or H/S/B tools), but not as elegantly or precisely, and not as quickly.
Offset Path

Creates a similar version of a shape that fits neatly over another shape such that the space between their edges is always the same. Huh? It’s hard to explain, but very useful, trust me. In Photoshop, I suppose you’d do this by selecting your shape, contracting the selection, and converting the selection back to a vector, but in Illustrator it’s a 1-step process.
Extrude / Bevel

Lets you make simple 3d representations of a shape. Turns a square into a cube, and lets you rotate it and apply some simple lighting effects. Photoshop may have some equivalent feature, but all of its 3D features require a dedicated graphics card, which is probably overkill for most users.
The canvas

Imagine a tabletop with a piece of paper on it. In Illustrator, the piece of paper is your Artboard, the document you’ll give to clients, and the tabletop is your Canvas. Since the canvas isn’t part of the final illustration (it doesn’t need to be printed or exported by default) you can use it to keep reference images and alternate versions of the shapes on your artboard. Does that make sense? It’s like a scratchpad. This is a great way to work, and something Photoshop doesn’t support at all.
Live Trace

Automagicaly converts raster images (like photographs) into an approximation of the same image in a vector version. It’s not perfect, but it’s a very slick feature that a lot of people were asking for before it was included in Illustrator CS2. There’s nothing even close to this in Photoshop. I think Photoshop would be scared to even try something this crazy.

Conclusion

Photoshop is a Swiss Army knife, good for doing a lot of things pretty well, and Illustrator is an X-Acto knife, good for precisely cutting out shapes, and not much else. Yeah, you could carve out your masterpiece with a blunt instrument, but why would you want to? For Web and Mobile design, Illustrator is an elegant supplement to Photoshop that every serious designer should be familiar with.

Personally, I like to draw flat, undecorated shapes in Illustrator, then import them into Photoshop to add colors, lighting and textures. This means I have a lot of layers that look like the silhouettes of buttons, panels and icons, with blending effects and layer masks on top of them. It’s a nice way to work, using the best tools for each aspect of the job and combining them in a non-destructive, easily reusable way.

PugetWorks.com

Resources from Mobile Boilerplate

Making Gradients Along a Path in Photoshop and Illustrator

In Photoshop

In Illustrator

What is Skeuomorphic Design and When to Use It

What are Skeuomorphs?

Why use them?

Minimum touchable area on mobile devices

How to figure out the minimum button size on any mobile device

Common fingertip sizes on different devices (in px)

Django Tips: FileField and uploadto

The Model Object

Settings

uploadto

Default

As a function

Obscure Pitfalls

Android Thread Handling

Step 1. Isolate your network calls with a thread call.

Step 2. The Handler

Step 3. Smarter Messages

In conclusion

Part One: Compass and Sass

Problem

This article deals with the introduction and installation of Compass and Sass and their basic features.

Solution with Compass and Sass

Compass and Sass Features

Installing

For this example, I am using iMac and its Terminal to generate necessary files and move around file structure. My Ruby and Rails are run on RVM.

Creating a Compass Project

Next Article Coming Soon

Software Application Pills

Candy

Vitamins

Medicine

Heart Meds

Conclusion

VMWare and Ubuntu High Load issues

Intro

Comparison

Statistics

Actions Taken

Apache

mySQL

System

Resolution

Conclusion

What’s better for web design, Photoshop or Illustrator?

Selecting shapes

Pathfinder

Changing colors

Warp

Pixel Preview / Pixel align

Perspective grid

Color Guide

Offset Path

Extrude / Bevel

The canvas

Live Trace

Conclusion