Web Design & Content Planning Forums

How to Use Your Own Web Statistics at caniuse.com

SitePoint — Sat, 25 May 2013 01:22:51 GMT

Life would be far more difficult without caniuse.com. I use it daily to check levels of browser support for new HTML5 technologies.

The site provides a useful table at the top-right of the feature description which indicates the approximate proportion of people who can use the technology. The statistics are based on global browser usage assessed by StatCounter for the previous month.

StatCounter is a great resource which analyses traffic from three million websites worldwide — I reference the statistics in my monthly browser trends articles. But it’s no substitute for traffic analysis from your own websites.

For example, at the time of writing, the CSS3 border-radius property has 84.73% global support and is primarily missing from IE8. However, what if your site is named IE8isgreat.com? (That domain is available should you wish to create it!) You would expect a higher than normal percentage of IE8 users — the border-radius support percentage would be far lower.

Fortunately, caniuse.com now allows you to import Google Analytics statistics from your own sites to verify real levels of user support and compare them to the worldwide average.

Step 1: Implement Google Analytics

You’ll need a Google Analytics account but, seriously, I’ve yet to see a site which doesn’t use it.

Step 2: Login at caniuse.com

Open caniuse.com and click the Import stats tab. Enter your Google Analytics account ID and password in the pop-up window:

Step 3: Choose a Profile

Now select the website profile you want to import:

Step 4: Set the Date Range

Choose the date range — the past 30 days should be adequate — and hit Import data:

Step 5: View a Feature

Search or browse for any technology and you’ll notice a Custom support column which reflects your own site’s statistics. In the example below, 47.04% of SitePoint visitors are able to use the HTML5 Full Screen API compared to 34.63% on average:

This is the best application of the Analytics API I’ve seen and a useful addition to caniuse.com. It’s easy to use and will help you assess when an HTML5 feature becomes viable on your site.

#t argettedEOF { width: 99%; font-family: "Open Sans", Helvetica, Arial, sans-serif; border-radius: 4px; border: 1px dotted #47B4DC; }#targettedEOF .targettedEOFcol { float: left; padding: 20px; }#targettedEOF .targettedEOFbtn { clear: both; padding: 0; }#targettedEOF h2 { margin-top: 10px; }#targettedEOF .sptolbCTA { border: 0 none; border-bottom: 2px solid #85bb41; background-color: #91c352; color: white; margin: 0; padding: 1em 1em; border-radius: 4px; vertical-align: middle; text-align: center; font-weight: 700; font-size: 17px; display: inline-block; line-height: 0; text-shadow: -1px -1px 1px rgba(0,0,0,0.2); cursor: pointer; text-decoration: none;}#targettedEOF .sptolbCTA:hover { color: white; }#targettedEOF .targettedEOFbtn p { padding: 0; margin: 0; }.cat_javascript #targettedEOF h2, .cat_cloudspring #targettedEOF h2 { font-size: 1.267em; line-height: 1.158em; margin: 1.737em 0 0.579em 0; font-weight: bold; color: #0071D8; }.cat_javascript #targettedEOF, .cat_cloudspring #targettedEOF { font-size: 1.5em; line-height: 1.467em; width: 100%; }.cat_javascript #targettedEOF ul, .cat_cloudspring #targettedEOF ul { list-style: square; margin: 0 0 1.467em 1.467em; } Learn Responsive Web Design

SitePoint's ebook: Jump Start Responsive Web Design
Responsive Web Design: Key Concepts online course
Unlimited access to SitePoint Premium Content

Join Learnable $29 Includes all SitePoint books

More...

Keeping Your Time in Check

Think Vitamin — Fri, 24 May 2013 17:37:39 GMT

Time is our most valuable resource. We�re losing it all of the time and they�re not making any more of it. It�s sobering to think every moment that passes, is a moment we�ll never get again.

I have to remind myself that life is short. Anything that isn�t a life experience, time with friends or family, or time spent going for our dreams, should be called into question.

That being said, the little sneaky time-suckers like tweets, texts, emails, notifications, and meetings, always have a way of finding their way back into our routines.

Every few weeks I have to re-assess my time and hit the productivity reset button. Here are a few strategies I use. I hope they can help you in some way.

Identify the Critical 3

It is important to spend the time we do have, accomplishing something of note. It has been my experience that people can rarely do more than three major projects at a time and do them well.

I always stop and make sure that I�m clear on the top three projects or goals that I want to accomplish. This is important because I find that time typically fits into one of three categories:

core time
support time
waste of time

�Core time� means you�re in the zone and you�re actively working, focused on a core task for great work. �Support time� is the necessary emails, tweets, texts, calls and meetings to do your work. �Waste of time� is the unnecessary emails, tweets, texts, calls, articles, Youtube videos and meetings.

In order to have the most �core time� possible, you have to first identify what that time is and what goals that time needs to accomplish. Decide on your three best projects now and set them as the backbone of your productivity.

Know When You Are Your Best

I tend to be my �sharpest� in the early part of the day. This is the time when I need to be writing, coding, and designing (my critical 3). We�re only capable of a few hours of maximum productivity each day and I like to spend that precious time doing the things that are most important to long-term goals.

With carefully planned recovery and downtime throughout the day, I�m still able to be focused and productive, but just not at the levels I am in the morning. The afternoon is good for learning, building relationships, tackling emails and sharing on Twitter.

Knowing when I perform best has been a huge factor for my career. It�s hard to keep the discipline to keep that time sacred, but it�s entirely necessary. Know yourself and identify when you are at your best. I promise it will help you set your best possible routine.

Don�t Be So Accessible

We tend to really care about what people think, and we genuinely want to be someone that can be counted on to be there for our teammates. The problem with this is that there are no boundaries and you�ve left yourself vulnerable to distractions and not getting anything critical done.

In the end, you and your team only truly want one thing: that you get your work done. Educating yourself and the people you work with on how to maximize �core time�, will help you set boundaries and hold your time sacred.

The fact of the matter is that people respect those that command it. Be someone that is disciplined with your time and be sure to let everyone know it. What you do with your time is crucial and we can�t make it up like we tend to try to tell ourselves we can.

Conclusion

I use these points to keep my time in check. It�s a very difficult thing to do because there is so much opportunity out there and so many cool things to watch, read, and discuss.

I hope that these have flipped some light switches in your own mind and that they�ve provided the start of a new productivity strategy for you.

Be smart and disciplined with your time. It will really show by the end of next year.

The post Keeping Your Time in Check appeared first on Treehouse Blog.

More...

Upping Your Type Game

CSS Tricks — Fri, 24 May 2013 17:37:39 GMT

The ultimate primer on web type for web developers by Jessica Hische.

Direct Link to Article — Permalink

jQuery Conference Portland 2013 has a limited number of regular tickets still available. Two days. Two tracks. Fresh speakers. Jun 13-14. $50 off for members of the jQuery Foundation. Join today and get your first year of fan dues paid for with purchase of both a training and conference ticket. Training provided by Bocoup on Jun 12. Use coupon code CSSTricks25off for $25 off.

Upping Your Type Game is a post from CSS-Tricks

