Using Node.js, we can create web applications easily. Now, thanks to the node-webkit we can also create desktop apps with it, using a unique combination of HTML5 and Node.

Introduction

The library combines WebKit engine and Node.js in a unique way. Both WebKit and Node share the same context, allowing you to write your code like it’s meant to be executed in a browser, but with the addition of all Node’s features.

The list of uses is endless. You can create business apps, text and image editors, games, presentations, admin panels, etc. Just name the desktop app that you would like to create, and I can assure you that it will be possible with node-webkit.

In this tutorial, I will show you how to get started by showing you how to create a simple text editor.

Preparation

First, you have to get the library. Download the version appropriate for your operating system (the application itself will run on all of them) from github and unzip it wherever you’d like. Now, lets create a basic folder structure. We will have folders for HTML files (.html) and for JavaScript files (.js). Also, create the package.json file in the same directory that the nw executable is in and a node_modules folder to keep the modules we will create.

Package.json

The first thing to do is to fill the required fields in the package.json file. In the case of node-webkit these are name and main (on Github you can find the full list of available package.json options). The first one is exactly the same as in the case of a plain Node.js app. The second one should be a (relative or absolute) path to the main HTML file that will be displayed upon the application starting. In the case of our example, the package.json file should look like this:

{
    	"name": "simple-text-editor",
    	"main": "./html/index.html"
    }
    

Now if you run your app using the nw executable, you should see a blank screen like this:

The Main File

Creating the user interface using node-webkit is no different than creating a webpage (with the slight difference that you know the rendering engine, so you don’t have to provide any fallbacks for older browsers, or use libraries like jQuery – and actually you shouldn’t, because they include fallback code that will slow down your app). Let’s create an index.html file that we will use:

<!DOCTYPE html>
    <html>
    <head>
    	<title>Simple Text Editor</title>
    </head>
    <body>
    
    </body>
    </html>
    

Let’s also include (and create) the main JavaScript file that we will use, in the body, so it will be executed after the DOM is loaded:

<script src="../js/main.js"></script>
    

Now the only thing that will change when you open the app will be the title.

Let’s Use Some Node

To show you how easily you can use Node.js in node-webkit, let’s read the contents of package.json and print it on the screen. Create the js/main.js file and put the following code in it:

var fs = require('fs');
    
    fs.readFile('./package.json', 'utf-8', function (error, contents) {
    	document.write(contents);
    });
    

As you can see, the code looks exactly the same as if you were writing it for Node. But then we use document.write to put the file contents on the page. No need to setup any local server.

Now open the app and you should see something like this:

Modules

There is another nice thing about node-webkit; You don’t have to include a series of <script> tags in your HTML if you want to split your code into modules. You can do it just like you do in Node.js – using require. Let’s create a simple module to read file contents to a textarea or write it to a file. Name the file file.js and put it in the node_modules directory. Now put the overall module structure in it:

var fs = require('fs');
    
    function File() {
    	function open(path, document) {
    		
    	}
    	
    	function save(path, document) {
    		
    	}
    	
    	this.open = open;
    	this.save = save;
    }
    
    module.exports = new File;
    

As you can see this will be a static class with two public methods – one for opening the files and one for saving them.

The open method will look like this:

function open(path, document) {
    	fs.readFile(path, 'utf-8', function (error, contents) {
    		document.getElementById('editor').value = contents;
    	});
    }
    

Pretty simple right? The function accepts the path to the file as the first parameter and puts the file’s contents into the element with an id of “editor”. We also need to pass the document object to the function because the script is called using Node’s require and it doesn’t have access to the WebKit stuff directly.

The save method is as simple as the previous one:

function save(path, document) {
    	var text = document.getElementById('editor').value;
    	fs.writeFile(path, text);
    }
    

Now let’s test if everything works. Change the contents of js/main.js to this:

var file = require('file.js');
    
    console.log(file.open, file.save);
    

