http://flowingdata.com/2014/01/14/lexical-distance-between-european-languages/
Michele Pollard
Sent from my iPhone.
Sunday, January 26, 2014
Friday, January 24, 2014
Thursday, January 23, 2014
10 jQuery snippets every designer should know
10 jQuery snippets every designer should know
Webdesigner Depot
jQuery is used on thousands upon thousands of web pages. It's one of the most common libraries to insert into pages, and it makes DOM manipulation a snap.
Of course, part of jQuery's popularity is its simplicity. It seems we can do almost anything we like with this powerful library.
For all the options open to us, there are some snippets we tend to come back to time and time again. Today I'd like to give you 10 snippets that everyone, newbies to gurus, will use time and time again.
1) Back to top button
// Back To Top
$('a.top').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
//Create an anchor tag
<a class="top" href="#">Back to top</a>
As you can see using the animate and scrollTop functions in jQuery we don't need a plugin to create a simple scroll to top animation.
By changing the scrollTop value we can change where we want the scrollbar to land, in my case I used a value of 0 because I want it to go to the very top of our page, but if I wanted an offset of 100px I could just type 100px in the function.
So all we are really doing is animating the body of our document throughout the course of 800ms until it scrolls all the way to the top of the document.
2) Checking if images are loaded
$('img').load(function() {
console.log('image load successful');
});
Sometimes you need to check if your images are fully loaded in order to continue with your scripts, this three line jQuery snippet can do that for you easily.
You can also check if one particular image has loaded by replacing the img tag with an ID or class.
3) Fix broken images automatically
$('img').error(function(){
$(this).attr('src', 'img/broken.png');
});
Occasionally we have times when we have broken image links on our website and replacing them one by one isn't easy, so adding this simple piece of code can save you a lot of headaches.
Even if you don't have any broken links adding this doesn't do any harm.
4 – Toggle Class on hover
$('.btn').hover(function(){
$(this).addClass('hover');
}, function(){
$(this).removeClass('hover');
}
);
We usually want to change the visual of a clickable element on our page when the user hovers over and this jQuery snippet does just that, it adds a class to your element when the user is hovering and when the user stops it removes the class, so all you need to do is add the necessary styles in your CSS file.
5 – Disabling input fields
$('input[type="submit"]').attr("disabled", true);
On occasion you may want the submit button of a form or even one of its text inputs to be disabled until the user has performed a certain action (checking the "I've read the terms" checkbox for example) and this line of code accomplishes that; it adds the disabled attribute to your input so you can enable it when you want to.
To do that all you need to do is run the removeAttr function on the input with disabled as the parameter:
$('input[type="submit"]').removeAttr("disabled");
6 – Stop the loading of links
$('a.no-link').click(function(e){
e.preventDefault();
});
Sometimes we don't want links to go to a certain page or even reload it, we want them to do something else like trigger some other script and in that case this piece of code will do the trick of preventing the default action.
7 – Toggle Fade/Slide
// Fade
$( ".btn" ).click(function() {
$( ".element" ).fadeToggle("slow");
});
// Toggle
$( ".btn" ).click(function() {
$( ".element" ).slideToggle("slow");
});
Slides and Fades are something we use plenty in our animations using jQuery, sometimes we just want to show an element when we click something and for that the fadeIn and slideDown methods are perfect, but if we want that element to appear on the first click and then disappear on the second this piece of code will work just fine.
8 – Simple Accordion
// Close all Panels
$('#accordion').find('.content').hide();
// Accordion
$('#accordion').find('.accordion-header').click(function(){
var next = $(this).next();
next.slideToggle('fast');
$('.content').not(next).slideUp('fast');
return false;
});
By adding this script all you really need to on your page is the necessary HTML go get this working.
As you can see in this snippet I firstly closed all the panels in our accordion and then on the click event I made the content that is linked to that header slide toggle , and all the other ones slide up. It's a simple method for a quick accordion.
9 – Make two divs the same height
$('.div').css('min-height', $('.main-div').height());
Sometimes you want two divs to have the same height no matter what content they have in them, this little snippet enables just that; in this case it sets the min-height which means that it can be bigger than the main div but never smaller. This is great for masonry like websites.
10 – Zebra stripped unordered list
$('li:odd').css('background', '#E8E8E8');
With this little snippet you can easily create zebra striped unordered lists, this places the background you define on every odd list item so that you can place the default one for the even ones in your CSS file. You can add this snippet to any type of markup, from tables to plain divs, anything you want to be zebra stripped.
Conclusion
These are the pieces of jQuery code I find myself using again and again in my projects. I hope you bookmark this page and come back whenever you need one of these snippets.
What jQuery snippets do you rely upon? Do you have better code for these scenarios? Let us know in the comments.
Featured image/thumbnail, useful image via Shutterstock.
| 7 Breathtaking Ornamental Font Sets With 500+ Ornaments – only $12! |  |
     |
Original Article: http://rss.feedsportal.com/c/35285/f/661066/s/362b0585/sc/4/l/0L0Swebdesignerdepot0N0C20A140C0A10C10A0Ejquery0Esnippets0Eevery0Edesigner0Eshould0Eknow0C/story01.htm
Michele Pollard
Sent from my iPhone.A Dive Into Plain JavaScript
A Dive Into Plain JavaScript
CSS-Tricks
I think jQuery provides so much benefit it still makes sense to use on projects of even modest scope and up. But knowing how to do the simple stuff without it is very good to know, and getting pretty easy these days as long as you "cut the mustard" first.
Direct Link to Article — Permalink
A Dive Into Plain JavaScript is a post from CSS-Tricks
Original Article: http://blog.adtile.me/2014/01/16/a-dive-into-plain-javascript/
Michele Pollard
Sent from my iPhone.How to learn more in 2014
How to learn more in 2014
Webdesigner Depot
Albert 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.
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.
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.
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.
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.
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.
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.
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.
| Video Course: Website Wireframing with HTML5 & CSS3 – only $14! | |
| |
Original Article: http://rss.feedsportal.com/c/35285/f/661066/s/363454d2/sc/4/l/0L0Swebdesignerdepot0N0C20A140C0A10Chow0Eto0Elearn0Emore0Ein0E20A140C/story01.htm
Michele Pollard
Sent from my iPhone.Copyright 101 from BYU
Copyright 101 from BYU
Digitization 101
BYU Center for Teaching and Learning has a series called "Copyright 101". Below is the first video in the series, which shows the care that they took in creating this and they type of information that they are conveying. You can view the entire series at http://copyright101.byu.edu/.
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License.
Original Article: http://hurstassociates.blogspot.com/2014/01/copyright-101-from-byu.html
Michele Pollard
Sent from my iPhone.
Subscribe to:
Posts (Atom)