More...

Just One of Those Weird Things About CSS: Background on

CSS Tricks — Fri, 24 May 2013 17:37:39 GMT

So you want to make the background of your website red eh? You'll probably put this in your CSS:

body { background: red;}Done!

Check out this Pen!You're going about your business and then all the sudden one day this happens:

Check out this Pen!What in the heck? Why is the red cut off like that? I put red as the background color on the body?

You did, but the fact that that red color floods the background is just a strange anomaly of CSS. The body element isn't actually as tall as the browser window. It's only as tall as the content inside it, just like a div or anything else.

See:

In the absence of a background on the html element, the body background will cover the page. If there is a background on the html element, the body background behaves just like any other element.

Somewhere along the line, a background-color got set on the html element.

Perhaps you're using normalize.css 2.1.1, which included setting the background to white on the html element to "Prevent system color scheme's background color being used in Firefox, IE, and Opera." This has since been reverted, presumably because it caused this issue too widely.

To "fix" it, just remove the background on the html element, or move whatever you want to "flood" always to the html element as its behavior is consistant.

jQuery Conference Portland 2013 has a limited number of regular tickets still available. Two days. Two tracks. Fresh speakers. Jun 13-14. $50 off for members of the jQuery Foundation. Join today and get your first year of fan dues paid for with purchase of both a training and conference ticket. Training provided by Bocoup on Jun 12. Use coupon code CSSTricks25off for $25 off.

Just One of Those Weird Things About CSS: Background on is a post from CSS-Tricks

More...

This Website Brought To You By�

CSS Tricks — Fri, 24 May 2013 17:37:39 GMT

I always wanted to write something on all the technologies that a website relies on in order to have been created and work. My attempts have so far failed because it spirals out of control so quickly. Kevin Kelly sums it up:

A web page relies on perhaps a hundred thousand other inventions, all needed for its birth and continued existence. There is no web page anywhere without the inventions of HTML code, without computer programming, without LEDs or cathode ray tubes, without solid state computer chips, without telephone lines, without long-distance signal repeaters, without electrical generators, without high-speed turbines, without stainless steel, iron smelters, and control of fire. None of these concrete inventions would exist without the elemental inventions of writing, of an alphabet, of hypertext links, of indexes, catalogs, archives, libraries and the scientific method itself. To recapitulate a web page you have to re-create all these other functions. You might as well remake modern society.

The article isn't about the web hardly at all, it's about the interconnectivity of tools and how far we'll be set back if that is disrupted. I enjoyed the term "upcreation tool." So many of the tools we use as web workers are tools in which to make more complex tools.

Direct Link to Article — Permalink

jQuery Conference Portland 2013 has a limited number of regular tickets still available. Two days. Two tracks. Fresh speakers. Jun 13-14. $50 off for members of the jQuery Foundation. Join today and get your first year of fan dues paid for with purchase of both a training and conference ticket. Training provided by Bocoup on Jun 12. Use coupon code CSSTricks25off for $25 off.

This Website Brought To You By… is a post from CSS-Tricks

More...

Beyond The Button: Embracing The Gesture-Driven Interface

Smashing Magazine — Fri, 24 May 2013 10:05:39 GMT

More...

Line25 Sites of the Week for May 24th 2013

Line25 — Fri, 24 May 2013 10:05:39 GMT

Line25 Sites of the Week is a weekly roundup of the most outstanding website designs that I stumble across during my every day browsing. In this week�s collection, we have designs from Justin Aguilar, Ghost, Dunked, Sipp and Paid.

Justin Aguilar

View the website

Ghost

View the website

Dunked

View the website

Sipp

View the website

Paid

View the website

More...

6 Ways To Add Impact To Your Event Flyer

Design Festival — Fri, 24 May 2013 03:55:15 GMT

Effective event flyers are designed very carefully to grab your attention. They are often posted in high traffic areas, on telephone poles, message boards, and elsewhere. Competition is high in these areas, so the idea is to make your event flyer stand out from all of the others. You must combine many different elements to create an event flyer that will assertively grab your viewer�s attention.

Powerful Imagery

Using the right image is extremely important. Using a high quality, crisp image will set your event flyer apart from others easily. Take the main idea or the main purpose of your event and choose an image or an object that will best represent the event effectively as a whole. If you are designing a flyer for a dance event, you could use an image of a dancer in an unexpected pose. Using an image with a lot of action can gain a lot of attention as well. For example, your subject could be upside-down in mid air performing an exciting acrobatic move.

This is an excellent flyer promoting the Discovery Channel television event. This amazing mix of images really shows off great composition, bold typography, and powerful imagery. The images stand out very well surrounded by black.

Big, Bold Typography

Many people will tell you that �a picture is worth a thousand words,� but great typography can create a lot of impact as well. Extremely bold or eye-catching type can garner a lot of attention. Asking an unexpected question or using a curious, provocative phrase can cause people to take notice of your event flyer.

You can�t miss this event flyer. The typography is huge and very bold. It really stands out against the background. The layout is simple, and you can find and easily read all of the information quickly.

The majority of this event flyer is typography. The stacked three dimensional text stands out well against the plain, light background. The mix of different colors separates the different titles, which helps to break down each piece of information.

High Contrast

Using high contrast in your event flyer will make it stand out even more. Choosing all light colors or all dark colors will make a flyer fade into the background easily. If you use a black or very dark background, use bright colored text, and vice versa. If you have an image with varied lights and darks in the background, you may want to try using a stroke or a hefty drop shadow around the text. If you would prefer a smoother transition, you might try a change in texture or blocking off an area that contains the main portion of your type with a solid color that makes your text stand out.

These colors are bold while providing a great deal of contrast at the same time. This adds to the readability of the text and makes it very clear while making the entire event flyer as a whole stand out at the same time.

Using colors that contrast but cooperate makes this event flyer really stand out. The mix of blue, red, and white make this piece simple and easy to visually process.

Vibrant Color

Using dull colors is a great way for your event flyer to go completely unnoticed. Conversely, using vibrant color combinations will make your flyer stand out immediately. This works especially well if your flyer will be hung up on a wall or a cork board somewhere. If you combine vibrant colors with the previously-mentioned high contrast, then you will maximize visual impact. This doesn�t mean that you have to use wild colors that don�t fit well with your brand. If your event flyer needs to adhere to the colors from your brand, then you will want to use those colors, but simply add a vibrant accent color or two.

The colorful sunburst effect really creates a vibrant sense of action. The glow around the text further illuminates the text against the dark background. This event flyer utilizes a multitude of different colors without being visually overwhelming.

Purple and yellow are complimentary colors, and this event flyer does a great job of using brilliant colors while offering strong contrast at the same time. this flyer is easy to read, beautiful, and would be hard not to notice hanging on a wall. Notice how the red circle really stands out; this is a great example of an accent that really commands attention from the viewer without being distracting.

Special Effects