Now if you go to the developer tools console and click the developer refresh button in the right corner of the window you should see the two functions from this module logged. This is another useful thing in node-webkit – your console.log calls are being displayed in the developer tools console, so it’s easier to debug your apps.

Node-Webkit’s File Inputs

Let’s add two file inputs that we will need later:

<input id="open" type="file" style="display:none" accept="text/*"/>
    <input id="save" type="file" nwsaveas style="display:none" accept="text/*"/>
    

Notice the nwsaveas attribute in the second input. It is a special type of input from node-webkit, that allows the user to select a non-existing file. Both of the inputs are hidden, because we will only access them from JavaScript. In node-webkit, file inputs are modified in a way that allows you to fire a click event on them, so you can open the file dialog without the user clicking on the input (with no need for the workarounds like invisible inputs above the button). Now we can move to the JavaScript.

First, remove the console.log call from the js/main.js file. Now put this code in there:

function clickInput(id) {
    	var event = document.createEvent('MouseEvents');
    	event.initMouseEvent('click');
    	document.getElementById(id).dispatchEvent(event);
    }
    
    document.addEventListener('keyup', function (e) {
    	if (e.keyCode == 'O'.charCodeAt(0) && e.ctrlKey) {
    		clickInput('open');
    	} else if (e.keyCode == 'S'.charCodeAt(0) && e.ctrlKey) {
    		clickInput('save');
    	}
    });
    

This code is responsible for showing the Open and Save dialogs. The clickInput function does the main job here – it simulates the click event on the input element – in a normal browser, this would be impossible from security reasons, but here it’s not a security threat at all. Later, there is a normal keyup event handler that checks if the proper key combination was pressed (Ctrl+O or Ctrl+S) and “clicks” on the inputs. Note that this would also be impossible to achieve in a browser – combinations like Ctrl+O and Ctrl+S are reserved for the browser’s internal use and no event fires when they are pressed (only Firefox fires events for them).

Now press the developer refresh button and you should see the appropriate dialog when you press Ctrl+S or Ctrl+O. They of course do nothing for now.

Creating the Editor

Now, since we will be creating a text editor, we need something to write on. Add the textarea to the HTML:

<textarea id="editor" style="position:fixed;top:0;bottom:0;left:0;right:0"></textarea>
    

Next we have to finish the opening/saving code. Let’s create the onchange event listeners for the open and save inputs:

document.getElementById('open').addEventListener('change', function (e) {
    	file.open(this.value, document);
    });
    
    document.getElementById('save').addEventListener('change', function (e) {
    	file.save(this.value, document);
    });
    

Thanks to the module created earlier, the code is really simple. This is also possible thanks to node-webkit, because in browsers (again for security reasons) the value of the file input element is set to a fake path – here it’s the path which was selected. Now open the app (or press the developer refresh button, if you didn’t closed it) and you should have a perfectly working text editor.

Further Enhancements

We can also do a few other things to make the editor a bit more advanced and useful. For example, let’s open a new window when a user presses Ctrl+N. First, add this require to the top of the script:

var gui = require('nw.gui');
    

The nw.gui module is a node-webkit’s library related to the user interface (you can read more about this on Node-webkit’s Github). Next add this else if to the document’s keyup listener:

} else if (e.keyCode == 'N'.charCodeAt(0) && e.ctrlKey) {
    	gui.Window.open('index.html');
    }
    

And viola! If you refresh the app, now you can press Ctrl+N to open a new window. This function does differ from the normal window.open though. You can pass various window options as the second parameter. The list of what you can set there is available in the documentation.

Another thing that may be useful in a text editor is an application menu (the one that sits under the title bar in Windows/Linux and on the top of the screen on Mac). In node-webkit it’s pretty simple. First, let’s create the menu:

var menu = new gui.Menu({ type: 'menubar' });
    

The type menubar is reserved for the application menu. Now we can add items to it. Let it be a File menu:

