Jan 31, 2013

PixelGlyph is an iconset of 200 icons which have been specifically designed for mobile web applications. PixelGlyph contains icons for general purpose mobile applications as well as some social media icons for networks like Google+, Facebook, Twitter, etc.

The icons in the free package comes in two sizes (16px and 32px) and one color.

FilteredPaste.js s a jQuery plugin which allows you to filter any pasted input and strip it of tags and attributes which are not desired.

By default FilteredPaste.js comes with a default filter which allows alt attribute on any tags, src attribute on image tags and href attribute on anchor and link tags.

However, with FilteredPaste.js, you can also create custom filters which allows you to filter the pasted input as per your requirements.

For example, you could strip all tags and attributes of the input or you could manipulate the pasted input and add tags and attributes to it. You could strip the input of any formatting and add your own formatting to it – like displaying the pasted text in yellow color.

Jan 30, 2013

MFG Labs Icon Set is an icons set which can also be used as an icon font. It consists of 120 icons and new icons are constantly being added to the collections.

In the MFG Labs Icon Set you will find icons mainly for use in web applications as well as some social media icons. The download package comes with a CSS styling file which allows you to create embossed and beveled icons of the same.

Textillate.js is a simple jQuery plugin which allows you to perform some neat CSS3 animations. It combines two powerful JavaScript libraries animate.css and lettering.js and provides a simple API for CSS3 animations.

Textillate.js allows you to animate text with effects such as flash, bounce, shake and more. In all, Textillate.js contains more than 25 effects for you to apply to your text.

Toolbar.js is a jQuery plugin which allows you to create tooltip-style toolbars. It uses Twitter Bootstrap’s icons for the UI. With Toolbar.js you can easily create toolbars for use in web applications.

Toolbar.js allows you to create unlimited number of toolbars per page and allows you to create both horizontal and vertical tooltip toolbars. The toolbars can also be attached to an element on the page and are responsive in nature.

Jan 29, 2013

howler.js is a modern JavaScript library for web audio. The library was initially developed for an HTML5 game engine, but can also be used for web applications.

howler.js has several feature like fallback to the Web Audio API, fallback to HTML5 audio. It also has support for multiple file formats which in turns increases support for many browsers.

howler.js also has automatic caching for Web Audio API, implements cache pool for HTML5 audio and more. howler.js allows you to play multiple files all at once with fade in/out effects. It is a standalone JavaScript library weighing at only 5KB.

RoughDraft.js is a jQuery plugin which allows you to create and prototype full interactive HTML mockups quickly and easily.

RoughDraft.js create the HTML elements using special data attributes which specify how the prototype elements should be created. RoughDraft.js allows you to easily create prototypes which include lorem ipsum for dummy content and placeholder images.

Opentip is an open source JavaScript tooltip framework which works with any JavaScript library like jQuery, Prototype, Ender, etc.

Opentip provides you with different styles and allows you to create your own easily. Tooltip data can be fetched using AJAX as well. You can use joints and targets to position the tooltips exactly where you want to.

Opentip also allows you to point the tooltips in any directions you wish. The tooltips are created using the canvas, which means they render properly in nearly every browser.

Another great feature of Opentips is that tooltips created using the framework are always rendered inside the browser window.

Browser Support

Opentip works in all modern browsers including Google Chrome, Firefox, Opera Safari and IE7+.

Jan 25, 2013

Bijou is a free mini icon set consisting of more than 120 icons which can be used in web applications or on any website. The icons come in PNG format and are sized at 20px. The download package also contains the PSD for all the icons.

Tire is a lightweight JavaScript library which allows you to perform DOM manipulations, AJAX requests and events handling.

Tire is inspired by jQuery, however, unlike jQuery, Tire is meant to be modular and weights in at around 11K minified. Tire is meant for newer browsers, it does not incorporate fixes for older browsers, which would significantly increase the size of the library.

Inpage SEO Checker is an interesting JavaScript library which continuously monitors your web pages for SEO factors. Whenever a page is not adhering to the proper SEO best practices, the JavaScript library produces a popup on the page which lists out the problems.

Inpage SEO Checker checks for SEO factors like number of H1, H2 and H3 tags, checks for attributes on image tags, checks meta descriptions of pages as well as page keywords and titles. It also monitors the usage of the em and strong tags.