Using special effects is a surefire way to get anyone�s attention. This can be anything that you can imagine and implement with your design skills: fire effects, lighting effects, colorized effects, filters, textures, and much more. Using dazzling lighting effects can set a mood that would be difficult to recreate in real life. Adding textures to your event flyer design can create a tactile look that makes your flyer stand out from flatter, texture-less peers. You can apply these effects to any aspect of your flyer, just remember not to overdo it. For example, you can apply effects to the text in your flyer, or you could apply them strictly to your main image, but you most likely won�t want to apply them to both. If you do, make they don�t visually compete with one another. Here are some examples of great special effects:

This is an absolutely amazing event flyer that uses special effects to create powerful typography from an image. The artist turned the central buildings into lettering, which you can�t help but to stop and notice.

This event flyer combines a strong central image with special glow effects to drive the concept home. The effect is further accentuated by the vibrant text and lighting effects. The designer did a great job by not applying the effects to all of the text, so that the smaller type would be easy to read.

Make It Easy To Read

Whatever you do, however many effects, textures, and techniques that you apply to your flyer, make sure that it is easy to read. You can design the most beautiful event flyer in the world, but if no one knows what it says, then your efforts have been wasted and your message has been lost. Make the headlines big and bold, so they can be read from a reasonable distance away. Then, make sure that the body copy is large enough so that anyone (people of all ages) can easily read it. Don�t apply too many special effects to your text to the point that it becomes illegible. Your effects should support the message, not detract from it.

Conclusion

There are several elements that make up a great event flyer. The main point of an event flyer is to get the attention of people passing by and to inform them of the event taking place. At the same time, the flyer has to entice the viewer into coming to the event and telling their friends about it. By combining powerful typography, strong imagery, special effects, and good design principles, you can make any flyer for any event stand out and get noticed.

Do you have any tips for creating an eye-catching event flyer? If so, free to share them in the comments section below.

More...

How to Write a Module in JavaScript � Quick Tip

Think Vitamin — Thu, 23 May 2013 20:13:25 GMT

In this Treehouse Quick Tip, teacher Jim Hoskins will show you how to write a simple JavaScript module. Modules are useful in writing JavaScript, because they allow us to write code that is less likely to interfere with other code on our page.

It allows us to selectively expose parts of the code to other programs running on our page. This makes our JavaScript code more resilient and easier to maintain.

The post How to Write a Module in JavaScript – Quick Tip appeared first on Treehouse Blog.

More...

Test Your Web Copy: the Why, When and How

SitePoint — Thu, 23 May 2013 20:13:25 GMT

You’ve written and reviewed your home page copy. And you’re happy with it.

But does it make sense to users? There’s only one way to find out, and that’s to get it in front of those people.

It’s time to talk testing.

Why test your copy?

To me, this question is a lot like the question “Why test your page flows or layouts?”

Yet I have few clients who test page layouts, let alone copy. I think it might be that the adoption of commonly accepted page layouts convinces site owners they don’t need to test. If this landing page layout works for [name your largest competitor], then of course it’ll work for you �or so the argument goes.

Even if that were the case (and I don’t believe it is), the language you use to communicate your new concept or service will be different from your competitors (we hope!).

Yes, it might make perfect sense to you, everyone in your office, your business partner, your life partner, and your pet beagle. But those individuals are all too close to the game to see your text objectively.

You need to test it.

What to test when

If you’ve created a new vocabulary for your product or service�especially if the product introduces a new concept about which you’ll need to educate users�testing the key terminology at the same time you test the site’s wireframes is ideal.

You might already be testing your IA labels as part of your wireframe test, so why not test key text at the same time? You could test:

your tagline or selling proposition
the title flow of the steps in your “How it works” copy
calls to action and button labels
the names you’ve given to your product’s payment tiers
and so on.

Of course, you can also test terminology on your marketing or promotional pages as well as in your app itself, if that’s what you’re selling.

If you’ve already gone through wireframe testing before you draft your copy, you can try testing key terminology and concepts in laid-out pages, but this is less than ideal.

Wireframes let you test basic page layout, so they’re the best place to test key terminology. But if you drop only key terminology into a laid out page, it’ll look unfinished and may well disconcert users.

And if you decide to go ahead and test full copy then, you’ll never know if users did (or didn’t) get the message because of the terminology itself, or the way it was used in sentences, or because of other aspects of the page design.

Let’s see how confusing this can become through a couple of case examples.

Test case 1: copy in wireframes

Not long ago, I got to test the key terminology listed above as part of user testing of wireframes. The product was a social-network-based transactional service. The target audience could be described a mass market: keen to shop, but not technologically savvy.

We devised a vocabulary for this product, and used it to explain what the concept was and how it worked in about 60 words on the home page.

As well as this, we needed to develop a compelling headline that contained a CTA, and a button CTA that made sense to users.

We drafted this content, dropped it, unstyled, into the wireframes, and did in-person user testing with them.

The outcomes were invaluable: by asking users what they understood about the service from looking at the homepage, we:

were able to identify key terminology that was necessary for comprehension of the service�and cut the rest
identified opportunities to link key words to informational pages that explored concepts in full, which reduced homepage word count without risking confusing anyone who didn’t get it
were able to hone the terminology to reflect users’ own language and their expectations. For example, instead of calling calling picture “images”, we found we could better meet user expectations by calling pictures “artwork”. Happily, this also elevated user perceptions of product quality. Win!

Test case 2: copy in the laid out page

In a project with a design agency, we literally could not keep those passionate designer types from creating page visuals. We had two different page layouts to test, and an established vocab that we tweaked to appeal to a broader audience. So we dropped the vocab into the two layouts and took them to users.

The results weren’t really useful. As you’d expect, some users preferred one page over the other�but whether that was because of the layouts, or what was being communicated in each, we couldn’t tell.

We found that users overlooked certain options within the interface, some of which used our tweaked brand vocabulary. From a UX perspective, we couldn’t tell if that was because:

the colours prevented these options from standing out
there were distractions on the page
the terminology wasn’t communicating what we wanted it to.

We did find that the users’ expectations of the terminology weren’t reflected in what we were showing them, but we didn’t know whether the visual elements were masking�or intensifying�those effects.

From this test, it was hard to know where to go. We had a bunch of suggestions for developing the terminology to better suit users, but in some cases they were conflicting, they didn’t really fit the brand, and the test hadn’t really revealed priority items that, if we got them right, would make a big difference to users’ understanding.

How will you test?

As these cases show, the basic rules of UX testing apply to copy and vocab testing.

If you want to:

use as few words as possible
to communicate as much as possible
as quickly as possible
to as many of your target users as possible

�test your copy in your wireframes.

That means you’ll need to develop your copy as you design your user experience, not afterward�but in my books, that’s just good UX practice (no matter how few people do it). It also gives you the best chance of connecting with your target users right off the bat. And that’s your main objective, isn’t it?

Have you ever user-tested your copy? How will you test it next time? Tell us how you do it in the comments.

