Scott Radcliff

My Development Work Process

Scott Radcliff

My Development Work Process

Programming in its simplest form is a series and true/false responses. You perform a test. If it’s true you perform one task, if it’s false you perform another. If you are fairly new to programming this might seem a little too simple, but it’s true. Look at flowcharts. Flowcharts are a graphical representation of what happens when something is true, and what happens when something is false. I was interested in how other developers approached programming, so it only makes sense to share my process.

Keep it Simple
This is usually the most difficult part for me. For some reason I always see these wild mind-blowing user experiences that usually aren’t practical, and definitely out of the project scope. Breaking the project down to manageable tasks is the most important part. I try to break it down in the following sequence.

What does the site have to do?

In this phase I try to define what are the “must haves”. I define the basis of the application.

What is the easiest/shortest way to accomplish the task?

Here I usually research the best method for performing whatever task is at hand. I will most likely start by looking through the documentation of what I am working with. If it is PHP, I start at the PHP docs. If it’s a framework, I start there, you get the picture. This is assuming I don’t have a solution in mind already.

Now is when I start sketching code.

I start laying out what happens at a somewhat high level. These are usually the true/false checks that the code performs. Usually, these will end up as short functions. I like short functions that perform one task. I could call this pseudo-code but it doesn’t really contain syntax, just logic.

Start coding the tasks one at a time from the sketched code I made in the previous step.

This helps keep things focused and in perspective for me. Concentrate on one thing, then move onto the next.

Refactor!

Keep it Fun!
This process helps keep it fun for me. When I see a very large process ahead with very complex functionality, I tend to get overwhelmed. Also, when I over-complicate things, I get frustrated quickly and programming becomes a chore.
What is your process?

I Went To Sleep And The Web Fell Back 10 Years

Scott Radcliff

I Went To Sleep And The Web Fell Back 10 Years

Nearly every morning I fire up my computer, check emails, and read my RSS feeds. I do it for a few reasons. One, it catches me up on what I may have missed from the day before. Two, it’s relaxing and sometimes inspires me to do something. This morning it inspired me, but not necessarily in a good way. It felt as if the web fell back 10 years over night, and I was inspired to toss in my two cents.

First I visited a post talking about the insane amount of money the CFO of Freddie Mac was getting, 5.5 million including a signing bonus. I was shocked enough to comment on the post, but as I was thinking about how I wanted to express my thoughts, I noticed a hit counter. Yep, you heard right, the stupid little counter that records the number of visits. I couldn’t bring myself to comment on that site. All I could do was tweet about how surprised I was to actually see a hit counter.

I returned to my reader and started scanning through the feeds. If I wasn’t stunned before I sure was now. A “Ajax Powered Guestbook”! Wha? Do we need an Ajax powered guestbook? All due respect to the developer for the time it takes to plan, write, and launch the application. Aren’t comments good enough? Guess what? Most people just Tweet their thoughts about a website.

Guestbooks were never really useful. Sure, they were there to show a user how awesome your site is, and how many people loved it. Content is king for a reason. And guestbooks died for a reason.

So now I start to think is this like a FlashRewind? Why did I go to bed and the Web somehow got dialed back 10 years? I can’t explain the hit counter, but I think I can explain the guestbook. Plugin saturation. The web is so saturated with plugins and apps of every kind that some developers must run out of ideas. Now is the time to innovate. If it were up to me, I would try to look at what works now, forecast what might be ahead, take all that data and create something kick-ass. Off the top of my head I would say integrate all of social media into blog comments. Take the little tweet counter we see on some blogs one step further. Track the conversations about your website and display them on your website. If two people are having some sort of conversation about your website or post on Twitter or Facebook, display that conversation on your website in a threaded format.

Let’s move forward please.

Browsers and Website Design

Scott Radcliff

Browsers and Website Design

I recent post by Patrick Haney about designing in the browser started to make me think. How do I build websites? Do I build websites in the browser? When I think about the term “Designing in the Browser”, I think of a basic website build with no styles applied. Eventually, styles are added to different elements positioning them, adding color, and some typography goodies. This is not how I approach building websites, but it’s close.

When I start to build a site, after all of the technical stuff is aside. You know, sitemaps, information architecture, user experience, and so on, I design the look and feel in Fireworks. Sometimes Photoshop, but usually Fireworks. This is where my process is similar to designing in the browser. I don’t slice up the whole thing and start exporting, I mimic everything I possibly can with CSS + HTML in the browser. When I get to a point where CSS is either impractical or clearly not the best option, I use the image. Image usage is usually reserved for background, actual images, and in rare cases a certain font.

When I am finished, the site resembles the Fireworks document extremely close, and I have taken advantage of many accessibility issues and website speed optimization issues. This process allows me to see how progressive enhancement is going to affect the site, make changes quickly, and still stay true to the original aesthetics of the site. It’s not exactly designing in the browser, but it has worked well for me.

