Tag Archives: javascript

Using and Styling Infinite Scrolling

infinitescrolling
I came across the curious idea of “infinite scrolling” in the past week, as I searched for ways to make a Tumblr theme less annoying to browse. Especially on blog sites like Tumblr, the idea of having no page numbers to click has caught on as a way to make browsing easier–new posts and search results pop up without having to click or tap again.

Google’s Image Search and Pinterest both famously do this, as well as Facebook, Twitter, and 9gag–and those are just the websites I use most often that have infinite scrolling enabled. It’s becoming more and more popular with mobile-friendly sites especially, since scrolling on a mobile device is as simple as the flick of a finger. But I wondered whether it was really worthwhile. Should I dedicate time to learning this technique and using it on my pages, just because it’s Internet-popular?

I decided the best way to test it was to approach infinite scrolling as a user would, rather than as a designer. Read on to find out pros and cons, which sites can use infinite scrolling, and how best to style and set up your infinite scrolling layout!

Infinite Scrolling: Pros and Cons from My Experience

Pros

  • Passively taking information in has never been simpler
  • Works great when all you have to do is click briefly on something to save it for later
  • Especially easy to browse for images this way
  • Great for scanning items quickly for content

Cons

  • Can’t reliably return to your “position” in the item stream if you follow a link or click to “read further”
  • Always updates so you never get to the bottom of any results
  • Item feed usually displays one at a time, so it can get boring to search through endless data
  • Hard to find items again if you pass them by accidentally

Where Infinite Scrolling Works Best (and Worst)

If you have a website with quick blurbs of content and images, where links don’t take you out of the “stream” of information, infinite scrolling works well. This is great for news sites and some blogs–and I can see why it’s become popular with Tumblr themes, too. When you’ve got lots of posts with just a few images, a quote, or a short paragraph, infinite scrolling saves your user a lot of clicks.

But if you’ve got a website with a lot of links or in-depth content, such as this very blog you’re reading right now, infinite scrolling is definitely not your friend. Users will have a hard time searching your site for information, and every time they click to “read more,” they end up at the top of the page–very frustrating! Infinite scrolling on sites with fewer but longer posts (and/or more links to external content) doesn’t work nearly so well.

If You’re Going to Use Infinite Scrolling…

  • Make sure your posts are tagged thoroughly so that once people find one post they like, they can use its tags to find other similar posts on your site. (Example: an LOLcat picture could be tagged with “lolcat”, “cats”, “humor”, and “meme”.)
  • Use CSS to design your posts so that each one stands out on the page–make your posts’ headlines big and bold, surround each of them with a differently-colored “box” from the background. Anything you can do to separate out individual posts while people browse will help them navigate better!
  • Make your navigation either stick to the top of the page or scroll in a fixed position alongside the content. Infinite scrolling where navigation is only found at the top of the page = NOT a great idea, at all.
  • Give your users a separate “tag list” page where they can quickly scan through and see what kinds of posts you have on your site. That way, they don’t have to waste time scanning through your post stream to find things they like.

For Further Reading

jQuery4U: 5 jQuery Infinite Scrolling Demos
Awwwards: Best Infinite Scroll Websites
NNGroup: Infinite Scrolling is Not for Every Website
SmashingMagazine: Infinite Scrolling–Let’s Get to the Bottom of This
CodySherman.com: Infinite Scrolling Javascript

Glasses Off: 4 Excellent Web Development Sites

Given that I generally blunder around a lot when it comes to backend coding, I often need to refer to others’ web development wisdom–not only to fix my own problems, but to write helpful articles of my own on these Monday posts. Here are four sites I find myself relying on for all this help and more:

Sitepoint
From HTML all the way to Ruby on Rails, and every major web programming language in between…this site is invaluable to me!

Tizag.com
This site’s MySQL and PHP tutorials are some of the most common-sense tuts I’ve ever read (and that’s a huge compliment!).

Nettuts
Whether you’re developing ASP.NET, HTML, Javascript, CSS, Python, or a host of other languages, Nettuts probably has a tutorial section for you!