#targettedEOF { width: 99%; font-family: "Open Sans", Helvetica, Arial, sans-serif; border-radius: 4px; border: 1px dotted #47B4DC; } #targettedEOF .targettedEOFcol { float: left; padding: 20px; } #targettedEOF .targettedEOFbtn { clear: both; padding: 0; } #targettedEOF h2 { margin-top: 10px; } #targettedEOF .sptolbCTA { border: 0 none; border-bottom: 2px solid #85bb41; background-color: #91c352; color: white; margin: 0; padding: 1em 1em; border-radius: 4px; vertical-align: middle; text-align: center; font-weight: 700; font-size: 17px; display: inline-block; line-height: 0; text-shadow: -1px -1px 1px rgba(0,0,0,0.2); cursor: pointer; text-decoration: none; } #targettedEOF .sptolbCTA:hover { color: white; } #targettedEOF .targettedEOFbtn p { padding: 0; margin: 0; } .cat_javascript #targettedEOF h2, .cat_cloudspring #targettedEOF h2 { font-size: 1.267em; line-height: 1.158em; margin: 1.737em 0 0.579em 0; font-weight: bold; color: #0071D8; } .cat_javascript #targettedEOF, .cat_cloudspring #targettedEOF { font-size: 1.5em; line-height: 1.467em; width: 100%; } .cat_javascript #targettedEOF ul, .cat_cloudspring #targettedEOF ul { list-style: square; margin: 0 0 1.467em 1.467em; }
Learn Responsive Web Design

SitePoint's ebook: Jump Start Responsive Web Design
Responsive Web Design: Key Concepts online course
Unlimited access to SitePoint Premium Content

Join Learnable $29 Includes all SitePoint books

More...

Building The New Financial Times Web App: A Case Study

Smashing Magazine — Thu, 23 May 2013 12:45:32 GMT

More...

A Checklist for Embracing BYOD in IT Policy

SitePoint — Thu, 23 May 2013 12:45:32 GMT

The rising Bring Your Own Device (BYOD) movement and the consumerization of IT have left many organizations with outdated IT policies that don�t support an agile workforce by enabling them to work from anywhere, at any time, using any device.

Several debates about embracing BYOD in IT policy ended up on �security� concerns. Yes, you need to protect your company�s data � but it�s no longer the case of choosing security over freedom of use. With a forward-thinking IT policy you can have both freedom and security.

Is your IT policy holding your company and your employees back from embracing BYOD? If so, use this checklist and start building an IT policy that embraces the future and protects your business.

Know Your Devices

Establish which devices you are ready to support. Do your homework on which devices meet your security standards and let users know what they can and can�t use. Find out which devices have native enterprise management tools and which ones use third-party tools.

Establish the Ground-Rules

Do users know they might get their personal data wiped if their device is compromised? If users are working from their own devices, make sure they know the risks involved. Make this clear in simple terms, before they start using the device for work.

Lock-Down Your Data

Make security measures, like having a PIN or encryption, mandatory. Undertake periodic security audits to help verify the safety of company data and assess any potential risks. Encrypt data where possible.

Vet Your Apps

Not all apps will meet your security standards. Determine which will help users in their work, without compromising company data. Set up an app lab and test them to see which ones meet your business needs. Find the right apps for you, and then recommend them to users.

Invest In Training

If you�re embracing BYOD in your IT policy, you should take the time to train users in best BYOD practice. Give them the knowledge they need to protect company data and reduce the risk of having their devices compromised. You also need to facilitate community-based support. So it�s not just about training � it�s about building a culture that makes people collaborate better.

If your company lets employees bring their own devices to the workplace, you had better develop a formal BYOD policy that understands privacy rights and access rights for both employers and employees.

In this way, BYOD will become a genuine asset that can allow your employees to reach new levels of productivity.

Learn Responsive Web Design

SitePoint's ebook: Jump Start Responsive Web Design
Responsive Web Design: Key Concepts online course
Unlimited access to SitePoint Premium Content

Join Learnable $29 Includes all SitePoint books

More...

What Happened During Live CSS Help with the Experts

SitePoint — Thu, 23 May 2013 06:20:27 GMT

I’ve been running Talk with the Experts live chat sessions across various different platforms for over a year now, but today we decided to try something a little bit different. We invited you to*ask veteran CSS designer and developer, Alex Walker, every style question you’ve ever had. Alex was on hand in our shiny new custom chatroom to help you out with sticky questions and messy code. The session was a busy one but Alex handled it with poise and we managed to cover a huge amount in the hour long session.

If you missed it, below is a list of the resources (and some pretty amazing CSS examples) that came out of the session, followed by a full transcript of how it all went down.

The SitePoint CSS Reference

An awesome example of CSS animation by @newberg
A clever CSS3 experiment by Keith Clark

What are*LESS and Sass?
Here is an article that compares the two.

Launch into LESS*A new course on Learnable
For more on Sass, make sure you join our upcoming session with Alex on 19 June

Scout is a great cross-platform SASS app (if you want to avoid learning Rails)
Or you could try CodeKit if you’re on a Mac and don’t mind paying a small fee

An*HTML5 readiness chart for browsers

CSS3 Compatibility Tables

An article about resets and a good reference for media queries

And lastly, in relation to these sessions, you can check the upcoming schedule here or sign up for email reminders of future sessions here.

And for those of you that would like to read the full transcript of todays session, here it is:

[21:19] Welcome Alex

[21:19] Thanks Hawk. Hi Everyone.

[21:20] Caffeinated and ready to rock*

[21:23] Did everyone see that Macbook air CSS animation by @neoberg?*

[21:23] http://cssdeck.com/labs/css-only-macbook-air

[21:23] very cool work*

[21:23] Wow! That’s pretty awesome alexmwalker

[21:24] one png for the screen. one SVG for the apple logo. The rest is pure css.

[21:25] How do I center multiple divs horizontally in responsive design

[21:26] So alexmwalker, are you ready to kick off? Looks like Toffy has thrown in a question.

[21:26] sorry i sent question so fast without greeting

[21:26] No worries Toffy :)

[21:27] I am. Hi Toffy.**So you’re talking about, say multiple horizontal columns?

[21:28] well more like in a container div, if i have several divs that needs to be centered and spaced evenly in between in a responsive design, I find it hard to make it happen

[21:29] i don’t have an example link but let say in page like this one, i want to put 3 divs in the center and they need to stay in center even if i reduce the screen size

[21:30] Toffy: The divs are stacked vertically and each needs to be centered horizontally?

[21:30] they are not stacked

[21:30] next to each other

[21:30] if i float them then it’s hard to center

[21:30] Yep, so you’re setting them auto margins on the left and right?

[21:30] but i have to float them to be next to each other

[21:30] Wouldnt just creating it with the ‘position absolute’ work? left: 50% div inside -50%? I didnt quite catch the question but that is mostly what I do

[21:31] Are the divs a fixed width?

[21:31] yeah, i usually float the left one left and the right one right and then center with margin auto

[21:31] but wanted to know if there was another way

[21:31] Q: What are SASS and LESS? And should we be using them?

[21:31] divs are not fixed

[21:31] that’s why its hard

[21:31] Ah, ok so they’re 3 across the screen? *Gotcha*

[21:31] yes

[21:32] Hi Alex,*I have a container div with two child(header and body). The container have scroll bars. I want the header div should be fixed at the top and only body div should scroll.