menu.append(new gui.MenuItem({
    	label: 'File',
    	submenu: new gui.Menu()
    }));
    

Now let’s add some items to this menu:

menu.items[0].submenu.append(new gui.MenuItem({
    	label: 'New',
    	click: function () {
    		gui.Window.open('index.html');
    	}
    }));
    menu.items[0].submenu.append(new gui.MenuItem({
    	type: 'separator'
    }));
    menu.items[0].submenu.append(new gui.MenuItem({
    	label: 'Close',
    	click: function () {
    		gui.Window.get().close();
    	}
    }));
    

menu.items[0] is the first item of our application menu (you can also assign it to a variable when creating it if you want to). We are appending new items to its submenu, and each item gets a click callback to handle the click on it. The gui.Window.get method gets the current window, so we can close it when the user selects the Close option in the File menu.

Finally, we can assign the menu to the window:

gui.Window.get().menu = menu;
    

Again, we are using gui.Window.get to get the current window, then we are assigning our menu to its menu property. Please note, that even though we can assign a different menu to every window, on OSX (Mac) one app can only have one menu (which is global for all windows), so if you want your app to be used on Macs, you should avoid using different menus on different windows.

Now if you open or refresh your app, you should see a system menu under the titlebar:

Packaging the App

Now if you would like to share your app with other users, you can package it into one file, so the users can download the node-webkit’s executable appropriate to their platform and launch your app with it. First, let’s remove the toolbar that makes the window look like a browser – it’s nice to have during development, but your users probably don’t want to see it. We can achieve this by setting window.toolbar to false in package.json, so it looks like this:

{
    	"name": "example-app",
    	"main": "./html/index.html",
    	"window": {
    		"toolbar": false
    	}
    }
    

Now if you open the app (nothing will change if you just refresh it, package.json is loaded only on startup), you should see the final result:

Packaging the app is pretty simple. Just create a .zip archive with all your assets (all of the files you created, without the files supplied with node-webkit) and change its extension to .nw. That’s all. If a user downloads node-webkit and your package, they only need to put it in the node-webkit’s directory and run the nw executable. Detailed descriptions, with a few more tips, are available on the node-webkit’s github.

Now your editor is ready to be shipped to your users.

Conclusion

As you can see, node-webkit is a very promising and powerful library. With frequent updates and fixes, and being supported by Intel, there’s almost no chance that it will be discontinued, which can sometimes happen with open source projects.

Share your thoughts about this project in the comments below. I personally think it’s the best thing out there if you want to create a desktop application using Node.js and HTML.

It can feel impossible to stay up to date with the latest news and information in the web industry. It seems like every week there are new front-end frameworks, new JavaScript projects, new must-have apps, and so much more. How can one person possibly know everything?

The Treehouse Show is a weekly video podcast where we showcase the latest industry news and updates. The show aims to help summarize the most important links you should check out.

The truth is this: Nobody knows everything, and indeed, it is impossible to keep up with everything. I’m sure there’s lots of fantastic web apps or jQuery plugins that could have saved me hours of bygone headaches had I only known about them. Half the battle is just identifying a problem you’re having and searching for a solution, but even then, it’s easy to miss the perfect fix. I’m telling you this, because at some point when you’re showing a project to someone, they’ll say, “Why didn’t you just use ______ instead?” and you’ll smack yourself in the forehead. It’s OK, it happens all the time, and it’s usually a helpful lesson.

Difficult as it may be, this is why you should try your best to keep up. The more you understand about the tools and resources that are available to you, the faster you’ll be able to put together something new. We cover lots of awesome links you should know about on The Treehouse Show every week, but if you’re still craving more, here are some more places to look.

Read Blogs

Congratulations! You’re reading this blog post, so you’re already on the right track. It can take some time before new tools and techniques become neatly “tutorialized” and fully explained in detail on video. We work at a very rapid pace at Treehouse, but blog posts are still much faster and cheaper to put together because they usually just consist of text and images. As a result, blogs are an excellent source of timely information. They may not always have the same depth as a good tutorial video, but they’re quick to update.