WebProCafe
This forum provides a place for all us developers and designers to share ideas, ask questions, and offer help.

camelCase and 2 Other Tips about JavaScript Variable Names

When it comes to JavaScript variable names, you have to keep in mind that JavaScript is like many other web programming languages–it’s picky about capitalization, spelling, and spaces. (And when I say picky, I mean PICKY.)

This doesn’t mean that you have to be a perfect wordsmith to write JavaScript code; you do, however, have to debug your code carefully, because one simple typo can cause your whole script not to run. Here are 3 common pitfalls:

Capitalization (Like camelCase)

Often, you’ll see examples of JavaScripts floating around on the Web with object and function names like “myObject” and “getPage.” These are both examples of camelCase, or the act of combining two words together and then capitalizing one or both words’ beginning letters. (This is also called Embedded Caps, nerdCaps, and a whole host of other terms, LOL!)

Since JavaScript is case sensitive, you have to be careful when you’re writing object and function names with CamelCase in mind. “MyObject” and “myObject” are treated as two different objects; “GetPage” and “getPage” are also treated as two different functions. Read over your code carefully and make sure all your variable capitalizations match!

Spelling (Yep, It’s Still Important)

Along with the issue of capitalization, the spelling of your JavaScript objects and functions matters, too. If you spell your function as “myAwesomeFunction” in one part of your script, for instance, and then misspell it as “myAwseomeFunction” elsewhere, then JavaScript treats those as two separate functions, and you likely have a non-working script.

You wouldn’t believe how many times a careless spelling mistake has thrown my coding off. (One tip: if you’re having trouble spelling the name of the function or object, consider either changing the name to an easier-to-spell option, or setting aside the hard-to-spell name in a little text file and copy-pasting it every time it comes up in a script you’re writing.)

Spaces in the Variable Name: Just Don’t

One reason so many JavaScript developers use camelCase or other forms of combined-word variable names is because JavaScript does not like for variable names to have spaces in them. Thus, if you have a multi-word function or object name, you combine the words, but keep the capitalized letters to make it easier to read.

Sometimes spaces can crop up if there’s an accidental line return in the middle of your file; resizing your script file’s window to check for these line returns could possibly help you debug a script that just won’t run! (This trick saved me some hair-tearing when I was a webdesign newb trying to get a script to work…I had NO idea what was wrong until I maximized the window and saw the sneaky little space hiding in one of the function names!)

Further Reading

W3Schools: JavaScript Statements
W3Schools: JavaScript Object Intro

The 5 Web Languages You Need to Know

Much like learning a language is for communicating with other humans, creating websites from scratch is all about communicating your design and function intentions to a browser or Web server. And to be a good web developer in this day and age, you need to be multi-lingual–speaking several different programming languages to be able to design better, sleeker and more functional websites.

But just Googling “web programming languages” or something similar brings up a whole host of options to learn, and it can be overwhelming for the beginning user. Where do you begin? Do you start learning MySQL, or Ruby on Rails? Should you take a course in HTML, or is Python the next big thing?

Thankfully, it doesn’t have to be this confusing. In this post I have culled the 5 most important Web programming languages to know–the ones which make up about 90% of most modern websites. If you’re just beginning to learn how to build websites, this article will serve as a road map.

HTML: The Skeleton of the Web

HTML is the strong, silent (and mostly invisible) foundational structure which provides you a page to look at (such as the one you’re reading from right now). It provides line breaks, breaks text up into paragraph structures, formats tables, divides page content into layers…pretty much anything that makes up your page’s most basic structure is what HTML handles best.

This should be your first Web language to learn, since so many of the other programming languages depend on it to function. Here are some excellent resources to start learning:

HTML Tutorial @ W3Schools.com
HTMLGoodies.com
QuackIt.com’s HTML Resources

CSS: The Magic Styling Wand of the Web