[21:32] If you wrap them in a container, you could set them to display: inline-block and the container to text-align: center;

[21:32] does inline-block work in ie7?

[21:32] sample at*http://cssdeck.com/labs/gomiazlb

[21:32] is it possible?

[21:33] Toffy: What determines the width of the divs?

[21:33] So I think I;d be trying to shape the container and make them fill the container evenly (like 33% each)*

[21:33] johnlacey and Murali – I have queued your questions for Alex

[21:33] Thanks Hawk.

[21:33] i think you have put zoom:1 or something in ie 7 for inline-block to work but I’m not sure, haven’t tried yet

[21:34] HAWK: What is the question being answered now?

[21:34] @Toffy Not for block elements (If I remember). But IE7 has less than 1% user base. Anyhow, if you need to support that browser, just center the container with a width and auto margins and float the divs within it.

[21:34] Hi @johnlacey. Good question.*

[21:35] jcollado We’re just jumping into johnlacey’s question:*Q: What are SASS and LESS? And should we be using them?

[21:35] HAWK: Ok, thanks

[21:36] Toffy You can make inline-block work in IE7 and under by setting the element to display:inline and then adding haslayout. See the comments in the Sitepoint reference http://reference.sitepoint.com/css/display

[21:36] Hi to those of you that have just joined – we’re about to talk SASS and LESS. If you have questions for Alex, throw them in at any time and I’ll queue them

[21:36] FYI you can also @ tag people to get their attention

[21:36] They’re both a great improvement to writing CSS. If you’re comfortable with writing CSS, yes you should definitely be looking at adding one of these pre-processors to your workflow.*

[21:36] They basically let do things with CSS that aren’t possible with help.*

[21:37] johnlacey – I don’t know if you noticed that we just launched a LESS course at Learnable

[21:37] Thanks @Hawk

[21:37] Definitely a fan of LESS

[21:37] although SASS seems more powerful?

[21:37] I’m a sass guy mainly because we’re using a lot of rails here and it comes with the turf. It also probably has more momentum from a development point of view.

[21:38] I’m not familiar with SASS. Can you provide a brief comparison of the two?

[21:38] Alex, what’s the difference between a CSS selector with the tag in front of the class or after the class? Example: what’s the difference between h3.myclass {} and .myclass h3 {} ?

[21:38] Hi to those of you that have just joined. Feel free to throw in questions to be queued at any time. :)

[21:39] I must say though Less has a nicer, neater syntax. If you’re starting from zero, I don’t think it matters which one you pick.*

[21:40] RobertRM yes, I think SASS and some of the libraries that help SASS are more advanced than Less*

[21:41] @Jason I know you posted the question to Alex, but I’m pretty sure that’s very simple. The tag in front of the class would mean all h3 that have that class aplied, while the class followed by the tag would mean all childs of that class with the tag specified.

[21:41] �What exactly is Sass and Less?

[21:42] Jason, Yes, Jerry pretty much covered that one.*

[21:42] see*http://lesscss.org/*and*http://sass-lang.com/

[21:42] Jerry95 think of variables in CSS, to put it really short

[21:42] Ok so there’s a lot of interest in Sass and Less.*

[21:43] I’ll talk about those a little.*

[21:43] So its like PHP (Pre – Hypertext Processor) only with CSS?

[21:43] Thanks felgall

[21:43] Thanks felgall :)

[21:43] @HAWK: Will the transcript be posted for this anywhere after? I really should go to bed now as it is midnight here :-)

[21:43] CSS is a cool language but it’s limited in many ways and the W3C takes a long time to improve things.*

[21:44] Jerry95 sort of

[21:44] Just curious: Are many of you using boilerplates or frameworks? I’ve been looking a several, but don’t know which I should investigate further

[21:44] Yup mamoru – I’ll post it up on SitePoint later today. Thanks for joining us. :)

[21:44] I am relatively new to webdesign and CSS would you recommend that I concentrate on the basics of CSS basics before jumping into Sass or Less?

[21:44] Sass and LESS are languages that look a lot like CSS, but have powerful new features.*

[21:44] Thanks HAWK, keep up the good work :-) If I am free the next day, I’ll sit through an entire chat :-)

[21:45] @jay Twitter Bootstrap and littlesparkcvt’s flatstrap

[21:45] When you write your Sass (or less) it gets converted into standard CSS at the end.

[21:45] @kcs I’d definitely say earn how CSS works before confusing the issue with LESS or SASS.

[21:45] So browsers can still read it, but you get new ways to do things*

[21:47] So where does the conversion take place, and do you need anything (perhaps at the server level) to achieve this?

[21:47] Would it be possible to use SASS or LESS with XSLT, say for example if there’s a tag that’s child of another, then apply some CSS rule, if not, apply another rule?

[21:48] Murali – we’ll answer your question at the end when things have quietened down a bit. If you can’t hang around, message me an email address :)

[21:48] I’m a designer who got very comfortable with HTML/CSS (not at your level), looking to move into JS next. *Should I learn JS first then jQuery? *Or vice versa? *Any resources/book highly recommended?

[21:48] Thanks. ralphm.

[21:48] Jerry95 you can do that out of the box with css without any less or sass. just do .class1 .class2, that will target all elements with class class2 that are child nodes of class1. depth doesn’t matter.

[21:48] NP. I will wait.

[21:49] @johnlace: I dont have a lot of experience with either, but from what I’ve seen, they are ‘compiled’ into valid css prior to uploading to your server. So in the end, you’re left with pure css

[21:49] johnlacey Sass comes built in when you install Ruby on Rails. But there are quite a few desktop based apps that watch your folders and convert your Sass into CSSS every time you save it.

[21:49] Welcome to those people that have just joined. Feel free to jump in with questions at any time. We’re currently talking SASS and LESS, but other questions will be queued.

[21:49] Tnanks ScallioXTX. Can someone provide another example of what SASS of LESS can do

[21:50] @mamoru i’ve heard that twitter bootstrap doesn’t necessarily use html elements the correct way, has that been your experience?

[21:50] I’d recommend checking out Scout — it’s free and runs on almost all systems. Codekit is very good, but I think it’s about $50

[21:50] http://mhs.github.io/scout-app/

[21:51] CodeKit is worth it.

[21:51] kkl agreed*

[21:51] bsteffl whatever you build in HTML there is always someone who thinks it’s not right. Pick the battles that are worth fighting.

[21:51] Jerry95 LESS allows you to write CSS more quickly, and in a more maintainable way

[21:52] @kkl jQuery makes it easier to get started using JS, but ideally, learn how JS works at least later, if not first.

[21:52] There are plenty of JavaScript and JQuery resources on Learnable :)

[21:52] I personally find that LESS is too far abstracted from CSS and the end result is way more bloated than it would be if I’d written it myself. Though I do agree writing in LESS is easier than pure CSS.

[21:53] great scallioxtx thanks

[21:53] Anyone know anything about WordPress Live Preview?

[21:53] Can LESS check out for duplicate classes or id’s in a large stylesheet?

[21:53] Jerry95 — if you find yourself writing the same browser prefixes (-webkit- , -moz) — sass lets you write that as a ‘mixin’ and then call it with a single line each time you want it*