Some people use RSS readers to subscribe to their favorite blogs, which can help keep everything organized. I personally don’t use RSS and I just check my favorite blogs whenever I have the time, but use whatever works for you. If you’re looking for some blogs to follow for web tips, this list will help you get started:

• The Treehouse Blog (the blog you’re reading now)
• CSS Tricks
• David Walsh Blog
• A List Apart
• Smashing Magazine
• Codrops
• Net Magazine
• HTML5 Rocks

Follow People on Twitter

My favorite source of new links is Twitter. Just by following a few web oriented accounts, you’ll start to get lots of great insight directly in your feed. I like Twitter because each tweet is limited to 140 characters, which means you get straight to the point. Most people use Twitter to check up on their friends, but mixing in a few good web personalities and resources can turn social time into learning time.

This Twitter list of web community leaders can help you stay up to date.

If you don’t know where to get started, I’ve put together this list of Twitter accounts for you to browse. I update it sometimes when I think there’s significant new accounts to follow. If there’s a person or a company missing that you think should most definitely be on there, tweet to me and let me know!

Check sites like Github, Codepen, and Dribbble

Web professionals use specialized social networks to share work with one another. Github is great for sharing entire projects. Codepen is cool if you want to showcase front-end concepts using HTML, CSS, and JS. Finally, Dribbble is meant specifically for designers to share shots of their work. Each of these sites has loads of users posting new stuff everyday, so browsing what’s popular can reveal new techniques you’ve never seen. Check out these links to see what I mean:

• See what’s trending on Github
• See what’s popular on Codepen
• See what’s popular on Dribbble

Also, if you’re just looking for inspiration, these sites are a great place to start.

Checking out the front page of Dribbble can be an excellent source of the latest design trends.

Pay Attention to Events

Attending events is a fantastic way to keep up with the latest news. Not only do you get to network with like minded individuals, you also get to hear experts speak on topics that they’re passionate about. Industry leaders will frequently reveal new information or provide key insights during their talks that you just can’t get anywhere else.

If you get the chance to attend an event, definitely make sure you take the opportunity. Flying to these events and going to them in person can be expensive, but if you’re a Treehouse student, there’s lots of awesome recorded conferences available on Treehouse. Be sure to check those out!

Invent the Future

Nobody can predict the future, so why not invent it? You’d be surprised how easy it is to come up with new web ideas that have never been tried before. The web is a dynamic medium with vastly untapped potential. If you have a problem that you want to solve, look around and see if someone has already solved it. Even if you do find a solution, maybe you can come up with a better one and execute in a way that nobody has done before!

This list isn’t exhaustive, and there’s lots more places you could look for the latest industry news. If you have an excellent resource you’d like to share, I’d love to hear about it in the comments!

The post How to Keep Up with the Web Industry appeared first on Treehouse Blog.

Thank you, dear Smashing readers, for your support — it means the world to us. On behalf of the entire Smashing Magazine team, we wish you a happy, healthy and prosperous 2014. Let it be the best year of your life. — Ed.

We always try our best to challenge your artistic abilities and produce some interesting, beautiful and creative artwork. And as designers we usually turn to different sources of inspiration. As a matter of fact, we’ve discovered the best one—desktop wallpapers that are a little more distinctive than the usual crowd. This creativity mission has been going on for over five years now, and we are very thankful to all designers who have contributed and are still diligently contributing each month.

This post features free desktop wallpapers created by artists across the globe for January 2014. Both versions with a calendar and without a calendar can be downloaded for free. It’s time to freshen up your wallpaper!

Please note that:

• All images can be clicked on and lead to the preview of the wallpaper,
• You can feature your work in our magazine by taking part in our Desktop Wallpaper Calendar series. We are regularly looking for creative designers and artists to be featured on Smashing Magazine. Are you one of them?

