Some Exciting Web Technologies

The world of building websites is always a fast-moving one. It seems like some amazing new framework or design app comes out every day! In this article you’ll get a rundown of some exciting new developments in the web design and development arena. These technologies promise to make it easier than ever to create beautiful, functional websites and web apps. Enjoy!

Meteor: JavaScript everywhere

Meteor looks to be an amazing new application platform for writing and deploying web apps. It promises to be the platform to use for building apps for the next couple of decades! It’s a bold claim, but they might just be right.

Historically, websites have mostly worked on a “run stuff on the server, and send the HTML to a dumb browser” approach. The Meteor team’s argument is that this technique is now outdated. Modern browsers are much more capable of running apps themselves — pulling data from the server, as well as other web services all over the place — and it doesn’t make sense to stick with the old “everything runs on the server” model. It makes more sense for the browser to request just the data it needs — from multiple sources if necessary — and build its own markup to display the app interface.

You write Meteor apps using just HTML, CSS and JavaScript. The key feature of Meteor is that the JavaScript can run on the server (using the Meteor server and Node.js), and/or the browser. Meteor on the server takes care of bundling up the client-side JavaScript and other resources and sending them to the browser as a minified bundle.

Meteor uses the reactive programming concept, which means that elements in the page auto-update whenever you change the app’s data. This means less work for you as a coder, and potentially a more robust user interface.

Other great Meteor features include support for multiple templating engines; database replication across server and browser for super-fast database access; and easy app deployment on both your own server and Meteor’s free app server at meteor.com.

Tumult Hype 2.0: Bye-bye Flash

Tumult’s Hype Mac app has been out for a couple of years now, but with their latest 2.0 release it has really come into its own. Hype lets you design and build interactive web content and key-framed animations using drawing tools and a timeline. Then, with a couple of mouse clicks, you can then export your work as standards-compliant HTML5 markup, CSS, JavaScript and images that work across desktop and mobile browsers. Think Flash Professional (the Adobe app) for HTML5, at a fraction of the price.

I’ve been playing with Hype 2.0 on and off for a few weeks, and while it lacks many of the features offered by Flash Professional, you can certainly use it to create professional-looking interactive content on the web. Check out some of the games and infographics that people have created with Hype.

Bohemian Sketch: A web designer’s dream

While Photoshop remains a popular choice among web designers, many folks are on the lookout for a more streamlined and affordable app that is more suited to the task of designing for the web.

Bohemian Coding’s Sketch could be just that app. As with Hype, Sketch is a Mac app that has evolved from a relatively simplistic design tool into an elegant, feature-rich app with some very nice features targeted at web interface designers. These include:

• Vector-based for precise, non-destructive editing and resolution-independent results
• Built-in grid support
• Multiple pages and art-boards in a single Sketch document
• Easy slicing and automatic image trimming
• Layer styles for easily adding effects such as fills, borders and shadows

Simon here at Elated uses Sketch for practically all his web design work these days. Check out this article he wrote on Sketch earlier this year.

LiveStyle: Live bidirectional CSS editing

Emmet LiveStyle is an almost magical new browser plugin for live CSS editing.

You may have heard of plugins such as LiveReload that watch your local CSS files for changes. When you make a change to a CSS file and save it, the plugin refreshes your browser automatically to show the effect of your change.

LiveStyle takes this concept a bit further. With LiveStyle, you don’t even have to save your CSS file! The moment you make a change to the CSS stylesheet in your text editor, the change shows up instantly in the browser, without even reloading the page. This even works in the other direction: You can edit a page’s CSS inside the browser (using the browser’s Web Inspector), and LiveStyle automatically updates the CSS in your text editor.

You can edit any page’s CSS this way, even if you don’t have a local copy of the CSS file, or the CSS is minified! The demo video shows live editing of Facebook’s and Google’s homepages using LiveStyle.

This is all possible because LiveStyle analyses CSS changes at a structural level, and transmits just those changes from browser to editor (and vice-versa). Very cool. Currently in public beta, and only works with Sublime Text, but a final paid version is promised soon, as is wider editor support.

Macaw: An image editor that truly understands code

While every web designer should understand at least a bit of HTML and CSS these days, most web designers would rather be designing than coding. In theory it would be great if their design tool could take their visual designs and output the corresponding HTML and CSS automatically.

Many image editors such as Fireworks have supported HTML and CSS export for a while, but the results are usually pretty bad, with ugly, verbose HTML and non-semantic CSS classes.

Enter Macaw. This code-savvy design app claims to understand your design elements at the semantic level, allowing it to output clear, succinct and understandable HTML and CSS code that’s close to what a real front-end coder would produce.

Macaw’s headline features include:

• Global classes: Create a common style that you use a lot and save it as a global class. You can then easily restyle all the elements that use the class just by editing the class.
• Consolidation: Macaw’s Alchemy engine organizes your CSS selectors in the most succinct, efficient way possible, producing beautiful, easy-to-read CSS.
• Absolute to static conversion: Lay out your page in Macaw as if you were using absolute positioning. Macaw automatically converts element to use standard static positioning in the browser, with suitable margins, padding and floats.
• Fluid grids and responsive layouts: Macaw has a re-sizable canvas with fluid grids, and you can set responsive breakpoints then adjust CSS properties for different view-port widths.
• Style guide exports: Macaw can automatically generate a style guide page that demonstrates the typography, colors, grids and classes used in your design. Very cool!

Macaw is currently unreleased but there’s a tantalizing sneak peek videoavailable. Check it out!

Famo.us: Smooth web interfaces just got real

Last, but by no means least, Famo.us is an exciting JavaScript rendering engine that promises to revolutionize web apps and their user interfaces. Essentially, the Famo.us framework bypasses the traditional ways that browsers render 3D animations and goes straight to your device’s GPU, giving you super-smooth, hardware-accelerated 3D graphics.

What’s really nice is that this is all done using JavaScript, so you can take advantage of all this power using JavaScript, CSS and the DOM. It’s also now free for developers to use (the company aims to make money via deals with hardware makers). It runs smoothly on a wide range of browsers, from modern desktops right down to an iPhone 3GS, which is truly impressive.

I think there has been a lot of misunderstanding over exactly what Famo.us can do. Their tech demo makes it look like it’s designed just for creating 3D graphics (albeit super-smooth graphics) as a glorified Flash replacement; however it is just as suited to 2D interfaces, and I think this will be the most common use case for Famo.us in the short term. Think playful, tactile animated app interfaces like we’re starting to see with iOS 7. The video below (running on an iPad) gives a good indication of what’s possible.

I can’t wait to see how developers use this technology in the future to create web apps that compete with the smooth user experience currently delivered by native apps. Exciting times!

What new web tech gets you going?

What new or up-and-coming web technology, framework or app gets you excited? Maybe you use one or more of the technologies in this article? I’d love to hear your thoughts in the comments below.