[21:54] Although this is a LESS vs SASS article, it shows you what those pre-processors can do.

[21:54] http://css-tricks.com/sass-vs-less/

[21:55] You get benenfits as soon as you start using 5% of the language — over time that just keeps getting better*

[21:55] Does anyone else have a question that they’d like to throw in to the mix?

[21:55] Wow SASS looks very powerful. Thanks for the link @kkl

[21:55] Or examples of awesome CSS that they’ve seen…

[21:56] did you gusy see this?

[21:56] http://www.keithclark.co.uk/labs/css3-fps/

[21:56] it’s amazing.

[21:56] kkl, jquery will solve a lot of your issues immediately. You’ll be making stuff and that’s cool and very motivating.*

[21:57] alexmwalker so you’re recommeding I hack around with jQuery first?

[21:57] How are you folks keeping up with CSS3 features as they become available? Do you find yourself checking new features when you need to do something, or like me – doing internet searches and working on them for awhile only to find there are new and easier improvements using html5/css3?

[21:57] then get to know the underlying JS?

[21:57] Talking about HTML5 and CSS3, what are the current browsers that can handle them?

[21:57] Ultimately if you want to be the perfect frontend guy, you’d love to be a JS guru and that would mean starting with JS.*

[21:58] I’m happy being a jquery guy and I find help when I need pure JS power :)*

[21:58] And since you’ve mentioned JavaScript and JQuery what would cause either or both of those to simply stop functioning properly on a Website…not a local machine, but the production server?

[21:59] Could anyone recommend any tools for working with simple CSS3 animation?

[21:59] Thanks to all, I’m a bit confused but what else can you do with LESS and SASS besides mixins and looping. Is there any way you can plan the cascade in advance once you have the html?

[21:59] html5 css3 readiness chart for browsers*http://html5readiness.com/

[22:00] jQuery is JavaScript so in order to use jQuery properly you need to know a minimum of JavaScript. It runs on the local computer not the server so it isn’t going to stop functioning on the server – but it might not function in the browser if it contains an error or uses a command that particular browser doesn’t understand

[22:00] @NIteFlite All the current browsers except IE* support HTML5 and CSS3 in some measure, adding bits all the time. You can check each feature’s support at*http://caniuse.com/

[22:00] NIteFlite With jquery , perhaps your jquery libray but corrupted. But nothing on the server could stop javascript from functioning — because JS runs in your browser.*

[22:01] IE is always a problem. lol

[22:02] @NiteFlite, I’m not a frontend expert, but I can only think of Jquery not functioning properly for two reasons: either the version made available by the server is too old, which is solved by CDN’s, or the library is colliding with another JS library, which is why you should use the noConflict method.

[22:02] (I meant to type “except IE8″ above)

[22:03] End user can disable scripts from running though.

[22:04] @Yes, that also, and being that the case, does anyone know the latest or most modern way of checking for Javascript enabled?

[22:04] @kkl Ideally, make sure that the page works acceptably with JS off. Then if the user has it turned off, no problem.

[22:05] Nancy – I tend to find out about new features when ppl use them in demos/examples etc — most of the time that’s waaaay ahead of when I can use them in production. But maybe 18 months later they’ll be a challenge that will crop up and I’ll go scouring google for where I saw that guy using that weird CSS property. *

[22:06] For cross-browser issues try Modernizr…it’s amazing…

[22:06] esp., if you’re writing HTML5/CSS3

[22:06] Welcome to anyone that has just joined. Please feel free to jump in with questions at any time – I’ll queue them and they don’t need to be in context :)

[22:06] Thanks alexmwalker

[22:06] just 1 javascript line fixed all my issues.

[22:06] I’ll also be publishing a full transcript on SitePoint later today

[22:07] @kkl Thanks I’ll check modernizr

[22:07] @kkl Modernizr doesn’t add functionality where is doesn’t exist, though. You still have to decide what will happen if features are not supported.

[22:08] So talking again about SASS and LESS, can you program in advance what rules to use if there’s not support for some rule in a specific browser?

[22:08] johnlacey — I find the best way to learn CSS animation is to keep an eye on CSSdeck.com and codepen.io and see how ppl are using it there. You can copy the code to your own window and pull it apart and see how it works.*

[22:09] Those code playgrounds also handle the cross-browser prefix stuff for you, which helps SOOOO much when you’re learning*

[22:09] But my problems are not just local…Everyone is seeing the same issues I am…Functionality that was fine is suddenly not working, so it’s not something local. And it’s intermittent and inconsistent, too. Ugh.

[22:11] @NiteFlite have you tried to turn it off an on again

[22:11] I am trying a media query. Have you discussed them? I came in just now..*@media (max-width: 320px) thought I could make a div display if the window was 320 or smaller, i.e. iphone5.

[22:11] NIteFlite. If you hang around after I’m happy to have a poke aaround the site and see if I can spot anything

[22:11] No, we haven’t lori – I’ll queue your question :)

[22:12] make the div not display I mean.

[22:13] can we talk about career opportunities? *Do people hire for just HTML/CSS skills? *If so where? *Or is jQuery/JS necessary?

[22:13] So maybe someone can answer what can you do with :after and :before properties?

[22:13] Yes, tried to turn it on and off. Have gotten rid of any extraneous custom JS. Am working on find any errors that can be fixed. Some things have been fixed. Others remain a mystery.*

[22:15] Jerry95 — targeting browsers if more often soemthing I use modernizer for. It requires you install a javascript in your page, but lets you write CSS rules like ‘.ie10 h1 {some css)*

[22:15] alexmwalker – I’m going to have to go, this time. But if there’s a way I can contact you, at your convenience, I will not take up more time here….:)

[22:15] other browsers wont get that class so they will ignore that rule*

[22:16] @Jerry95 You can do amazing things with :before and :after. You basically have two hooks on an element that you can use for doing things�setting styles, adding content�without using extra elements. (Not all elements support them, though.)

[22:16] alexmwalker : Would you recommend using CSS resets?

[22:17] Jerry95 You can do lots of things with :before and :after. You can add extra text or images to elements but they shouldn’t be used to add “real content” as that should be in the html.

[22:17] alexmwalker Thanks, but I meant how can I keep up to date with the properties I need to check in the JS to test for a specific browser compatibility. I find that keeping record of most of them is very hard

[22:17] Do you often need to target a browser other than IE? I.e. why use modernizr to target browsers when you can use conditional comments to put ie class names one (like the html5boilerplate does)?

[22:17] is before :after css3?*

[22:17] How is the browser support for before and after? When a looked (some time ago) it was pretty spotty, so I passed on them

[22:18] Yes I think html5boilerplate is an option, but isn’t it only for html5?

[22:18] @lori No, :before and :after are part of CSS2. They’ve been around for a long time.

[22:18] @lori I’m pretty sure :before and :after are supported right back to IE7.*

[22:18] True the boilerplate is html5, but surely the same conditional comments could be used for xhtml

[22:18] IE7 doesn’t support :before and :after