Jan 24, 2013

What Font Is is an online font identification tool which allows you to identify fonts from images. You can provide the image by uploading one from your computer or specify the URL of the image on the web.

What Font Is then proceeds to identify which font matches closest to the font in the image. What Font Is will match both commercial fonts and free fonts. You can specify either.

What Font Is also allows you to specify if the font you’re trying to identify is on a dark background or light one - to improve recognition accuracy.

What Font Is is available in two versions, a free version and a PRO version. The free version contains advertising and allows you to perform only 10 identifications per day. The kind people at What Font Is have provided Functionn with 3 PRO accounts worth $10 to giveaway to the readers of the blog.

The PRO accounts last for a year, have no adverting whatsoever, allows you to input up to 15 characters for recognition, and best of all, enables you to run unlimited identifications per day for a whole year.

So how to win a PRO account you say? Simple – just drop in a comment on this blog post and you will have entered the giveaway. Three readers will be selected at random and provided with their PRO accounts. A user will only be entered once even if there are multiple comments.

However, you can increase your chance of winning this PRO account if you tweet about it, post it on Facebook or share it on Google+. You just need to drop another comment with a link to your tweet/Facebook post/Google+ post for you to be entered more than once in the giveaway.

The the winners will be selected on Friday 1st of February! Good luck!

Fangle is a JavaScript library for creating reactive Markdown documents. Your readers can interactively explore possibilities, play with parameters, and see the document update immediately.

Fangle is inspired by Tangle, the original JavaScript library for reactive documents which was featured on Functionn some time back. The only difference is that Fangle allows you to use markdown syntax to create those reactive documents.

Fangle allows you to create a reactive document, which in turn, allows the reader to play with the author's assumptions and analyses, and see the consequences. An explorable example makes the abstract concrete, and allows the reader to develop an intuition for how a system works.

Clay is a rapid prototyping tool for those doing web development. Clay allows you to spin off a web server, with pre-created directory structures. You can then place your HTML files in those folders and Clay will make them available to you via a local web server.

Clay also comes with the Jinja templating engine which allows you to make use of templates to rapidly prototype your website. Finally when you are satisfied with your prototype, you can ask Clay to build the final static version of the prototype for you to deploy.

HTML iOS Notifications is a simple JavaScript library which implements iOS style notifications with CSS3 and JavaScript. It allows you to call the notifications with a simple API and pass along a title and message parameters.

Jan 23, 2013

Queen is a framework which allows you to perform distributed tasks on many remote browsers. It allows you to run a central server, using Node.js which allows you to push JavaScript code to run in various remote browsers.

Queen allows you to perform bi-directional communication between client-side and server-side scripts, using Socket.io. It allows you to target browsers based on browser type/version, OS, and more.

Queen also allows you to monitor connected browsers and active jobs and also automatically detect and terminate unresponsive browsers.

iosOverlay.js is a JavaScript library which allows you to create iOS style overlays/notifications. The notifications are dynamic, i.e. you can update an already displayed notification to display some other message.

Browser Support

IE7+ — Rounded corners/animation do degrade when not supported, see optional dependencies

ScrollUp is a jQuery plugin to create a ‘scroll to top’ link on your page. It allows you to create the scroll to top link in three formats: As a text link, as a pill or as a tab on the page.

You can use one of the default styles or spin off your custom style as well. ScrollUp allows you to set various configuration parameters such as the distance from the top before showing the element, speed to scroll back to top, animation type for display/hiding of element, and more.

jQuery.BlackAndWhite is a jQuery plugin which all allows you to convert images to greyscale on the client-side. It uses the HTML5 canvas to display the greyscale images and has a fallback for old browsers.

Jan 21, 2013

Parsley.js is a JavaScript library for forms validation. Parsley.js takes a different approach to forms validation. Instead of making you use JavaScript for validating your forms, Parsley.js uses data attributes to achieve the same effect.

To use Parsley.js, you just need to include the JavaScript library then use a data attribute on the form element you want to validate. You can use the built-in validators of Parsley.js on specific fields of the form as data-attributes and Parsley.js does the rest for you.

Parsley.js is very lightweight, at only 12K minified. It is available as a standalone JavaScript library or as a jQuery or Zepto.js plugin.

