In our first post in this series, we introduced spriting, and how it can be used to do easy and effective cross-browser animation on the web. In the second post, we got some simple animations up and running, although they had a fair amount of bugs and the code was certainly not ready to go live.

Today, we are going to address those bugs and clean up our code so we can publish it on a page without fear of crashing any code using a method called encapsulation.

Variable Scope

To really explain what was so wrong with the code in our last step, and why encapsulation is important, we need to first explain variable scope.

Imagine you are working with the code below. You have a helpful variable in your function do_this(), and you would like to use that same variable in another function, do_that(), but you run into a little problem.

function do_this(){
      var very_helpful_variable = 20;
      ...
      // This shows '20', just like you expect
      alert(very_helpful_variable); 
    }
    
    function do_that(){
      alert(very_helpful_variable); // But this shows 'undefined'!
    }

Your variable works great within the function it was declared, but outside of that function, it is as if it never existed! This is because do_that() is not within the scope of the variable very_helpful_variable.

Variables are only available inside the block of code where they are declared, this is their scope. Once that block of code is finished running, its variables are erased.

Take a look at these examples:

var w = 1;
    
    function a(){
      var x = 2;
      
      function b(){
        var y = 3;
        
        alert(w); // works
        alert(x); // works
        alert(y); // works
        alert(z); // undefined
      }
      
      alert(w); // works
      alert(x); // works
      alert(y); // undefined
      alert(z); // undefined
    }
    
    function c(){
      var z = 4;
      
      alert(w); // works
      alert(x); // undefined
      alert(y); // undefined
      alert(z); // works
      
      b(); // undefined
    }
    
    alert(w); // works
    alert(x); // undefined
    alert(y); // undefined
    alert(z); // undefined

First we have the variable w, which is declared outside of any functions. It is called a global variable, and it will work anywhere because its scope is the entire document.

Next is the variable x, since it is declared inside of the function a(), it will only work inside of that function. This also includes working inside function b(), since b() is inside of a().

However, a variable defined inside of b() (like y) will not work in the outer function, since that is outside of its scope.

You may also notice that we attempted unsuccessfully to call the function b() from inside the function c(); function names follow the same rules as other variables.

One other quirk with JavaScript, if we just start using a variable name inside a function without declaring it with the keyword var, then the browser will assume that that variable should be global. So, if you don't make sure you always declare your variables with the var keyword, you will end up with global variables and not realize it!

So, to summarize: whenever we declare a variable, we can use it within that block of code or inside any nested blocks inside it. If we try to use it outside of its scope, the value is set to undefined.

This is why in our last post, we put the timer variable outside the functions that used it, since we needed to still grab that variable after the functions had ended.

var timer; // This is a global variable
      
    function run_right(stage, left){
      ...
      timer = setTimeout(function(){run_right(2, left);}, 200);
      ...
    }
    
    function stop_running(){
      document.getElementById('j').style.backgroundPosition = "0px 0px";
      // If 'timer' wasn't set as global, we couldn't stop it here
      clearTimeout(timer);
    }

In order to clear the timer, we needed stop_running() to be within scope for the variable timer. So, we made timer a global variable that could be used everywhere, what could be wrong with that?

The Problem With Global Variables

In any given scope, it is impossible to have two items that are called the same thing. If you were to try to have two different variables with the same name, the browser would just write over one of them. So, if we had a variable named timer, and had a separate variable also named timer that was called within the same scope, one of them would delete and take the place of the other, and we would have havoc in our code. If we had a global variable called timer, then it would interfere with any other variable named timer contained anywhere in the page - including any and all attached JavaScript libraries and external files.

This is a huge source of headaches, you have just seen a really neat JavaScript plug-in somewhere, and you download it onto your site, and suddenly all of your other plug-ins crash... One of the plug-ins was sloppy with global variables, happened to share the same name with something else, your browser trips over itself, and the whole page comes to a grinding halt.

What makes this even worse is that you will never notice this problem when you first test the code. Like our animation code from the last post, it will work great by itself. But, the more pieces you add, the more likely the chances of having a naming conflict, and you will be stuck sorting through a dozen different JavaScript files trying to figure out which two aren't getting along.

Now you may be asking yourself, "Global variables are so convenient! What if I just watch my code really carefully and make sure I don't have any conflicts?" That might work in a perfect world, but in reality you will often have several people working on different parts of the same page, or have to come back and update different parts of your code years later, or even have code from third-parties on your page that will be out of your control (like paid advertising).

So, in short, you wouldn't want global variables any more than you would want exposed wiring along the walls of your house or exposed machinery in your car, it's just a matter of time before something happens that gums up the works. Thankfully, there is a better way that avoids these pitfalls.

Encapsulation

We can have all of the benefits of global variables without the problems by using a technique called encapsulation. Think of it like you are building a wall around your code with only a few special doors, nothing can get in or out of that code unless you specifically allow it.

