Clayton McIlrath » best practices

Tip of the Day: CSS Formatting

Clay McIlrath — Wed, 07 Sep 2011 04:56:31 +0000

One thing I really hate about agile front-end dev is the lack of formatting standards between devs. Some developers block their rules, others keep everything on one line. Some indent their rules, others don’t. The list goes on and on. I have a list of formatting rules that my team has adopted and all the front-end devs that I respect also follow, so if you care about improving your code and agile development, please adopt a standard of some sort and stand firm by it:

Block vs Single Line

Default to single line, because many rules will only contain one or two styles and its a waste and pain to scroll vertically through code. Most editors support the 80 column rule, so if your styles get longer than that, convert to block (easy to set a macro to do it for you in most IDE’s and editors).

.foo { background: #ccc; float: left; margin: 0 10px; }
 
.bar {
	cursor: pointer;
	display: block;
	float: left;
	height: 29px;
	margin: 7px 0;
	padding: 0 16.2%;
	width: 26px;
}

Indentation

It’s so much easier to read code that is indented to show hierarchy and white space that separates or groups similar or related objects together. This is a standard I see most front-end developers following, but if you’re not, smack yourself now and get with the program.

ul { }
	li { }
		li a { }
 
.foo {}
	.bar {}

That’s all on formatting for now. Adopt these standards and read on, because I’m sure I’ll be back on this rant before too long.

Tip of the Day: Mobile Touch Events

Clay McIlrath — Tue, 30 Aug 2011 00:17:54 +0000

I recently got into a project that was a bit over my head. I had to build out a map that will work on desktop, mobile and tablets the same, but I quickly ran into issues tracking touch events in mobile Safari. All of the testing I was doing in iOS5 (beta) was working the exact same way as the browser, where I could monitor a click and drag (touchmove) event and get the properties pageX and pageY directly from the event. However, on other mobile browsers (specifically iOS4 and older) this property was returning 0 everytime. I then found that multi-touch events store each finger press so I had to get the array of fingers and return the page coordinates. Long story short, here is the code I ended up implementing:

document.ontouchstart = function (e) {
	if (e.touches.length == 1) { // Only deal with one finger
		var touch = e.touches[0], // Get information for finger #1
		    x = touch.pageX,
		    y = touch.pageY;
	}
}

Semantic Markup and Accessibility Standards

Clay McIlrath — Mon, 03 Jan 2011 22:21:17 +0000

Web Standards Guideline

With growing technology and standards, I take pride in meeting new standards according to W3C, in order to achieve a highly functional site and good user experience for everyone. These standards include but aren’t limited to W3C standards, semantic markup, meeting WCAG usability standards, and Section 508 Compliance. This guide provides a medium level of understanding of accessibility standards. If anything in this article is confusing you, then I recommend you refer to Nathan’s post on Accessible Web Design for a more broad prospective.

Semantic Markup

Working with HTML and XML markup languages, it’s important for the code to be standards compliant by using tags, structure, and information that can be read and translated by all browsers. Semantic Markup is just a way of structuring code so that a browser/machine can do more work and take less off the user. For example, search engines, like Google, are heavily driven on specific tags such as Meta information, Alt tags for images, recognizable XML and HTML formatting, etc. Using meta tags for keywords, content definition, and descriptions all improve functionality for search engines and browsers.

Section 508 overview

Software Applications and Operating Systems: includes usability for people that are visually impaired, such as alternative keyboard navigation.
Web-based Intranet, Internet Information, and Applications: assures accessibility to web page graphics by the visually impaired using assistant technology such as screen readers and refreshable Braille displays. This is accomplished by using text labels and descriptors for graphics.
Telecommunications Products: addresses accessibility for people who are deaf or hard of hearing. This includes technology compatibility with hearing aids, assistant listening devices, and TTYs.
Videos or Multimedia Products: includes requirements for captioning of multimedia products such as training or informational multimedia productions. Captioning or video descriptors must be able to be turned on or off.
Self Contained, Closed Products: products with embedded software, such as information kiosks, copiers, and fax machines, often cannot be used with assistant technology. This standard requires that access features be built into these systems.
Desktop and Portable Computers: discusses accessibility related to mechanically operated controls such as keyboards and touch screens.

WCAG summary

The Web Content Accessiblity Guidelines (WCAG) is the only international draft for following web standards. It describes standards that may be used, should be used and must be used. The WCAG is considered the stable version of standards, but for more current standards for accessible websites you can refer to the Web Accessibility Initiative (WAI). They define standards more relevent and specific to newer Web Browsers, Operating Systems, and so forth.

There is a lot of best practices and examples defined in the WCAG and WAI, and though these standards are important, not every web developer needs to know them by heart or implement them into every site. They are mainly important for sites that provide a service, such as e-commerce, educational resource, government sites, etc. That’s why many times you’ll notice that government sites and educational sites have poor creativity, because they need to focus on delivering content to all audiences more than aesthetics. However, if you’re a web developer and interested in learning more about standards and implementing the, refer to the WCAG and the WAI and start creating hierarchy using headers, putting navigation into lists, and using Title and Alt tags appropriately.

W3C summary

The W3C is a working draft defining all aspects of markup languages and some Object Oriented Programming (OOP) languages used on the web. They define standards that are compatible across multiple browser, operating systems and languages. As web developers, we live by these standards and must know them to properly breakdown a website. These standards are a guideline that we follow in order to have our sites be dynamic and compliant for future technologies and software.

Where does your site fall according to these standards?

Below are some highlights that you should become familiar with as you populate a site with content. It’s important that if your site is developed by a professional that applies these standards, to ask for documentation on how to use functionality that may have been put into place for you, such as Meta tags, Header Tags, and Listed Links.

Compliance across all major Operating Systems: Windows XP, Windows Vista, and Mac OS X
Access to the visually impaired: JAWS, Window-Eyes, and Hal
W3C & WCAG standards
Organic Search Engine Optimization
Meta information for pages, scrips, and images
Alt tags for alternative text on images
Color contrast and color schemes legible for those with color blindness or vision problems
Em based layout and font: allowing sizes to be relevant to the browser-defined size for compatibility with mobile devices, increasing the font size in the browser, and different screen resolutions.
Listed links for navigation hierarchy
Header tags to establish Hierarchy and SEO

How I try and meet those standards in Web Development

As a web developer, I know the standards well. Like an electrician must know state codes and regulations, I follow standards laid out by federal law (Section 508), good practice guidelines (W3C) and usability requirements (WCAG). I also make sure to read up on other articles and refer to other professionals to practice what is most commonly needed and used, for more in depth on how to tackle accessibility as a web developer, check out Nathan’s post at redswish.

Setup SVN in Hostmonster Shared Hosting

Clay McIlrath — Tue, 27 Apr 2010 06:09:26 +0000

I’ve had my fair share of installs in shared hosting, but sometimes simple things like SVN can get very tricky with hosting providers like Hostmonster or BlueHost. I hope that this shell will work as well for you as it has for me. Just copy the code and paste into a file on your server (i called mine svninstall.sh) and then to run just execute . .svninstall.sh and you’re off! Comment here if you get and errors and I’d be glad to help. Also if you get stuck, take into consideration that there are other inexpensive web hosting and cloud server hosting companies that you can work with, so before smashing your head against the wall, look around for a better solution.

#!/bin/sh
 
export svn=1.6.9
export ipath=$HOME/tools64/
export dev=$HOME/dev/svn
 
mkdir -p $ipath
mkdir -p $dev
cd $dev
 
if [ ! -f $dev/subversion-deps-$svn/__download ] ; then
	rm subversion-deps-$svn.tar.bz2*
	wget http://subversion.tigris.org/downloads/subversion-deps-$svn.tar.bz2 && \
		tar -xjf subversion-deps-$svn.tar.bz2 && \
		mv subversion-$svn subversion-deps-$svn && \
		touch  subversion-deps-$svn/__download
	rm subversion-deps-$svn.tar.bz2.*
fi
if [ ! -f $dev/subversion-$svn/__download ] ; then
	rm subversion-$svn.tar.bz2*
	wget http://subversion.tigris.org/downloads/subversion-$svn.tar.bz2 && \
		tar -xjf subversion-$svn.tar.bz2 && \
		touch  subversion-$svn/__download
	rm subversion-$svn.tar.bz2*
fi
 
export o=" --prefix=$ipath LDFLAGS="-L$ipath/lib" CPPFLAGS="-I$ipath/include" CFLAGS="-I$ipath/include" "
export oapr=" --with-apr=$ipath/bin/apr-1-config "
export oapu=" --with-apr-util=$ipath/bin/apu-1-config "
 
export pdep=$dev/subversion-deps-$svn
export psvn=$dev/subversion-$svn
 
export PATH=$ipath/bin:$PATH
 
#compile zlib
cd $pdep/zlib
export CFLAGS='-fPIC'
if [ ! -f _done ] ; then
	make clean
	./configure --prefix=$ipath
	make && touch _done
fi
make install
 
# compile APR
cd $pdep/apr
if [ ! -f _done ] ; then
	make clean
	./configure $o
	make && touch _done
fi
make install
 
# compile neon
cd $pdep/neon
if [ ! -f _done ] ; then
	make clean
	./configure $o $oapr
	make && touch _done
fi
make install
 
#compile sqlite
cd $pdep/sqlite-amalgamation
if [ ! -f _done ] ; then
	make clean
	./configure $o $oapr
	make && touch _done
fi
make install
 
# compile Berkeley DB
cd $pdep
if [ ! -f db-5.0.21/__download ] ; then
	rm db-5.0.21.tar.gz*
	wget http://download.oracle.com/berkeley-db/db-5.0.21.tar.gz && \
		tar -xzf db-5.0.21.tar.gz && \
		touch  db-5.0.21/__download
	rm db-5.0.21.tar.gz*
fi
cd $pdep/db-5.0.21/build_unix
if [ ! -f _done ] ; then
	make clean
	../dist/configure $o $oapr
	make && touch _done
fi
make install
 
# compile APR-util after Berkeley. This way svn find berkeley automatically
cd $pdep/apr-util
if [ ! -f _done ] ; then
	make clean
	./configure $o $oapr --with-berkeley-db=$ipath/include:$ipath/lib
	make && touch _done
fi
make install
 
# compile serf
cd $pdep/serf
if [ ! -f _done ] ; then
	make clean
	./configure $o $oapr $oapu
	make && touch _done
fi
make install
 
# finaly, build svn
cd $psvn
if [ ! -f _done ] ; then
	make clean
	./configure $o $oapr
	make && touch _done
fi
make install

FBJS Slider Carousel

Clay McIlrath — Tue, 13 Apr 2010 04:50:25 +0000

I’ve made a nice little FBJS Slider that I use quite often for animation within facebook. I hope that little snippets and code like this will help other developers make more interested and appealing Facebook applications. If you want to hire or request help with fbjs, fbml, or facebook development in general, you can do so by contacting my company Chosen

First with the styling

#slideWrap creates an extremely wide canvas for the slide to fit on aligned horizontally.
#wrapper then creates a sort of viewport to view the slides through.