Automaton is a task automation tool built in JavaScript. The purpose of Automaton is to allow you to automate repetitive tasks in your projects, using JavaScript. Automaton achieve this by allowing you to create files called autofile.

An autofile allows you to describe an ordered list of tasks to be done for another bigger task to be done. Autofiles can use each other to achieve their ends as well as work independently. Automaton comes with some built-in basic tasks to help you get started.

Mueller is a modular grid system for responsive/adaptive and non-responsive layouts. Muller is built using Compass. The grid system gives you full control over column width, gutter width, baseline and media queries.

xy.css allows you to create device-agnostic designs without cluttering your markup with non-semantic attribute classes. You design is progressively enhanced with CSS3, along with animated media-queries transitions.

dejavu is a high-performance object-oriented programming library for JavaScript, which can be used with Node.js. If you come from other object-oriented programming languages, you might find that JavaScript take on OOP is a bit different from the classical one.

JavaScript uses prototypal inheritance, which can be daunting for newcomers to the language. dejavu attempts to solve this problem by providing a JavaScript library which implements classical OOP in JavaScript. There are lots of other JavaScript libraries which provide the same functionality as dejavu. Some of the similar, already featured libraries on Functionn, which you might be interested in are:

However, compared to those other OOP libraries, dejavu aims to be a high-performance OOP JavaScript library. Compared to the other OOP libraries for JavaScript, dejavu rivals most of them, even vanilla JavaScript. The benchmarks speak for themselves.

dejavu also comes with an optimizer which attempts to make your code written with dejavu lighter and faster. To use the optimizer, you will need to install Node.js. dejavu also comes in two versions: as a normal JavaScript library or as an AMD module.

Maki is an icon sets which consists of icons which can be used to denote ‘points of interest’ on a map. The icons set contains 73 icons in total, at 3 different sizes, making a grand total of 219 icons in the download package.

The three different sizes however though are slightly different from each other. Each icon has been adapted to be best displayed at their specified sizes. The icons themselves come in two different formats: PNG and SVG.

Jan 17, 2013

GMailUI is a neat JavaScript library written in CoffeeScript which allows browser extension/bookmarklet developers to easily extend GMail’s user interface. If you need to add some buttons, checkboxes or some other UI component to help with the workflow of your extension/bookmarklet, then GMailUI allows you to do so.

This version of the jQuery UI Bootstrap theme is based on the latest design and looks very sleek. If you’ve been looking for an update to Addy Osmani’s jQuery UI Bootstrap theme, then this one might come in handy.

Jan 16, 2013

Breeze is a JavaScript library which allows you to manage data in rich client applications easily.

Breeze is especially useful if you find yourself storing data in relational databases and performing queries to save and retrieve those data as complex object graphs, then share the same data across multiple views of your JavaScript application.

Breeze allows you to query an API endpoint for data using a query language similar to LINQ. The queries can be performed asynchronously, with promises. Breeze also provides a change tracking feature which allows you to save on requests to your database by performing requests only if there is any change in data.

Breeze can also be used with popular JavaScript libraries such as jQuery, Knockout.js or Angular.js. Breeze also allows you to cache queries data on the client side for a better responsive UI.

The documentation of Breeze is very comprehensive, you should check it out to get more information about the JavaScript library.

Vagrant is a cross-platform application which runs on Windows, MAC OS X and any popular Linux distribution, which allows you to create, configure and reproduce portable development environments for you to work within.

The concept is very simple. You download Vagrant on your OS and install it. Vagrant uses Oracle’s VirtualBox to create the virtual environments. It create those environment your need, allows you to configure them, and then save them.

Now when you are on another system, be it a Windows, MAC OS X or Linux, and you need to deploy that environment you previously created, you install Vagrant which will download and install VirtualBox (which run on the same triad of OSes that Vagrant runs) and then setup the environment you previously defined.

Vagrant has a list of prominent users such as Disqus, BBC, Nokia, Mozilla and more – so you know it can be trusted to do the job.

Teoria.js is a lightweight and fast JavaScript library for music theory, which includes both Jazz and Classical.

The purpose of Teoria.js is to provide an intuitive programming interface for those developers looking to develop a musical software, which can include software like Sheet Readers, Sheet Writers, MIDI Players etc.

