Hacks to Speed Up The Development of Your Website

6 Hacks to Speed Up The Development of Your Website

When on a tight schedule, developers have to think of a way or two to speed up the development process. You can easily fall into the trap of pushing yourself over the edge to develop that website as soon as possible. Why is it a trap? Because the quality of your code will suffer and if you have to come back and fix something or make changes you will pay your time debt.

Time has never been a friend of developers. If you are a coder yourself, then you know what I’m talking about. But don’t worry. There are ways to speed up the development process, while still delivering quality outputs. Here are the six hacks that will make your website development significantly more efficient.

Don’t Jump Straight Into Coding

How many times have you heard “Planning is everything!” before? You know why? Because a good plan is a developer’s best friend. Before you start working on your website, sit down, get a pen and paper and open Google Docs.

What I’ve found particularly useful is to draw a website layout on paper, with all those divs and menus. Use the Google docs to write down the functionality. This practice will save you a great deal of time, trust me. When you are done, the drawing of your website layout and the document you’ve written will serve as the best recipe from the web developer’s cookbook to follow.

Don’t Code It If Somebody Else Did

You might think that you’ve thought of something original that you have to code from scratch. Whenever you find yourself in that situation, take a breather, and Google it. Developers around the world join communities like StackOverFlow and they talk a lot about their problems and various solutions, and you can use these in your own project. There is no need to do it from scratch.

You will be able to find a lot of working and ready-to-use solutions, ranging from the simplest ones done in HTML and CSS to the more complex ones, such as PHP scripts or Python. This alone will save you countless hours of work.

Become the Master of Your Favorite Tools

The coder is as efficient as his knowledge of the tools he is using. It doesn’t matter if you are using Sublime 3, Atom, Microsoft Visual Studio or Photoshop. If you know all the keyboard shortcuts, you will spend less time clicking and remembering where the option is in the menus.

Your ultimate goal is to become the code snippet master. If you manage to put that reusable code embedded in your editor to good use whenever the opportunity arises, you will become the master of productivity and be able to print out complex web pages in several hours.

While we are at it, let me remind you – all of the editors I’ve listed above come with PHP, JavaScript, CSS, Ruby and HTML snippets. But if you don’t find something that you use quite often, feel free to add it to the snippet manager.

Use CSS Libraries

There is no need to code like it’s 2005. We live in the age of fully-structured CSS libraries. Instead of wasting time styling your website elements from scratch, use the libraries that impact the entire layout of your website. The most popular one is definitely Bootstrap.

Not only will this save you time while you are developing your website, but it will also save you time in the future too. How? You won’t have to come back and make your website responsive, as Bootstrap CSS classes are made to be responsive.

If you need to add animation or hover effects to your website, use Animate.css and Hover.css libraries. In case you are making a website with a lot of elements, consider using CSS grid libraries such as Flexible Grid System and Semantic Grid System. These will all save you a lot of time.

Test for Errors as You Work

How many times have the errors in your code delayed your entire project? This is why someone more experience than you and me came up with “unit testing”. So instead of coding it all out in one sitting, take your time and test every section of your website.

This applies to both the looks and functionality. It’s much easier to fix the problem while you are still into coding that particular element, than to follow the breadcrumbs after you have come near the end of the project. This can be particularly useful if you are coding the backend of your website.

Use Open Source Plugins

Developing a plugin from scratch is a time consuming, if not daunting task. The most popular JavaScript library, which is also free, is jQuery. The jQuery code looks cleaner than JavaScript, which junior frontend developers hold very dear.

If you perform a simple search online, you will be amazed at how many free jQUery plugins there are. If the one you need happens to be a premium one, do your math. If you have the spare time and skill to code it from scratch, why not.

If you are new to web development, the best way to speed up your coding is to practice as much as you can. Invent your own projects and learn by overcoming challenges. On the other hand, if you have some experience, the above-mentioned hacks will most definitely help you speed up the development of your website.

Adobe Illustrator CS5 HTML5 Pack

