'Net Features : JavaScript

Make a Flipbook Magazine with Turn.js

Pete Prestipino — Tue, 06 Nov 2012 14:03:00 GMT

Your average Web user is looking for richer and more engaging interactions within their digital experience. That is challenging on both creative and technical levels but there are solutions emerging which make quick work of this more demanding environment.

Turn.js, for example, is a Javascript library (actually a UI plugin for jQuery) that provides designers and developers the ability to make content look just like a book or magazine. The effect, as you see in the demos, is quite seamless, with elegant transitions thanks to the plugin taking advantage of the latest in HTML5 and CSS3.

There is a version (3rd release) available on GitHub, but the fourth release of Turn.js offers several more interesting (and essential) features including using pages of different size, zoom effects, navigation bars and more. The license cost for the 4th release of Turn.js is $99 for up to 5 domains and $499 for unlimited domains.

What is TypeScript?

Michael Garrity — Fri, 12 Oct 2012 12:46:00 GMT

Have you heard of TypScript, yet? That’s Microsoft’s new JavaScript-like programming language that the company just released a developer preview of a few weeks ago.

TypeScript is translated into good old JavaScript so that apps developed with the language can run in any type of browser, which naturally begs the question, “Why come up with TypeScript to begin with?”

See, while this new language has a similar syntax to JavaScript, it also offers a slew of additional features that you can’t get with JavaScript, including optional static typing, class declarations, a Visual Studio plugin and module support. According to Microsoft, this will make it easier to build larger, more complex applications without straying too wildly from the commonly used JavaScript path.

In fact, Microsoft has been looking forward with this new project, and apparently much of TypeScript is based on the next version of JavaScript that is currently being developed by the ECMA.

Also in an effort to be more forward-thinking, TypeScript is being developed to work with existing frameworks and libraries like Backbone.js, which intend to make it easier for people to create more large-scale applications suited to the Web today. Thus, any JavaScript code should be able to be pasted into TypeScript and work just fine.

TypeScript was developed by Microsoft’s Anders Hajlsberg, along with Steve Lucco and Luke Hoban. The language’s source code has been licensed under Apache 2.0 and now on Codeplex.

Windows Server Host Now Features node.js Support

Michael Garrity — Fri, 27 Jul 2012 07:45:00 GMT

Over the last few years, server-side JavaScript implementation node.js has really picked up in popularity among developers, and because of this, utilizing the software system has become more of a priority for many Web hosting providers.

Microsoft Windows hosting solutions provider DiscountASP.NET has been offering node.js support in its WebMatrix 2.0 beta labs sandbox for a while, and many of the developers using it have requested that it make node.js generally available in its Web hosting service.

Now, its Windows 2008 hosting platform officially features beta support for node.js.

It was a natural choice for DiscountASP.NET to begin supporting node.js, as Microsoft announced in 2011 that it would be actively working with Joyent to port node.js to Windows. The first stable port was available last November.

Responsive Drop-Down Navigation with SelectNav (JS)

Pete Prestipino — Wed, 20 Jun 2012 00:00:00 GMT

There's a whole lot of interest right now on the part of both designers and those that employ them to make their digital properties as accessible as possible - meaning that they must work and appear well on desktop and mobile devices simultaneously.

As an industry we are learning how to make the most of responsive design and to our great fortune, there are numerous techniques and technologies to support this initiative. Case in point - SelectNav.js.

SelectNav.js is a JavaScript plugin that enables designers to convert their website navigation into a "select" drop-down menu (see images below). The JavaScript is used together with media queries to create a space-saving, responsive navigation for those using small-screen devices.

Inspired by TinyNav.js, SelectNav.js requires no external library, is very lightweight (only 1.5kb minified), is customizable, and compatibility with a variety of modern browsers.

Getting Started with Frameworks

Linc Wonham — Thu, 30 Jun 2011 19:00:00 GMT

If you find yourself spending hours coding, recoding and coding again, know that there are some benefits to using frameworks.

