10 Web Development Technologies to Learn this Weekend

If you sometimes get the feeling that you are being left behind in learning new technologies because you lack the free time to devote to investigating and becoming proficient in new languages and platforms, you are not alone. The constant progression of new and updated applications and approaches to the web development industry makes it quite difficult for the average developer to stay up-to-date on the latest trends and techniques. But to remain competitive in the industry, you have to make the effort, in order to satisfy not just your current customers, but to keep attracting new ones.

Luckily, not all of the new tech advancements in web development require months of study and practice to master. Many, in fact, can easily be learned in a single weekend. Here are 10 popular new technologies that fit that definition – take a look and pick one to try in the upcoming weekend and see if you can find an easier or better way to handle a given task!


Less  — As its name suggests, Less is a technology that will let you do more with less! In this case, it helps declutter and simplify CSS coding. Basically, it allows you to assign a new class name to a collection of different CSS classes that you know will be used repeatedly in your project. A simple example could be a box style (with a background color, border width, border style, and border color) that you want to use in hundreds of places on a planned new site. This new style is listed in your Less setup and when it runs through the pre-compiler, the full CSS is shown in each instance.

Less comes with a Rhino-compatible version and has live demos and file converters available on its site. Among the available Less compilers combined with an editor for Windows and Mac (using Adobe AIR) is Crunch (http://crunchapp.net). If you think Less might be useful to you, a great learning resource for it can be found at 12devsofxmas.co.uk


Modernizer  — If you have been frustrated by the inability of browsers to keep up with new web technologies like HTML5 and CSS3, Modernizr may be just the tool to help bridge that gap. Basically, it detects the specific HTML5 and CSS3 features in a user’s browser, creates a JavaScript object with the results, and adds to the “html” element to either take advantage of what is supported or degrade to a set fallback if necessary. The result? A web page that will show all of the advances of HTML5 and CSS3 if the user’s browser supports them OR an alternative experience you have built in, instead of the browser just ignoring properties it doesn’t yet understand. This kind of a tool can save a lot of time in testing different browser options for apps and scripts you are developing.

Even more powerful is Modernizr’s ability to change one property you have set, but only if another property is present, through its use of rules. Modernizr’s resource center has a really good getting-started guide for beginning your exploration of this product.


Grunt a nifty little tool that lets you automate tasks related to web development, such as compilation, minification, concatenating files, executing shell commands, and the like. All you need do is set up specific repetitive tasks that currently take up a lot of time that can be best spent elsewhere, and Grunt will run then when and where you wish. Almost 3400 plugins for different repetitive tasks (both officially maintained and independent ones) are already available to use with Grunt. Many of the plugins are designed to work with other popular tools (e.g., one compiles CoffeeScript files to JavaScript).

Web Fonts Embedding (@font-face)

The ability to embed a web font on a server so that web developers could use fonts beyond those generally considered “web safe” isn’t a new development. However, not all developers understand how much flexibility embedding a font-face can provide. In fact, since 2009, the Web Open Font Format (WOFF) has added compression and metadata to help with possible bandwidth issues associated with the use of numerous fonts. W3Schools.com has good introduction to this topic, but for a detailed guide to the use of @font-face with different browser versions and a plethora of tips, tricks, and workarounds for continuing challenges with font use online, this Smashing Magazine article is an excellent source.


Ember — At first glance, Ember may seem to be just another tool to help developers build applications for the web, but it provides some different solutions to common problems encountered when building an app, such as child views, event delegation, and the rendering pipeline when responding to user events. A nice variety of learning guides are available from the official site – the getting started area runs through a build of the TodoMVC demo app.


With expanding use of HTML5 comes a whole collection of APIs that web developers really should become familiar with when creating interactive websites, not to mention testing how your site interacts with specific user devices and code performance in general. Sitepoint.com’s “10 HTML5 APIs Worth Looking Into” is one source to consult for specific examples, while CreativeBloq’s “The Developer’s Guide to the HTML5 APIs” describes the main APIs and possible uses. David Walsh expands the list further with tutorials on items like link prefetching in “5 More HTML5 APIs You Didn’t Know Existed.”


Git — One problem that can be extremely frustrating when developing for the web is keeping all the various improvements you try organized, tested, and implemented logically and accurately. Git is an excellent tool that helps web developers keep on track (no pun intended). It works by “recording snapshots of your project in successively better states by manipulating … three trees, or collections of contents of files.” Continuing the tree analogy, the power of Git is its ability to let you create branches off of your main development path that can be later merged into the project or not – useful for assessing either individual features or completely new ideas. Like other source control systems, it’s free, open source, small and fast.


Node.js is another of the newer platforms available for web developers to use to build new applications. Its focus is for those looking to build network applications that are scalable, performed in real-time, and handling huge amounts of data. The community of Node users offers a large number of third-party modules to supplement the basic Node modules themselves. Check out NodeSchool.io where you can learn Node concepts through interactive command-line games.


OAuth  — Security and secure access to user information is a constant challenge for web developers, especially when they want to build in options for users to share their data. OAuth lets a user grant limited access to some or all of their data stored on a site or in an application for a specific use or length of time. It even goes beyond website use to include support for desktop apps, mobile devices and set-top boxes. Note, however, that recent concern over some of the changes made in Version 2.0 makes version 1.0 of OAuth the best choice for web developers who don’t consider themselves expert in online security tactics.


YQL — Yahoo Query Language (YQL), like SQL, provides a means for web developers to access and query data — but across the internet — without having to use different APIs. Its SHOW and DESC commands let you find data sources, etc., without having to open up another web browser. A two-minute tutorial gives a nice introduction to its capabilities.