Due to the nature of the website, I thought a blog platform would be perfect. And since I’m a tad biased, I recommended WordPress. With the help of a few plugins, I created a highly customized theme that gives individual posts a great deal of extra information. For more about my role, check out the entry in my portfolio section.

So that’s what I’ve been up to lately if anyone was wondering. FOCUS on Results was a truly collaborative effort, and we’re quite proud of how it has turned out.  If you or someone you know is an education stakeholder, I encourage you to visit FOCUS on Results for guidance and technical assistance.

I can’t take credit for authoring this plugin–my contribution was just the <div> icon. Rather, I took two existing resources and made them work together. You can download the plugin here. Unzip the archive and place it inside your wp-content/plugins/ directory and activate it, or browse to the zipped archive to install the plugin via the WordPress interface. The result will be a new button that appears in the visual editor:

To use the new button:

1. highlight the text you would like to be wrapped in a div
2. click the <div> button
3. a small “-” will appear outside the div, this is a placeholder so that your cursor won’t get stuck inside the <div>

If you need to apply styling to the div itself (if you have the Styles menu enabled), use the path bar  at the bottom of the TinyMCE window and click on “div”.

You can now apply your style, and if the CSS is in the main CSS file for your theme, you will get a live preview of what the box looks like.

Why Not Just a “DIV” Option in the Format Menu?

Before putting this plugin together, I experimented with using a “DIV” format (in the same menu where you choose heading styles). Unfortunately, it has one fatal flaw-you can’t add other elements in the <div> without going into the HTML view. But with this new Wrap Div button, you can put headings, paragraphs, and images inside of your newly created <div>.

Adding Style

To add styling to the new div, I first set up a CSS class in my stylesheet with the styles I wanted the div to have. Then, I enabled some advanced settings in tinyMCE. In my theme’s functions.php file, I put the following:

/*
 * Enable the Styles menu in TinyMCE.
 */
function customformatTinyMCE($init) {
	// Add class names to apply to divs, first string is the menu item text
	// After the equals sign is the CSS class name
	// This will make a new "styles" menu appear in tinymce
	$init['theme_advanced_styles'] = 'Description of Style=cssClassName';
	return $init;
}
// Modify Tiny_MCE init
add_filter('tiny_mce_before_init', 'customformatTinyMCE' );

With that in place, a new “Styles” menu will appear in TinyMCE allowing you to add styling without entering HTML mode. However, you must remember to select “div” in the path bar as shown above! Otherwise, the class name will be applied to whatever element your cursor is in at the time (usually a paragraph tag) and will have some weird results.

The Fine Print

I’m providing this plugin as-is. I may be able to offer limited help, but since I didn’t write it, I won’t be terribly helpful in squashing bugs or implementing feature requests. Nevertheless, I hope somebody finds it useful. Cheers!

Update, August 20, 2011

There were some issues with a double div button appearing in some cases.  If you’re having issues, please download the new version.

The most common process I’ve seen is as follows:

1. Develop the basic layout (the “boxes”)
2. Once the layout is set, go back through and style the text

Styling Text Last

I think the main idea behind the “style text last” method is that you focus on one part at a time. First, you sort out how page elements fit together. Then, you go back in and give attention to the typographic details. It is common to divide typography styling into a separate stylesheet, so theoretically, your workflow is improved because you don’t have to keep jumping between stylesheets.

One Workflow Doesn’t Always Fit All

Apparently I’m an anomaly (if you’ve read some of my other posts, this probably is not a shock to you). I guess it never occurred to me when I started doing front-end coding that there might be an optimal process. Being primarily self-taught, I just dove in and did everything at once.

As I gained more experience, I adopted a type-only stylesheet method for organizational purposes. I tried many times to save the text styling for the end, but I just couldn’t get into the habit of doing it regularly. I had become very efficient with my own method, so changing it actually slowed me down.

I realize now that my preferred workflow is completely a product of my personality. I’m a perfectionist, but also a “big picture” type of person. When I’m coding a design, I can’t mentally separate the text from the layout. I am a visual person so if the text doesn’t look the way it should, I get perturbed and need to fix it immediately.