A Web application framework is designed to support the development of dynamic websites, Web applications and Web services. The reason to use a framework is to make writing code, well, easier.

Frameworks are wonders of the modern world of development and design. Results are seen in the reduction of time spent on numerous common activities (many frameworks provide libraries for database access, templating frameworks and session management, and even to facilitate code reuse).

There are many benefits to using a framework. Efficiency is the draw for most developers — what could have taken hours can be done quickly, thanks to pre-built functions.

Cost is another attraction. Most frameworks are free, which results in a lower cost for the project — for the client as well as for the developer.

There are, of course, some downsides to using frameworks – perhaps why more developers don’t use them at all. The primary drawback is the limitation of the core behavior. When you use a framework, you need to work within its limits and work exactly the way it requires you to.

Another issue with frameworks is that developers who may just be starting out tend to learn their way around the framework itself, but not the language. All that said, there are many frameworks that can benefit one’s future Web apps, services and sites.

JavaScript Frameworks

jQuery (jquery.com) is by far the most popular JavaScript framework in terms of overall usage. As mentioned here before, jQuery is a fast, lightweight and concise JavaScript library that simplifies HTML document traversing, event handling, animating and even Ajax interactions for Web development. MooTools (mootools.net) and Prototype (prototypejs.org) are two alternatives.

PHP Frameworks

PHP is arguably the most widely used programming language on the Web today. There are numerous PHP frameworks on the market for coders looking for both simple and elegant toolkits to create high-functioning, full-featured Web applications. CodeIgniter (codeigniter.com), CakePHP (cakephp.org), Zend (framework.zend.com) and Symfony (symfony-project.org) are four of the most widely recognized frameworks for working with and coding in PHP.

e-Tip: Innovators in HTML5 Web designers the world over have caught the HTML5 fever. Visit Website Magazine’s HTML5 showcase to find inspiration for your next project.

Ruby Frameworks

Ruby on Rails is an open-source Web application framework that is used for the Ruby programming language. Ruby on Rails (RoR) includes templates to enable developers to generate a skeleton application with custom gems and configurations, engines that let a developer reuse application pieces, and the Rack Web service interface and Metal which allow for writing optimized pieces of code that route around ActionController. Well-known alternatives include Padrino (padrinorb.com) and Bowline (bowlineapp. com).

CSS Frameworks

A CSS framework is a library that is meant to allow for easier, more standards- compliant styling of a webpage using the Cascading Style Sheets language. Similar to programming and scripting language libraries, CSS frameworks package a number of ready-made options for designing and outlaying a webpage. Some of the most popular CSS frameworks include BluePrint (blueprintcss. org), 960 Grid (960.gs) and Elastic (elasticcss.com). Another is YUI2. The foundational YUI grids offer four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of multiple columns.

Mobile Frameworks

Perhaps more than any other medium (the Web included), mobile dominates the attention of developers these days and for good reasons: high use and big profits. There are several popular mobile frameworks on the market including DHTMLX Touch (dhtmlx.com/touch/), an HTML5- based JavaScript library for building mobile apps, and iWebKit from SnippetSpace, which is a file package designed to help developers create iPhone- and iPad-compatible websites and Web applications.

Framework in Focus — Laker

If you’re interested in having the ability to distribute publications for the iPhone and iPad including digital magazines, catalogs, or anything else you can imagine, check out Laker Compendium. Laker is a collection of files, frameworks, styles and tips for designing digital publications in HTML5. Its ease of use and general elegance caught our attention and while perhaps not the most robust solution on the market, it does have some exceptional features for those looking to get a leg up in a more app-friendly environment. Features include the ability for the layout to scale automatically depending on screen size and orientation. Also with Laker, developers are able to have a framework which lets users swipe to change pages, double tap to show a table of contents, implement native looking slideshows, and include media and assets (e.g. sound, videos, images). The best part? No Web server required.