What is Blogging?

Scott Radcliff

What is Blogging?

That is a pretty common question. I am not even sure I know the answer. We could even extend that question even further and say “What is blogging and why should I do it?”. Ask almost any freelancer about blogging, and they will tell you that everyone that provides a service should blog. The problem is everyone has taken that advice and it leaves us with the same content masked as an original post. For that matter, some people have went so far as to build a site that simply aggregates several blog posts in one place. That is a great strategy if that’s your thing, and I use those sites regularly. It’s just not something I am interested in doing.

How do we fix stale and repeated content? We first answer the original question. What is blogging? Blogging is story telling. An interesting blog post is a story that intrigues the reader. A good post doesn’t have to be five paragraphs long. It can be one paragraph, as long as it is entertaining somehow. Blogging is a vital part of social media, and social media is about being real. Being you.

So what is my blogging theory? It’s simple. Just a daily rant about what is happening. A rant doesn’t have to be negative, it can be positive. Hopefully with a little luck, I will entertain some readers with the events that happen to me, or the incredibly stupid things I do.

The Traditional Website is Dead

Scott Radcliff

The Traditional Website is Dead

A recent post by the amazing Jeffery Zeldman lead me to discover WaSP’s Web Standards Curriculum, and I was so excited to see what great topics they were proposing, I started to think why. And here it is, the traditional website is dead. The days of a personal or business’ brochure style website are long gone, replaced by RIA’s and robust web applications. Users expect an experience, not some plain ordinary website with an address and some pictures. They want to comment, watch videos, and get your RSS feed, and if you don’t offer those things, they often are not interested because you appear outdated. This is where college’s are getting it wrong.

If a person signs up for a web design/development course, it’s not because they want to create crappy outdated websites. They want to create stunning web experiences! They want to create the coolest iPhone application or the next must have web app. At the very least, they want to work on cutting edge websites, and sadly the current state of college programs teaching these things is dismal at best.

This is where the WaSP curriculum comes into play. They are creating an outstanding program outline that colleges can implement fully or partially. The kicker is that they are going to update it! From the way I understand it, WaSP fully intends to update this regularly with what they feel needs to be taught. Any institution that teaches web design/development needs to look at this. It might just make your program the best one around.

Stay Ahead of the Curve and Impress Your Friends with HTML5

Scott Radcliff

Stay Ahead of the Curve and Impress Your Friends with HTML5

What is HTML5 and how is it Different?

HTML5 is creeping up everywhere. Browser support is getting better almost daily, and many HTML5 elements are already supported. On top of that, mingle in some CSS3 and you have a cutting edge website that is forward thinking. I can almost hear the skeptics now “HTML5 is not a W3C recommendation!”. Just because it is not a recommendation doesn’t mean you can’t use it. You just have to keep your demographic in mind. I will almost guarantee, most people viewing this website are using the latest browsers. Not to mention, this is my personal site, and personally, I like to dabble in the latest toys.

Using HTML5 Right Now.

I have been working on restructuring this site for awhile now. When I started playing with the idea of a new layout, I thought of all the great things that are being done with the canvas tag, and decided to code my site in HTML5. The only problems that I encountered were display issues, so I had to position nearly everything with CSS. Here is what the landing page currently looks look like in Firefox 3.0.11 and Chrome 3.0. I have not looked at it in Safari, but I assume it is quite similar to Chrome, given that they are both built with webkit. I’ll get to IE later.

The screenshot above is fully coded and almost ready to go live, except for the fact the I’m extending the top image and and removing the boxes parallel to it. I decided to use some advanced CSS3 techniques to render the rounded corners. And yet again, IE gives me problems. In this case I ignore IE, so IE users see square corners, big deal. In the end I achieved my goal, 90 percent of the page is HTML5, and I’ll explain that now.

HTML5 Elements and the Proper DOCTYPE

The main HTML5 elements used here are nav, section, header, and footer. Before I get into that, the DOCTYPE is worth mentioning. With HTML5 we go with a simple . Make sure to add your character encoding and you’re ready to rock.

The nav element was pretty straight forward. Just wrap your navigation in nav tags.


    
        blog

        code
        contact
        me

Next up, is the section tag, also pretty straight forward. I will skip over the large image section because that is changing anyway. (If your curious, the large “I Build Websites” section is just that, a section, and I used the section tag) Now for the columns underneath. Considering this is also a section, I used the section tag again which is very similar to a div. I actually nested div’s inside of it to hold the elements, I’m sure there is a better way to do this, but I’m fairly new to HTML5, so I settled for it.

