Web Development

Why Websites and Software Take so Long to Build

  0 Comments

…can you think of any job where people are making really complex things by hand, and which requires a ton of experience and training to be good at, yet everyone and their uncle has an opinion on how long a project should take to get done? Why is it that no matter how long a project takes, the customer always thinks it should be faster or cheaper?

via Scott Porad’s post “Why do web sites and software take so long to build? And why is it so hard?”

Where to Find Professional WordPress Developers

  0 Comments

I am not the right fit for every WordPress development project. When I have to turn down a prospective client project, I recommend another developer when possible.

Often I cannot think (or do not know) of a specific developer that meets the needs of the project. I want to be helpful, so I do the next best thing. I suggest three resources that list quality WordPress developers:

WP Candy Pros

WPCandy Pros

WP Candy, the WordPress news and information blog, hosts the most complete directory of WordPress professionals. The directory can be filtered by region, specialty and price range.

WP Engine’s Consultants

WP Engine WordPress Consultant Listing

The specialized WordPress hosting service, WP Engine recently started their own consultants/developers list that includes specialties, bios, price-ranges and contact information. The consultants/developers WP Engine lists are hand-picked as resources to recommend to their own hosting clients.

Code Poet Directory

Code Poet Directory

Automattic, the company behind WordPress, maintains the Code Poet Directory. The companies and individuals in the directory can be filtered by region, specialty, platform and price-ranges. Those listed are considered to be enterprise-level WordPress professionals, web designers and developers.

Async Social Sharing WordPress Plugin

  12 Comments

Async Social Sharing Screenshot

I have never found a WordPress social sharing plugin that I loved. I just wanted a simple social plugin that would load any external scripts asynchronously, allowed me to share my posts on Twitter, Google+, Linkedin and Hacker News and never included the words “Sharing is sexy!“.

A few weeks ago I started working on developing my own social sharing plugin, and today it is available to the public via Github.

Download from Github

I hope to have the plugin approved and available via the WordPress plugin repository within the next week.

Update: May 1, 2012

The plugin is now listed and available for download from the WordPress plugin repository.

Version 1.0.1 added lazy loading to async-share.js and fixed bug with plugin settings link.

Download from WordPress.org

Features

The Async Social Sharing plugin loads the third-party social scripts asynchronously to improve site performance.

The plugin allows you to display the following sharing widgets:

  • Twitter
  • Facebook
  • Google+
  • Linkedin
  • Hacker News

An options panel is provided to allow unwanted social widgets to be disabled:

Async Social Sharing Plugin Options Page

Why is Asynchronous script loading better?

Asynchronous loading allows multiple files to load parallel to each other. Instead of having to wait for Twitter to respond with their script, the browser moves on and starts fetching the next request.

Async Social Sharing Firebug Performance

Credits

JavaScript code was inspired by Stoyan Stefanov’s Social Button BFFs blog post.
HackerNews button code by Ilya Grigorik


 

Update: May 1, 2012

The plugin is now listed and available for download from the WordPress plugin repository.

Version 1.0.1 added lazy loading to async-share.js and fixed bug with plugin settings link.

Download from WordPress.org

BootstrapWP: WordPress Theme Development Continues

  18 Comments

Screenshot of BootstrapWP Version 1.0 in progress

On January 31st, Twitter released version 2.0 of their popular Bootstrap framework complete with a responsive stylesheet and new components. I have been working to keep BootstrapWP, the WordPress theme for Bootstrap as up to date as possible.

If you have been using any previous versions of the BootstrapWP for theme development, I encourage you to switch to the development branch on Github. The development branch contains many bug fixes along with overall style and device response improvements.

Usage: Customize and override any of the styles using style.css file. All .css and .js files are loaded in functions.php. Don’t forget to disable any of the .js files you do not need

All development updates are displayed on the Demo site: http://www.rachelbaker.me/bootstrapwp/

BootstrapWP Development Change Log

 

Header.php

  • Added body data attributes: data-spy=“scroll” data-target=“.subnav” data-offset=“50” data-rendering=“true”

  • Changed navbar class to Bootstrap default of “navbar-fixed-top”

  • Updated wp_nav_menu function array, added “‘container’ => ‘div’, ‘container_class’ => ‘nav-collapse’,” to provide div wrapper with proper class

