It’s a nice and simple snippet which is easy to implement, though you’ll need jQuery.

Example:

HTML:


<div class="progress-wrap progress" data-progress-percent="25">
<div class="progress-bar progress"></div>
</div>


CSS:


.progress {
width: 100%;
height: 50px;
}
.progress-wrap {
background: #f80;
margin: 20px 0;
overflow: hidden;
position: relative;
}
.progress-bar {
background: #ddd;
left: 0;
position: absolute;
top: 0;
}


JS:


// on page load...
moveProgressBar();
// on browser resize...
$(window).resize(function() {
moveProgressBar();
});
// SIGNATURE PROGRESS
function moveProgressBar() {
var getPercent = ($('.progress-wrap').data('progress-percent') / 100);
var getProgressWrapWidth = $('.progress-wrap').width();
var progressTotal = getPercent * getProgressWrapWidth;
var animationLength = 2500;
// on page load, animate percentage bar to data percentage length
$('.progress-bar').animate({
left: progressTotal
}, animationLength);
}


Have a play…

CodePen: http://codepen.io/thathurtabit/pen/ymECf
Gist: https://gist.github.com/thathurtabit/5224126

Firstly, Grunt (currently v0.4.0 at the time of writing) is a JavaScript-based task runner; it allows for the automation of repetitive coding tasks allowing you to spend more time on the parts of your project that needs it, or to give Grunt’s own definition:

The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes.

which sounds pretty great to me.

Jump to

• Installing Grunt for Mac OS X
• Installing Grunt for Windows 7

Installing Grunt for Mac OS X

Firstly, you’ll need to install the Node.js package manager.

Hopefully this will be done automatically for you using the installer (.pkg) that can be downloaded from the Node website, but if you’re having problems, you might be able to install a different way.

Open Terminal, and make sure the Node package manager is installed by typing ‘npm’ and hitting enter, i.e.

Macbook-Name:~ yournamehere$ npm

If installed correctly, it will give you a list of information such as:

Usage: npm < command>

If Terminal is not recognising the ‘npm’ command, you’ll need to try to install in again, perhaps using a different method.

Now, to install Grunt, you’ll need the Grunt CLI (Command Line Interface). In case you’ve installed Grunt before and forgot about it (it happens) it’s recommend that you remove it and start afresh for our purposes. In Terminal, type:

npm uninstall -g grunt

For me, as Grunt was not installed, I received the message:

npm WARN uninstall not installed in /usr/local/lib/node_modules: "grunt"

I then needed to install Grunt CLI globally by typing:

npm install -g grunt-cli

For me this gave me the error code: EACCES, which is seemingly a permission error, so instead I tried:

sudo npm install -g grunt-cli

Which installed the Grunt CLI successfully.

Note, that this only installs the Grunt CLI (not the Grunt task runner). The idea for this is that the Grunt CLI will look for the custom version of Grunt and the Grunt plugins for each project using the Gruntfile provided in the root directory of your project. For more information on setting up a new Grunt project or working with an existing Grunt project, see the official Grunt getting started guide here.

Installing Grunt for Windows 7

Firstly, you’ll need to install the Node.js package manager.

Hopefully this will be done automatically for you using the installer (.msi) that can be downloaded from the Node website, but if you’re having problems, you might be able to install a different way.

Open Command Prompt (to do this you can go to Start and type cmd.exe) and make sure the Node package manager is installed by typing ‘npm’ and hitting enter, i.e.

C:\Users\YourName> npm

If installed correctly, it will give you a list of information such as:

Usage: npm < command>

If Command Prompt is not recognising the ‘npm’ command, you’ll need to try to install in again, perhaps using a different method.

Now, to install Grunt, you’ll need to install Grunt CLI (Command Line Interface). In case you’ve installed Grunt before and forgot about it (it happens) it’s recommend that you remove it and start afresh for our purposes. In Terminal, type:

npm uninstall -g grunt

For me, as Grunt was not installed, I received the message:

npm WARN uninstall not installed in C:\Users\MyName\AppData\Roaming\npm\node_modules: "grunt"

I then needed to install Grunt CLI globally by typing:

npm install -g grunt-cli

Note, that this only installs the Grunt CLI (not the Grunt task runner). The idea for this is that the Grunt CLI will look for the custom version of Grunt and the Grunt plugins for each project using the Gruntfile provided in the root directory of your project. For more information on setting up a new Grunt project or working with an existing Grunt project, see the official Grunt getting started guide here.