[22:19] Unless I’m doing something wrong…

[22:19] is there a tutorial about them you know of? I just saw a great one on the !not selector

[22:19] :after and :before is ie8+

[22:19] @jessirwin Thanks, I’m pretty behind in what html5 does

[22:19] jessirwin – pretty sure if does, but it’s a bit buggy*

[22:20] lori :after and before are css2

[22:20] The Styling Forms with CSS course on Learnable covers :before and :after

[22:21] thanks

[22:21] No there’s no support in iE7 http://reference.sitepoint.com/css/pseudoelement-before

[22:22] @paul thanks , must be thinking of something else*

[22:22] So we’ve got just over 5 mins left in the session – are there any questions that people have asked that haven’t been answered yet?

[22:22] alexmwalker – no worries I can never keep track either

[22:23] @alexmwalker : Would you recommend using CSS resets?

[22:23] i had one about the media query*@media (max-width: 320px) not working *for iphone5 for me

[22:23] alexmwalker – Gotta go. Can I get some kind of contact to email you later?

[22:23] NIteFlite you can get Alex on Twitter @alexmwalker*

[22:24] OK, thanks. WCW

[22:24] johnlacey on resets, I do recommend them, but I like a cut down version. The HTML boilerplate version if super long and it’s hard work to get your head around all that code*

[22:24] alexmwalker – have you found a way to animate to auto dimensions yet? It seems to be the exact thing that is needed but is not supported.

[22:24] Ah yes – thanks lori

[22:25] I wanted to have display: none for a div not to show up in small window

[22:25] johnlacey this article is a sensible approach to resets*http://csswizardry.com/2011/10/reset-restarted/*

[22:26] Thanks @alexmwalker

[22:26] i asked a question about overlapping absolute positioned child

[22:26] Ok, I think we’ll look at lori’s question and then yours Murali – and then we’re done for today :)

[22:27] lori for iphones or smartphones that are 320px try (min-device-width: 320px)

[22:27] OK Ill try that. Thanks

[22:27] @lori – a good reference that I always check for media queries is*http://css-tricks.com/snippets/css/m...ndard-devices/

[22:27] Ok thanks to y’all. HAWK can you tell where will be a link to the transcript. Cause there’s a lot of resources to check out

[22:27] @lori*@media only screen and (max-width : 480px) { } and also, for good measure, include this in the head of your pages:

[22:27] @lori there’s no reason why that shouldn’t work. you would set ‘max-width: 320px {display:none) ‘

[22:28] It’ll be up on sitepoint.com Jerry95

[22:28] nice one ralphm :) exactly*

[22:28] Thanks to everyone that joined us today. We run these sessions weekly (on different subjects)

[22:28] lori – make sure the media query follows the original rules so you don’t cancel it out. The cascade stil applies to media queries

[22:29] well the max width doesnt work so I guess I’ll try the min-device-width and see if that works?

[22:29] @lori I meant to say that the max-width: 480px (or actually 560px for iPhone5) will cover both views on the iPhone.

[22:29] @lor could you pop your code in a a CSSdeck or codepen?*

[22:29] I only need it not to show in portrait because the element is bigger than it.

[22:29] Murali — looking at your code now :)*

[22:30] Thanks Alex, Hawk, and all other responders. *Good session!

[22:30] @lori OK then, just change what I posted to max-width: 320px. But you can also resize the element, rather than hiding it altogether.

[22:30] Thank you HAWK, Alex …

[22:30] That’s it for questions today. Thanks all. Feel free to stick around to see Alex work on Murali’s question -*Hi Alex,*I have a container div with two child(header and body). The container have scroll bars. I want the header div should be fixed at the top and only body div should scroll.

[22:30] Sample for above q*http://cssdeck.com/labs/gomiazlb

[22:30] a pleasure, everyone. Thanks

[22:30] Thanks everyone…I’ll tweet if I get it on codepen

[22:34] So in your demo, the header is fixed? *That works?*

[22:34] And the body is under the under the header by the looks of thing?*

[22:35] but it overlaps the container, i just want it to fit inside the container

[22:35] the body’s width … it’s not the same width

[22:37] I am expecting a behavior like if I make container position:relative, but header should not scroll

[22:37] If the container will always have that fixed width, why not give the header width: 400px?

[22:38] http://cssdeck.com/labs/hy1bp6si

[22:38] that’s what I have here*

[22:38] what ralphm said *

[22:38] (I made the container red so I could see it)*

[22:39] Or, keep the width of the header at 100% but give the container position: relative;

[22:40] Edit: oops, that stops the header from staying still, so cancel that. :)

[22:41] Murali – Do you want a fixed header while the div below it can scroll but the header stays fixed?

[22:42] yes, but the scroll bar should be in container, not in body

[22:42] Like this? http://www.pmob.co.uk/temp/fixed-header2.htm

[22:43] @paul i need the scroll bar for container

[22:43] header with a fixed with, instead of a percentage?

[22:43] If you reduce the viewport height the content gets a scrollbar

[22:44] So wouldn’t the header then obscure the top of the scrollbar?*

[22:45] http://cssdeck.com/labs/0hivmtvo*

[22:45] how about that?*

[22:45] oh, I just reread what Murali is seeking …

[22:46] It’s a bit hacky and assumes you know the width, but ..

[22:47] yes, this is what i expected, but this will not be perfect solution since scroll bar width not always 17px in all browsers/platforms

[22:47] true, that’s the hack part .. ;)*

[22:48] I love those types of layouts. I’ve done similar here but with the footer and sidebar as well.*http://www.spruzstuff.spruz.com/*If you wanna dig in to the css and see how, feel free. Headed out to a concert

[22:48] anyway better that broken, thanks Alex for your time

[22:48] *better than broken

[22:49] Having a think.. Are you on twitter Murali? I might have a better answer once I sit on the problem for a while

[22:49] Thanks Alex and HAWK for this wonderful session

[22:50] @murali_rk

[22:50] Our pleasure Murali, thanks for coming :)*

[22:50] Thanks. I’ll put my mind to it after another coffee*

[22:52] Thanks all

[22:52] Transcript coming later :)

#targettedEOF { width: 99%; font-family: "Open Sans", Helvetica, Arial, sans-serif; border-radius: 4px; border: 1px dotted #47B4DC; } #targettedEOF .targettedEOFcol { float: left; padding: 20px; } #targettedEOF .targettedEOFbtn { clear: both; padding: 0; } #targettedEOF h2 { margin-top: 10px; } #targettedEOF .sptolbCTA { border: 0 none; border-bottom: 2px solid #85bb41; background-color: #91c352; color: white; margin: 0; padding: 1em 1em; border-radius: 4px; vertical-align: middle; text-align: center; font-weight: 700; font-size: 17px; display: inline-block; line-height: 0; text-shadow: -1px -1px 1px rgba(0,0,0,0.2); cursor: pointer; text-decoration: none; } #targettedEOF .sptolbCTA:hover { color: white; } #targettedEOF .targettedEOFbtn p { padding: 0; margin: 0; } .cat_javascript #targettedEOF h2, .cat_cloudspring #targettedEOF h2 { font-size: 1.267em; line-height: 1.158em; margin: 1.737em 0 0.579em 0; font-weight: bold; color: #0071D8; } .cat_javascript #targettedEOF, .cat_cloudspring #targettedEOF { font-size: 1.5em; line-height: 1.467em; width: 100%; } .cat_javascript #targettedEOF ul, .cat_cloudspring #targettedEOF ul { list-style: square; margin: 0 0 1.467em 1.467em; }
Learn Responsive Web Design