Adobe recently announced the release of their HTML5 Pack for Adobe Illustrator CS5. It’s totally free for Illustrator CS5 users. Here’s a quick rundown from their site:

  • Efficiently design for web and devices by exporting Illustrator Artboards for unique screen sizes using SVG and CSS3 media queries.
  • Create web widgets with Illustrator by generating dynamic vector art for data driven web work-flows.
  • Take advantage of the latest enhancements to SVG and Canvas to generate interactive web content.
  • Map artwork appearance attributes from designer to developer tools—export from the Illustrator Appearance Panel to CSS3 for streamlined styling of web pages.

It’s interesting that this was released around the same time that Apple relaxed their rules about how iPhone and iPad apps can be developed, specifically in allowing tools like Adobe’s Flash-to-iPhone compiler found in Flash CS5.

In effect, Apple now allows Adobe use their Flash-based tools to develop apps, and Adobe releases tools to allow Illustrator CS5 users to develop non-Flash interactive content for the web — which in particular means developing interactive content for the iPhone and iPad. And of course for Android, since most Android phones still do not have the capability to run Flash content.

Note that this has nothing to do with Flash content displaying on Apple’s iOS devices, but interestingly offers an alternative to Flash for developing interactive web content. The two are only loosely related, but I find the shift in attitude from both companies very surprising and welcome.

I’m glad to see Adobe offering these tools and stepping up to the plate. Sure, they have a lot riding on Flash and would prefer creators to use their proprietary formats. But designers need to have tools to develop in whatever environment is applicable to their project. If a client wants HTML5, Adobe needs to offer the tools to do so before someone else beats them to it.

Adobe Evangelist Greg Rewis has an extended video demonstrating the use of the HTML5 Pack for use on the web. Looks pretty slick:

The Brads: Just Google It

Ten Ton Dreamweaver Winner Announced — And A Super-Killer Offer!

ten-ton-dreamweaver-winner-header

We’ve received some fantastic comments and feedback on last week’s Ten Ton Dreamweaver giveaway. Seems many of you are chomping at the bit to leap into the world of web design, while others have their engines revved to go further with their CSS and web design skills.

I enjoyed reading every single comment, and it was great to chat back and forth with a few of you. Sadly though, we can only draw one random winner. However, we have a very special announcement to make, so keep reading…

But before we get to that, let’s announce our randomly drawn winner. A big congratulations to mikeylikes, you’ve won yourself a copy of Ten Ton Dreamweaver! We liked your show of initiative to go beyond the classroom and teach yourself what you want to learn. We’ll be in touch with you shortly. And thanks to all the other commenters—you guys made the decision a tough one, but we have something special for you as well…

Throughout the week we had some fantastic comments. A lot of our commenters are currently in school and possibly not learning exactly the Dreamweaver / web design skills that they’re after, while many others have a solid footing in the world of print and are ready to make the leap to web. Still others have job opportunities waiting for them, or want to make themselves more marketable in these choppy economic times.

Shot1

Well, I got talking with the fellas at Go Media and I said, “Ya know, there’s so much interest for Ten Ton Dreamweaver, and so many readers need to learn this stuff, it’s too bad that just one person wins a copy. We’ve gotta do something to help everybody else out too.” We got thinking about it, and came up with something that we think you’re really gonna dig…something so extra-special it’s only being offered to Go Media readers. Check this out:

I spent the weekend in the recording studio coming up with some super-killer bonus material. As it turns out, I hammered out nearly a half-hour’s worth of training — and by the way, it was Thanksgiving weekend up here in Canada, so I was rolling myself off to record more content between turkey meals and pumpkin pie. You’re welcome!

So what the heck is Ten Ton Books and Go Media gonna do with all this extra bonus material? Why, give it to you for free of course! So here’s the deal. If you dig Ten Ton Dreamweaver and wanna launch your web design skills through the stratosphere, order the DVD before November 20th and we’ll send you an extra DVD loaded with all the bonus material absolutely free. In fact, as an added thank-you, Ten Ton Books will toss a few extra goodies on the bonus DVD as well. How’s that sound?

TTDWess_BoxArtLeft

The bonus DVD will include nearly 30-minutes worth of training on building and managing CSS-based floats in Dreamweaver (a must-know technique for every web designer) as well as an exclusive 13-minute clip from the soon-to-be-released Ten Ton Photoshop which features material from Go Media’s Arsenal. Freakin’ awesome? You bet.