Functions.php

  • Added bootstrap-responsive.css to bootstrapwp_css_loader function

  • Added application.js to bootstrapwp_js_loader function and removed tablesorter.js

  • Revised pagination section to use ul class=“pager” instead of div id=“pagination”

Page-JSGuide.php

  • Updated Javascript Guide Template to match content from Bootstrap javascript.html file

Footer.php

  • Removed jQuery onload functions that are now all called in application.js

  • Added jQuery append function to automatically apply b class=“caret” to dropdown menu items in navbar

Style.css

  • Updated icon image location to match theme setup

  • Added .icon-white class with corrected image location

  • Removed over-ride of body padding to allow correct spacing with fixed navbar

  • Added styles for comment form

  • Added color primary button colors for comment and search submit buttons

Index.php

  • Edited content on index.php template to directly correlate with index.html Bootstrap file

Other/Misc.

  • Updated CSS and JS files to Bootstrap 2 Final Release files

  • Removed “lib” folder and replaced with Bootstrap “less” folder

  • Removed tablesorter.js file – as it is no longer used in Bootstrap 2.0

  • Removed wordpress.css file – as it is no longer used in Bootstrap 2.0

Good feedback relates back to goals and user needs…

  0 Comments

Good feedback relates back to goals and user needs. Bad feedback is subjective and prescriptive.

For example “There’s way too much going on here and the “Add to Cart” button gets lost.” That’s excellent feedback. Relates to the goal of the page, which is to apparently sell something, and communicates a problem to be solved, which is to get rid of all the junk on the page.

Avoid personal preferences: “I hate green.” There is absolutely nothing I can do with that statement other than feel sorry for you because there are some very nice green things in the world. Like money—which you’re now wasting by giving me bad feedback.

Prescriptive feedback comes along the lines of “Move the buttons over here.” And, of course, everyone’s favorite: “Make the logo bigger!” These may, in fact, be excellent ideas, but if we talked about the problems you’re trying to solve with these prescriptive solutions we might come up with better solutions or possibly uncover a bigger problem in the overall design system.

via “Giving Better Design Feedback” by Mule Design

Test and Build Responsive Websites Faster with Screenfly

  0 Comments

Screenfly screenshot of Hacker News website

When building the new WordPress theme for this site, I wanted it to be responsive to the various device sizes and resolutions visitors were using to read my posts. Testing a website in the latest release of the major desktop browsers is hard enough, testing the different screen sizes and resolutions for mobile phones and tablets was utterly painful.

I have tried many different online services for responsive testing, but Screenfly is my favorite because:

  1. Moving back and forth among the different devices is simple and fast
  2. The website displayed is clickable; testing hover states and user interactions can also be done
  3. Even the small 320×240 Blackberry screen is available as a testing option
  4. It is free (although I would gladly pay for the service)

Screenfly is a free responsive testing service provided by Quirktools

Note: Screenfly is not a desktop browser testing replacement, it does not offer browser options for desktop or television screen sizes/resolutions.

ImageOptim: Optimize Images Easily With This Free Mac App

  0 Comments

ImageOptim Application Screenshot

ImageOptim is an open-source (free) Mac application for optimizing images for the web. The application is fast and easy to use with a drag and drop interface.

ImageOptim has built-in support for the following optimization tools: AdvPNG, OptiPNG, Pngcrush, JpegOptim, jpegtran and Gifsicle. Support for PNGOUT can be easily added manually.

Keep those images tiny, and page load times low.

Download ImageOptim

Remember You Are the Expert

  0 Comments

Whenever a client makes a specific request for something you know is a bad idea, try turning it around and asking them what it is that’s bothering them. Exactly what are they trying to solve? This allows you to first try and get to the root of the problem so that you can come up with a more appropriate way to solve it; rather than just implementing the bad idea.

via Humble Freelancer, Assertive Businessperson – A How To

To Write Good Code Start With Bad Code

  2 Comments

…it helps a lot to open a new editor window and try to write code that just works. Without being elegant, fast or maintainable. Just something that works properly. And after you manage to put your thoughts into (bad) code, it’s easy to refine it from there and end up with good code.

Just don’t stop at the bad code, like many beginners do. It’s like when designers sketch a rough draft for a logo, before drawing the digital version. Could you imagine how horrible it would be if they wanted to stop there and give the rough sketches to the client instead?

- from To write good code, you sometimes have to write bad code by Lea Verou