SitePoint's ebook: Jump Start Responsive Web Design
Responsive Web Design: Key Concepts online course
Unlimited access to SitePoint Premium Content

Join Learnable $29 Includes all SitePoint books

More...

Tall Tales From A Large Man � Interview with Aaron Draplin

Think Vitamin — Wed, 22 May 2013 20:23:55 GMT

Aaron Draplin is a graphic designer and founder of the Draplin Design Company. He’s done work for everyone from his friend’s hot dog company to President Obama himself. He’s also a speaker and co-creator of Field Notes, a popular notebook series among designers. He’s bold, outspoken, and unapologetic about being awesome.

He took a minute to talk with expert teacher, Mat Helme, and threw some knowledge bombs at him. Enjoy!

The full interview will be available tomorrow to all Treehouse Gold Members.

The post Tall Tales From A Large Man – Interview with Aaron Draplin appeared first on Treehouse Blog.

More...

Developing over the YouTube API with JSON

Think Vitamin — Wed, 22 May 2013 20:23:55 GMT

The process to understand API development is generally complicated but should become easier with practice. Social networks like Twitter and YouTube offer XML/RSS/JSON feeds without the requirement of an API key. However, other smaller networking websites like Instagram and Etsy will require developers to sign up for a new API key before allowing them to make requests from the server.

In this tutorial I want to demonstrate a really simple HTML/CSS/JS web application building over the YouTube API. This demo will list a number of YouTube channels which you may click and pull out all the latest videos, plus their related metadata such as views and comments. All of this dynamic page content will be handled via jQuery so you do not need to host anything on a web server. Check out my sample demo to get an idea of what we are building.

Live Demo – Download Source Code

Getting Started

I will skip a lot of the boring HTML so that we can focus more deeply on the YouTube response and how we handle this in JavaScript. The most important HTML section you should recognize is the navigation along with the inner videos content div. I have used specific IDs so that we can target each element and check whenever the user clicks a link, then display that content inside #videos.

In order for the whole process to work we will need a copy of the latest jQuery library. My demo includes this file from within the ./js/ directory so you won’t need to re-download anything. Also I have kept my custom-written jQuery codes inside the index file instead of moving them to an external JS script. It would obviously be easier to do so when you are running this on a live website, but for my demo it is quicker to study these codes from within the same page.

Pulling Results with jQuery

The first step is to define a set of variables which we need in the script. Then we can handle a click event from the user which is interfacing with any of the navigation links. Each of the anchor elements is using an HREF value containing a hash symbol plus username we need. It is important that we stop this default href from loading by using e.preventDefault() and then pull the value out so we can get the YouTube feed results.

$(function(){ $('#usersnav ul li a').on('click', function(e){ e.preventDefault(); var htmlString = '

'; var channelname = $(this).attr('href').substring(1); var ytapiurl = 'http://gdata.youtube.com/feeds/api/users/'+channelname+'/uploads?alt=json&max-results=10';The handy JavaScript substring() method will create a new string variable starting from the character marker 1(marker 0 is the first character). This removes our hash symbol so that we can now place the username into a generic API call which looks like this: http://gdata.youtube.com/feeds/api/u...max-results=10

The user’s channel name can be accessed to query YouTube and pull out their latest uploads. I am referencing a max results value of 10 and since we are not using pagination. I have not included any other callback methods, either. JSON is the response type we need so that way it’ll be easier parsing all this content inside jQuery.

Building a Loop

PHP and Rails and other programming languages often use logic loops to iterate through data patterns. While loops, for loops, do loops, and other common ideas are not as strict when you would compare them with JavaScript. However the methods for .parseJSON() and jQuery.each() offer the perfect system for looping through all of these results.

$.getJSON(ytapiurl, function(data) { $.each(data.feed.entry, function(i, item) { var title = item['title']['$t']; var videoid = item['id']['$t']; var pubdate = item['published']['$t']; var fulldate = new Date(pubdate).toLocaleDateString(); var thumbimg = item['media$group']['media$thumbnail'][0]['url']; var tinyimg1 = item['media$group']['media$thumbnail'][1]['url']; var tinyimg2 = item['media$group']['media$thumbnail'][2]['url']; var tinyimg3 = item['media$group']['media$thumbnail'][3]['url']; var vlink = item['media$group']['media$content'][0]['url']; var ytlink = item['media$group']['media$player'][0]['url']; var numviews = item['yt$statistics']['viewCount']; var numcomms = item['gd$comments']['gd$feedLink']['countHint']; htmlString +='
' + title + '

'; htmlString +='
'; htmlString +='Published on ' + fulldate + '

Total views: ' + commafy(numviews) + '

Total comments: '+ numcomms +'

View on YouTube

View in Fullscreen

Alternate Thumbnails:

'; }); // end each loop $('#videos').html(htmlString + "

"); }); // end json parsingThis code block seems very large but the majority of the content is generating variable names. YouTube will return a lot more information than we need so it would be foolish to create an array containing all the keys. Instead we should make new variables strictly for the content which will be used inside the layout, and then we create a final HTML string to return to the browser.

Each variable block will contain an important section of the final display. We will need the video title, original publishing date, the full-size thumbnail along with each of the 3 mini-thumbs, direct video URL, view count, and also the comments count. The HTML is displayed using an unordered list of items which finishes by applying the HTML content into the #videos container. This is easily accomplished by using the jQuery .html() method.

Parsing & Formatting Numbers

One other final point I’d like to bring up is the ability to parse through each view counter. Return data for videos which have over 1000 views will not include the comma between each set of 3 numbers. I found an excellent solution on Stack Overflow written using pure JavaScript. The function name is commafy() which is wrapped around each of the view count numbers. This will check if the digits are higher than 4 and automatically place a comma where it should be.

These codes are wonderful to use in any number of JavaScript solutions. The questions and solutions on Stack Overflow are always helpful with these kinds of matters. I think it is worth noting that you could write a much simpler function using jQuery or handling this method inside the .each() loop. But if everything is kept inside a separate file then you may not worry as much about the syntax or number of lines.

Live Demo – Download Source Code

Final Thoughts

Many developers who are not familiar with JSON should hit Google and read a few articles on the subject. It is basically JavaScript code which is written in a certain way so that the syntax can be read as data-value pairs. YouTube can present JSON data from their server and using jQuery it is possible to organize this data into the page dynamically. I hope this tutorial may prove useful to anybody who has been interested in developing over YouTube’s API, or any API for that matter. Feel free to download a copy of my demo and see if you can implement a similar method elsewhere in your own projects.

The post Developing over the YouTube API with JSON appeared first on Treehouse Blog.

More...