Chad Ritchie

Graphic Designer, Front-End Web Developer

Blog

View source code on iPad/iPhone

By

Originally published April 6, 2012

How to view source code using a Safari bookmarklet script on an iPad or iPhone device.

As a web developer, I spent lots of time viewing source code. So a few days ago, a friend asked me to take a look at his company’s web site to see how they could improve their SEO ranking. My first actions were to grab my iPad, take a quick look at the user interface and then at the source code. It was then that I realized, I had no way to view the source code of any site on my iPad—I had always used my computer for that task. And so the search was on—for an app—a “view the source code” app. After spending several minutes surfing through the App Store and finding nothing worth the .99 gamble. I discovered a couple JavaScript bookmarklets on the web.
Awesome! This will work better than an app, since I will already be in the Safari mobile browser.

I made a mashup of the various code I found is posted below.
There are other scripts available that enable syntax highlighting, but I prefer to simply view the source code.
If you already know how to install and edit a bookmarklet on your iPad or iPhone, copy the code below and enjoy!

javascript:(function(){
var a=window.open('about:blank').document;
a.write('');
a.close();
var b=a.body.appendChild(a.createElement('pre'));
b.style.overflow='auto';
b.style.whiteSpace='pre-wrap';
b.appendChild(a.createTextNode(document.documentElement.innerHTML))
})();

For step-by-step instruction on how to install this piece of awesomeness onto your iOS device, here goes:

Copy the code above (keyboard shortcut Cmd/Ctrl + C).

  • Step 1: Create a new bookmark via the Add New Bookmark function at the bottom of your iPad/iPhone screen.
  • Step 2: Name the new bookmark something that makes sense, like “View Source”, “Source Code” or whatever you like.
  • Step 3: Note where you are saving the Bookmark, e.g., Bookmarks, Bookmarks Bar, etc., then click Save.
  • Step 4: Open your Bookmarks (the icon that looks like a book)
  • Step 5: Click “Edit” in the lower left corner of the screen.
  • Step 6: Click on the newly added Bookmark that you named.
  • Step 7: Select the url and delete it, by pressing the “X” to the right. (The “X” will appear after you click on the url).
  • Step 8: Paste (keyboard shortcut Cmd/Ctrl + V) the JavaScript into the address field and click save.
  • Step 9: Enjoy!

 

If you know CSS and prefer to change the background or text color, have at it. Note the style tag in the head section of the script.

Simple tooltip without JavaScript

By

Simple tool tip without JavaScript

Here is a method to create a simple tool tip hover effect using only HTML and CSS. No JavaScript needed in order for this to work. Style as you wish.

a link
a:hover:after {
content: attr(data-tooltip);
}

Introducing: Style Tiles

By

When a moodboard is too vague and a comp is too literal.

Style Tiles

I recently had the opportunity to attend the Charlotte User Experience Meetup Group. The evenings topic was titled “Death to Wireframes, Long Live Rapid Prototyping,” the speaker was Bermon Painter. Bermon is an amazing presenter, communicator, designer and individual. One of the resources mentioned as a rapid prototyping resource was Style Tiles.

Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web.

They help form a common visual language between the designers and the stakeholders and provide a catalyst for discussions around the preferences and goals of the client.

Style Tiles are similar to the paint chips and fabric swatches an interior designer gets approval on before designing a room.
An interior designer doesn’t design three different rooms for a client at the first kick-off meeting, so why do Web designers design three different webpage mockups?

Style Tiles were created by Samantha Warren, a designer at Twitter.

Style Tiles: An Alternative to Full Design Comps

Download Template

How to add a tag cloud to your site

By

If you chose to tag the content on your site, a “tag-cloud” may be an ideal way to display tag navigation for users.Tag cloud from the ChadRitchie.net web site

To display a tag cloud start with the following parameters:

 1, //size of least used tag
'largest' => 2, //size of most used tag
'unit' = => 'em', //unit for sizing
'number' => 45, //displays at most 45 tags
'format' => 'flat', //displays the tags in flat
'orderby' => 'name', //order the tags by name
'order' => 'ASC' //sort the tags in ASCENDING order
)); ?>

Dig deeper into ‘tag clouds’ at WordPress

Interface Sketch

By

Free sketch templates for web, mobile and tablet.
If you’re designing a website or app, these simple templates are designed to help you sketch your ideas on paper.

interface-sketch-header-image
Download

Mountain Lion and Final Cut Pro 7

By

Since updating my production Mac to Mountain Lion a few weeks back, I have noticed the videos I have exported from Final Cut were some what fuzzy and slightly pixelated. After carefully checking and rechecking setting preferences, I decided to take another approach and reset/delete the user preference files.

To reset your Final Cut Pro 7 user preferences to their original state, do the following:

  1. In the Finder, go to ~/Library/Preferences—the tilde (~) represents your Home folder.
  2. Remove the “com.apple.finalcutpro.plist” file from the Preferences folder.
  3. Remove the “Final Cut Pro User Data” folder from the Preferences folder.