» signifies continued line

   
    Latest Blog Posts
    

    New Design Launched
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et lectus in
    lorem condimentum scelerisque a id dui. Nam lorem nunc, laoreet ut interdum ut,
    
    
    Browser Wars
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et lectus in
    lorem condimentum scelerisque a id dui. Nam lorem nunc, laoreet ut interdum ut,
    

    
    
    
    Projects
    
    New Project

    
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et lectus in
    lorem condimentum scelerisque a id dui. Nam lorem nunc, laoreet ut interdum ut,
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et lectus in
    lorem condimentum scelerisque a id dui. Nam lorem nunc, laoreet ut interdum ut,
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et lectus in
    lorem condimentum scelerisque a id dui. Nam lorem nunc, laoreet ut interdum ut,
    
    
    
    
    

    Twitter
    
    
    follow me on Twitter

As you can see I nested the header tag inside each div to describe the heading. I think using header fits a little nicer for the small headings versus any of the h1 – h6 tags. But I thought an h3 tag fit better under the header tag. Just seems to flow better to me.

Lastly, I used the footer tag. While trying to get a better looking footer for the page, I decided to go with a three column system that allows a reader to see what I’m up to. The section and header tags fit rather well.



        
            Feed Your Brain
            
                15 Best WordPress Plugins

                Getting the Most out of Zend
                Color and Typography in Web Design
                Why Twitter Rules Social Media

            
        
        
        
            Recommended Reading
            

                Don't Make Me Think
                JavaScript: The Definitive Guide
                Design Basics Index

            
        
        
        
            Events and Networking
            

                Social Media Breakfast
                Module 09
                UX Day at the MudHens

I mentioned before that all the tags were recognized in Firefox and Chrome. All that needed to be done was some positioning, and even then I am not sure if that is due to my inexperience with the display styles of the HTML5 elements. This was all pretty new to me, and even since I started this, Opera released a new version of their browser that supports all kinds of HTML5 elements.

Yea, Internet Explorer Still Sucks

So how do I deal with IE? I mean besides beating my fists on the desk and screaming “I hate you!”. According to OrderedList.com, IE needs some persuasion. I will use JavaScript to register the elements that IE doesn’t recognize, and then position them accordingly. I’ll try to post an update on the progress as I get closer to launch.

The code posted above is incomplete. You may notice that some of the links are incomplete, that is just while I tweak the site before completion.

Keeping Time with Klok

Scott Radcliff

Once you have downloaded Klok, it gives you a sample project that allows you to start playing with it. It contains two views, weekly and project. Inside weekly view you can see the weekly layout of what you're working on and the time that was invested. If you need to see your time for a project, click on project view and see an overview of time spent on that project.

One of the coolest features it has is that it adds a folder structure to each project that is created. When you create a project, it has folders for Meetings, Design, HTML, Scripting, Testing, and Server-side Development. In addition to that, you can add more folders, or if you wish, you can create a blank project and add all the folders yourself. I have found that for most projects, the folder structure that I mentioned fits like a glove.

