Timeline of a bugfix

2:00pm (yesterday): While reviewing site changes with our designer one day prior to launch, I noticed that the shopping cart functionality was screwed up. Badly. The site is using Commerce for Drupal 7, and when you change options for a product prior to clicking “Add to Cart”, it’s supposed to refresh the form with new details and an updated price. Instead, the form disappears. Obviously, this can’t be launched and fixed later. Continue reading Timeline of a bugfix

multi-select with checkboxes

If you have a very long list of options, neither <select multiple> nor <input type=”checkbox”> is quite ideal. This combines the two using jQuery.

When an option is selected, a checkbox (with label) is automatically created using the same “name” and “value” attributes. When the checkbox is un-checked, it fades away (after a brief delay) and is re-attached to the single-select.

Note that this uses progressive enhancement; if JavaScript is disabled, an ordinary <select multiple> will be provided. If some options are already selected in the HTML, those are extracted as checkboxes automatically. The “required” attribute is also passed along to the checkboxes, if set in the <select>.

Achievement unlocked: first AngularJS app

I finished my first AngularJS app today, after a couple of weeks of tinkering and re-reading the docs.

It took a little while to un-learn everything jQuery has taught me about DOM manipulation, but Angular’s two-way data binding is absolutely the way you want to go if you’re designing anything like a real web app.

Sadly, I can’t (well, shouldn’t) link to it here, since it’s for a client’s internal use only. Hopefully I’ll have something I can post about before long. (Update: now I do!)

Some good links if you’re a jQuery developer learning AngularJS for the first time: Continue reading Achievement unlocked: first AngularJS app

Manipulating :before and :after content via JavaScript

When someone asks how they can use JavaScript to change the content of :before and :after CSS pseudo-classes, the usual answer is, “You can’t.” Since those CSS pseudo-classes aren’t part of the DOM, you can’t use DOM methods to manipulate them.

Unsurprisingly, the real answer is a bit more complex. Here’s a rundown of all the available techniques, with their pros and cons. Continue reading Manipulating :before and :after content via JavaScript

Back to school: AngularJS

Yesterday I took another look at AngularJS and was a lot less intimidated this time. Today it’s time to get my hands dirty.

Well, that’s not exactly true. It’s more like, I didn’t have a lot of use for it at the time. But now, I’ve got a (small, non-public) project at work that I built using MVC principles, jQuery and some class-driven HTML templates, and rewriting the whole thing in AngularJS would be completely natural.

Online tutorials and documentation are all well and good, but it’s much easier to learn something new if you already have a project you want to use it on.

Vasilko Architects

Vasilko Architects

 

This is a fairly basic site content-wise, but it’s the first client site we’ve built on the Bootstrap 3 framework — extensively customized, of course, and fairly heavily optimized. jQuery provides animations when you mouse over project thumbnails, and the project slideshows themselves are powered by Bootstrap’s Carousel component.  Continue reading Vasilko Architects

Mobile Chrome removing 300ms click delay

300ms tap delay, gone away — and speculation about when and if this will spread to other browsers.

This may or may not affect some mobile JavaScript I’ve written. For instance, I’m currently putting the finishing touches on a tablet app that’s designed for private use, and therefore only will be used on a tablet, wherein I’ve hijacked the “touchstart” event like so:

$('selector').on('touchstart', function(e) {
    e.preventDefault();
    $(this).trigger('click');
});

…which works fine, as long as I’m trying to trigger JavaScript code and not a hyperlink click (which can’t be triggered by code due to browser security restrictions). I didn’t like doing so, but performance was of the essence. It’d be nice to do things the “correct” way and still get the maximum performance.