How to learn more in 2014

Go to Source

learning_thumbnailAlbert Einstein once said, “Any fool can know. The point is to understand.” It’s one thing to be aware of what’s new in web design, quite another to be in the thick of it actually producing usable designs that solve problems.

To keep up in this industry, You need a heightened sense of curiousity and a desire to keep learning.

As a user-centered designer, I literally spend half of my days meeting with stakeholders, peers, and subject matter experts. Finding enough quiet time just to deliver what’s expected of me consumes the remainder of my day. But this is the career I’ve chosen (I might argue it’s chosen me) — I enjoy solving problems, love design, and am captivated by technology, so I’m not sure I ever had a choice to be honest. But for any of us, keeping our skills current as technology changes can be challenging.

As the Kano Model reminds us, today’s delights rapidly transform into tomorrow’s minimum expectations from users.

How to learn more in 2014

It’s not easy keeping up. Factor in family life, hanging with friends, watching the big game, or whatever your guilty pleasure may be at the time, and you have a constant deluge of competing forces vying for whatever “me time” remains. And then there’s that other thing called sleep that nobody has (yet) figured out how to achieve.

So what’s your secret, or not so secret, weapon? What’s in your go-to arsenal. How do you stay current? Do you read, watch videos, listen to podcasts, experiment with code, or a little of all of the above?

Let me start by sharing what has worked for me personally, and in turn invite you to reveal where you go when you need to stay up to date.

I’m aware that there are many resources out there that I have yet to try, such as Adobe TV, Code Academy, Tuts+, Code School, and others. So don’t take offense if one of your favorites isn’t on my personal go-to list. I intend to eventually check all those out, but you know what they say about good intentions.

How to learn more in 2014

Two of my longtime favorites are lynda.com and teamtreehouse.com depending on which side of my brain I’m using. Both offer courses for design and coding, but for my money (or my employer’s money as they’re footing the bill), I’m turning toward lynda.com for my creative, artistic right brain, while leaning on Treehouse for my left brained logical analytical side.

How to learn more in 2014

One of my favorites on lynda.com is Deke’s Techniques, an ongoing collection of Photoshop and Illustrator projects that can be completed in ten minutes or less. But I also rely on lynda.com for full on courses, such as the nearly four-hour long Edge Animate Essential Training, which takes you from an overview of the interface all the way through publishing. Likewise, Luke Wroblewski’s Web Form Design Best Practices really opened my eyes to why forms matter and some savvy techniques behind form design. I’ve also turned to lynda.com for more technical tutorials, such as iOS SDK Essential Training.

How to learn more in 2014

As I alluded to earlier, teamtreehouse.com is my home when I want to get my hands a little bit dirty. Although, still providing very high quality video tutorials like lynda.com, Treehouse’s presentations carry a much more quirky vibe in the way they engage the viewer. Sometimes it comes across as a bit much for my taste, but the quality of the content is ultimately my main concern, which is very good. For example, to contrast their iOS Foundations tutorial to the equivalent on lynda.com, what I love about Treehouse are the code challenges and quizzes. What I’ve found, personally, is that I have a tendency to nod along while watching a tutorial, saying “yep I get it.” But Treehouse presents code challenges throughout a tutorial that really test your knowledge, and it’s usually at that point in time I realize I really didn’t get it at all like I thought I had.

How to learn more in 2014

Treehouse has also gamified the learning experience for subscribers. You earn badges as you complete various tasks, tutorials, and adventures where you can see how you rank amongst your peers. For instance, I’m number 2 on my group standings amongst my collegues at work. The fact that I even know that proves the method behind their madness works on at least one of us. They also enable you to share your achievements via social media if you’re into braggadocio, which I never realized before, but apparently I am.

Not to be outdone, Lynda offers certificates of course completion that you can print out or even email, although I’m not sure how much, if any, weight that carries with your current or potential employers contrary to what lynda.com may want you to believe.

In my opinion, you can have all the degrees or certificates or badges that you want, but in the end it comes down being able to produce something. And that’s exactly why I love codepen.io. Codepen is a front-end sandbox whose motto is “Demo or it didn’t happen” where people can view and rate your demos or even provide feedback.

How to learn more in 2014

I use Codepen on multiple fronts. First, it’s a terrific source of HTML/CSS/JS inspiration. There’s a ton of awesome demos that leave you thinking: I never knew that was even possible with CSS or HTML. How did they do that??

Second of all, it’s a great way to reverse engineer something you like. Granted, it’s not a tutorial site, but all of the code used for each demo is interactive where you can literally play with it and test out other people’s work to learn what does what. Or if you prefer, like GitHub, you can fork it and extend someone else’s demo in a new direction.