Teoria.js was built from ground-up to be modular and object-oriented. All the components included in Teoria.js can be used independently but have been developed so that they work equally as well, together.

Maxmertkit is a new CSS framework which is based on a widget-modifier coding style. What this means is that instead of trying to showcase all the functionalities of the CSS framework by demoing every single component of it, Maxmertkit allows you to demo each component by choosing yourself which one to demo.

Maxmertkit provides you with a list of possible widgets defined by the CSS framework such as table, input, form vertical, form horizontal, button, input group, buttons group, groups with carets, tabs, badge, label, dropdown, menu, toolbar, menu in dropdown, tooltip and progressbar.

If you wish to see how a button looks when you apply the ‘huge’ class to it, firstly you drag the button widget to the widget display area, then you drag the class ‘huge’ onto the displayed button to apply the huge class to it.

This is an efficient way to showcase the various features of the CSS framework without cluttering up the page with all the possible variations of the components. The Maxmertkit also has other components like social media buttons, popups, tabs, tables, scroll spy, carousel and more.

Heisenberg.js is a boilerplate for building JavaScript applications based on the Mediator Pattern. It helps you structure your JavaScript code and allows you to use the Mediator Pattern to develop JavaScript applications.

Unlike Backbone.js, which is based on the MVC pattern, the Mediator pattern of Heisenberg.js consists of a set of objects which communicate by emitting event signals to which objects can register interest in and act accordingly.

Heisenberg.js aims to be a solution which sit between unstructured jQuery code and fully-fledged Backbone.js applications.

Heisenberg.js comes with a built-in templating engine – Handlebars.js, which can be changed for any other one of your choice. It includes jQuery and Underscore.js as well.

It has a fully documented source code if you are interested into going deeper in your understanding of how Heisenberg.js works.

Jan 15, 2013

Rye is a lightweight JavaScript library for DOM and events manipulation as well as touch support. It works in all major browsers, including IE9+. Rye also has an event emitter as well as support for isolated DOM events.

Rye tries to takes the best from other similar JavaScript libraries and tries to implement a new JavaScript library, which is meant for modern browsers. It also tries to take a minimal approach by using stand browser APIs where possible and tries to take advantage of the new version of JavaScript – ES5.

Rye is also modular. This means that you can build your own custom version of Rye, using only the modules you need, hence keeping the size of the JavaScript library down to a minimum. Rye’s documentation is very extensive as well, making any new adopters find their feet easily. The API is similar to jQuery and Zepto.js’ API.

Ink is a front-end framework for quick development of UIs using HTML, CSS and JavaScript, similar to Twitter Bootstrap. It provides an easy way to create modern layouts and provides implementations of common interface elements such as gallery, modal, table, tree view, sortable list, data picker, tabs, form validator and more.

voxel.js is a collection of projects which allows you to create Minecraft-like games in the browser. voxel.js requires a browser which has WebGL support, as the games created with Voxel.js required it to run.

The idea behind voxel.js was to create a framework which is not monolithic but rather composed of several modules. Modules can be installed using Node.js package manager NPM.

The core components of voxel.js are the voxel-engine which is required for any voxel.js games, voxel – the logic that generates the voxel game world and voxel-mesh which takes data from the previously mentioned voxel module and turns it into a three.js mesh that can be displayed as a game.

voxel.js also has several add-ons to complement the above core modules. They range from add-ons which allow you to create simple NPC creatures, to add-ons which can generate a forest or debrit. You can check out voxel.js’s website for more information.

Jan 14, 2013

Dotted Paper is a simple website which provides a free printable PDF file which is a dotted page. This dotted page can be used for web, interface, banding or user experience design – perfect for designers to use. Instead of spending money buying a book for doing those sketches – you can use these as they are free.

alias.sh is a web-based application which allows you to share, manage and synchronize your bash shell aliases in the cloud. With a two click registration system, you are setup with an account and you can then seamlessly synchronize all your aliases across various computers – without any hassle.

This service can also serve as a backup for all your aliases if your computer crashes. You can then just login to your alias.sh and get back all your aliases. Another neat feature of alias.sh is that it allows you to submit aliases and others can then upvote it and comment on it.

To prevent and security issues, such as man-in the middle attacks, alias.sh uses SSL to sync your aliases, so you can rest assured that nothing is being tampered with – and that you are getting the verbatim aliases.

