Trent Richardson

Shrink – Compile, Combine, Compress

trent — Mon, 20 May 2013 11:35:26 +0000

For CakePHP developers I would like to welcome Shrink, a plugin I created for a simple way to compile, combine, and compress assets (specifically less). There are several other plugins to do this, but I didn’t find one that suited my fancy.. Either they were two complex for my need or too simple. Shrink aims to be somewhere in the middle.

Setup is simple just like any other CakePHP plugin (add to Plugins folder, load in bootstrap.php). I’ve successfully used it in my standard views, email views, and pdf views (via dompdf). Shrink asset compiling is easily extensible and can currently handle/compile: js, css, less, sass, scss, coffee files. Compression is currently handled with cssmin and jsmin, however it as well is easily extensible.

You can find Shrink at its new home on Github: CakePHP Shrink Plugin

jQuery Impromptu 4.3

trent — Wed, 15 May 2013 11:41:51 +0000

jQuery Impromptu 4.3 has been released, and has become even more versital, yet still maintaining its simplicity. The new version introduces two new methods addState and removeState. This means you can add and remove states on the fly! The inners of Impromptu has been updated to use these methods along with event delegation, which means few attached events and more reusable code.

Also some Twitter Bootstrap sugar has been sprinkled over Impromptu, and I have included a Bootstrap theme. What does this mean?

If you don’t use bootstrap, continue as you were. The default Impromptu theme is still right where you expect it. If you are using bootstrap Impromptu now has the proper class names on buttons, headers, and icons. There is a separate theme file for bootstrap in the themes folder which simply has the styles removed that bootstrap takes care of.

As always if you want to learn more about Impromptu and how to use many of its advanced features I highly recommend the ebook “Impromptu From I to U”.

buy PDF + Code

buy PDF Only

For all the code head over to the Impromptu documentation or check it out on Github.

Timepicker 1.3 Plus Handling Time eBook

trent — Mon, 06 May 2013 11:16:51 +0000

Two exciting announcements! First jQuery 1.3 is now available. Second, the “Handling Time” ebook is now available!

Handling Time eBook

The Handling Time eBook covers all the common topics on dealing with dates and times. On the client side it demonstrates from basic setup to time ranges.

buy

Timepicker 1.3

Timepicker 1.3 was a significant update, particularly to timezones and time unit detection. Ok, the later didn’t exist before, which will be line item 1 on the update list.

Detection of features from timeFormat. showTimezone, showSeconds, etc. no longer required.
Added Danish i18n
Localization folder renamed to i18n (datepicker consistency)
Microseconds unit added. This is basic functionality. The Javascript Date object does not natively support this, so functionality is limited. See docs.
timezoneIso8601 option removed, detected from timeFormat with “Z”
Timezone internal storage now uses integer in minutes for Date object consistency
timezoneList values should now be an integer in minutes.
Updated jQueryUI slider detection for controlType
Updated Italian i18n
Test with new jQueryUI 1.10.3

You can find the latest and greatest Timepicker on Github. Head over to the documentation for more details.

Interested in an eBook for Timepicker?

trent — Mon, 15 Apr 2013 11:29:42 +0000

With the increased attention and amount of help questions I receive for jQuery-Timepicker-Addon, I have decided to put together an eBook, Handling Time. I believe this will help many who are new to timepicker, and even those with experience when dealing with times in general will find it very beneficial. After a few years of developing and maintaining timepicker, I have found there are a few particular speedbumps that often raise questions.

This eBook will venture beyond just javascript to the server and database. After all, the server has time too!

So what will be covered?

Timepicker Setup – A basic guide to get up and running with a datetime picker.
Usability – How to make datetimepicker more accessible for touch devices.
Timezones – How timezones work in the real world, javascript, and on the server.
Ranges – How to work with time ranges. (Think arrival and departure datetimes).
Restraints – How to limit user options to certain times.
Internationalization – Provide multiple languages and time formats.
Storage – Learn how to store datetimes from multiple timezones.

So are you interested?

Head on over to the Handling Time homepage!

jQuery Timepicker Addon 1.2.2 is Here

trent — Mon, 08 Apr 2013 11:55:16 +0000

jQuery Timepicker Addon 1.2.2 has arrived and it brings several bug fixes. Among the fixes are:

Honor timeFormat when building dropdown options.
Better AM/PM detection from timeFormat.
Fixes bug breaking datepicker with defaultDate option.
Cleans up several lint errors.
Updates Brazilian Portuguese localization.
Adds Croatian translation.
Tests with jQuery 1.9.1 and jQueryUI 1.10.2.