Shot3

Snag all the free content and your copy of Ten Ton Dreamweaver right here, and lets get ya on the launchpad and ready for lift-off! Be sure to enter the promo code “GoMediaTTDW” on the checkout page to receive your free bonus DVD!

Design An Elegant Featured Content Slider for WordPress

An Elegant Featured Content Slider for WordPress

by John Sexton December 22nd, 2008.

Introduction

In this tutorial, we’ll create an elegant featured content slider for WordPress like the one featured on http://www.fuseboxtheatre.com.

This featured content slider is based on “The Coda Slider,” a neat device used by Panic Software to display information about their “Coda” product on their website (http://www.panic.com). This effect is beautiful, flexible, and often copied.

We’ve managed to put together a nice implementation that seamlessly integrates with WordPress for easy, automatic populating of featured content. The slider we’re going to build today uses a number of existing components, including the Coda Slider jQuery plugin, the Easing jQuery plugin, and jQuery itself.

The original Coda Slider tutorial at jQuery for Designers goes into the nuts and bolts of the jQuery code and the mark-up structure. I’ll refer you there if you want to learn more about the jQuery is actually working. Including it here would make this tutorial way too long – and besides, there’s no sense in re-inventing the wheel!

http://jqueryfordesigners.com/coda-slider-effect/

The purpose of this tutorial is to seamlessly integrate this slider with an existing WordPress installation to create a beautiful, automatically populated, easy to manage featured content section. Let’s get to it!

The Markup and Javascript

As mentioned above, please refer to http://jqueryfordesigners.com/coda-slider-effect/ for a description of the jQuery, markup, and basic CSS necessary to get the slider working.

That tutorial also discusses the various jQuery plugins you need to get the slider working in the first place. For convenience, I’ve condensed the other jQuery plugins into 1 javascript file, which I’ve called coda-slider-condensed.js. You can download it here: coda-slider-condensed.js (Right click, save as).

The other jQuery plugin that you will need — that is not included in the jQuery for designers tutorial, but IS included here — is the jQuery Easing plugin. Easing is what gives the slider its sense of momentum – a small touch that really enhances the overall experience.

You can also get jQuery Easing here: http://gsgd.co.uk/sandbox/jquery/easing/

My coda-slider-condensed.js file already has easing enabled. If you want to change the type of easing, or its duration, look at lines 84-89 of coda-slider-condensed.js.

Before we get started with the WordPress goodness, all you have to do is make sure you include the jQuery easing file, as well as the coda-slider-condensed.js and, of course, jQuery itself, in your WordPress header.php file. Just cut and paste the following into your < head > < / head > tags.

[sourcecode language=”html”]

<script src="http://www.yoursite.com/wp-content/themes/yourtheme/js/jquery-1.2.6.min.js" type="text/javascript"></script>

<script src="http://www.yoursite.com/wp-content/themes/yourtheme/js/jquery.easing.1.3.js" type="text/javascript"></script>

<script src="http://www.yoursite.com/wp-content/themes/yourtheme/js/coda-slider/coda-slider-condensed.js" type="text/javascript" charset="utf-8"></script>

[/sourcecode]

Make sure to include the correct path to your javascript files – these paths are just examples!

Integration With WordPress

Now that we have the basics we need to get the Coda Slider working, we can get to the meat of this tutorial: how to integrate with WordPress!

Here’s what we want to do: create a featured content slider with our most recent 3 posts. Each featured post has an image and an excerpt associated with it. We want the image to show up both within our sliding panels, and as a smaller thumbnail in the slider navigation.

Let’s get started:

  • Since we want to feature 3 posts, we need to keep track of how many posts we’re going through. To do this, we’ll initialize a variable ($postcount) that we can use to track our progress. This handy variable will also enable us to seriously condense the code that we write later (that’s where the ‘elegant’ part comes in!)
  • Retrieve a query from the WordPress database using the powerful wp_query command. Here we’ll just use it to grab the most recent 3 posts. If you want to learn more about wp_query and what you can do with it, check this out: http://nettuts.com/working-with-cmss/build-a-newspaper-theme-with-wp_query-and-the-960-css-framework/
  • Loop through each of the posts we have retrieved from the database and display them as our three featured posts. We want the thumbnails of each post’s featured image to automatically appear in the navigation section of our slider.
  • Prevent duplicate posts from showing up using a simple – but important – bit of code: $do_not_duplicate[] = get_the_ID(); This is an array of post IDs that we will store and reference later – to make sure that posts that show up lower down on our site are not duplicates of those in the featured section.

Here’s what this part looks like:
[sourcecode language=”html”]

<?php
$postcount = 0;
$featured_query = new WP_Query(‘showposts=3’);
while ($featured_query->have_posts()) : $featured_query->the_post();

$do_not_duplicate[] = get_the_ID();
$postcount++;
?>
[/sourcecode]

That’s just the PHP – we’ll need to wrap it in some DIVs to make it work with the slider, but we’ll tackle that later.

Filling The Panels

Next, we initialize our panels – this is where the power of our $postcount variable comes into play. Rather than have to manually create each panel (and manually add or subtract panels if we decide we’d like to change the number of featured stories), this variable, coupled with some simple PHP, allows us to automate that process.

[php]

<div class=“panel” id=“featured-<?php echo $postcount; ?>”>

CONTENT GOES HERE

</div> <!– End Panel –>
[/sourcecode]

We will end up with a series of DIVS like this:

[sourcecode language="html"]
<div class=“panel” id=“featured-1”> CONTENT </div>
<div class=“panel” id=“featured-2”> CONTENT </div>
<div class=“panel” id=“featured-3”> CONTENT </div>
[/php]

For CONTENT, anything could go in that spot – static content, post excerpts, custom field information, etc. Now I’ll briefly describe how to get the featured images and featured text into that content area.

Using Featured Images

On http://www.fuseboxtheatre.com, we are pulling data from the post’s custom “Image” field to get the featured image, and we are also getting the title and excerpt. Here’s how we do it:

[sourcecode language=”html”]
<div class="featured_media">

<?php
// get the image filename
$value_feat_img = get_post_custom_values("Image");

if (isset($value_feat_img[0])) { ?>

<a href="<?php the_permalink() ?>" rel="bookmark"><img class="frame" src="<?php echo bloginfo(‘template_url’); ?>/yourimagefolder/<?php $values = get_post_custom_values("Image"); echo $values[0]; ?>" alt="<?php the_title(); ?>" />
</a>

<?php } ?>

</div>
[/sourcecode]
This gives us an image that is linked to our post. This assumes that you have your post image located in a folder called “yourimagefolder” that resides inside of your site’s root. Of course you can adjust your path to whatever fits your individual situation. You can manipulate this image with CSS by targeting the wrapping div, of class .featured_media.

To assign an image to a post, go down to the “Custom Fields” section of your post and enter the image name with a custom field key of “Image,” like so:

Using Featured Text

Now we want the text to go along with the image. We open another div, “.featured_text” and go from there:
[sourcecode language=”html”]

<div class="featured_text">

<h2 class="entry-title">
<a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?>
</a>
</h2>

<div class="entry-content">

<?php the_excerpt(); ?>

</div>

</div>
[/sourcecode]
This will give us a containing text area, an < h2 > level post title which is linked to our post, and the excerpt for that post. Again we can manipulate these using CSS by targeting “.entry-title” or “.entry-content”.

That’s all we need inside each one of our sliding panels. Now we need to end our WHILE loop and close some divs.
[sourcecode language=”html”]

<?php endwhile; ?>

[/sourcecode]

Adding Thumbnail Navigation to the Slider

Now comes the navigation – these are thumbnails that you can click to go to the associated featured post. These will be automatically drawn from the same “Image” custom field as your featured post image.
[sourcecode language=”html”]
<div id=“shade”>
<ul class=“navigation”>

<?php
$postcount = 0;

$featured_query = new WP_Query(‘showposts=3’);

while ($featured_query->have_posts()) : $featured_query->the_post();

$do_not_duplicate[] = get_the_ID();
$postcount++;
?></ul>
</div>
[/sourcecode]
We start off by opening our #shade div and our Navigation list – then do the same PHP as before to make sure we get the same three posts and do not duplicate them – after all, we want the thumbnails, post titles, or whatever else we are using for the slider navigation to correspond to the content they are matched to.

For each navigation item, we use the same code we used before to get the post’s custom image, but now we put it inside of a list item:
[sourcecode language=”html”]
<li>

<?php // get the image filename
$value_img = get_post_custom_values("Image");

if (isset($value_img[0])) { ?>

<a href="#featured-<?php echo $postcount; ?>">

<img class="scroller-thumb" src="<?php echo bloginfo(‘template_url’); ?>/yourimagefolder/<?php $values = get_post_custom_values("Image"); echo $values[0]; ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" />

</a>
<?php } ?>

</li>

<?php endwhile; ?>
< / div> <!– End Shade (be sure to remove space) –>

[/sourcecode]
The cool thing here is use of the $postcount variable – we are now linking our thumbnails to the panel divs we generated before – all by their IDs, and all automatically, just by referencing $postcount! This means we can just write the code once and loop it, rather than having to write it out explicitly for each panel.

We’re also using the WordPress custom field “Image” again – this time to take the same image we used as our featured image, and now use it as a slider navigation thumbnail. Using the technique, we can have this same custom image show up in the actual sliding “Panel” divs themselves, too!

The one thing that’s different here is that we’ve added a class to the image: “.scroller-thumb” Now, using CSS, we can specify a size for this thumbnail image. After all, we want to use the same image for the navigation as for the featured image, but we don’t want them both to be the same size. We also don’t want to manually create two image sizes and two custom fields for every post.

Here’s some simple CSS to constrain these image sizes:
[sourcecode language=”css”]
img.scroller-thumb{
padding: 0.3em 0.4em;
border: 0.1em solid #2b2b2b;
width: 13.3em;
}
[/sourcecode]
Now we’ve finished the operations we want for each list item, so we end our WHILE loop, and close the navigation list, #shade DIV. That’s it for the code portion of the slider – now we need to make sure everything is nicely wrapped up inside of the appropriate divs. Here it is all together: In your HEADER.PHP:
sourcecode language=”html”]