Francois-Guillaume Ribreau, the author, wanted a persistant, clean, evented, deferred based Tour library with optional overlay support. With no other tour library providing all those features, Bootstrap Tour Extended was created to cater to those features.

What makes Bootstrap Tour Extended appropriate for highly dynamic applications is the global parameters the tour library can take. It accepts both strings and functions as parameters. This feature allows you to attach tour features to elements which are not yet present at tour start-up but do sometime after in the timeline.

grid(ism) is a practical and robust responsive CSS framework which aims to allow you to create responsive websites easily. grid(ism) was created with simplicity in mind.

t uses simple naming conventions for classes, equal margins sizes on the outside and inside of gutters, as well as independent sections management of the layout. You can check out the website for a demo.

Jan 13, 2013

2012 has been a fantastic year for web development. I cannot even begin to describe how utterly fantastic 2012 has been for for the web. We’ve seen JavaScript become one of the most popular programming languages, we’ve seen the HTML5 specification completed, we’ve seen Responsive Web Design change the way we design websites and much much more.

As the year ended, every blog were churning out their best of posts, most of which were pretty fantastic. At Functionn however, we decided to do something different. We decided to invite some of the prominent writers from some very established blogs to talk to us and share their views of 2012 and beyond for web development.

I'm Alex R. Young and I write and edit DailyJS.com and usevim.com. Throughout 2012 I've been writing about JavaScript, including a commercial book about Node.js for a well-known publisher.

I also have some eBooks in the works that you'll see on DailyJS in 2013.

I work as a freelance Node, iOS, and Ruby consultant to pay the bills. In 2012 I worked for some interesting companies, large and small, mostly based in London England but a few from the US as well.

I'm a designer/developer from Istanbul who used to create web projects for customers but completely focused on my own projects since 6 years.

WebResourcesDepot is my main project, a website that shares the best resources for web designers/developers daily. I'm a fan of high-quality, ready-to-use resources, they save so much time and WebResourcesDepot is all about that.

Creating at least a new project each year was my target and that worked on 2012 as well. With a friend (Devrim Vardar), we have created ioDeck which currently a self-hosted PHP form generator application but will become more soon (like the ability to sending newsletters). We are working on it a lot.

I have probably spent most of my time on Uptime Robot this year. It is a totally free uptime monitoring service that runs since 3 years. It grew so much and to help it scale/perform better, I rewritten its engine with Node.js and about to activate it. Excited :).

To sum up, 2012 was quite busy and ended up teaching me quite nice stuff like co-partnering a project and Node.js.

Hello, I am Ray Cheung from Hong Kong.

I love working on my own projects; starting from an idea, designing from scratch with some inspiration along the way, coding, and then spreading it around the world gives me a great sense of accomplishment.

I have been busy working on WebAppers.com since 2007. In 2012, I have been trying something completely new, which is CutestPaw.com and TwitrCovers.com. They target a whole new market and audience. And I am impressed the growth of the sites.

Q: Now that 2012 is over, what do you think were some of the most exciting developments in the world of web development this year?

On the content side I have been impressed by:

Responsive Web Design leads to web pages that adapt automatically to the width of the viewport.

Yeoman: a meta-build tool (that is built on several tools) has also been popular.

More and more integrated development environments are written in HTML5 (examples: Cloud9, Brackets), but I haven’t yet had time to try them out.

Lastly, much to my delight (even though I rarely use their products), Microsoft has become a good web citizen.

You can write first-class apps for Windows 8 in HTML5 (several of the standard apps are in fact written in it) and TypeScript tries to fit into the JavaScript ecosystem instead of competing with it.

Summer 2012: Node 0.8. I developed some solid commercial projects with 0.4 and 0.6, but 0.8 felt like a major milestone as Node's hype started to fade and people began to take it more seriously.

For me, Node's streams API has been a constant source of fascination. I've been working hard to encourage people to learn it, but the best development in this area was substack's free book on the subject.

The API is changing to make it more reliable, and although that came to fruition in an unstable Node release in December, it will be a big deal for Node in 2013.

Although I find Node suitable for many network-oriented programs that have nothing to do with web development, streams and asynchronous I/O seems to fit a lot of web applications that I've been developing.

For example, media streaming and projects that make heavy use of WebSockets.