Perfectly complementing HTML’s invisible strength, CSS takes HTML’s structure and gives it style. From giving your text just the right font choice and color to aligning each of your divided layers pixel-perfect on the screen, CSS can transform any boring old text and images into a lovely yet still functional page. There are plenty of simple CSS tricks that translate into downright amazing page effects–things you would never expect to accomplish with just a few lines of code!

CSS should be your second language to learn, as it builds on HTML knowledge while extending HTML’s capabilities of displaying Web content properly. Here are some resources to study CSS (both how it works and what it looks like when done right):

CSS Tutorial @ W3Schools.com
CSSZenGarden.com
Sitepoint.com’s CSS Reference

Javascript/jQuery: The Swiss Army Knife of the Web

Whatever special function you want your site to perform, whether it’s something to make your site display differently, something to change how your navigation menus open, etc., there’s likely a snippet of Javascript that can make it happen. Just putting a bit of carefully-chosen or carefully-crafted Javascript code into the head part of your HTML document can make a big difference! (By the way, the only real difference between Javascript and jQuery is that you don’t have to have a big library of Javascript code installed on your site for jQuery to work–all you need is a link to the library of code that’s already established on the Internet.)

Javascript should be your third language to learn, as it bridges the gap between Web languages that more about site display (“front-end development”) and Web languages that are more about site function (“back-end development”). Here are a few good websites to start studying Javascript:

Javascript Tutorial @ W3Schools.com
Codecademy’s Javascript Lessons
JavascriptKit.com

PHP: The Workhorse of the Web

Many of the websites you see today, like this one, are made possible with PHP–it’s literally everywhere, even though none of its code appears when you click “View Source.” The reason its code does not appear is because PHP is a server-side language, meaning that everything it does is tied to having a conversation with the server (that’s the thing that holds all your web pages, images, etc.).

PHP acts as a go-between for your browser (Internet Explorer, Mozilla Firefox, Google Chrome, or similar programs) and the server, asking questions of the server and delivering appropriate responses back to the browser in the form of a displayed page. (Ever searched for anything using a site’s search box? PHP was likely powering the search!)

PHP should be your fourth language to learn, since it is the most widely used of all the server-side languages, yet still deals with outputting data in HTML/CSS forms. Here are some excellent resources to help you learn PHP:

PHP Tutorial @ W3Schools.com
Tizag.com’s PHP Tutorial
PHP @ HomeAndLearn

MySQL: The Librarian of the Web

If you’ve got data to store, search through, and access, MySQL can handle it quite ably–it’s a programming language built to make, search, and access online databases on a server. The only trouble is, it doesn’t actually display the data on its own. So, quite often you’ll see PHP and MySQL being taught side-by-side; PHP code can “talk” to the MySQL database and retrieve results.

Still, you need to know how MySQL works in order to build a PHP script that can communicate with it. (Believe me, if you don’t know how MySQL works, you’re going to be VERY frustrated trying to build a successful PHP code to work with a MySQL database!) Here are a few sites to start your MySQL learning:

SQL Tutorial @ W3Schools.com
Tizag.com’s MySQL Tutorial
MySQLTutorial.org

(Fun fact: Most formally-trained programmers pronounce MySQL as “my sequel.” I, however, being relatively untrained, mentally pronounce it “my skwul” despite trying to train myself otherwise. LOL!)

Summary

These five Web programming languages may look scary, but if you take them one language at a time, mastering each before you move on, you will find that things become much easier to understand. And, once you understand these five, you will have a great basis of knowledge on which to build even further programming know-how. I hope this little “road map” serves you well!

Commenting Your Code: A Helpful Habit to Start

“Wait, what? You can put things in your code that are not read by the browser? Why would anybody want to do that?”

When I first started learning how to design web pages, I thought the same thing about using comments, until I started going back through my old layouts to rework and revamp old code for new designs. Boy, had I written myself some head-scratchers. “What in the world is THIS div even doing in the code? It doesn’t have anything in it!” “Huh? What’s this weird padding and margin thing?”