You can learn more by stopping by the documentation site or head on over to Github.

UberUploadCropper 0.4 – Multi Image Upload and Crop Fix

trent — Wed, 27 Mar 2013 12:42:55 +0000

Interested in uploading multiple images at once, without flash, and have them queue up to crop? UberUploadCropper can handle this for you. For those not familiar UberUploadCropper, it is a jQuery plugin that combines Impromptu, FineUploader, and Jcrop to work seamlessly together as one upload and crop utility. Thanks to some handy javascript contributions this now works flawlessly, as a bug was fixed preventing repeated uploads and cropping when images are queued.

Also, if you want to become more familiar with jQuery Impromptu so you can create more advanced prompts like UberUploadCropper I highly recommend the ebook “Impromptu From I to U”.

buy PDF + Code

buy PDF Only

UberUploadCropper on Github

Want to Get Started with SVG for Retina Devices?

trent — Tue, 12 Mar 2013 12:55:19 +0000

I’ve recently be learning about improving my sites for retina and other high resolution screens. I have to admit at first I overlooked this until I purchased a new phone, and realized how poor a couple of my sites looked. From there I’ve been learning to use svg and icon fonts. I think in the end it incorporates well into my workflow, so there is so much to gain with crisp, scalable images and little to nothing lost. So, how can you get started with svg and icon fonts?

The first thing you should know, and probably already do, is older IE users will not get very good svg support, so there will have to be fallbacks. But hey, you probably already have jpg or png images anyway, right? So with that the first highly recommended read is Chris Coyer’s “Using SVG” article. He covers a lot of ways to use svg: background-image, img tag, inline, etc. He also gives a quick rundown of using Illustrator.

If you don’t have Illustrator you should try Inkscape. It is a great tool and I found the export options are great. A List Apart featured a great article on using Inkscape to convert raster to svg back in 2010.

You will notice though in the CSS-Tricks article they make extensive use of Modernizr, and well, you don’t always have that available. Good news is detecting svg support is extremely simple, and Todd Motto does a nice job showing examples of detection and fallback support with and without Modernizr:

function supportsSVG() {
    return !! document.createElementNS 
        && !! document.createElementNS('http://www.w3.org/2000/svg','svg').createSVGRect;  
}

I will also throw in the mix another handy trick not mentioned in the previous articles you will find useful. Since older browsers who don’t support svg also don’t support multiple background images, the fallback becomes inherited by lack of features. Pau Giner shows you how with what he calls the Invisible Gradient Technique:

background: transparent url(fallback-image.png) center center no-repeat;

background-image: -webkit-linear-gradient(transparent, transparent), url(vector-image.svg);

background-image: linear-gradient(transparent, transparent), url(vector-image.svg);

Finally, my new favorite is icon fonts. If you haven’t tried it you should. The benefits are 10 fold. First they’re scalable. Second, they’re like fonts, so color, size, etc. are just a matter of changing a css style. Best of all they have great browser support! There are some services like Fontello that allows you to build your own font from existing icon fonts. This also helps by reducing the font size to just what you need.

Warning: Once you try icon fonts you will never think about using standard png icons again, ever!

What other svg techniques and tools can you recommend for ever learning minds?

Why you can’t trust Javascript’s Addition, NodeJS Included

trent — Sat, 23 Feb 2013 19:00:12 +0000

You’ve been around javascript long enough to know there are some really strange quirks. Here is one I’ve not seen before. Consider very basic addition. If you want to try this just open your javascript console in Chrome or Firefox and simply enter:

4.3 + 8.0 + 6.15

Think the answer is 18.45? Wrong, you’ll get 18.450000000000003.

Ok, now lets rearrange those numbers and try it again:

4.3 + 6.15 + 8.0

Now you will get 18.45. After rearranging these some more and here are the results:

8.0 + 4.3 + 6.15 // 18.450000000000003

8 + 6.15 + 4.3 // 18.45

8.0 + 6.15 + 4.3 // 18.45

4.3 + 1 + 6.15 // 11.45

4.3 + 4 + 6.15 // 14.450000000000001

100 - (4.3 + 4 + 6.15) // 85.55

100 - 14.450000000000001 // 85.55

It seems to differ depending on the position within the addition sequence and also the numbers being added. So far these all round down, but what happens when you encounter this?

4.3 + 6.15 + 3.7 + 1.85 // 15.999999999999998

4.3 + 6.15 + 1.85 // 12.299999999999999

Ahh, now you run into some borderline issues. What if you are validating that you have $16?

16 == 4.3+6.15+3.7+1.85 // false