[/sourcecode]
In your INDEX.PHP (or wherever else you want the slider to appear)
[sourcecode language=”html”]
<div id="wrapper">
<div id="slider">
<div class="scroll">
<div class="scrollContainer">
<?php
$postcount = 0;

$featured_query = new WP_Query(‘showposts=3’);

while ($featured_query->have_posts()) : $featured_query->the_post();

$do_not_duplicate[] = get_the_ID();
$postcount++;
?>
<div id="featured-<?php echo $postcount; ?>" class="panel">
<div class="featured_media">

<?php
// get the image filename
$value_feat_img = get_post_custom_values("Image");

if (isset($value_feat_img[0])) { ?>

<a rel="bookmark" href="<?php the_permalink(); ?>"><img class="frame" src="<?php echo bloginfo(‘template_url’); ?>/yourimagefolder/<?php $values = get_post_custom_values("Image"); echo $values[0]; ?>" alt="<?php the_title(); ?>" />
</a>

<?php } ?></div>
<div class="featured_text">
<h2 class="entry-title">
<a title="Permanent Link to <?php the_title(); ?>" rel="bookmark" href="<?php the_permalink(); ?>"><?php the_title(); ?>
</a></h2>
<div class="entry-content">

<?php the_excerpt(); ?></div>
</div>
</div>
<!– End Panel –>