At the time I drafted the older bits of code, I knew exactly what I was doing with the code–I knew exactly what purpose each div, margin, spacer image, and line break was for. But going back to that old code after three or four years? Let’s just say I spent a lot longer than I should have trying to decipher my past self’s reasoning. LOL!

So, to avoid this kind of bafflement every time I go back to an old design, I have resolved to start using comments in my HTML, CSS, PHP, and Javascript codes.

Why Use Comments in Your Code?

As I’ve already said, comments are a great way to remind yourself of why you coded a particular section the way you did. (For instance, reminding yourself that a certain div or code hack is only in place to make IE behave itself. There are plenty of instances of that! LOL!)

But comments aren’t just useful for leaving yourself reminders about code–they’re also good ways to section your code, so that you don’t have to hunt through thousands of lines just to find the one thing you want to fix.

For example, an HTML page sectioned out might look like this:


<!–NAVIGATION–>
<div id=”nav”>

</div>
<!–CONTENT–>
<div id=”content”>

</div>

And a comment-sectioned CSS file might look like this:

/* BODY STYLES */
body {color: #FFFFFF;
background-color: #000000;
…}

/* LINK STYLES */
a:link {color: #FF0000; text-decoration: none;}

Both usages are sanity-preserving (and as web developers, we all know that sanity sometimes is in short supply, LOL). Comments make it possible for you to leave reminders, section headers, and even silly little in-progress notes to yourself to make your job a little more fun.

How to Code a Comment, in Four Different Web Languages

Each Web programming language has its own comment tag style, a way to include things that are only for the web developer to see.

HTML Comments

When you want to start an HTML comment, you place “” after. Like the following:

<!–Woo this is a comment–>

Comments in HTML can be placed anywhere within the <body> tag; the browser will just ignore them.

CSS Comments

When you want to comment in your CSS code, just put a “/*” before you start the comment, and put a “*/” at the end, like this:

/* Yay I have some CSS styles, woot */

You can place CSS comments anywhere in your CSS, whether your CSS is in a separate file or in the <head> section of your page.

PHP Comments

There are two kinds of PHP comment styles–one for comments that only take up a single line in your PHP document, and another for comments that take up multiple lines in the document. (In PHP, lines REALLY matter, so if you’re not sure if your comment will only take up one line of code, best to use the multi-line comment.

Single-Line Comment
To put in a single-line comment, just put “//” or “#” before you begin your comment. Everything to the right of those double slashes or hash symbol will be commented out as long as it’s on the same line as the slashes or hash symbol. Like so:

<?php echo “Whee!”; // a simple little echo statement
# why did I just write Whee? xD
?>

Multi-Line Comment
If your comment is going to go for multiple lines, you’ll instead put in “/*” before you begin your comment, and “*/” after you’ve finished your comment. (Looks identical to CSS!) Here’s an example:

<?php echo “Whee!”;
/* Seriously, why did I just write Whee?  I have no idea.
Possibly because it’s 2 AM and I’ve been staring at this code for hours? LOL */
?>

Javascript Comments

Like PHP, Javascript has two different styles of commenting, depending on if the comment is on a single line or multiple lines.

Single-Line Comment
Doing a single-line comment in Javascript is identical to doing it in PHP–you use “//” before your comment, and everything out to the right of those two slashes will be commented out. Example:

<script type=”text/javascript”>
<!–
document.write(“Hello!”);
//I need to add some more stuff here!
//–>
</script>

Multi-Line Comment
Again, identical to PHP (and CSS), Javascript uses “/* at the beginning and “*/” at the end of its multi-line comments. Makes it pretty simple to remember if you code in multiple languages!

<script type=”text/javascript”>
<!–
document.write(“Hello!”);
/* Here I’ll put in a few more document.write things, as well as some preloaders, but I need to be careful! */
//–>
</script>

References and Further Reading

Here are the sites I used to research this article; they are both great sites to help you learn more about web development of all sorts.

HTML Comments @ W3Schools.com
CSS Comments @ W3Schools.com
PHP Comments @ Tizag.com
Javascript Comments @ Tizag.com

Feed Some RSS to Me

feedsomersstome
Aside from content widgets automatically generated by social media websites, RSS feeds are the easiest way to get content from other websites onto your pages. However, the process can be REALLY esoteric, especially if you’re new to the process of incorporating RSS feeds into your personal designs.

When I first started fiddling around with RSS, I had no idea what I was supposed to do with the RSS link…and then, I found a Web service that handled most of the backend code for me.

The Solution: Feed2JS.org

I literally stumbled across this site while aimlessly browsing StumbleUpon–best random search result ever! Feed2JS.org, or “feed to JavaScript,” turns any RSS feed into a block of JavaScript-ed content that can display on your web page.

To test this, I went to their Build Your Feed page, plugged in the URL of the RSS feed I wanted (the first one I did was Last.fm), and then I was given the chance to consider the following options.

  1. Show or hide info about the feed publisher (the website you’re getting the feed from)
  2. Number of items to show in the feed
  3. Show or hide item descriptions
  4. Show item author (if applicable) or not
  5. Use HTML in the item display, or format it with CSS
  6. Show posted date or not
  7. Show the time of post according to your specific time zone or not
  8. Open links in new window or not
  9. Choose UTF-8 character encoding or not
  10. Podcast enclosures or not (link directly to media file)
  11. Create a custom CSS class for your feed or not

An Example of a Built Feed

In the case of my Last.fm RSS feed, I didn’t want a title (because I was going to title it myself with the words “Last Played”). I also didn’t want any descriptions of each song, just the title of the song. I wanted the 10 last played songs to display, and I wanted their info to pop up in a new window so that people didn’t just lose my page.

I also didn’t bother with including the date, time, or author of the post because I felt that would unnecessarily clutter the look of the feed. I wanted it to look as much like a WordPress widget as possible. Lastly, I added the custom CSS class of “lastfm” so that I could style my Last.fm feed just like I wanted it.

So, my Last.fm feed’s Javascript turned out looking something like this in Javascript:

<script language=”JavaScript” src=”http://feed2js.org//feed2js.php?src=http%3A%2F%2Fws.audioscrobbler.com%2F1.0%2Fuser%2F__MYUSERNAME__
%2Frecenttracks.rss&num=10&targ=y&utf=y&css=lastfm”  charset=”UTF-8″ type=”text/javascript”></script>

And this is what it ended up looking like on the actual test page:


I added the Last.fm icon and “Last Played” text myself, but the rest of the info is all Javascript-ed in! Neat, huh?

WARNING! Don’t Forget to Style The Feed!

The last thing about Feed2JS feeds? Remember to style them, otherwise they look pretty yucky on the page–just basic Times New Roman size 12 font, and default link colors (oh, the horror!).

Even though I had specified a custom CSS class using the “Build Your Feed” page, I had no luck styling my Last.fm feed with the class. I even went to the Style Your Feed page and read up on how to construct the CSS classes that my feed ostensibly needed, but it didn’t work for me at all. (Not sure if it was a browser issue or user error–somehow, I suspect the latter. LOL)

So, instead, I styled the display and the links by specifying the link styles of the div with the id “lfm” that contained my Last.fm feed, using code like the following:

#lfm {
background-color: #abb461;
color: #FFFFFF;
border-radius: 10px;
padding: 3px;
list-style-type: none;
font-size: 11px;
font-family: “Arial”, sans-serif;
}

#lfm a {
color: #fbfcf3;
}

This worked beautifully (aside from the silly list bullets that won’t go away despite putting “list-style-type: none;” in my code), so I’m not worrying about the custom CSS class unless I have to. The less headaches I encounter while coding, the better. 🙂

Summary

RSS feeds are great ways to put interactive, live-updating content on your page, even in this age of WordPress widgets and little automatically-generated boxes that do it all for you. Feed2JS provides a quick way to put the RSS feed on your page using Javascript, and through their generated code, you can learn how to code the Javascript yourself one day!