Is Javascript Making A Comeback?

Administrator — Sat, 25 Sep 2010 18:15:00 GMT

For a long period of time, the enriched-web juggernaut known as Adobe Flash seemed like it would remain the unchallenged king of the proverbial mountain. With the introduction of libraries such as jQuery and MooTools, it seems JavaScript, a once-haggard, much-maligned competitor could be making a comeback in the face of insurmountable odds. So, what is it that has web developers flocking to JavaScript?

JavaScript has several key advantages over Flash that makes it a much more attractive option for developers. The largest determining factor in making the choice between JavaScript and Flash is easily the range of platforms which can display enriched content using one or the other. With the rise in popularity of smart phones and the paradigm shift to a focus on mobile web, delivering content to mobile users has become a priority for many web developers. There are almost no mobile devices which handle Flash well, if at all. Apple's iPhone, iPod, and iPad cannot display Flash content at all and Steve Jobs' highly-publicized comments about Flash suggest it may never be able to. Recent reviews of Flash's first appearances on Android paint a bleak picture of poorly-functioning Flash videos and unplayable Flash games. Neither Sony's PlayStation 3 nor PSP support Flash entirely. On the contrary, all of these platforms support JavaScript. Although JavaScript's ability to deliver enriched content to so many platforms is the most often cited and publicized advantage, JavaScript offers several other upsides in areas where Flash falls flat. Developing in Flash can get costly, Adobe's Flash software is not cheap and many independent developers and small-to-medium businesses simply cannot afford to purchase it or the developers. JavaScript offers further savings in the form of reduced bandwidth. Additionally, the concept of graceful degradation is alien to Flash developers. Either your program works or it doesn't. JavaScript offers options for a well-coded page to degrade gracefully. Flash also offers little in the way of options for interacting with search engines, while JavaScript plays very well with Google and its like. Lastly, the Flash learning curve is steep and can be quite daunting for newcomers to the realm of web development, but JavaScript libraries such as jQuery and MooTools can make learning JavaScript a much more pleasant experience. With so much going in favor of JavaScript, can we, like Steve Jobs, argue that Flash is dead? Not quite.

Flash still has several areas where it outshines and outperforms JavaScript by orders of magnitude. Flash is so feature-rich that it is hard to find anything that can compete with the dizzying number of features it can offer. Also, Flash handles three-dimensional graphics much better than JavaScript. To JavaScript's detriment, it offers its own set of problems, such as the innate ability in modern browsers to disable JavaScript support and the inability for developers to protect their source code.

About the Author: Peter Marino is the Senior Partner and CMO of reelWebDesign.com, a search marketing firm located in New York City.

New jQuery 1.3 JavaScript Library Available

Pete Prestipino — Thu, 15 Jan 2009 14:56:00 GMT

A new release is available now for jQuery JavaScript library. Existing public APIs have been maintained, which means existing plugins should work just fine. Many new features, performance improvements, and method changes are in this release, but let's look at a few of the major developments:

No More Browser Sniffing: jQuery 1.3 no longer uses any form of browser/userAgent sniffing internally (the first major JavaScript library to do so. jQuery now uses a technique called feature detection, wherein a particular browser feature or bug is simulated to verify its existence.
Sizzle Selector Engine: The new CSS selector engine (nicknamed Sizzle") is faster than the current engine (49% faster in fact), standalone and fully extensible.
Live Events: jQuery now supports "live events" (events that can be bound to all current and future elements using event delgation and a seamless jQuery-style API.
jQuery Event Object: The event system for jQuery has been refactored, and now encapsulates all of the functionality found W3C-compliant event object implementation and makes it work smoothly across all browsers.
HTML Injection Rewrite: Code related to injectiving HTML into a document has been overhauled. Append, prepend, and before and after methods are now much faster. The creation of DOM elements has also been modified.
Offset Rewrite: The offset method was completely rewritten and now handles cross-browser issues better and faster (3x improvement in performance).