For me, the supposed time-savings of focusing on one stylesheet at a time just isn’t worth it. I know there will be text style changes that affect the layout and so I’ll end up going back to the main stylesheet (remember, I’m a perfectionist) anyway. Any time I might have saved by putting off the text styling until the end would be negated.

what works for you?

Like many areas of web development, I think it’s important to figure out what works best for you and go with it. I’m curious to hear how others tackle front-end coding. Do you style the text last, and if so, how does it help your workflow? What is your process like? Is your process directed by a higher authority (such as a lead developer or manager) and would you do things differently if you had the choice? Let me know in the comments!

Never fear! I have been using Evernote to collect post ideas and there are definitely web ones in the future. In fact, there is one in the very near future, like, say, in the next sentence or so.

I love jQuery!

Ok, not quite what you were expecting, right? Allow me to explain why…

1. Its license means it’s pretty much free to use for any type of project
2. jQuery has introduced me to JavaScript and helped me begin learning it. I’m not an expert by any means, but learning jQuery has helped me learn the vocabulary I need to effectively solve my JavaScript problems
3. The jQuery community is thriving and, well, awesome
4. There’s a plugin for just about everything you can think of
5. The syntax makes sense for people experienced in CSS

So onto the heart of this post, jQuery resources I couldn’t live without.

Tips, tutorials, and support