<?php endwhile; ?></div>
<!– End Scroll Container –></div>
<!– End Scroll –>
<div id="shade">
<ul class="navigation">

<?php
$postcount = 0;

$featured_query = new WP_Query(‘showposts=3’);

while ($featured_query->have_posts()) : $featured_query->the_post();

$do_not_duplicate[] = get_the_ID();
$postcount++;
?>
<li>

<?php // get the image filename
$value_img = get_post_custom_values("Image");

if (isset($value_img[0])) { ?>

<a href="#featured-<?php echo $postcount; ?>">

<img class="scroller-thumb" src="<?php echo bloginfo(‘template_url’); ?>/yourimagefolder/<?php $values = get_post_custom_values("Image"); echo $values[0]; ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" />

</a>
<?php } ?></li>
< ?php endwhile; ?></ul>
</div><!– End Shade –>
</div><!– End Slider –>
</div><!– End Wrapper –>
[/sourcecode]

Conclusion

This has been an overview of how to create an elegant featured content slider for WordPress. I hope you’ve enjoyed it! Below, you can find the CSS we are currently using for our slider at http://www.fuseboxtheatre.com. You may need to tweak it to fit your own layout.

One last thing: rather than just having the most recent three posts appearing in your featured content slider, sometimes you want to be able to control which posts show up. There are a number of ways to do this, such as adjusting the post date, assigning posts to a specific “featured” category, etc.