Need to keep an eye on your time while working? No problem. Inside Klok is a button that allows the app to float on top of your other windows while being minimized. While the app is floating you can still see what project youre logged into and the current time involved. If that bothers you, just minimize it to your taskbar, or your dock (I'm guessing, not a Mac user), and keep working.

Although I haven't used it yet, Klok does have the ability to create timesheets and reports. All in all I cannot say enough about this app, it suits me perfectly, and I suggest you give it a test drive. Keep in mind that like all AIR apps, it does use quite a bit of memory but I have never noticed a performance issue with it.

I Should Have Coded it Myself

Scott Radcliff

This week has been kind of frustrating from a developers point of view. I am working on a project that has three completely different sections of a website, each with their own permissions and functionalilty. With so much involved in these systems, I thought it would be a good idea to use pre-built software packages and edit them to fit what I am trying to accomplish. That is where the trouble has started.

While setting these systems up on testing server I started to hit more snags than I had anticipated. As the hours pass and I am still fighting with configuration details, I am really wishing I was in the coding phase, I have already modeled everything in UML and I am ready to rock. But unfortunately, I am still messing around with getting Zend Optimizer installed because one of the systems seems to think encoding their code is a good idea.

So here I am pulling my hair out, accessing the server every way known to man, and thinking “What a minute, why didn't I just write this app myself?”. I originally decided not to code the entire thing because of the time and complexity involved, but that is really a non issue with all the open source frameworks available. When I start looking at the systems I am using, that's all they really did. Just used a framework, built a system, and placed a price tag on it.

I am thinking on any future projects, I will be coding the app in Zend, Cake, Ruby on Rails, whatever fits the solution best.

How do you decide when to code and when to use pre-built solutions?

Dreamweaver: An HTML editor. Nothing More

Scott Radcliff

What is Dreamweaver

For those of you that are not familiar with Dreamweaver, it is an HTML editor that is an Adobe product and it distributed as part of the Creative Suite currently in version four. It is a great tool for a beginning web designer. It allows you to drag things around in design view seeing what it should look like in a web browser. The power of Dreamweaver lies in its integration with other Adobe products (i.e. Photoshop, Fireworks, Flash). Unfortunately, this is where the power of Dreamweaver stops. In today's dynamic web, the use of blogs, a CMS, and lots of database interaction is very common if not almost mandatory. And that is where Dreamweaver sucks.

What's an IDE?

Again, for those of you who do not know, an IDE is an Integrated Development Environment. In short, and IDE is a tool for a developer to develop applications (websites included) efficiently. Do you have to use an IDE to develop web sites and applications? Nope. Is it smart to use the tools available to you to help you work effectively? Yep. An IDE will make your work as a developer 100 times faster and incredibly more efficient. Where Dreamweaver will help a designer visualize what a website should look like in a browser, an IDE will help a developer code his current projects with the help of intellisense, code assist, and code completion.

Where Does Dreamweaver Fit In?

First things first, I am a developer. I love design. I love admiring great designs, and I try to keep improving my design skills. But at the end of the day I like to develop great dynamic apps and web sites that have a pleasing aesthetic quality. With that being said, Dreamweaver does not fit into my work flow. If you are a graphic designer that is all about aesthetics, isn't concerned with usability, and maybe you dabble in a server side language like PHP. Dreamweaver is right up your alley. I prefer to use a full featured IDE for whatever language I am working in to code all the objects, interactions, and programming logic. I can just use Fireworks, Photoshop, or Illustrator to design the site and just slice it up.

What Does Dreamweaver Lack?

Try this. Create a new PHP page in Dreamweaver. What did you get for syntax? All Adobe gives you is an XHTML document, not a PHP tag in sight. Adobe doesn't think it would be relevant to start the PHP document with some PHP code. That makes no sense to me. Sure, many PHP docs mingle in HTML. PHP was created to mingle with HTML. But let's say I am creating a class, or an interface. Wouldn't it make sense for Dreamweaver to give me that option? For that matter, they should even have some code in there. So I should be able to select file->new->php->class. Makes sense to me. And that is my point, this functionality is not a stretch, and it is not hard to implement.

Here's another one, not a major issue, just a time saver. If I create a user defined function, Dreamweaver should finish what it can for me. Every function is going to have parentheses and curly brackets { } (I don't know the correct name of those, although I use them every day). So if I enter public function init, as soon as I am finished typing my function name, Dreamweaver should add two parentheses and two curly brackets, and place my cursor in the parentheses so I am ready to type my parameters. Every function in PHP contains these elements. Should I have to type them every time? This functionality alone would help beginners a ton. I can't count how many times I had to search through code looking for a curly bracket that had been missed.

Ok only one more, let's say I have a PHP interface that many other classes will implement. I create my interface with my functions, save it to my project folder. Now I create and save a blank PHP class to the same project folder. When I enter implements should Dreamweaver give me a list of available interfaces? One step further, when I implement the interface that is in the same folder, why can't the methods that are required be added for me? This would almost make Dreamweaver a must have.

Aptana IDE

Enter Aptana, a nice alternative for the developer. Aptana is a free open-source IDE built on top of Eclipse. It can be installed as an extension for Eclipse, or as a standalone application. I have it installed as a standalone app. It has a great list of plugins to help the developer. iPhone, Adobe Air(Dreamweaver also has an Air plugin), PHP, Python, Ruby, and Nokia mobile devices. In addition to those, all of the major JavaScript frameworks are supported, inside Aptana just add a reference to JQuery for example, and everything that is available in JQuery is now available to you with complete code-assist, a huge time saver. I have heard that this available in Dreamweaver, but all I was able to find is the Spry framework, which is from Adobe anyway.

Keeping with the "Aptana is not for Designers" theme, there isn't a design view. But it does have browser tabs, mine has a Firefox tab and an IE tab with the option to add more. So now as I am building a website I can view it in Firefox and IE instantly, right in the IDE.

Code Assist is Awesome

The code assist in Apatana is top-notch. To add a PHP class, I right click in the folder where I want it, choose add new PHP class, and I get a form asking me for the class name and any references to superclasses, interfaces, etc. it even has an option to create constructor and destructor functions for me. Not to mention that when I create a plain old PHP file, it uses PHP tags.

I am currently using Aptana with the Code Igniter PHP framework to build a client website and rebuild my own site with a blog and all the bells and whistles. While Code Igniter is not "supported ", Aptana makes it a fairly easy process. I started coding it with Dreamweaver and became quickly frustrated and switched to Aptana. If you work in any form of website creation, you owe it to yourself to give Aptana a test drive.