Sources:

• Gruntjs.com
• Nodejs.org

The application works by allowing them to easily visualise the notes on a fretboard in all keys and in a number of different scale.

It’s also lightweight and responsive (and free!), allowing people to quickly reference FretMap on any device with an internet connection.

As many people do, I’ve set myself some goals to achieve in 2013 both in work-time and spare-time.

Outside of work I’m hoping to complete my first (and possibly last) marathon run in Manchester in April, which means I need to get running RIGHT NOW. I also hope find the time further improve my perpetually below-average guitar playing skills after improving slightly over the last few months. I also need to make sure I manage my the work-time and spare-time better, keeping a healthy balance.

In work or work-related time, I need to continue to improve my scheduling and time-saving skills, making sure I keep myself motivated to get the best out of each day (I’ve bored friends and family over Xmas with how amazing and useful Google Docs / Drive can be in everyone’s daily routine and beyond).

On the subject of Google, I can’t stress how useful Google Reader can be for gathering really awesome articles on whichever subject you’re interested in, particularly in my case keeping me abreast of the latest goings on in the digital word (as well as keeping me up to date on my fave film and music web-casts).

One of the longer term goals which has been rattling around in my head for a while which I’ve yet to find the time to act on is to properly learn and experiment with JS WebGL development and animation. I’m going to read through WebGL: Up and Running by Tony Parisi and hopefully get me going on building a small WebGL game that has gestating in my brain chambers for years.

Anyhoo, January is a great excuse to re-evaluate where you’re heading and how you’re doing it, the trick is keeping motivated and excited about what you’re doing. I wish you (and myself) the best of luck!

The main goal of the website is to allow the work of the illustrator to shine through as clearly as possible, allowing people to enjoy the content and move fluidly through the website information to the external online store on any device.

To allow the illustrator to have full control of their content, the website is built on the WordPress CMS. This not only allows for artwork to be added, edited or deleted, but also allows the artist to give her thoughts on her work through her blog.

It’s reasonably hush-hush at the moment, so I won’t go into much detail about the project itself (information can be found on the holding page), but the scope of the holding page was to design and create an engaging and responsive teaser for the full project which will be appearing in the next few months.

The holding page makes the most of simple, bold typography and colour schemes as well as white-space and relatively targeted jQuery sections and CSS3 transitions and animations.

UPDATE: The holding page has been shortened for the next few weeks and the full version will be back up again soon.

This is nothing new, all freelancers have to go through the stress and annoyance of having to chase up late or non-paying clients, politely emailing and patiently waiting until the client decides to kick themselves into gear and clear their invoices for the all the hard work you’ve done for them. But what happens when they don’t?

If you’ve exhausted all methods of solving the issue amicably (i.e. friendly reminders, reissuing the invoices, alternative payment schedules, phone calls, etc.) it may be time to get tough.

So, today I’ve created the Crumbs theme – a free WordPress theme and/or static placeholder to be uploaded onto the clients server in place of their current website they have not yet paid for.

Crumbs aims to politely take down their website with no detrimental impact on their should-be-paid-for theme or website. As soon as the client has cleared their outstanding invoices, the Crumbs theme can be quickly and easily removed, just a click or two.

I’ve uploaded the theme onto github where people can download or branch or do whateverthehelltheywant, really.

I hope it helps.

View Crumbs Theme

Qwota is an experimental website made from a mix of different open-source software, frameworks and plugins. Version 2.0 has been redesigned to be responsive to different browser types and to improve UI/UX as well as using the jQuery Isotope plugin to arrange the quotes.

Each quote comes with further information about who said it, when they said it, and hopefully a interesting link to where people can find out more information on the text. Also, as a finder’s fee, contributors can include their own name and website address to each quote they add. If people like and decide to vote for their contributed quote, then they and their quote can sit pretty at the top of either the Popular Quotes or Top Contributors leaderboard.

Qwota was made using Twitter Bootstrap, Roots, Font Awesome, HTML5, CSS3, jQuery UI, Modernizr, Isotope, (Previously Quicksand plugin), WordPress, and with help from the kindly Stackoverflow community.

Dear Sir / Madaaaam,

We’ve just come across your work and we think you would be a good match to work on our super-exciting new project.

I’m sure you hear this all the time, but we really think we’ve thought up the next Facebook / Next-Huge-Thing. We really think it’s going to be worth billions.

