Hi. I'm Andrew

Filed under: javascript

See all posts on posterous with this tag » 

Why It’s a Good Idea to Be a JavaScript Developer, and What it Takes to Be One | Clientcide

So what does it take to be a JavaScript badass, and what do you get for it? Well, to be a really top-notch front end developer means you’re going to have to spend a lot of time doing stuff that’s tedious and boring, some stuff that’s really hard and beyond your talents, and some stuff that’s just plain fun. For what it’s worth, here’s my list:

  1. You need to know HTML. You need to know everything about it. Everything. You need to know what effect document types are going to have on your markup’s display. You need to know that browsers will shove a TBODY tag into your tables even if you don’t code one. You need to watch what the browser vendors are adding into their nightly builds and their upcoming specs. Learning this stuff, at least for me, just takes loads of time discovering it as you work.
  2. You need to know CSS so well you’ll regret it. These days most of the cross-browser problems I encounter are with their CSS implementations. Getting around them usually means describing the exact same style in a different way. You just added a negative margin-top to a link and guess what, the users of certain browsers can no longer click them, despite the fact that you gave it a z-index of a million and you can clearly see the damn thing. Or you just made the most amazing collection of positioning statements to make an auto-resizing masterpiece of CSS awesomeness but god help you if your boss looks at it in Internet Explorer. The thing is, having this skill – being good at CSS – isn’t really all that interesting or valuable any more. Everyone who works on the front end is just expected to have it. There are some seriously talented CSS developers out there who go far above and beyond this kind of knowledge and truly make CSS into an artform. You don’t have to be one of them, but if you can’t make the page look like the mockup, it doesn’t matter that you can do just about anything else.
  3. You need to know the browsers. You need to know that IE won’t let you convert this string: “<meta></meta>” into DOM elements by setting the innerHTML of a DIV. And forget about injecting it in the HEAD to turn it into a DOM element, because that thing is read only. You need to know that IE will always barf at trailing commas in your array and object literals. You need to know that IE has offset positioning issues for elements inside of iframes. And IE isn’t the only pain in the ass; Firefox has those clearfix issues with floated elements and webkit’s no saint. And you need to know that the latest versions of webkit have whatever awesome new features it has, as well as what ways mobile safari differs from the desktop version.
  4. Did I mention JavaScript? You need to know how ALL of JavaScript works. You need to know that the arguments object in a function has a length property and is iterable, but it isn’t an array and has no methods. Further, you need to know how to turn it into one. You need to know how the prototype property works, how to use it on your own without the help of a framework, and what the implications of using it are. You need to know how to garbage collect things and, for that matter, how to tell when you aren’t. You need to be really good at abstraction. Seriously brilliant at it. You need to be good at designing APIs for yourself as well as others. You need to know how to test your code and how to manage it.
  5. You need to be decent at design – information flow, graphic design, user experience design, code design. You need to be able to interview a user, a client, a stranger, an expert, whatever, and ask them the right questions to be able to devise an experience that solves their problems. Not just the ones you can imagine, but the ones they don’t know how to describe. You need to be able to open Illustrator and put together wireframes quickly to devise a plan, then switch to Photoshop – god you need to be good (that is, efficient) at Photoshop – and put together the visual style. You don’t have to be the worlds best designer; I’m certainly not. But you need to be able to tell the difference between good design, bad design, and amazing design. If you can manage good on your own, you’re set.
  6. You need to be comfortable on the server side. There aren’t that many positions out there where all you write is JavaScript all day long. Most front end jobs will see you writing as much as half of your code in JavaScript, but you need to be able to pick up other languages relatively quickly (in, say, a month or less). Python, Ruby, Java, PHP… If you only know one programming language, it doesn’t count. If you only know JavaScript and PHP, and you balk at any task that requires you to use something other than those two (rather than, say, looking at it as an opportunity to learn something new), then you need to ask yourself what you’re doing here. Knowing how to use a framework, but not how to accomplish something without one – with vanilla JavaScript – doesn’t count as knowing JavaScript.
  7. And then there’s about a million other things that you need. You need to understand Git. Git is amazing. I know you’ve heard people tell you this, and if it still seems like an alien monster that refuses to explain itself, then you need to hunker down and figure it out. You need to understand how to get things done with just a shell. You should be able to open up vi or emacs and edit a conf file without launching notepad or TextMate or whatever. You should be able to run make and compile things. You should be able to tail a log file, unzip a tarball, secure copy things, run servers and configure them. You need to be able to kill processes and read a stack trace.

Filed under  //   frontend   javascript  

Comments (0)

Javascript in Modern Web Design

Image Zoom and Popup

Lightbox

You’re probably very familiar with Lightbox — a light Javascript used to display overlay images on the current page. The original Lightbox was released in 2005. Since then, there are many scripts released with similar features using different approaches and Javascript libraries.

jQuery lightBox Plugin

This is exactly the same as Lightbox JS, but written on top of jQuery library.

Thickbox

Thickbox is a jQuery plugin that is very similar to Lightbox, but comes with more features. It allows you to display: single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.

Note: Web Designer Wall uses Thickbox to display the gallery images and tutorial demos.

Highslide JS

Highslide JS serves the same purposes as Thickbox, but it has the zoom effect and allows you to drag the overlay window.

FancyBox

FancyBox is a jQuery plugin that is designed to replace the overused Lightbox. It has similar features, but better transition effects (the design is Mac-like).

jQZoom

jQZoom allows you to show a magnified image of the thumbnail. This technique is commonly used in eCommerce websites (check out the Gap site for a sample).

 

Gallery and Slideshow

Slideshow 2! for Mootools