1. jQuery forum: Formerly hosted on Google Groups, the jQuery forum has a wealth of information and lots of really helpful people. Keep in mind and be appreciative that they’re helping because they want to, not because they are being paid to
2. the API: The new API (for version 1.4 and above has been completely rewritten to make it more easy to understand and better organized. If you need to use an older version of jQuery and aren’t sure what features are specific to version 1.4, the old documentation is still available too
3. jQuery for Designers: provides tips and tutorials for people who may not have very much programming experience at all, and the content can be filtered by your experience level
4. Learning jQuery: Not only was the site created by a fellow Michigander, but it also provides some seriously thorough information and time-saving tips, such as 1 Way to Avoid the Flash of Unstyled Content.
5. The Filament Group Blog: Though not devoted exclusively to jQuery, I have found a number of good jQuery examples, especially ones focusing on Accessibility of jQuery UI elements

Popular and useful plugins

jQuery Cycle Plugin

If you’re ever in need of an image rotator, Cycle is the plugin for you. It has a lot of options and you can pretty much customize it to meet any need.

As far as implementation goes, it couldn’t get much easier. All you have to do is:

$(function(){
//where div id slideshow-container contains 2 or more <img> tags
$('#slideshow-container').cycle();
});

and you have yourself a slideshow. I use the plugin for my photos page, where it is set up to load slides with AJAX after the initial page load. Cycle is by far the jQuery plugin I use most. On top of all the other great things about the plugin, the creator Mike Alsup is pretty accessible and willing to help.

jCarousel

Though I haven’t used it very much, the jCarousel plugin is very popular for creating a slideshow of multiple items at once, similar to the related products area you see on an Amazon.com product listing. It comes with a few different skin options, or you can style it on your own with CSS and custom images. This plugin, like many others, takes existing semantic markup and transforms it with JavaScript.

jQuery UI Tabs

A great way to organize a lot of content in a small amount of space is to put it into tabs. What makes the jQuery UI Tabs widget great is that it’s fast to implement and has some pre-made CSS themes you can use if you’re in a hurry. Another bonus is that unlike some other tabs implementations, the jQuery widget utilizes best practices by avoiding misuse of the rel attribute. It also degrades gracefully if JavaScript is turned off.

Tabs is just one of the awesome plugins from jQuery UI, so be sure to check them all out!

jquery.pngfix

I don’t make it a point to spend a lot of time fixing issues in Internet Explorer 6 unless a client specifically requests it. I do, however think the bare minimum of IE6 support should be to fix broken .png images. With the jquery.pngfix.js plugin, I can quickly fix png images for IE6. To avoid forcing “modern” browsers to process unnecessary JavaScript, I call this plugin inside of a conditional comment.

<!--[if IE 6]>
<script type="text/javascript" src="js/jquery.pngfix.js"></script>
<script type="text/javascript">
//assuming jQuery library is called in head of document
$(function(){
$(document).pngFix();
});
</script>
<![endif]-->

So that’s my two cents about jQuery. Not exactly an unbiased opinion, but hey, I never promised it would be.

I have recently taken a dive into the world of Flex for a project at work. More specifically, I’ve been using the Flex IDE called Flex Builder 3. While doing lots of research, I found an open-source component that looked really promising so I grabbed the code only to find that it wasn’t working in Flex Builder 3.

I’m pretty sure it was mentioned somewhere in the documentation for the component, but I missed where it said that it required Flex 4. I didn’t really know anything about Flex 4 (also called “Gumbo”) so I researched and found that it was a pretty sizable overhaul (for someone like me who is just starting to learn Flex at version 3) and that the new IDE for it was still in beta, potentially going to be released soon. So I thought what the heck, I’ll get the beta. Then the trouble began.

I fired up the Mac installer. I clicked through all the things you normally click through without paying much attention but I got stopped at a message saying I needed to close all browsers. Ok, no problem, I thought. I quit Firefox and Safari, and even Thunderbird just for good measure.

No dice. The message popped up again immediately. I thought maybe I had gotten a corrupt download, so I tried to get the file again. Mounted it, and still had the problem. I did some searches to see if anyone else was having issues and came up with nothing similar.

“Ok,” I thought, “I’ll just reboot in case leftover processes or anything are causing trouble.” This would have to fix it, right? Wrong. After rebooting and not starting any programs, it STILL wouldn’t install. By this time, I was not a very happy camper, having sunk a sizable chunk of time into getting this program running.

I finally decided to check my startup items in System Preferences > Accounts > Login items. I saw that my Xmarks for Safari plugin was running at startup. Aha! Not wanting to take any chances, I removed it completely instead of just un-checking the box for it. I rebooted one more time and Voila! It FINALLY installed.

So kids, the moral of the story is: check those startup items! Even a seemingly innocuous thing like a browser plugin can prevent you from installing programs.

Defining “Front-End”

When thinking about websites, I usually divide them into two parts: Front-End and Back-End. The Back-End pieces are things we don’t see when visiting websites – where our credit card information is stored at Amazon.com, for example. I consider Back-End technologies to be servers, server-side programming languages such as PHP and ASP, and databases. Very simple websites may not even need to use a programming language or database. Server-side languages do their work before a visitor even knows what happened.

The Front-End, however, is more closely tied to how we experience a website. Images, colors, arrangement of text on a page–that’s what I do. I take a website design and use XHTML and CSS to tell a web browser (Firefox, Internet Explorer, etc) how to make that design into a live site. It takes immense attention to detail to ensure a designer’s vision is accurately portrayed on the web.

Another aspect of the front-end is behavior. Special effects, form submissions, and even some browser limitations (I’m looking at you, IE6) require more than what XHTML and CSS can offer. This is where JavaScript comes in. A very basic definition of JavaScript is a client-side programming language used to make web pages interactive. There is a bit of crossover possible with JavaScript — using AJAX, JavaScript can actually communicate with servers, effectively blurring the line between the front-end and back-end. I am still somewhat new to JavaScript, but have learned a lot over the past year and a half.

The Gray Area

While XHTML, CSS, and JavaScript seem to easily fit the description of front-end technologies, the role of a Front-End Developer isn’t always so clear. While searching for job postings, I have found that a Front-End Developer’s duties can include everything from website design to server-side programming languages. I can understand how design would fit in because it is directly related to the front-end. However, including server-side languages doesn’t make much sense to me. If you’re looking for someone to do front-end and back-end work, Front-End Developer just doesn’t seem to be an appropriate job title (and is probably not an appropriate salary level for that matter).

compatibility and accessibility

XHTML and CSS are really just the beginning when it comes to Front-End development. Though there are web standards, certain web browsers (read: Internet Explorer) don’t adhere to them all the time. I spend a lot of time troubleshooting browser inconsistencies—it is easily the most frustrating part of the job. Testing web sites in Internet Explorer is not for the faint of heart!

A front-end developer must also be aware that some website visitors have special needs. Not everyone has the ability to use a mouse or see a computer screen, so websites need to be made in a way that accommodates the most people possible.

Though it has plenty of challenges, front-end development is an exciting and rewarding career. Because the industry is always changing, you have the opportunity to be continuously learning new things. And when you need help, there’s an awesome community to help you find answers.