16 === 4.3+6.15+3.7+1.85 // false

So when do you know if you actually have 15.999999999999998 and when it is just a silly inconsistancy?
After some googling there are a few possible work arounds, like (8.0 + 4.3 + 6.15).toFixed(2) but you don’t always know how many decimal places you should need.

So you think this is just a silly client side validation issue? THINK AGAIN. This includes NodeJS as well, possibly others. This could be going into your database. Possibly over/under charging payments. Maybe you’re processing some type of precise calculations. If you know the number of decimal places you need you better ensure you’re rounding to that many decimal places.

Sure there is some fancy explanation (See http://floating-point-gui.de/), but is it broke? As far as I’m concerned, YES. Please, someone, prove me wrong!

Waiting, Patiently

trent — Tue, 05 Feb 2013 12:18:56 +0000

I would like to introduce the “works in all browsers” javascript spinner solution. There are tons of cool new spinner solutions out there, but most of them are using CSS3 which isn’t yet supported in all browsers, a canvas solution which either has poor IE support, or requires a separate polyfill plugin. Why can’t it be simpler?

jQuery Waiting

jQuery Waiting is a small plugin with a wide range of support, easy to use, and very powerful. It is smaller than many less powerful solutions. It also provides a handy api and event system, so you can interact with it! Best of all it leaves the CSS to style, and uses javascript to animate. Lets take a look at how this works. We have a simple empty div:

Add a little simple, widely accepted css (of course you can use fancy CSS3 effects if you want, thats up to you):

.waiting{ padding: 0; display: inline-block; }
.waiting-element{ margin: 0 2px 2px 0; background-color: #ccc; 
	width: 10px; height: 20px; display: inline-block;}
.waiting-play-0{ margin-bottom: 0; background-color: #999; }
.waiting-play-1{ margin-bottom: 1px; background-color: #aaa; }
.waiting-play-2{ margin-bottom: 2px; background-color: #bbb; }

And just initialize the waiting plugin:

$('#mySpinner').waiting({ 
	elements: 10, 
	auto: true 
});

And we should see the following:

Ok, granted, that is pretty simple, but you know you like circle spinners. This is where it gets real difficult. We’re going to add a radius option. Again, a simple empty div:

We’ll use a little different css this time, so we’ll change the class names:

.waiting-circles{ padding: 0; display: inline-block; 
	position: relative; width: 60px; height: 60px;}
.waiting-circles-element{ margin: 0 2px 0 0; background-color: #e4e4e4; 
	border: solid 1px #f4f4f4;
	width: 10px; height: 10px; display: inline-block; 
	-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;}
.waiting-circles-play-0{ background-color: #9EC45F; }
.waiting-circles-play-1{ background-color: #aEd46F; }
.waiting-circles-play-2{ background-color: #bEe47F; }

We’ll change the className to match our css, and tell it how large of a radius:

$('#mySpinner').waiting({ 
	className: 'waiting-circles', 
	elements: 8, 
	radius: 20, 
	auto: true 
});

The best part of all this is you don’t need to generate separate gif images for every different size spinner. You can change all your colors, sizes, styles with simple css.

Where can you get it?

You can find all the different options, methods, and events on the jQuery Waiting Documentation. If you’re ready to download it, fork it, or report an issue, head over to the jQuery Waiting on Github.

jQuery Timepicker 1.2, Works with jQueryUI 1.10

trent — Sun, 03 Feb 2013 15:18:06 +0000

If you’ve been having any issues with jQueryUI 1.10, you can now grab timepicker 1.2. This release only squashed a few bugs, but one of them prevented some users from using jQueryUI 1.10. What was fixed?

$.datepicker.log() no longer exists in jQueryUI 1.10.
ASP.NET bundling syntax error.
getDate is null if only sliders are used.
Added component.json for Bower.

Looking to help out?

I’ve also had several requests for adding a “u” option for timeFormat, representing a unix timestamp. I do see this as useful, but currently date and time are formatted separately, meaning time formatting and time parsing has no interaction with the date portion at all. This option will require a little restructuring, so the brainstorming has begun.

Another, potentially very useful addition is disabling a list of dates and times. I’m not sure the best approach for this, but my thought is an option like “disableRanges”:

$('#mydatetime').datetimepicker({
	disableRanges: [
			{ start: startDateObja, end: endDateObja },
			{ start: startDateObjb, end: endDateObjb }
		]
});

The thinking here is a user may want to pass holidays as disabled times for scheduling an appointment. I would like for anyone with thoughts on this to comment, as I’m sure there are other needs from this feature request.