We’d really love for you to spend months of your time working on a design and developing our half thought-out ideas in the hope that you will make us very, very rich.

Unfortunately we can’t afford to pay you anything.

Would this be of interest to you?

Sincerly,

Some Person.

Now I appreciate that some of these people will have legitimately awesome ideas and they’re genuinely looking for someone to help facilitate their dreams, but it seems these people care little for the time and effort required of the Designer / Developer they’re looking to hire / bleed dry.

Freelance Designers and Developers are just like every other small company on the planet in that we don’t have a huge amount of cash and are often going from job to job in the effort to pay the rent, pay taxes, pay the bills, feed the cat and we’re not always in the position to work pro bono on anything, least of all a lengthy project that will only seemingly benefit the non-paying client.

This is an old adage, but would you really approach an architect & construction company and say: “Hey! I’ve had an AMAZING idea for a skyscraper that I want to create that will make me GAZILLIONS of pounds! I’d like you for you build it for me… but I’m not going to pay you. INTERESTED?”

Because if we did that, we would be being very disrespectful and well, pretty stupid.

The idea came earlier this year when I became very frustrated with a website that asked me to enter information and then refused to do anything with it… simply giving me an endless ‘loading’ image instead. AGH.

And so, I decided to use this incredibly annoying user experience and use it for good – or rather bad – and use it to experiment and learn about user interactions with the web, what they expect, and how websites can manipulate people into giving personal information simply through ‘looking trustworthy’. The site is also makes use of Google Analytics to gauge how well people are responding to the user interface and how long they are willing to remain on the website waiting for something to happen.

The website was also a chance to experiment more with CSS3 animations, responsive layouts, UI, UX as well as jQuery, Ajax and PHP.

As of WordPress 3.0.2 and earlier, only the WordPress Thumbnail image property includes the functionality to crop the image down to the exact dimensions referenced in your Settings > Media page; whereas quite often you’ll need to crop down your medium sizes images too to keep them consistent throughout your website.

I’ve just come across this little snippet in the WordPress forums which may be useful to others.

Add the following code block to your Functions.php file:

// Add support for cropping default WordPress medium images -
if(!get_option("medium_crop"))
add_option("medium_crop", "1");
else
update_option("medium_crop", "1");

Sources:

• http://wordpress.org/support/topic/force-crop-to-medium-size

The problem comes when trying to auto-update my local WordPress install along with its plugins on my Macbook (OSX 10.7.3). WordPress would continue to request ‘Connection Information’ with regards to my FTP details which I could not bypass.

After a bit of snooping around the web, I did the following:

Open Terminal

Navigate to your home directory and type:
ls -al

Note your username, i.e. ‘joebloggs’

Then type:
sudo open -e "/Applications/XAMPP/etc/httpd.conf"
(making sure your quotemarks are not the fancy versions, but rather the standard – if you’ve installed XAMPP in another directory, update the above to your file structure)

This should hopefully open TextEdit, where you want to find the section:
User nobody
Group admin
(note: I had to scroll down the list using my keyboard down arrow)

You need to then update this section to say:
User joebloggs (or whatever your username is)
Group staff

I had the problem where my Mac would not allow me to edit the ‘httpd.conf’ file due to permissions and instead I had to create a duplicate version which I later used to save over the original. I also had the problem where although I told my TextEdit to save the file as ‘httpd.conf’ it saved it as ‘httpd.conf.txt’. To correct this, I had find the file info in my Finder window and change the ‘Name and Extension’ properties to the correct ‘httpd.conf’

Once your updated ‘httpd.conf’ file is saved in your ‘/Applications/XAMPP/etc/httpd.conf’ directory (or where ever you’ve installed XAMPP) you will then need to turn off and then turn on your Apache, MySQL, FTP functions through the XAMPP control panel. This should hopefully clear any permissions problems allowing you to auto update and download new version of your WordPress install and plugins.

Sources:

• http://www.messaliberty.com/2010/04/how-to-fix-wordpress-automatic-upgrades-and-plugin-installs-on-xampp/

That is until recently where I’ve found myself repeatedly writing 5 lots of vendor prefixes for something like CSS3′s rounded corners… so I decided to experiment with LESS - a ‘dynamic stylesheet language’ that extends the capabilities of regular CSS to allow for sorely missed features such as variables, mixins, nested rules as well as functions and operations.