JavaScript has a type of variable called an object. Objects are user-defined collections of data that contain information and functions (referred to as properties and methods, respectively). We are going to write a function that creates a special object that has all the functions we need "baked" into it, and it will even allow us to have more than one robot without having to duplicate our code!

We start by defining a new function with a variable name. We will need to pass the variable a few arguments, I'm going to pass it the HTML element that we will be animating, plus some unique values for running speed and jump height so we can vary those from robot to robot.

var RobotMaker = function(robot, run_speed, jump_height){
    
      // We will put all of our functions and variables in this area. 
      // This is inside our 'impenetrable' wall, so nothing in this 
      // area will conflict with other code.    
      
      return {
        // Inside here, we place all of our 'doors' ... 
        // these will be the only way anything can get
        // in or out of this code.
        // And, since this is still within the same 'scope' 
        // as RobotMaker, we can use any variables mentioned above! 
      }
    }

Since we are going to be putting all of our functions inside of our new "wall", now would be a good time to revisit what bugs we had with the original code. (You can see that in action here)

You may notice that if we click two run buttons (or a run and jump button) without clicking the Stop button in-between, J will continue to do both actions. A second problem is that no matter which direction J is facing, when we click the Jump or Stop button, he faces right every time. Finally, if you click the Jump button again while J is falling from a first jump, he will continue to fall through the page in an endless loop.

In order to address these things, we need to be more specific about what we want to happen with each of our functions:

When we click Run Right:

1. If J is jumping, do nothing and continue the jump
2. If J is running left, stop him running left
3. Run to the right and animate to the proper frame
4. If J reaches the end of the stage, stop running and stand facing right

When we click Run Left:

1. If J is jumping, do nothing and continue the jump
2. If J is running right, stop him running right
3. Run to the left and animate to the proper frame
4. If J reaches the end of the stage, stop running and stand facing left

When we click Stop Running:

