Ten Must-Have JS Plugins for Busy Developers

This guest post on HtmlCenter blog is written by Casey Ark who runs Plato Web Design. We are always looking for interesting contributions to our blog which can provide value to our readers, please get in touch.

I run a design firm called Plato, and about a year ago, my team and I had reached an impasse. Like everyone else, we built websites with PHP/Wordpress, and had a great time doing it, but there was one problem: we were slow.

So we analyzed our processes – we watched everything our developers did each day, and tried to find the biggest time-wasting activities. After quite a bit of analysis, we eventually found out that approximately 50% of the time each of our developers spent each day was on repeatable tasks.

In fact, the biggest time-suck of all was in programming and reprogramming simple JavaScript features like lightboxes, form validation, and galleries. And in most cases, we were reinventing the wheel: features like these were already available as free Javascript plugins.

In the end, we spent a few weeks searching out the easiest-to-install, most customisable JS scripts in the world for use in our sites, and we saw an incredible increase in productivity…

Building AngularJS based native mobile application. Part 2

This is the second part of tutorial for building native mobile application based on AngularJS, HTML5 markup and CSS styles. In the first part you will find how to setup the new project, add routes, controllers, HTML5 views and do simple testing in a standard web browser.

What we are doing in this tutorial?

In this tutorial part we are going to take previously created application and add back navigation button, sliding animations between the views and functionality to retrieve data from web services by using asynchronous HTTP communication. Finally I’ll give some hints how to wrap this application into PhoneGap framework in order to create installable version. Lets get started.

How to build AngularJS based native mobile application

This is the first part of the tutorial for building native mobile application based on AngularJS framework, HTML5 markup and CSS styles. The second tutorial part can be found by following the link.

I have recently started using AngularJS a JavaScript tool set for building HTML5 applications. As we are covering cross-platform mobile application development here on htmlcenter, I decided to write a tutorial and share my experiences while using powerful and quite easy to understand AngularJS MVC structure for developing cross-platform mobile applications.

This tutorial is about how to build Angular powered HTML5 mobile application, wrap it up with PhoneGap and distribute as a native mobile app (on several mobile platforms if you wish so). We have split the tutorial into 2 parts, just to make it easier for information to sink in. As always, links to the example source code can be found at the end of the tutorial posts.

What are we going to cover?

First, we will briefly explore what is AngularJS (however, this tutorial is not about learning the basics),  we are going to pick Ratchet as a front-end framework for our HTML5 mobile application and create MVC structure. Second tutorial part covers how to make our view transitions animated, how AngularJS communicates with web services  and how to wrap up AngularJS application with PhoneGap. Sounds like we have some ground to cover. Lets get started.

Using jQueryUI in WordPress

With the update to WordPress 3.3.x, the WordPress core now includes the entire jQueryUI suite packaged in the download. No longer do plugin and theme developers have to include their own custom builds of jQueryUI elements (hopefully they never did include custom builds of the elements, but there are quite a few plugins and themes that did). Instead, you simply need to enqueue the existing scripts.

Following is a full list of the jQueryUI elements included in WordPress, along with their “handles” for use with the wp_enqueue_script() function.

Handling One Radio Button With JavaScript

Today, I discovered an issue that I have probably encountered in the past; but it’s been so long I forgot about it. I had some JavaScript set up to select a radio button based on text input, and then update the text based on the selected radio button (it’s a TinyMCE plugin that inserts a shortcode into the WordPress visual editor). Throughout all of the testing I performed, everything worked just fine. Today, though, someone else was testing the interface and could not get the text or the radio button to update properly.

After a bit of testing and messing around with the interface, I finally discovered that my JavaScript wasn’t recognizing the existence of the radio button on the form. After a bit more testing, I realized that’s because only one radio button existed; and JavaScript doesn’t treat radio buttons as arrays when there’s only one instance. When I had been testing before, I had multiple radio buttons, so everything worked; but now there was only one button, so it fell over.

What’s New With HTML5, CSS3 and JavaScript?

Angry Birds Beta for ChromeAlthough we are still a ways away from being able to use HTML5 and CSS3 to their full potential, some really neat things are being done with them right now. In case you missed the news last week, a new, Web-based version of the wildly popular game Angry Birds was unveiled. For the most part, that application is built using HTML5 and JavaScript (relying heavily on the new <canvas> element and all of its power).

There was some minor controversy over the game, after it was discovered that it still requires Flash in order to play the game (to produce the sounds and music for the game rather than using HTML5 audio), but there are some potentially valid reasons for that.

Pages: