Tag Archives: web development

How to Learn a Web Language

learningweblanguage
Knowing how to develop websites in various languages (HTML, CSS, JavaScript/jQuery, PHP, etc.) is great. But getting that knowledge is more difficult than it sounds for a lot of us.

Take me, for example. I’m self-taught in all things webdesign, only getting help on a few things here and there to figure out HTML, CSS, and bits of PHP and JavaScript. But there’s a definite limit to what I can effectively teach myself with a few random Google searches and online tutorials. I thought I had hit that limit when I tried to learn JavaScript in full a few years back–no matter what I tried, I just couldn’t seem to piece my shards of knowledge into actual working code. It all felt way too technical and mathy for this word-loving brain of mine.

That is, it felt too tough until I started approaching it like an actual language.

JavaScript = French?

I thought back to my high school French classes (my first exposure to the French language). Well, more specifically, I focused on how my French teacher taught us:

  1. She didn’t expect us to come in there on Day 2 and be able to converse in perfect French; she taught us vocabulary and parts of speech first, a unit at a time, learning the names and labels for things (“maison” = “house,” “citron” = “lemon”, etc.). Often, she translated sentences for us to show us the connections between words.
  2. Then, after we learned a unit of vocabulary, she showed us how to use the vocabulary in basic sentences: “Je veux un citron” (I want a lemon), “Je vais a la maison” (I’m going home). Usually, this step involved us writing sentences down and checking it for correctness via homework and tests.
  3. The final step in learning the words we were taught was using them in actual conversations and/or letters with other students. We were actively using what we’d been taught, and it got us used to how the various parts of speech we had learned were put together to communicate. (There was also a lot of laughing involved as we stumbled over pronunciation or word order, but at least it was practice!)

So I wondered: would the same principles apply to learning JavaScript, or in fact any Web programming language?

Short Answer: YES! And Here’s How to Do It!

These principles do work for teaching yourself a new Web language (or learning it from a friend/along with a friend). Here’s how it works:

  • Step 1: Read all the examples of your chosen Web language that you can find. First, read tutorial websites that break down exactly what each “word” (tag, term. etc.) in the web language means (W3Schools is good for this). Then check out actual code snippet sources (see end of article), since code snippets are basically programming examples of working code. (Remember to read the comments on each of the code snippet posts, too, since programming wizards often suggest fixes or updates!)

    As you read each snippet, think: “How did they make this work?” Search up any terms you don’t recognize right away, and see if you can understand how the programming language is arranging things to work.

  • Step 2: Find a code snippet you’re interested in working into your site and start tinkering. If you find one that kinda works the way you want it to, but you want to change it up a bit, even better–that’ll give you more practice! Try implementing some simpler code tricks first so you don’t daunt yourself, and if you get stuck, ask a web developer friend for help, or post a polite question or two on code forums (see end of article). (Make sure to keep a copy of the working code in reserve at all times so that if you ROYALLY screw up, you can always copy/paste it back in place of your work and start over. Learn from my fail.)
  • Step 3: Once you’ve had success with implementing others’ designed code that you’ve tinkered with a little, try writing your own code from the ground up. Again, start simple (and I mean very simple), and ask your web developer friends for help if you get stuck or are having trouble debugging. This will give you ground-level experience with developing in the new language, and you can more easily pinpoint where you’re having problems.

Don’t Forget the “Conversation” Part!

It’s very tempting to try to learn a new Web language in isolation, but languages thrive on communication. Of course, we don’t actually speak Web languages in everyday conversation, but asking other more experienced developers about their work in a particular language can REALLY help you get over hurdles and stay updated. (For instance, a Web developer buddy of mine is teaching me JavaScript at the moment, and I am learning so much more than when I tried to learn it alone.)

You may choose to meet in person or work over the Internet, but whatever you do, cultivate helpful professional connections with other developers; it really helps to have a human touch with this rather impersonal-seeming subject matter.

Further Reading

Study Aids

Webmonkey Code Snippets (HTML, CSS, JavaScript, API)
CSSFlow (HTML5, CSS3, Sass)
CSS-Tricks (HTML, CSS, PHP, JavaScript, jQuery, WordPress, htaccess)
JavaScriptSource
PHPSnips

Code Help

StackOverflow
DaniWeb

The Beauty of a One-Page Site

onepagesite
Want to build a website, but don’t want to have to deal with tons of pages?

Well, these days you don’t have to! One-page sites are not only useful–they’re a Web “trend” that’s become a staple.

Why Choose a One-Page Site?

It used to be that lots of separated pages were just about required for having a “good” site. But these days, with wide screen monitors and larger screen resolution sizes, we designers and developers can put more information on one page without it looking crowded and hard to read. This can (potentially) be easier to code as well as to design, with less content files and more ability to concentrate on attractive design and function elements.