Smashing New Year

“2014 is here! Wish you all amazing new year.” — Designed by Matej Pindroch from Slovakia.

• preview
• with calendar: 1280×800, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440
• without calendar: 1280×800, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440

Have A Smashing New Year 2014

Designed by Bryan Verlinden from Belgium.

• preview
• with calendar: 320×480, 800×600, 1280×1024, 1680×1050, 1920×1080, 2560×1440
• without calendar: 320×480, 800×600, 1280×1024, 1680×1050, 1920×1080, 2560×1440

Keep Warm & Snuggle Up

“January is one of the coldest months of the year so designed a calendar that might inspire you to keep warm and snuggle up with a nice cup of hot chocolate, coffee, or tea… you choose!” — Designed by Jorden Campbell from New Hampshire, USA.

• preview
• with calendar: 1024×768, 1280×720, 1280×1024
• without calendar: 1024×768, 1280×720, 1280×1024

New Year’s Resolution

Designed by Elise Vanoorbeek from Belgium.

• preview
• with calendar: 800×480, 1024×768, 1152×864, 1280×800, 1280×960, 1440×1050, 1400×900, 1680×1050, 1920×1080, 1920×1200, 1920×1440, 2560×1440
• without calendar: 800×480, 1024×768, 1152×864, 1280×800, 1280×960, 1440×1050, 1400×900, 1680×1050, 1920×1080, 1920×1200, 1920×1440, 2560×1440

The Twelfth Night

“January always reminds me of my childhood, dressing up as a king with some friend and going door to door to sing a song !” — Designed by Kevin Mornie from Belgium.

• preview
• with calendar: 800×600, 1024×768, 1024×1024, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440
• without calendar: 800×600, 1024×768, 1024×1024, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440

Don’t Forget Your Vitamins

“Discover the seasonal fruits and vegetables. In January: apple and banana enjoying with the snow!” — Designed by Vitaminas Design from Spain.

• preview
• with calendar: 320×480, 1280×800, 1280×1024, 1440×900, 1920×1080, 2560×1440
• without calendar: 320×480, 1280×800, 1280×1024, 1440×900, 1920×1080, 2560×1440

Smashing Snowball

“Winter snowball fun!” — Designed by Bram De Nyn from Belgium.

• preview
• with calendar: 320×480, 800×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1080, 2560×1440
• without calendar: 320×480, 800×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1080, 2560×1440

Be Awesome Today

“A little daily motivation to keep your cool during the month of January.” — Designed by Amalia Van Bloom from United States.

• preview
• with calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1920×1200, 2560×1440, 640×960
• without calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1920×1200, 2560×1440, 640×960

SmashingConf In New York

“A new Smashing Conference. 17–18th of June 2014. Two days, one track, 18 brilliant speakers. 350 seats.” — Designed by Ricardo Gimenes from Brazil.

• preview
• with calendar: 320×480, 1024×768, 1024×1024, 1280×800, 1280×960, 1280×1024, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440, 640×960, 1366×768, 1600×1050, 2880×1800
• without calendar: 320×480, 1024×768, 1024×1024, 1280×800, 1280×960, 1280×1024, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440, 640×960, 1366×768, 1600×1050, 2880×1800

Happy Coding This Year!

Designed by Jasper De Smet from Belgium.

• preview
• with calendar: 320×480, 800×480, 1280×720, 1280×800, 1280×1024, 1920×1080, 2560×1440
• without calendar: 320×480, 800×480, 1280×720, 1280×800, 1280×1024, 1920×1080, 2560×1440

Cool Winter

“Wanted to abstractly sum up January. Showcase the cool, crisp colors and give an overall feeling of winter.” — Designed by Matt Noa from United States.

• preview
• with calendar: 320×480, 640×480, 800×480, 800×600, 1024×768, 1024×1024, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440, 2880×1800
• without calendar: 320×480, 640×480, 800×480, 800×600, 1024×768, 1024×1024, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440, 2880×1800