Slideshow 2! is a javascript class for Mootools 1.2 to stream and animate the presentation of images on your website.

SmoothGallery

Using mootools v1.11, this javascript gallery and slideshow system allows you to have simple and smooth (cross-fading…) image galleries, slideshows, showcases and other cool stuff on your website.

jQuery Galleria

Galleria is a javascript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. It will create thumbnails for you if you choose so, scaled or unscaled, centered and cropped inside a fixed thumbnail box defined by CSS.

Noobslide

NoobSlide is a MooTools class that lets you create timed slideshows and sliding panels. Visit the website to view the demos.

Product Slider (demo)

This shows a demonstration of a slider widget from the jQuery UI library used to create the product slider as seen on the Apple - Mac website.

 

Carousel

jCarousel

jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation).

YUI Carousel Component

The carousel component manages a list of content (HTML LI elements within a UL) that can be displayed horizontally or vertically. The content can be scrolled back and forth with or without animation. The content can reference static HTML content or the list items can be created dynamically on-the-fly (with or without Ajax).

DynamicDrive - Carousel Slideshow

Carousel Slideshow is a fabulous DHTML script for the showcasing of images on your site. It displays images in a 3D, carousel fashion.

iCarousel - MooTools

iCarousel is an open source (free) javascript tool for creating carousel like widgets. You can use iCarousel as news ticker/scroller or image gallery slider.

 

Panel Slider

Coda Slider Plugin

Coda Slider is a jQuery plugin that imitates the panel sliding effects as seen on the Coda website.

jQuery Coda Slide Tutorial (demo)

This is a tutorial from jQuery For Designers to show you how to create the Coda panel slider.

Sliding Tabs (demo)

Sliding Tabs is a mootools 1.11 plugin which adds a pretty neat effect. It’s a clone of something seen on Panic Software’s Coda site, which in turn was very similar to a widget used in the iTunes Music Store.

 

Tabs

jQuery UI Tabs

jQuery Tabs is a powerful and flexible jQuery plugin that lets you create customizable tab navigation (highly recommended).

jQuery Tabs Tutorial (demo)

Another awesome tutorial from jQueryForDesigners.com to show you how to create a basic tab navigation with jQuery.

MooTabs

MooTabs is a tiny(3kb) class for MooTools. As the name suggests, its main purpose is to help out with the creation of simple tab navigation.

Sliding Tabs Tutorial (demo)

A tutorial from Nettuts.com to show you how to create a sliding tab with jQuery.

 

Scroll to Anchor

jQuery ScrollTo (demo)

A very flexible jQuery plugin that lets you create scrolling animation to any position of a web page with customizable erasing and speed options.

SmoothScroll (demo)

A simple MooTools script that creates smooth scrolling to anchors on a web page.

Animated Scrolling with jQuery

Learning jQuery shows you how to create an animated "scroll to anchor" with just a few lines of code.

 

Tooltips

jTips (demo)

A customizable jQuery plugin that displays tooltip popup — with either static html text or Ajax content.

jQuery Tooltip Plugin (demo)

Another nice Tooltip plugin.

Tooltip and Image Preview (demo)

A very simple jQuery script that displays tooltip and image preview (I use it on Best Web Gallery).

 

Accordion

jQuery Accordion (demo)

This plugin creates an accordion menu. It works with nested lists, definition lists, or just nested divs.

Apple.com Sidebar Accordion (demo)

jQueryForDesigner.com shows you how to create the accordion slider as seen on the Apple website.

MooTools Accordion

The Accordion gives you a fancy way to show only the content you really need.

MooTools Image Menu

Image Menu is a MooTools plugin that creates the horizontal accordion image menu.

 

Flash and Image Text Replacement

sIFR 3 (demo)

sIFR is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems. It accomplishes this by using a combination of javascript, CSS, and Flash.

jQuery sIFR (demo)

A jQuery plugin that does the sIFR for you.

FLIR (demo)

Facelift Image Replacement is an image replacement script that dynamically generates image representations of text on your web page in fonts that otherwise might not be visible to your visitors. The generated image will be automatically inserted into your web page via Javascript and visible to all modern browsers.

 

CSS Stylesheet Switcher

A List Apart - Alternative Style

The original stylesheet switcher by Paul Sowden. Believe it or not, this trick was invented in 2001 (not a modern trick after all).

Switch Stylesheets with jQuery (demo)

Stylesheet switcher with jQuery.

MooTools Styleswitcher (demo)

CSS stylesheet switcher with MooTools.

 

Form Styling

FancyForm - MooTools (demo)

A MooTools plugin that replaces the browser default checkboxes and radio buttons with custom styles.

PrettyCheckboxes - jQuery

Same as FancyForm, but using jQuery library.

jQuery Selectbox Plugin (demo)

A simple plugin that allows you to replace the form select list with custom styles.

Custom Checkboxes, Radio Buttons, Select Lists

Give your form a complete makeover with this Javascript and CSS.

jQuery Form Input Example Plugin (demo)

A jQuery plugin that gives user hints on what to enter in the input fields.

Unobtrusive Slider Control V2 (demo)

This script lets you create custom slider controls associated with input fields.

More Form styling links at Noupe.com/css/form-elements…


Form Validation

jQuery Validate (demo)

A very plugin that allows you to build client-side validation and Ajax form.

MooTools Validate

A MooTools form validation plugin (similar to jQuery Validate).

JSValidate (demo)

JSValidate is a form validator that utilizes aspects of prototype and scriptaculous to bring you a simple to execute, non-intrusive javascript form validator. With minimal setup, your forms can be processing clean data in no time at all.

 

Filed under  //   bookmark   javascript   modernweb   web design  

Comments (0)