me_site
(click for larger image in new window) Take my about me page on my domain, for instance. I condensed all the information that used to make up my overly-complicated personal SITE and made it into a much simpler PAGE, using banner-like columns in different colors to organize the information in a pretty but functional way. No scrolling, no extra pages–just a well-designed presentation of who I am.

One-page sites are great for personal “about” sites like mine, but there are many other applications for this design/development style, including:

  • Homepages for apps
  • Portfolio pages for creators and performers of all sorts
  • Online resumes
  • Lifestream aggregators
  • Small fansites

How to Design a Great One-Page Site

One-page sites can be floridly designed like an onscreen, interactive painting, or they can have a more minimalist vibe, or anywhere in between; your site designs don’t have to be hampered by the lack of “pages.” In fact, as the following sites will show, it can set you free from web design cliches!

OnePageLove, OnePageMania, and WebDesignerDepot’s pictorial article on single-page sites are all great places to start gaining inspiration for your own designs. When you’re ready to start coding, check out TeamTreeHouse’s list of open-source jQuery plugins for one-page sites and 1stWebDesigner’s parallax design tutorial, both key for building sleek, interactive one-page sites. (Or you could just do what I did and fit everything onto one page literally and figuratively without any special code…but then again, I’m not exactly on the cutting edge when it comes to web design, LOL!)

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

4 PHP Security Pitfalls to Avoid

For PHP developers of both newbie and veteran status, there are always new ways in which hackers exploit our carefully-crafted scripts. We have to keep tabs on newly discovered security holes in our scripts, as well as minding how we construct our pages so that people can’t just inject a bunch of code into our websites, all so that our sites will run the way we want them to, and so our users’ data will be protected.

Thus, I bring to your attention the following 4 PHP pitfalls, which are vitally important for us to be aware of as we build our sites. (Incidentally, this post started out as a “PHP tricks” post, but when I saw just how many blog posts are out there already with that premise (and how many of them advocate unsafe code), I thought it best to research PHP security problems instead. And boy, did I ever discover some doozies!)

#4: Exposing Your Filepaths to Users

Most users won’t care much if the paths to various files on your site are easy to guess (or easily viewable in their address bars). A few users, however, may choose to take advantage of that–not just for hotlinking your images, scripts, etc., but for stealing data that is supposed to be secure! Yikes! If you’re running any kind of site with
logins and passwords, especially an e-commerce site, easily-visible filepaths are BAD!

So, how to fix this? Thankfully, there are fairly easy PHP scripts that can disguise a file’s real path on your server with variables, making it much more difficult for hackers to guess where a file is. For instance, motov.net has an example script that is only 13 short lines of PHP code!

#3: Not Securing Your Databases

As mentioned in #4, MySQL databases with logins, passwords, credit card info, etc. are very juicy targets for hackers. If you don’t build in protections for all this sensitive data, your site could end up being victimized, leaving you with very angry users!

PHP.net has a series of articles on how to design your database for better security, how to securely connect to such a database, and more. Layering database security, just like layering clothes before you go out in the cold, can really help protect your users’ data! (Also, WebmasterWorld’s forums has a post about securing database connections which may be of further use.)

#2: Leaving Your PHP Sessions Open to Hijacking

Any time you have users logging in to a site, you are most likely incorporating a PHP session ID, a unique number that tracks them around the site so they don’t have to keep logging in every time they go to a new page. Unfortunately, hackers can get hold of those numbers if they’re easily guessed or stored in an insecure location (see #3). You might not think somebody could wreak much havoc with just a PHP session ID number, but a hacker could end up stealing somebody else’s whole account with just such a number!

To keep your users’ session ID numbers safe(r), consider some of the tactics suggested on this StackOverflow topic, including SSL connections, randomly-generated ID numbers (instead of incrementally increasing numbers), and sessions that expire within shorter time frames.

#1: Leaving Your Site Vulnerable to SQL Injections

When we PHP developers, especially newbie developers like myself, write MySQL queries pointing to our databases, sometimes we forget that malicious users exist for a minute. We forget to keep our very PHP script files safe from “SQL injections”–that is, targeted code attacks that fiddle with our SQL queries just enough to dig up data from the database, rewrite it, or even delete it all!

To keep your SQL/MySQL code from being fiddled with or just plain overridden, PHP.net has an excellent reference article which explains several code tactics you can use, such as connecting to your database with a user specifically limited to the task you’re trying to complete, checking that the inputted data is the right type, etc. This StackOverflow topic about preventing SQL injections may also be helpful as you tackle this tricky issue.

Summary

All of these precautions may seem unnecessary, especially to newbie PHP developers, but these are all giant security holes that can cause us a lot more headaches and frustration (not to mention user anger). Nip these problems in the bud, and you’ll be saving yourself a lot of time and trouble later!