Abstract Winter

“January is a cold and dark month up here in the north. A month to cuddle up in the warmth inside, light some candles and hang out with family while avoiding the bitter cold and snow outside. This is my attempt at an abstract interpretation of this chilly time of year.” — Designed by Terese Brännström from Sweden.

• preview
• with calendar: 800×600, 1024×768, 1024×1024, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440
• without calendar: 800×600, 1024×768, 1024×1024, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440

A Cold January

Designed by Stijn Van Doorslaer from Belgium.

• preview
• with calendar: 640×480, 800×600, 1024×768, 1280×960, 1400×1050, 1600×1200, 1680×1200
• without calendar: 640×480, 800×600, 1024×768, 1280×960, 1400×1050, 1600×1200, 1680×1200

Rocky Mountain Winter

“January is a big month for skiing in Alberta. Fresh, crisp snow and spectacular scenery make for an amazing month.” — Designed by Jennifer Garman from Canada.

• preview
• with calendar: 320×480, 640×480, 800×480, 800×600, 1024×768, 1024×1024, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440
• without calendar: 320×480, 640×480, 800×480, 800×600, 1024×768, 1024×1024, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440

Taking Back Winter

“I live in Canada, where the winters are long and can be bleak if you don’t get active. These are things that represent my childhood.” — Designed by Stephanie Bell from Canada.

• preview
• with calendar: 800×600, 1024×768, 1152×864, 1280×960, 1400×1050, 1680×1200, 1920×1440, 2560×1920
• without calendar: 800×600, 1024×768, 1152×864, 1280×960, 1400×1050, 1680×1200, 1920×1440, 2560×1920

Happy New Year!

“A wallpaper to welcome the new year 2014!” — Designed by WebOlution from Greece.

• preview
• with calendar: 1024×1024, 1280×800, 1280×1024, 1680×1050, 1920×1080, 1920×1200, 2560×1440, 2560×1600, 640×960, 1366×768
• without calendar: 1024×1024, 1280×800, 1280×1024, 1680×1050, 1920×1080, 1920×1200, 2560×1440, 2560×1600, 640×960, 1366×768

After Holidays

“I often use wallpapers for my desktop from your web site and really wanted to participate. My muse was the future Christmas holidays and what left after them. Hope to like my wallpaper and use it with smile :)” — Designed by Militsa Mokanova from Bulgaria.

• preview
• with calendar: 320×480, 640×480, 800×480, 800×600, 1024×768, 1024×1024, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440
• without calendar: 320×480, 640×480, 800×480, 800×600, 1024×768, 1024×1024, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440

Japanese New Year

Designed by Evacomics from Singapore.

• preview
• with calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1920×1080, 2560×1440, 768×1024
• without calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1920×1080, 2560×1440, 768×1024

Lights In Concert

“It’s 2014! Let’s go see a show, all the Lights are going to be there. “De’light’ed”, “These lights rock” said the critics.” — Designed by Lights.com from United States.

• preview
• with calendar: 320×480, 640×480, 800×480, 800×600, 1024×768, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440, 640×960, 640×1136, 1040×1360, 1040×1536, 1080×1920, 2160×1920, 2560×1600, 2880×1800
• without calendar: 320×480, 640×480, 800×480, 800×600, 1024×768, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440, 640×960, 640×1136, 1040×1360, 1040×1536, 1080×1920, 2160×1920, 2560×1600, 2880×1800

Month Of The Wolf

“It is not only the start of a new year, it is also the month of the wolf. I think it is a beautiful combination. New year, new moon, wolf.” — Designed by Joni Fory from Belgium.

• preview
• with calendar: 320×480, 800×600, 1280×720, 1280×800, 1920×1440, 2560×1440, 1024×700
• without calendar: 320×480, 800×600, 1280×720, 1280×800, 1920×1440, 2560×1440, 1024×700

New Year It Is!