I'm so surprised to see HTML5-CSS3 becoming the standard this fast, that is really great.

This year was the victory of apps, frameworks and plugins. Many designer/developers completely shifted from custom code to ready-to-use ones.

Nobody plans to create their own CMS, write their own JS gallery or develop a support-ticket system but instead prefer to use the proven ones.

Everyone now focuses on the time and result but not the dragons caught while doing them (which is good).

Stripe is the most exciting project I have seen in 2012.

Stripe is a simple, developer-friendly way to accept payments online. I think it’s a great alternative to PayPal.

However, it’s only available to US and Canada now. I hope it will be available to other countries very soon too.

Q: What web development tool/library/framework/mindset shift has impressed you most in 2012?

See previous answer to previous question.

Prominent client-side developers have been pushing "micro frameworks" for a while, and 2012 saw many smaller client-side libraries submitted to DailyJS that had zero dependencies.

It seems like we're moving away from monolithic frameworks.

The thing about smaller libraries is managing them becomes difficult. One interesting development that addressed this was the Component project by TJ Holowaychuk, who is known in the Node community for creating Express.

I don't think Component has hit its stride yet -- in terms of community interest - so I hope to see it really take off in 2013.

It is Bootstrap for me.

Not only because I find it awesome but because it showed the necessity and demand for such front-end frameworks.

There is also Node.js (it existed before but I used it this year the first time). Friends still make fun of "me excitedly describing the performance it provided for Uptime Robot".

It simply enabled me to write a high-performance app with only JavaScript, so cool.

I really like jQuery Masonry (Pinterest Style) layout jQuery plugin.

It really changed the way people viewing the content of websites. It works really well when using it along with infinity scroll jQuery plugin.

Distribute smaller components, and write unit tests. Learn Jasmine or Mocha, both work well for browser-based testing.

Also, if you're a predominantly client-side developer, why not learn Node? It's an extremely convenient way to break into server-side development. Don't be afraid to try new things!

Bootstrap again. It is a such a huge time-saver.

We used it in ioDeck, customized when needed and loved the integrity of elements, components and the code it provided.

No Doubt, jQuery is the framework I would recommend for other developers to use.

It’s fast and concise. And best of all, there are tons of plugins available. It helps you speeding up your web development.

Thank you so much for all the jQuery plugin developers out there, those useful plugins really helps us a lot.

Q: What most excites, scares and disappoints you about the web today?

I love that you can do more and more things with HTML5.

On the flip side, browsers also become more and more bloated, because they have to support the ever-growing platform.

Some HTML5 APIs feel rough to me and would profit from having more solid foundations, e.g. promises.

Lastly, there are way too many libraries being written for JavaScript, most of which end up not being maintained. But that is also a sign of the creativity of the community.

Games excite me, because they're so dependent on mastery of technology. Combining WebSockets, WebGL/Canvas, good art and sound, with a solid understanding of gameplay and game design is ridiculously multi-disciplinary. Although HTML5 is a nebulous and misused term, it's given people something to shout about, and is attracting new talent to the web -- I saw Notch talking about WebGL and immediately wrote about it in my DailyJS notes.

Games also scare me. I love sitting down with a controller to play the latest high budget action adventure games, but motion control has chipped away at my button-pushing pastime. Meanwhile, free-to-play HTML5 social games have attracted media attention to the industry, with claims of the death of the high budget game and a social game future.

It seems like my lifelong hobby (gaming) is being threatened by my lifelong career (web development).

Games disappoint me. One of my favorite all time games is Frontier: Elite 2. It's a space trading game that could easily be implemented as a massively multiplayer game in WebGL with a nice little Node server.

Why do we live in a world of Zynga instead of that? I know Zynga had financial trouble this year, but I feel disappointed by the lack of 'serious' HTML5 games -- there are a few, but not enough.

As there are now too much of everything, users/readers are in search of better and better quality of everything (because it exists).

This is what excites and scares me the most. Exciting that I'll need to create better, scary that "what if I can't?" :).

The growing speed of the web excites me the most. The security of the web scares me the most though.

I think the security of the web does not catch up with the growth of the technology.

One thing that annoys me the most is the number of social media sites rise and fall every year. It really bothers me a lot, because every time a new popular social media site came up, we have to integrate into our websites and blogs.

I hope there is only one social media site to rule them all.

