jQuery 3.0 alpha released

It’s probably gonna be a big deal.

Previous to this, jQuery 1.x was the IE8-compatible version and 2.x was the forward-looking version which only worked in IE9 and modern browsers. This was confusing to a lot of newcomers who just assumed that 2.x was the latest and greatest version, so now we have”jQuery Compat” 3.x and jQuery 3.x instead.

Please note that there are some breaking changes, plus this is an alpha release, so don’t do anything reckless like using it in production untested.

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>.

What I’ve been up to

Nothing new to add to the portfolio right now, so I’ve been continuing to study up on AngularJS 1.3 and improving my employee directory app, mostly through code optimizations — I’ve still got a lot to learn.

I bought an e-book version of ng-book by Ari Lerner recently, and have been working my way through it. I have an unusual approach to learning a new language or framework, I think — first I learn what it is, then I study the tutorial, then I study the documentation and try to build something, and then (if I still need it) I buy a good book to help me out.

When I was first learning jQuery, that book was O’Reilly’s jQuery Cookbook by Cody Lindey (et.al.) — it didn’t try to teach me jQuery from scratch, but approached it in a “here’s a problem, here’s how to solve it” way that I personally prefer. (It might be worth mentioning that I was never a good classroom learner in school. In my opinion, the best thing about a good instructional book is that you can learn from it at your own pace.)

ng-book doesn’t use the cookbook approach, but it does walk through AngularJS in a much clearer manner than the documentation does. So far, almost every chapter has taught me something new that I’ve implemented in my existing code. If you were to ask me the best way to learn AngularJS from the beginning, I’d suggest the official tutorial followed by ng-book, and use the documentation to fill in the technical gaps as you implement what you learn.

Rebuilt site: Pascal pour Elle

Pascal pour Elle

One of the first sites I built when joining my current employer about three years ago was Pascal pour Elle, a salon whose website needed a makeover and HTML5 update. Recently, the client wanted a full makeover, so I got back to work. The new and improved site rolled out last Friday. Continue reading Rebuilt site: Pascal pour Elle

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