“This is the time to take a step forward, which will lead you to new adventures, new roads to explore and new success to reach. Its the time to forget the bad, remember the good, to not repeat the mistakes, to not hurt anyone. Let everyone’s life keep lighting up like fireworks, be away from darkness and take them higher. Happy New Year to all.” — Designed by Smita Dessai from Goa,India.

• preview
• with calendar: 320×480, 1024×768, 1280×800, 1280×960, 1280×1024, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440, 640×960, 1366×768, 1600×1050, 2880×1800
• without calendar: 320×480, 1024×768, 1280×800, 1280×960, 1280×1024, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440, 640×960, 1366×768, 1600×1050, 2880×1800

New Years 2014 Celebration Of LIfe

“New Year new opportunities! Let’s celebrate and enjoy the launch of a new year and adventures 2014 will bring!” — Designed by Clifford Almeida from United States.

• preview
• with calendar: 320×480, 640×480, 800×480, 800×600, 1024×768, 1024×1024, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440
• without calendar: 320×480, 640×480, 800×480, 800×600, 1024×768, 1024×1024, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440

Remember 2014

“Everyone sometimes forget about the new year and still writes down the old one. So a wallpaper with a reminder can do no harm.” — Designed by Lisa Smets from Belgium.

• preview
• with calendar: 1280×960, 1280×1024, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1440
• without calendar: 1280×960, 1280×1024, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1440

Wake Me Up When Spring Arrives

“Last year was the sad time for me. I lost my grandfather and I lost a long time to forget a wonderfull boy who I love. So In the new year I wish I’ll stronger as a flower sleep throughout the winter, wait spring to bloom.” — Designed by Nguyet Tran Thi Anh from Việt Nam.

• preview
• with calendar: 320×480, 640×480, 1024×768, 1024×1024, 1280×720, 1280×800, 1280×960, 1280×1024, 1600×1200, 1680×1200, 1920×1200, 1920×1440, 2560×1440
• without calendar: 320×480, 640×480, 1024×768, 1024×1024, 1280×720, 1280×800, 1280×960, 1280×1024, 1600×1200, 1680×1200, 1920×1200, 1920×1440, 2560×1440

Warli Art

“The Warlis are an indigenous tribe or Adivasis, living in Mountainous as well as coastal areas of Maharashtra-Gujarat border and surrounding areas.They have their own animistic beliefs,life,customs and traditions,as a result of acculturation they have adopted many Hindu beliefs.” — Designed by Sacchidanand Chavan from India.

• preview
• with calendar: 1024×768, 1024×1024, 1280×800, 1440×900, 1680×1050, 1920×1080, 1920×1200, 1366×768
• without calendar: 1024×768, 1024×1024, 1280×800, 1440×900, 1680×1050, 1920×1080, 1920×1200, 1366×768

Warming Up

Designed by Sofie Keirsmaekers from Belgium.

• preview
• with calendar: 320×480, 800×600, 1280×720, 1280×1024, 1440×900, 1920×1200, 2560×1440
• without calendar: 320×480, 800×600, 1280×720, 1280×1024, 1440×900, 1920×1200, 2560×1440

Let’s Welcome The New Year

Designed by Paarva Creations from India.

• preview
• with calendar: 1024×768, 1024×1024, 1280×1024, 1440×900, 1920×1080, 1366×768
• without calendar: 1024×768, 1024×1024, 1280×1024, 1440×900, 1920×1080, 1366×768

Welcome to Brasil: Fifa WC 2014

Designed by Biju Louis from India.

• preview
• with calendar: 640×480, 800×600, 1024×768, 1280×720, 1280×960, 1440×900, 1680×1050, 1920×1080
• without calendar: 640×480, 800×600, 1024×768, 1280×720, 1280×960, 1440×900, 1680×1050, 1920×1080

Happy New Year! Cheers!