And last but certainly not least, it’s just a great way to practice. It offers tons of resources you can tap into, such as CSS preprocessors like Sass, LESS, and Stylus. With the click of a checkbox you can also choose to write prefix-free code or normalize your CSS. Have an external stylesheet, script or even just something from another “pen” you’d like to link to? Not a problem. If you prefer, write your code using CoffeeScript or LiveScript. You can even link to an external library such as jQuery, Zepto, MooTools, YUI and others with the click on a button. Still not finding the one you want? No fear, you’ll probably find it in the CDNJS library to which Codepen allows you to externally link. For what it’s worth, I look at Codepen as the holy grail of front-end experimentation.

So let’s see, I’ve got more video tutorials than I can handle, and I have my sandbox. What else could I want?

Well, one of my favorite passtimes is reading magazines, and two of my all-time favorites happen to be .NET Magazine and Web Designer, which both offer iPad subscriptions. In either publication, you’ll find terrific interviews with insanely creative people and tons of amazing tutorials each month. I get excited with every new release to say the least.

How to learn more in 2014

Add in Chris Coyier’s CSS-Tricks and Luke Wroblewski’s lukew.com, and I’d argue that 24 hours isn’t enough time in the day to fit all of this in, at least not for me.

So there you have it, my repository of “expert-ness” that I turn to for education, inspiration, experimentation, and general insight from people just like you all around the world.

 

Where do you get your knowledge and inspiration? How do you plan to increase your knowledge in 2014? Let us know in the comments.

Featured image/thumbnail, learning image via Shutterstock.

Resize Sense + Watermark Sense for Mac – only $14!
How to learn more in 2014

Source

10+ handy and reusable jQuery code snippets

Go to catswhocode.com

Smooth scrolling to top of page

Let’s start this list by a very popular and useful snippet: Those 4 lines will allow your visitors to smooth scrool to the top of the page simply by clicking a a link (with #top id) located at the bottom of your page.

$("a[href='#top']").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});

Source: http://stackoverflow.com/questions/1144805/how-do-i-scroll…

Clone table header to the bottom of table

For a better readability of your tables, it can be a good idea to clone the table header on the bottom of the table. This is what this useful snippet do.

var $tfoot = $('<tfoot></tfoot>');
$($('thead').clone(true, true).children().get().reverse()).each(function(){
    $tfoot.append($(this));
});
$tfoot.insertAfter('table thead');

Source: http://lunart.com.ua/jquery

Load external content

Do you need to add some external content to a div? It is pretty easy to do with jQuery, as demonstrated in the example below:

$("#content").load("somefile.html", function(response, status, xhr) {
  // error handling
  if(status == "error") {
    $("#content").html("An error occured: " + xhr.status + " " + xhr.statusText);
  }
});

Source: http://api.jquery.com/load/

Equal height columns

When you’re using columns to display content on your site, it definitely look better if the columns have an equal height. The code below will take all div elements with the .col class and will adjust their heights according to the bigger element. Super useful!

var maxheight = 0;
$("div.col").each(function(){
  if($(this).height() > maxheight) { maxheight = $(this).height(); }
});

$("div.col").height(maxheight);

Source: http://web.enavu.com/tutorials/top-10-jquery-snippets-including-jquery-1-4/

Table Stripes (Zebra)

When displaying data on a table, alternating colors on each row definitely increases readability. Here’s a snippet to automatically add a CSS class to one row of out two.

$(document).ready(function(){                             
     $("table tr:even").addClass('stripe');
});

Source: http://www.alovefordesign.com/5-jquery-must-have-code-snippets/

Partial page refresh

If you need to refresh only a portion of a page, the 3 lines of code below will definitely help. In this example, a #refresh div is automatically refreshed every 10 seconds.

setInterval(function() {
$("#refresh").load(location.href+" #refresh>*","");
}, 10000); // milliseconds to wait

Source: http://web.enavu.com/tutorials/top-10-jquery-snippets-including-jquery-1-4/

Preload images

jQuery make it easy to preload images in the background so visitors won’t have to wait forever when they would like to display an image. This code is ready to use, just update the image list on line 8.

$.preloadImages = function() {
       for(var i = 0; i<arguments.length; i++) {
               $("<img />").attr("src", arguments[i]);
       }
}

$(document).ready(function() {
       $.preloadImages("hoverimage1.jpg","hoverimage2.jpg");
});

Source: http://css-tricks.com/snippets/jquery/image-preloader/

Open external links in a new tab/window

The target="blank" attribute allows you to force opening of links in new windows. While it is relevant to open external links in a new tab or window, same domain links should definitely be opened in the same window.

This code detect if a link is external, and if yes, adds a target="blank" attribute to it.