There are a couple of options on how to allow LESS to extend your CSS, but the best option I’ve found so far is using the Crunch app, which runs as stand-alone software on your computer (no server-side messing) and outputs your LESS into regular CSS as well as minimising it (to a degree) stripping out all your comments and superfluous line-breaks.

The most beneficial feature of LESS and one of the many reasons why I would be reluctant to go back to writing regular CSS, is that it allows for the fiddliest parts of CSS3 features to be wielded quickly and easily, potentially boosting your website’s awesomeness no end.

For example, for something as simple as a CSS transition, in standard CSS you would have to write out something like this:

Regular CSS3 transition:

div:hover {
transition: all 2s ease-in-out; /* Standard */
-moz-transition: all 2s ease-in-out; /* Firefox 4 */
-webkit-transition: all 2s ease-in-out; /* Safari and Chrome */
-o-transition: all 2s ease-in-out; /* Opera */
-ms-transition: all 2s ease-in-out; /* IE */
}

CSS3 Transition with LESS:

From LESS mixin file:
.transition(@type: all, @duration: 0.3s, @ease: ease-in-out) {
transition: @type @duration @ease; /* Standard */
-moz-transition: @type @duration @ease; /* Firefox 4 */
-webkit-transition: @type @duration @ease; /* Safari and Chrome */
-o-transition: @type @duration @ease; /* Opera */
-ms-transition: @type @duration @ease; /* IE */
}

Now my transition becomes:
div:hover {
.transition(all, 0.5s, ease-out);
}

Which outputs into CSS as:
div:hover {
transition: all 0.5s ease-out; /* Standard */
-moz-transition: all 0.5s ease-out; /* Firefox 4 */
-webkit-transition: all 0.5s ease-out; /* Safari and Chrome */
-o-transition: all 0.5s ease-out; /* Opera */
-ms-transition: all 0.5s ease-out; /* IE */
}

The beauty is you can quickly and easily call all vendor prefixes for the specific CSS3 transition as well as feeding it different parameters by simply writing a short line of code instead of maybe 8.

This is just the tip of the iceberg with regards to have much time and power LESS lends to CSS – I strongly urge everyone to have a play.

Sources:

• http://lesscss.org/
• http://crunchapp.net/

In your functions.php file…

/**
* This is a modification of image_downsize() function in wp-includes/media.php
* we will remove all the width and height references, therefore the img tag
* will not add width and height attributes to the image sent to the editor.
*
* @param bool false No height and width references.
* @param int $id Attachment ID for image.
* @param array|string $size Optional, default is 'medium'. Size of image, either array or string.
* @return bool|array False on failure, array on success.
*/

function myprefix_image_downsize( $value = false, $id, $size ) {
if ( !wp_attachment_is_image($id) )
return false;
$img_url = wp_get_attachment_url($id);
$is_intermediate = false;
$img_url_basename = wp_basename($img_url);
// try for a new style intermediate size
if ( $intermediate = image_get_intermediate_size($id, $size) ) {
$img_url = str_replace($img_url_basename, $intermediate['file'], $img_url);
$is_intermediate = true;
}
elseif ( $size == 'thumbnail' ) {
// Fall back to the old thumbnail
if ( ($thumb_file = wp_get_attachment_thumb_file($id)) && $info = getimagesize($thumb_file) ) {
$img_url = str_replace($img_url_basename, wp_basename($thumb_file), $img_url);
$is_intermediate = true;
}
}
// We have the actual image size, but might need to further constrain it if content_width is narrower
if ( $img_url) {
return array( $img_url, 0, 0, $is_intermediate );
}
return false;
}

And then below the above in your functions.php file add the following to hook it into WordPress’s core:

/* Remove the height and width refernces from the image_downsize function.
* We have added a new param, so the priority is 1, as always, and the new
* params are 3.
*/
add_filter( 'image_downsize', 'myprefix_image_downsize', 1, 3 );

Sourced from:

• http://wordpress.stackexchange.com/questions/29881/stop-wordpress-from-hardcoding-img-width-and-height-attributes

The main aim of the promotion was to get people to spread the word about my services, as well as play around with trending technologies such as jQuery parallax.

The website is also responsive and adapts to different browser sizes, and devices with mouse capabilities can see a ’3D’ kinda movement wherein the main image moves and seems to wave.

CSS techniques such as the awesome @media-queries and @font-face were used to include custom type-faces, in this case, ‘Satisfy’  available free from Google’s Web Fonts.