“Each year is another opportunity for us to start it with a BANG and a fresh opportunity at our dreams and New Year’s resolution. Our team used this as our theme for designing this wallpaper. Enjoy!” — Designed by Cliff Almeida from Phoenix, Arizona.

• preview
• with calendar: 320×480, 640×480, 800×480, 800×600, 1024×768, 1024×1024, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440
• without calendar: 320×480, 640×480, 800×480, 800×600, 1024×768, 1024×1024, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440

A Winter Walk

“I remember times being very windy in January. Not only because of the backlash of Christmas food and New Years eve’s casserole, but also due to big drafts waiting at the train station.” — Designed by Tom Moore from Belgium.

• preview
• with calendar: 640×480, 800×600, 1024×768, 1280×720, 1280×800, 1280×960, 1440×900, 1600×1200, 1680×1050, 1920×1080, 1920×1200, 1920×1440, 2560×1440
• without calendar: 640×480, 800×600, 1024×768, 1280×720, 1280×800, 1280×960, 1440×900, 1600×1200, 1680×1050, 1920×1080, 1920×1200, 1920×1440, 2560×1440

Sledding Snowman

“I stumbled upon some Calvin and Hobbes cartoons about winter, and they inspired me for this wallpaper. We aren’t the only ones having fun during winter! Snowmen are entitled to winter fun too! I wonder where he’ll land…?” — Designed by Pieter Van der Elst from Belgium.

• preview
• with calendar: 320×480, 1280×800, 1280×1024, 1600×1200, 1920×1200, 2560×1440, 800×1280
• without calendar: 320×480, 1280×800, 1280×1024, 1600×1200, 1920×1200, 2560×1440, 800×1280

Join In Next Month!

Please note that we respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the full freedom to explore their creativity and express emotions and experience throughout their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us, but rather designed from scratch by the artists themselves.

A big thank you to all designers for their participation. Join in next month!

What’s Your Favorite?

What’s your favorite theme or wallpaper for this month? Please let us know in the comment section below.

Stay creative and have a truly smashing, happy new year 2014!

© The Smashing Editorial for Smashing Magazine, 2013.

The dust hasn’t settled on the new Target.com redesign: the Web (OK, well, the web design community and a few actual Target customers) are looking for answers:

1. Why, Target? Why?
2. Who is responsible?

The first question may be a little easier to address, since Target has now responded to the criticism. They insist the redesign is based on pre-launch testing and positive post-launch traffic and sales, and promise to keep making adjustments as they learn more. Connections are also being drawn to the end of Target’s reliance on the Amazon website platform.

The answer to the second question is more of a closely-guarded secret. AdFreak checked in with some notable digital agencies known to be working with Target (Olson, SapientNitro, Huge, Razorfish), and all denied involvement. According to AdFreak, some said they believed the redesign was handled in-house.

An interesting comment on the Jezebel website by a friend of a past Target employee is a little chilling. Admittedly, we don’t know the full story behind why someone in management would address improvement suggestions by telling the designer, “not to bother.” Still, anyone with corporate experience is probably reading these words with a mixture of bitterness and resignation. In fairness to Target’s in-house team, the mess probably has more to do with pressure from above.

While it’s pragmatic to stop at, “this was tested: this is what worked.” It’s just as practical to recognize that testing still needs to be coupled with basic, purposeful design principles. Target in particular has been setting itself apart from the other big box stores for years with its emphasis on better design. In that light, this can also be considered a failure beyond visual identity, to brand.

In case you were curious, in an AdFreak follow-up piece, Target Defends Homepage Redesign but Still Won’t Say Who Did It.

Writers aren’t too happy about the whole Big Red Periods thing, either.

Are you responsible for the Target.com redesign? Would you admit it if you were? Let us know in the comments.

Follow Your Users’ Actions on your Website (Windows) – only $27!

Advanced technologies are affecting everything from our sense of privacy and free speech to the types of jobs that are available to the foods that we eat. In our best features this year, we got into these highly controversial topics.

By The Editors