I prefer to do this using another cool WordPress plugin: WP-Sticky. You can find it here: http://lesterchan.net/portfolio/programming/php/#wp-sticky (Edit: This was written before the release of WordPress 2.7, which has a “Stick Post” feature build-in.)

I’ve found that using this plugin to assign the status of “Announcement” to the posts I want to feature is the easiest way to go. Announcement posts will always stay on top of the rest of your posts, but you can easily turn “Announcement” off, and the post will return to its rightful place among the rest of your posts. There are more cool tricks you can do with this plugin – I’ll encourage you to play around with it to discover them for yourself!

BONUS:

Remember that cool stuff we did with do_not_duplicate? Let’s say you have a bunch more posts that you want to appear below your featured content area (like we have on http://www.fuseboxtheatre.com). In order to make sure those posts don’t appear in duplicate, use this bit of code on your second WordPress loop:
[sourcecode language=”html”]

<?php query_posts(‘showposts=8’); ?>;

<?php while (have_posts()) : the_post();

if (array_search(get_the_ID(), $do_not_duplicate) !== false)

continue; update_post_caches($posts);
?>;

CONTENT GOES HERE

<?php endwhile; ?>;

[/sourcecode]

The CSS:

[sourcecode language=”css”]

/* FEATURED CONTENT SLIDER STYLES */

#wrapper{
width: 62.2em;
border: 0.1em solid #2b2b2b;
margin-bottom: 2em;
}

#slider {
margin: 0 auto;
position: relative;
}

.scroll {
width: 62.2em;
overflow: auto;
overflow-x: hidden;
position: relative;
background: #0e0e0e;
}

.scrollContainer div.panel {
padding: 1em;
width: 61.2em;
}

.format_text.featured_media{
margin-right: 1em;
float: left;
}

.format_text.featured_media a img{
width: 15em;
height: 12em;
}

.format_text.featured_text{
font-size: 1em;
float: left;
width: 35.5em;
}

.format_text.featured_text div.format_text.entry-content p{
margin-bottom: 0;
padding-bottom: 0;
}

#shade {
background: #000;
height: 9em;
border-top: 1px solid #333;
}

#shade.tall-shade {
background: #000;
height: 12em;
border-top: 1px solid #333;
}

ul.navigation {
list-style: none;
margin: 0;
padding: 0;
padding-bottom: 0.9em;
}

ul.navigation li {
display: inline;
margin-right: 0.8em;
}

ul.navigation a {
padding: 0.9em;
color: #000;
text-decoration: none;
float: left;
font-size: 1.25em;
}

ul.navigation a:hover {
background: url(images/arrow_down.png) no-repeat 50% 0%;

}

ul.navigation a.selected {
background: url(images/arrow_down.png) no-repeat 50% 0%;
}

ul.navigation a:focus {
outline: none;
}

.scrollButtons {
position: absolute;
top: 130px;
cursor: pointer;
}

.scrollButtons.left {
left: -13px;
z-index: 100;
display: none;
visibility: hidden;
}

.scrollButtons.right {
right: -13px;
z-index: 101;
display: none;
visibility: hidden;
}

.hide {
display: none;
}

span.thumbtitle{
display: block;
font-size: 1.3em;
text-align: center;
display:none;
}

img.scroller-thumb{
padding: 0.3em 0.4em;
border: 0.1em solid #2b2b2b;
width: 13.3em;
}

img.scroller-thumb-big{
padding: 0.3em 0.4em;
border: 0.1em solid #2b2b2b;
}

a.selected img.scroller-thumb{
}

[/sourcecode]