Q: One word to describe the web as it is today?

Promising. Or, if I have three words: full of potential.

Addictive.

ExcitiFreshyFlexiFun (is that a word?)

If I have to use one word to describe the web today, I would use “Unbelievable”.

You cannot believe how fast the web grew in the last two decades. You cannot believe how many websites, web applications developed every day.

You also cannot believe the web helped thousands and thousands of people everyday in every possible ways.

Q: How do you see the web change in 2013 and beyond?

Print. While print is in decline, HTML will still get better at it. It has the potential to eventually replace PDF as a target format.

When it comes to entering content, lightweight syntaxes such as Markdown and AsciiDoc are becoming popular. Especially the latter might one day replace LaTeX for books and long documents.

I only wish HTML had technology similar to SyncTeX, where you can jump back and forth between the LaTeX source and the rendered PDF.

That’s almost WYSIWYG, but without its disadvantages. PDF is also ahead when it comes to delivery (a single file, we still don’t have a web archive format that all browsers support) and annotation (dead simple, e.g. via the standard OS X Preview app).

I would want such apps to be deployable on either a server or a desktop computer. Then figuring out how to split the app between the client side and the server side is challenging, especially as client-side APIs are still limited (but getting better), compared to, say, Node.js APIs.

Several projects in this area are promising:

node-webkit: “Call all Node.js modules directly from DOM and enable a new way of writing applications with all Web technologies”

AppJS: “SDK on top of Node.js to build desktop apps using HTML5/CSS/JS”.

Packaged web apps: I also expect that we’ll eventually have the ability to make packaged web apps (based on Chrome, Firefox, etc.) look like native apps (a downloadable single file with an icon, running stand-alone, etc.).

It'll be supplanted by Gopher 2.0.

This will be the year where HTML5-CSS3 strengthening their places.

Thinking that we'll see some exciting standards-based (canvas or SVG) and developer-friendly (jQuery-like) animation libraries as there is a big gap there since the non-usage of Flash.

I think the speed of internet will only get faster and faster. There are more and more people will be using their mobiles browsing websites.

There will be more and more applications developed for people using them on the street, helping their daily lives. The web will only be faster, simpler and more powerful.

Q: What do you look forward to in 2013?

Two technologies, that I’m very excited about, are:

ECMAScript 6: will make JavaScript a much friendlier and powerful language. It is an important contribution to the ever increasing attractiveness of the JavaScript ecosystem. The standard will be done by the end of 2013. Modern browsers will fully support it in 2014, but parts of it will be available before then.

Firefox OS: an HTML5-based mobile operating system that is truly open source. It will be interesting to see how it competes with Android and iOS when it comes to ease of use and performance. Naturally, a dream come true for web developers and for those of us who are still sad about HP abandoning webOS devices.

My son's first words.

This will be the year where I won't be creating any new projects but improving the current ones.

And also, I am currently redesigning PhotoshopLady.com, hope it gives users a fresh new look, and help users navigate the Photoshop tutorials easier.

I would also love to spend some time to build a web application that is useful to web developers and designers.

Q: If you had the superpower to change something in the world, what would you change?

We still don’t have a science for complex systems (human mind, human body, societies, economies, ecologies, the weather, software, etc.).

We probably need to invent a new kind of mathematics to enable it. If we had such a science, we could begin to solve many of the systemic problems that humanity currently has.

Something else has been bothering me for a while: most of the things that we produce are difficult or impossible to recycle. We need to find a way to produce things that are recyclable in the same manner that plants are.

Then we could have our technology cake and eat it too: frequently buying new gadgets wouldn’t harm the environment, any more.

I'd make the upcoming Star Wars movies good, so I can watch them with my son and not have to apologize for things like 'yipee!' and Jar Jar Binks.

Destroying all prejudices.

If I can have a superpower, I hope I can remember everything I read on the internet with a glance of eyes.

It’s because there way too much information on the internet nowadays, but we have so little time to absorb those knowledge.

Finally, we asked the interviewees to add a final optional question on their own and answer it themselves. The questions and answers are listed below.

Q: Native apps or HTML5?

Native!

Q: Any words to the community?

If you already don't have one, make sure you create a pet-project this year, improve it regularly, work hard to promote it and will be surprised to see how much it teaches and improves you.