$('a').each(function() {
   var a = new RegExp('/' + window.location.host + '/');
   if(!a.test(this.href)) {
       $(this).click(function(event) {
           event.preventDefault();
           event.stopPropagation();
           window.open(this.href, '_blank');
       });
   }
});

Source: http://css-tricks.com/snippets/jquery/open-external-links-in-new-window/

Div full Width/Height of viewport with jQuery

This handy piece of code allows you to create a full width/height div according to the viewport. The code also handles window resizing. Great for modal dialogs or popups.

// global vars
var winWidth = $(window).width();
var winHeight = $(window).height();

// set initial div height / width
$('div').css({
    'width': winWidth,
'height': winHeight,
});

// make sure div stays full width/height on resize
$(window).resize(function(){
    $('div').css({
    'width': winWidth,
    'height': winHeight,
});
});

Source: http://www.jqueryrain.com/2013/03/div-full-widthheight-of-viewport-with-jquery/

Test password strength

When you let users defining their password, it is generally a good thing to indicate how strong the password is. This is exactly what this code do.

First, assume this HTML:

<input type="password" name="pass" id="pass" />
<span id="passstrength"></span>

And here is the corresponding jQuery code. The entered password will be evaluated using regular expressions and a message will be returned to the user to let him know if his chosen password is strong, medium, weak, or too short.

$('#pass').keyup(function(e) {
     var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
     var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
     var enoughRegex = new RegExp("(?=.{6,}).*", "g");
     if (false == enoughRegex.test($(this).val())) {
             $('#passstrength').html('More Characters');
     } else if (strongRegex.test($(this).val())) {
             $('#passstrength').className = 'ok';
             $('#passstrength').html('Strong!');
     } else if (mediumRegex.test($(this).val())) {
             $('#passstrength').className = 'alert';
             $('#passstrength').html('Medium!');
     } else {
             $('#passstrength').className = 'error';
             $('#passstrength').html('Weak!');
     }
     return true;
});

Source: http://css-tricks.com/snippets/jquery/password-strength/

Image resizing using jQuery

Although you should resize your images on server side (using PHP and GD for example) it can be useful to be able to resize images using jQuery. Here’s a snippet to do it.

$(window).bind("load", function() {
	// IMAGE RESIZE
	$('#product_cat_list img').each(function() {
		var maxWidth = 120;
		var maxHeight = 120;
		var ratio = 0;
		var width = $(this).width();
		var height = $(this).height();
	
		if(width > maxWidth){
			ratio = maxWidth / width;
			$(this).css("width", maxWidth);
			$(this).css("height", height * ratio);
			height = height * ratio;
		}
		var width = $(this).width();
		var height = $(this).height();
		if(height > maxHeight){
			ratio = maxHeight / height;
			$(this).css("height", maxHeight);
			$(this).css("width", width * ratio);
			width = width * ratio;
		}
	});
	//$("#contentpage img").show();
	// IMAGE RESIZE
});

Source: http://snipplr.com/view/62552/mage-resize/

Automatically load content on scroll

Some websites such as Twitter loads content on scroll. Which means that all content is dynamically loaded on a single page as long as you scroll down.

Here’s how you can replicate this effect on your website:

var loading = false;
$(window).scroll(function(){
	if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
		if(loading == false){
			loading = true;
			$('#loadingbar').css("display","block");
			$.get("load.php?start="+$('#loaded_max').val(), function(loaded){
				$('body').append(loaded);
				$('#loaded_max').val(parseInt($('#loaded_max').val())+50);
				$('#loadingbar').css("display","none");
				loading = false;
			});
		}
	}
});

$(document).ready(function() {
	$('#loaded_max').val(50);
});

Source: http://fatfolderdesign.com/173/content-load-on-scroll-with-jquery

Check if an image is loaded

Here’s a snippet I often use when working with images, as it is the best way to know if an image is loaded or not.

var imgsrc = 'img/image1.png';
$('<img/>').load(function () {
    alert('image loaded');
}).error(function () {
    alert('error loading image');
}).attr('src', imgsrc);

Source: http://tympanus.net/codrops/2010/01/05/some-useful…

Sort a list alphabetically

On some cases, it can be very useful a sort a long list by alphabetical order. This snippet take any list and order its element alphabetically.

$(function() {
    $.fn.sortList = function() {
    var mylist = $(this);
    var listitems = $('li', mylist).get();
    listitems.sort(function(a, b) {
        var compA = $(a).text().toUpperCase();
        var compB = $(b).text().toUpperCase();
        return (compA < compB) ? -1 : 1;
    });
    $.each(listitems, function(i, itm) {
        mylist.append(itm);
    });
   }

    $("ul#demoOne").sortList();

});

Source: http://stackoverflow.com/questions/13394796/javascript-jquery-to-sort…