1. If J is jumping, do nothing and continue the jump (we don't want to stop in midair!)
2. If running right or left, stop running
3. If facing right, stand facing right. If facing left, stand facing left

When we click Jump:

1. If J is jumping, do nothing and continue the jump (we don't want to jump again in midair!)
2. If J is running right or left, stop running
3. Start the jump. If J is facing right, jump facing right. If facing left, jump facing left
4. Land facing the same direction as the jump

First of all, we are going to add a few more variables now. Since the timer should behave differently for running and jumping, we will have two separate timers. We also want to introduce a boolean (true/false) variable to track if we should be facing left or right, and we will make a stage variable just to save us from having to type out the full element name.

// Inside the RobotMaker function ... 
    var stage = document.getElementById('stage');
    var run_timer, jump_timer;
    var face_right = true;

Then we are going to add back in our functions for running right, running left, and jumping. These are going to be mostly the same, with a few differences. First of all, all the references to the element that we are animating can be replaced with the variable robot (which will be passed as one of the arguments in the RobotMaker function). Second, we have made some slight changes to the running speed and jumping height in the functions so we can vary those by passing different values. Third, we are using the face_right variable to track which direction J is facing (and in the jumping function, using face_right to decide which jumping sprite to show). Finally, we are using separate timers for running and jumping.

// Inside the RobotMaker function ... 
    function run_r(phase, left){
      face_right = true;
      if ((left + (15 * run_speed)) < (stage.offsetWidth - robot.offsetWidth)){
        
        left = left + (15 * run_speed);
        robot.style.left = left+"px";
        switch (phase){
          case 1:
            robot.style.backgroundPosition = "-40px 0px";
            run_timer = setTimeout(function(){run_r(2, left);}, 200);
            break;
          case 2:
            robot.style.backgroundPosition = "-80px 0px";
            run_timer = setTimeout(function(){run_r(3, left);}, 200);
            break;
          case 3:
            robot.style.backgroundPosition = "-120px 0px";
            run_timer = setTimeout(function(){run_r(4, left);}, 200);
            break;
          case 4:
            robot.style.backgroundPosition = "-80px 0px";
            run_timer = setTimeout(function(){run_r(1, left);}, 200);
            break;
        }
      } else {
        robot.style.backgroundPosition = "0px 0px";
      }
    }  
      
    function run_l(phase, left){
      face_right = false;
      if (0 < robot.offsetLeft - (15 * run_speed)){
        
        left = left - (15 * run_speed);
        robot.style.left = left+"px";
        switch (phase){
          case 1:
            robot.style.backgroundPosition = "-40px -50px";
            run_timer = setTimeout(function(){run_l(2, left);}, 200);
            break;
          case 2:
            robot.style.backgroundPosition = "-80px -50px";
            run_timer = setTimeout(function(){run_l(3, left);}, 200);
            break;
          case 3:
            robot.style.backgroundPosition = "-120px -50px";
            run_timer = setTimeout(function(){run_l(4, left);}, 200);
            break;
          case 4:
            robot.style.backgroundPosition = "-80px -50px";
            run_timer = setTimeout(function(){run_l(1, left);}, 200);
            break;
        }
      } else {
        robot.style.backgroundPosition = "0px -50px";
      }
    }
      
    function jmp(up, top){
      if (face_right){
        robot.style.backgroundPosition = "-160px 0px";
      } else {
        robot.style.backgroundPosition = "-160px -50px";
      }
    
      if (up && (robot.offsetTop > (20 * (1 / jump_height)))){
        top = top - (top * .1);
        robot.style.top = top+"px";
        jump_timer = setTimeout(function(){jmp(up, top);}, 60);
      } else if (up) {
        up = false;
        jump_timer = setTimeout(function(){jmp(up, top);}, 60);
      } else if (!up && (robot.offsetTop < 115)){
        top = top + (top * .1);
        robot.style.top = top+"px";
        jump_timer = setTimeout(function(){jmp(up, top);}, 60);
      } else {
        robot.style.top = "120px";
        if (face_right){
          robot.style.backgroundPosition = "0px 0px";
        } else {
          robot.style.backgroundPosition = "0px -50px";
        }
    
        jump_timer = false;
      }
      
    }

All of these variables and functions are inside of our "wall", so we now need to make "doors" to be able to access only what we need. These four "doors" will be object methods for the same four functions we had previously and will reference the protected functions above. Also, we will complete our bug fixing by checking in each function if the jump_timer is going, and then making sure to clear the run_timer. Remember, these two timers are in scope anywhere inside of the RobotMaker() function, so we can use them here. However, since they are not global variables, we won't run into any trouble with them elsewhere.

// Inside the RobotMaker function ... 
    return {
      run_right : function(){
        if (!jump_timer || jump_timer == undefined){
          clearTimeout(run_timer); 
          run_r(1, robot.offsetLeft);
        }
      },
      
      run_left : function(){
        if (!jump_timer || jump_timer == undefined){
          clearTimeout(run_timer); 
          run_l(1, robot.offsetLeft);
        }
      }, 
      
      stop_running : function(){
        if (!jump_timer || jump_timer == undefined){
          clearTimeout(run_timer);
          if (face_right){
            robot.style.backgroundPosition = "0px 0px";
          } else {
            robot.style.backgroundPosition = "0px -50px";
          }
        }
      },
      
      jump : function(){
        if (!jump_timer || jump_timer == undefined){
          clearTimeout(run_timer);
          jmp(true, robot.offsetTop);
        }
      } 
      
    }

Now that we have written a function that creates objects, we can use it as many times as we like to make objects that have the animation properties we want. At the bottom of our page, we will declare two new RobotMaker objects, and pass them the element we want to animate, a running speed, and a jumping height.

var j = RobotMaker(document.getElementById('j'), 1, 1);
    var j2 = RobotMaker(document.getElementById('j2'), .8, 5);

Now we have no danger of anything in the RobotMaker() function leaking out and interfering with our code, and we can still get to the functions we want through the "doors" that we installed like this:

<input type="button" value="Run Left" onclick="j.run_left();" />

So, now you can see the finished product on the hyrgo Pen.

Notice how there is no longer any issues with the functions interfering with one another, and you can operate each robot individually without affecting the other. Encapsulation is an incredibly important technique, and you should really become familiar with it if you want to do any interactive web design.

If you'd like, please checkout all of this code, fully commented, and you can get the sprites using the following links: here's the first sprites and here's the second ones. Please note that in order for the same code to work with both sprites, I needed to make the second sprite in the exact same format and dimensions as the first.

Conclusion

So that wraps up part three of spriting! In our next and final post, I will replace those buttons with making our robots follow the mouse around the screen, and show you how to set up event listeners and enable support across browsers and touch devices.

Fortunately, learning is not limited to only a small minority of people anymore; it is not even limited to visiting a school or a university. The Internet makes it possible for us to distribute knowledge at a small price, and is full of resources to expand everyone’s knowledge on an enormous variety of topics.

Since learning is a lifelong task that doesn’t stop after pursuing a certain academic certificate, this round-up is not only dedicated to beginners. It’s for everyone who wants to become an expert in a certain field or is simply curious about the Web and the latest tools and techniques around them.

We hope that this round-up will bring you closer with many of the valuable resources that are available out there. Some are completely free while others can be obtained through quite affordable memberships. You may also be surprised to find that your local college or university is also publishing free classes and courses on all sorts of topics you can think of — make sure to keep an eye open!

Here are the topics of learning resources we’ll cover today:

• Coding Resources
• Design Resources
• Miscellaneous Lessons From The Web Industry
• Expanding Your General Knowledge

Coding

Code Avengers
Code Avengers’ courses are a fun way for students to learn computer programming and Web design. Participating in interactive coding challenges, bug hunts and robot missions takes the pain out of learning JavaScript, HTML5 and CSS3. The lessons are designed for students of all ages.

Coderwall
Thousands of developers share their achievements and current projects on Coderwall. Connect with them, share your own pro tips, and get feedback. Learning new programming languages, tools and technologies has a playful twist and is far from boring. Discover how others are solving their challenges, and gain badges for every completed project.

The Starter League (formerly Code Academy)
Trying to build Web apps without the necessary support and guidance can be painful. The Starter League provides you with expert instruction and mentorship. They also paired up with 37signals (creator of Basecamp and Campfire) to provide hands-on knowledge on building successful Web apps.

Pluralsight
Pluralsight was created by a group of developers with the goal of providing the highest quality training possible — for developers, by developers. The library is huge, with courses on nearly every topic you could ask for.

TekPub
TekPub was created with the goal of educating developers. The mini-casts topics range from JavaScript to Ruby on Rails, with more in-depth tutorials available. (Note: Tekpub has been acquired by Pluralsight; old videos can be accessed via Pluralsight).

PeepCode
PeepCode offers high-quality one-hour screencasts on development resources. Learning the most important techniques is quick and easy with these tutorials. (Note: Peepcode has been acquired by Pluralsight; old videos can be accessed via Pluralsight).

Hacker Rank
On Hacker Rank, coders compete to beat high scores by solving little challenges accross the whole science universe, including areas like algorithmy, code gold or artificial intelligence. How do you match up against others when coding a bot to win at tic-tac-toe?

Mozilla Webmaker
Mozilla Webmaker wants to help you move from merely using the Web to making something amazing with it. It has new tools for you to use, projects to help you get started, and a global community of creators — educators, filmmakers, journalists, developers, youth — all making and learning together.

Google Developers University Consortium
The Google Developers University Consortium features courses on mobile and Web development. You will find many usful resources, especially if you’re working with Android and Google Maps.

Android Training
On Android Training, you will find a collection of classes to help you build Android apps. The classes explain the steps to take in order to solve a problem or implement a feature, using code snippets and sample code.

Programr
Programr is an online lab for students and enthusiasts who want to learn programming. The platform’s goal is to give you the skills you need in order to write sophisticated programs. Test your coding skills by mastering assignments, build your own app right in the browser, and check out contributions by other users. You can even show off your know-how in programming contests. It supports coding languages for console, Web and mobile.

Learn Code the Hard Way
“Less talk, more code” is the credo of Learn Code the Hard Way. Students start by getting code to work; learning the theory comes second. The website focuses on practice by featuring exercises and rote repetition, which will help you gain confidence in whatever you want to do.

Dash
Dash teaches HTML, CSS, and Javascript through fun projects you can do in your browser.

Hack Design
Hack Design is an easy-to-follow design course. You can simply receive a design lesson in your inbox each week, which is hand crafted by a design pro. A great resource if you love learning at your own pace. No fake projects.

Code School
Code School teaches Web technologies in the comfort of your browser with video lessons, coding challenges, and screencasts.

Codecademy
At Codeacademy, you can build your own projects and learn how to create interactive websites, games, and apps. You can also join groups to code with your friends and show off your progress with points and badges.

Codewars
At Codewars you can challenge yourself on kata, created by the community to strengthen different skills. Kata are ranked to approximate difficulty. As you complete higher ranked kata, you progress through the ranks so Codewars can match you with relevant challenges.

LearnStreet
LearnStreet makes learning to code easy for anyone. Whether you would like to start off with JavaScript, Ruby or Python, the platform has got you covered. Build your skill base in the interactive courses, and use it in fun little projects.

PHP Academy
PHP Academy provides free tutorials on PHP and other Web development topics, including MySQL, JavaScript (including jQuery) and CSS. There are free video tutorials, optional premium membership and a forum to ask for help.

PLAYterm
PLAYterm is a platform where CLI users share their skills and inspire others. It can replay your terminal sessions online, and it provides embed codes that you can put on your website. Share your knowledge and help others improve their skills.

The New Boston
With his project, The New Boston, Bucky Roberts makes high-quality education available for everybody. His YouTube channel features a lot of computer-related tutorials on topics such as Java, C++, After Effects or Phyton.

gotoAndLearn
gotoAndLearn is a free video tutorial resource for Flash, Game development and HTML5 by game developer evangelist Lee Brimelow.

repl.it
On repl.it, you can explore more than 15 programming languages in your browser — even on the go with your phone or tablet. Just type an expression into the console and wait for the results. The Web application also lets you save your session and share it with others.

The Pragmatic Bookshelf
The Pragmatic Bookshelf’s mission is to improve the lifes of developers by offering text books, audio books and videos for training. The content is produced by programmers for programmers, addressing relevant cutting-edge topics.

HTML and CSS

30 Days to Learn HTML and CSS
Do you want to learn HTML and CSS but don’t know where to start? 30 Days to Learn HTML and CSS is a free course consisting of one video daily for 30 days. All you have to do is spend 10 minutes a day on a new topic. By the end, you’ll have the necessary building blocks to code an entire website.

A Beginner’s Guide to HTML & CSS
This simple and comprehensive guide will help novices take their first steps in HTML and CSS. Outlining the fundamentals, it teaches you all of the common elements of front-end design and development.

Don’t Fear the Internet
For those who don’t want to learn to code, this website provides a brief introduction to WordPress, CSS and HTML, even throwing in some PHP trickery. Jessica Hische and Russ Maschmeyer have prepared short chunks of technical information in concise videos.

JavaScript

Backbone Screencasts
If you’re learning Backbone.js, these screencast will be very useful. The extensive live coding sessions will walk you through, from the beginning to more advanced stuff like using Backbone.js with Ruby on Rails.

appendTo
JavaScript and jQuery skills are becoming more and more sought after. By offering a number of lessons, appendTo helps you develop those skills. Signing up isn’t even necessary; just watch the free screencasts (each around 10 minutes long), and start building your foundation of JavaScript and jQuery knowledge.

JavaScript Garden
JavaScript Garden is a growing collection of documentation about the most quirky parts of JavaScript. It offers advice on avoiding common mistakes and subtle bugs, and it lays out performance issues and bad practices that JavaScript programmers might run into on their journey to the depths of the language. The resource is dedicated to professional developers, rather than beginners, and it requires some basic knowledge of the language.

NodeSchool
NodeSchool offers interactive lessons for Node.js, including core concepts and electives. There is also a list of free/affordable in-person NodeSchool events around the world which are .

Eloquent JavaScript: A Modern Introduction to Programming
The book “Eloquent JavaScript” by Marijn Haverbeke introduces the JavaScript programming language and programming in general. A free digital version is available in HTML format and you can order a paperback version from Amazon. Furthemore, the book has been translated to French, German and Polish. (Note: A second, more modern edition is currently in process.)

Node Tuts
Node Tuts by Pedro Teixeira offers free webcasts exclusively about Node.Js.

Ruby on Rails

Ruby on Rails Tutorial
Michael Hartl has written a tutorial book named Ruby on Rails Tutorial. Visit the website to find the free online version, along with screencasts.

TryRuby
Ruby is a revolutionary programming language from Japan known for its simplicity and power. On TryRuby, you can experiment with it right in your browser. A 15-minute interactive tutorial will help you get started.

Hackety Hack
Hackety Hack teaches you the basics of programming by introducing the Ruby language. Build your skills from scratch, and use them to build desktop applications and websites.

Virtuous Code
Avdi Grimm is a software “cultivator” who publishes a screencast series on Ruby development. When you subscribe, you get new screencasts every Monday and Thursday (or access to the full scripts if you prefer reading to watching), the source code for each video and access to the complete archive of episodes.

RubyMonk
RubyMonk is an interactive Ruby learning plattform. You will learn the basics of the programming language right in your browser. The tutorials are free but donations are very welcome.

Rails for Zombies
Learn Ruby the zombie way with Rails for Zombie. You don’t have to worry about configuration. After watching short introductory videos, you can start experimenting right in the browser. The course is aimed at beginners, but there are also courses for more experienced Ruby developers.

RailsCasts
RailsCasts by Ryan Bates, offers a free weekly screencast featuring Tips and Tricks for Ruby on Rails. The topics are targeted for intermidiate users, but beginners and experts can also get something out of it. You may subscribe for additional screencasts.

Design

Drawspace
Drawspace is a community of drawing enthusiasts, professional artists and art educators. It features a huge library of free downloadable lessons that teach you how to draw or enhance your current abilities. With a profile, you can track your progress, from beginner to advanced levels.

Miscellaneous Lessons From The Web Industry

Treehouse
Treehouse is for beginners and experts. It offers material for learning everything you need to be successful in the Web industry. This includes technical knowledge, but also skills for starting a successful business. You can learn via specific tracks (i.e. Web developement) or topics.

Tuts+ Premium
Tuts+ Premium is a subscribers-only platform that offers resources for learning creative and technical skills such as design, Web development, motion graphics and photography. The content is created and constantly revised by leading experts. Choose whether to learn by video or articles with screenshots. A large community is behind Tuts+ Premium that you can connect with and ask for further help.

Ontwik
Ontwik gathers the latest lectures and conferences from Web developers and designers in one place. It covers topics such as JavaScript, NodeJS, jQuery, Ruby, Rails, HTML5, CSS3, UI, UX and more. There are also lectures on creativity, marketing and startups.

Because technical knowledge is not enough

A Student’s Guide to Web Design
Here is an attempt to better equip graduates in the design industry. It provides resources and information to help young Web designers with life after graduation.

#The50
After graduating from art college, Jamie Wieck realized that he had no clue about professional life. So, he started #The50 to help students and graduates in the same situation learn what every creative should know. The tips are made up of 140 characters and a hash tag, making them easy to share on Twitter.

“The Web Design Community Offers Advice to Beginners,” Smashing Magazine
We asked, “What is the single best tip from your experience that you would give to a newbie developer?” This article compiles all of the amazing responses we received.

Jessica Hische’s Thoughts
Illustrator Jessica Hische doesn’t have a traditional blog, but she shares answers to frequently asked questions about her and her work. You’ll find useful advice on random topics regarding the Web industry such internships, pricing, non-creepy networking, and so on.

The Secret Handshake
The creative industry is very different from traditional companies and applying only traditional methods in the application process won’t bring you too far. The Secret Handshakes is a resource for students and young creatives looking for insiders insights, honest answers and solid solutions to help you go pro.

WaSP InterAct Curriculum
Designed to keep up with the fast-moving industry, WaSP InterAct is a living curriculum that prepares students for careers on the Web. Courses are divided into several learning tracks, covering everything from the foundations to professional practice. Recommended reading lists, assignments and exam questions help you to become a real Web professional.

Conference Organiser’s Handbook
Are you planning to organize a conference? Then, the Conference Organiser’s Handbook is the best place to start. The website was put together by Peter-Paul Koch and provides information on everything you need to know, from start to finish.

Expanding Your General Knowledge

TED
TED is devoted to “ideas worth spreading.” You can watch talks on technology, design, business, global issues, science and entertainment. Get inspired by other thinkers, and get involved in a community of curious people!

Khan Academy
The Khan Academy wants to provide anyone anywhere in the world with a world-class education — for free! All you need is an Internet connection. A huge video library provides you with lessons on a wide array of topics, covering everything from basic maths to macroeconomics to programming basics and even art history. Test your knowledge, track your progress and earn badges.

University of Reddit
The University of Reddit is an open-source peer-to-peer learning platform. The courses are free and range from computer science to mathematics to languages.

VideoLectures.Net
Registering on this site gives you free access to educational video lectures. The videos cover many fields of science and feature distinguished scholars and scientists at conferences, workshops and other events. The high-quality content is aimed at both the scientific community and the general public.

P2PU
The Peer 2 Peer University is an open-education project that encourages lifelong learning, following its credo “We are all teachers and we are all learners.” Everybody can participate and make use of the content. It also features a School of Webcraft, with some basic tutorials.

Online Courses
Online courses offers 100 open courses for tech geeks. Among them, you will find general computer science topics and courses on Web design and development. The website also provides information on accredited schools, college finances and studying.

Lynda
Lynda helps you learn software, creative and business skills. As a member, you get unlimited access to a huge library of high-quality video tutorials, taught by working professionals. Topics also include design and development.

Udemy
Who do you want to be? An entrepreneur? A mobile developer? A better photographer? A yoga instructor? On Udemy you can become what you want to be by learning from an expert in an interactive online course filled with other passionate students. All courses on Udemy are developed, created and owned by the experts themselves.

Learners TV
Learners TV provides a huge collection of free downloadable video lectures on all sorts of topics, including computer science. The website also features science animations, lecture notes and live, timed online tests with instant feedback and explanations.

ReadWrite
ReadWrite covers all things Web, tech and social media. Its list of tech-focused instructional websites links you to platforms that teach a wide array of topics. The topics are pretty general, ranging from computing to hacking.

Learn a new language

Radio Lingua
Radio Lingua is a podcast that helps you learn languages where, when and how you want. There are quick starter courses if you want to learn the absolute basics of a language, or you can take your skills to the next level by diving into grammar and vocabulary. The episodes are aimed at learners of all ages and conducted by experienced teachers and native speakers.

Busuu
Learning a language with Busuu is completely different from what you are used to. As a member of the platform’s community, you learn directly from native speakers via video chat. That way, everyone is not only a learner, but also a teacher. To keep you motivated, the language you are learning is represented as a tree, which grows with the effort you put in. Joining Busuu is free.

Open University classes & University-style classes

Udacity
Udacity’s learning experience is different from other education platforms. Learn by solving challenging projects and by interacting with renowned university instructors and other students. The courses are as demanding as studying at a real university, but a range of certificate options are available.

OnlineCourses (formerly know as Lecturefox)
On OnlineCourses you will find high-quality classes from renowned universities such as Harvard, Berkeley and MIT. Topics range from biology to accounting, foreign languages to science.

Education Portal
Making education accessible is the goal of the Education Portal. The platform offers articles and videos on researching schools, degree programs and online courses. Covering everything from arts to sciences, it also has a list of free Web design courses that lead to college credits.

OpenClassroom
Stanford University’s OpenClassroom provides videos of computer sciences courses. You can watch the videos for free, and the lessons are split up into short chunks of quality information.

MIT OpenCourseWare
MIT OpenCourseWare publishes virtually all MIT course content. The open platform doesn’t require any registration, and it features free lecture notes, exams and videos.

OpenCourseWare
The OCW consortium is a collaboration of higher-education institutions and associated organizations from around the world to create a broad and deep body of open-education content using a shared model.

The Faculty Project
The Web isn’t be the only thing you are interested in. If so, then the Faculty Project might be for you. It brings lectures from leading university professors to anyone with an Internet connection. The free courses are taught through video, slideshows and reading resources, and they cover lessons from maths to economics to history.

Academic Earth
Whether you want to advance your career or just take classes that interest you, Academic Earth provide anyone with the opportunity to earn a world-class education. The website offers free lessons and learning tools from many disciplines. If you would like to study further, it also connects you to universities and scholars.

Course Hero
Course Hero has a mission to help college students get the most out of their education by giving them access to the best academic content and materials available. Search for study documents by department, keyword and even school. After registering, you can use the resources for free.

edX
edX is a not-for-profit enterprise by MIT, Harvard, Berkley and the University of Texas System. Take part in high-quality online courses from different disciplines — including computer science — and obtain a certificate from one of the renowned universities. The institutions use the insights they gain from the platform to research how technology can transform learning.

Coursera
Partnering with the top universities from around the world, Coursera offers free online courses. The lectures are taught by renowned professors and cover a variety of disciplines. Assignments and interactive exercises help you test and reinforce your knowledge.

Webcast.berkeley
Since 2001, Webcast.berkeley has been a window into UC Berkeley’s classrooms, publishing courses and campus events for students and learners everywhere in the world. View audio and video recordings of lectures online, or download them to your device.

The Open University
The Open University is open to anyone and offers over 570 courses at many different levels, from short introductory courses to postgraduate and research degrees. Studying is flexible and adapts to your lifestyle. You can even connect to other learners online and use the activities to assess your progress.

Last Click…

WeekendHacker
Do you have a small project or idea in mind but need a little help? WeekendHacker is a place to reach out to designers and developers who may be able to assist. Simply sign up, post your project, and sit back and wait for someone to help.

Until Next Time!

We hope that this list of learning resources will help you to further develop your skills and open doors for you. Of course, you’re more than welcome to share other resources that are missing in this round-up in the comments section below! Also, we look forward to hearing which resource you find most valuable, and why!

By the way, you may also want to check out Melanie Lang’s list of inspirational podcasts — we highly recommend it!

(sh, ml, ea, il)

Front page image credits: Programmr.

© The Smashing Editorial for Smashing Magazine, 2014.

There was a time—it’s hard to imagine now—when most businesses did not have a website. In the early days of the Web, almost every business that wanted to commission a website was taking its first steps into the online world.

As time moves on it’s inevitable that virgin ground is harder to find.

It’s rare that a startup is able to fully invest in design—even if they would like to—and the less they invest in design, the sooner they’ll need to redesign. There certainly are new companies, new projects, new promotions that need designing; but the vast majority of design work is redesigns.

Redesigns can be fraught with difficulty; the client may be carrying misconceptions left by the previous designer, the current site may be tied into the company infrastructure, most difficult of all it’s common that your point of contact at the company will be responsible for the earlier design.

As well as the problems, redesigns carry with them one intractable benefit: they provide an objective point of embarkation.

When is a redesign not a redesign?

Answer: when it’s a design.

Most redesigns, despite the name, are in fact simply designs. By this, I mean a designer has assessed the problem posed by a client and provided a solution.

Where redesigns differ, is that a designer assesses the problem posed by a client, and also assesses the existing solution, before providing his or her own solution.

Webdesign is a unique discipline in that we possess an unrivalled ability to monitor and quantify almost every aspect of our design decisions. Or, in the case of a redesign, someone else’s decisions. The benefit of a redesign (as opposed to a design) is that there is a focussed direction to take. Much of the legwork has been done. Even if the client’s current site is a total failure, you can get ahead of the game by finding out exactly why.

The aim of any redesign is broadly the same regardless of the project in question: a redesign seeks to reassess a problem and make improvements on prior solutions. A redesign is more extensive than a design, it takes account of more and it digs deeper. The essence of the redesign philosophy is that there is a problem underlying the project that is in a state of flux so that it surpasses any single solution.

A design tends to be less successful than a redesign, because a design takes one of two approaches: it either finds a solution to the original problem—in which case previous lessons learnt are ignored— or more commonly, it finds a solution to the existing solution—bypassing the problem altogether.

Ted’s redesign

Last month, ted.com, the Web’s supremo site for innovative presentations released a redesign.

Ted talks are one of the premier sources of cutting edge ideas and in the last seven years Ted has grown from half a dozen videos to more than 1600. For many people, delivering a Ted talk is the pinacle of public speaking and Ted’s brand reflects the forward-looking nature of the organization.

However in the last few years, the hub for cutting-edge ideas has started to look distinctly dated. Confined to a restrictive grid too small for desktops and too rigid for mobile. A redesign was essential for Ted’s continued progression.

ted.com’s old homepage (left) and the redesign (right).

The redesign that is currently in public beta is a superlative example of intelligent and sophisticated design, produced by a team that clearly has an in-depth understanding of both of the history of Ted’s site and a vision of where it might proceed.

ted.com’s old talks page (left) and the redesign (right).

The first thing you’ll notice is that the restrictive 960px grid is gone. In its place is an expanding slider that fills the available screen real estate, whilst maintaining the egalitarian approach to content hierarchy. The site is now fully responsive and vitally its content is accessible on mobile devices, maintaining pace with technology and in-keeping with Ted’s brand image as a progressive force.

ted.com’s old ‘mobile’ version (left) and the mobile friendly redesign (right).

The ted.com redesign is an exceptional example of how a site can reassess not only its current problems, but the problems that lead to its current solutions.

Twitter’s ‘redesign’

It seems inevitable that every major website will eventually redesign—or more accurately, reskin—itself inline with the flat-design trend that has steam-rollered the Web over the last year or so.

Falling into line last week is twitter.com, whose designers have now rolled out the latest version of the insanely popular social network, worldwide.

A quick glance will tell you that little has changed: the basic layout is still in place; there’s a main panel containing a timeline of messages, and a column on the side featuring various information panels. Infinite scrolling is still in use, as is the sticky header. The only appreciable change is on the header, which has lost most of its gradients and adopted a flat-friendly color palette—purportedly to bring it inline with Twitter’s mobile offerings.

The design is a let down at best, at worst a half-hearted gesture made for its own sake. It fails spectacularly because rather than reassess the original problem, the team have mistaken the previous solution as a problem in its own right.

The new twitter.com.

Instead of asking, “How can we solve this problem?” the team at Twitter asked, “How can we modify this solution?” They have, in effect, provided an answer to an answer, a superficial process of restyling elements best reserved for Dribbble rebounds.

Despite the fact that the majority of users access their Twitter timeline via dedicated applications such as Tweetdeck and Tweetbot (in 2013 75% of users chose to access Twitter via a smart phone) the team have retained the focus on the user’s timeline, a feature no longer central to the site’s main usage (account management).

99% of good design is redesign

Design is about solving problems, but it’s rare that your first solution is your best. Quality is achieved through iterations: designs are redesigned and redesigned; concepts receive incremental improvements; solutions evolve.

Ted.com redesigned by focussing on their core problem—the need to display videos on the devices their audience favors—and then assessing where their existing solution fell short. Twitter.com redesigned by focussing on their existing site, and applying a new skin.

The single largest error you can make when redesigning is to mistake the current solution for a problem to be solved.

The secret of a really great redesign, is examining not just the existing solution, but the problem that it was devised to solve. That’s the only way to objectively gauge the changes that are needed and provide a measured and considered solution of your own.

Have you worked on a redesign lately? Do you prefer to start from a blank canvas? Let us know your thoughts in the comments.

Elegant Font Combo: Hilton Sans + Hilton Serif – only $15!

Secret, a new app that lets you share honestly and anonymously, is addictive.

On Facebook and Twitter, I follow a simple rule: post nothing I’d be embarrassed about if my boss saw it. On a new iPhone app called Secret, I’ve kissed that rule goodbye.

If you’re like many NFL football fans, you are suffering with major withdrawal. It will be seven tortuous months before the opening kickoff of the 2014 season.

But fear not football addicts, there is news for your addled gridiron brains…

This past week, star University of Missouri defensive end Michael Sam, revealed he was gay. Sam, a likely candidate for the NFL draft, could soon be the first openly gay professional football player.

Sam is a talented defensive player with first-team All-American honors and winning Southeastern Conference Defensive Player of the Year. 

Several general managers around the NFL have stated that his sexuality or any player’s sexuality will not hinder their chances of being brought onto their teams. However, others suggest his public announcement could lower his draft status as teams would not want to handle the media attention and distraction his arrival would likely bring.

The NFL has been seen as the ultimate masculine sport for its physicality and the size and strength of its players. Some players have said they would welcome a gay player and even some have even been in support for same-sex marriage. Others have not been as supportive.

Sam would be the first openly gay athlete in major American sports since NBA center, Jason Collins came out in April of 2013.

So what do you think? Will the NFL welcome Sam with open arms? Would you want him on your favorite team?