Category: JavaScript

Small, Lightweight and Unobtrusive Scripts, Tools

Tasty, High Quality Patterns for Your Next Web Project: Subtle Patterns

Made by Atle Mo., is a collection of tasty, high quality patterns for your next web project. These design elements can be used freely in both personal and commercial projects. If you created some nice graphics, you can share them with everyone by submitting them to the website. Every subtle pattern can be downloaded as a Photoshop pattern file.

Current patterns include:

  • Dark stripes: Very dark pattern with some noise and 45 degree lines.
  • Handmade paper: White hand made paper pattern with small bumps.
  • Pinstripe: Light gray pattern with a thin pinstripe.
  • Wine Cork: Wine cork texture based off a scanned corkboard.
  • Paper 3: Light gray paper pattern with small traces of fibre and some dust.
  • Dark denim: A dark denim looking pattern. 145×145 pixels.
  • Smooth Wall: Some rectangles, a bit of dust and grunge, plus a hint of concrete.
  • 60º lines: Never out of fashion and so much hotter than the 45º everyone knows, here is a sweet 60º line pattern.
  • Exclusive paper: Exclusive looking paper pattern with small dust particles and 45 degree strokes.
  • Paper 2: New paper pattern with a slightly organic feel to it, using some thin threads.
  • White sand: Same as gray sand but lighter. A sandy pattern with small light dots, and some angled strokes.
  • Gray sand: A dark gray, sandy pattern with small light dots, and some angled strokes.
  • Paper 1: A slightly grainy paper pattern with small horisontal and vertical strokes.
  • Leather 1: A leather pattern with a hint of yellow.
  • White carbon: Same as the black version, but now in shades of gray. Very subtle and fine grained.
  • Fabric 1: Semi light fabric pattern made out of random pixles in shades of gray.
  • Micro carbon: Three shades of gray makes this pattern look like a small carbon fibre surface. Great readability even for small fonts.
  • Tactile noise: A heavy dark gray base, some subtle noise and a 45 degree grid makes this look like a pattern with a tactile feel to it.
  • Carbon fibre: A dark pattern made out of 3×3 circles and a 1px shadow. This works well as a carbon texture or background.
  • 45 degree fabric: Medium gray fabric pattern with 45 degree lines going across.

Adapt.js: Adaptive CSS based on Browser Window’s Width

Adapt.js is a lightweight JavaScript file that determines which CSS file to load before the browser renders the page. In case the browser tilts of resizes, the script checks its width and loads the needed CSS file accordingly. If JavaScript is disabled default stylesheets can be served via <noscript> which is valid in the HEAD of HTML5.

Alternatives include: Build a separate site for mobile. Or, use media queries to adjust layout, with a polyfill for older browser support, and conditional Internet Explorer comments for Windows phones. Also a factor is how to handle multiple image resolutions without adding file size. Filament Group is advocating context aware image sizing.

Apprise: The Attractive Alert Alternative for jQuery

Developed by Daniel Raftery, Apprise is a very simple, fast, attractive, and unobtrusive way to communicate with your users, giving you a complete control over style, content, position, and functionality. Apprise is, more or less, for the developers looking for an attractive alert or dialog box without having to download a massive UI framework. The customization is done via CSS (apprise.css) in order to adjust the look and the feel.

Options include:
'confirm' : false, // Ok and Cancel buttons
'verify' : false, // Yes and No buttons
'input' : false, // Text input (can be true or string for default text)
'animate' : false, // Groovy animation (can true or number, default is 400)
'textOk' : 'Ok', // Ok button default text
'textCancel' : 'Cancel', // Cancel button default text
'textYes' : 'Yes', // Yes button default text
'textNo' : 'No' // No button default text

  • Source & Demo:
  • Browsers Compatibility: iPhone/iPad, Chrome 8.0+, Firefox 3.0+, Safari 4.0+, Internet Explorer 9.0, Internet Explorer 7 & 8 work with minor styling mishaps
  • License: Creative Commons Attribution-ShareAlike 2.5 Generic License

Make live changes on your Website’s CSS & JS files: Live.js

I am sure you often need to make quick changes to your CSS and JavaScript files and connecting to the FTP, downloading, editing and re-uploading the files again to the server is a time consuming process.

Live.js is meant to make this process shorter by making sure you are always looking at the latest version of the page you’re working on whether is an HTML, CSS or JavaScript file. You just need to include the script and it will monitor the current page you’re working on by sending consecutive HEAD requests to the server. Changes to CSS will be applied dynamically and HTML or Javascript changes will reload the page.

Live.js works in Firefox, Chrome, Safari, Opera and IE6+ until proven otherwise. Live.js is independent of the development framework or language you use, whether it be Ruby, Handcraft, Python, Django, NET, Java, Php, Drupal, Joomla or what-have-you.

Live.js was written by Martin Kool as the next step in Handcraft’s design in the browser strategy. But similar to when we open sourced Backfire (which allows you to save CSS changes made with Firebug) it seemed natural to once again share the code.

PS: Make sure you protect the page where you make the changes ;-)

jQuery File Upload Plugin: non-Flash Extensible File Uploader

jQuery File Upload is a non-Flash Customizable jQuery Plugin having an implementation based on open standards like HTML5 and JavaScript. Provides an API to set individual options and define callBack methods for various upload events. This plugin works with any server-side application platform: Google App Engine (Python, Java), Ruby on Rails, PHP and any other platform that supports HTTP file uploads.

Features include:

  • Multiple File Upload: Allows to select multiple files at once and upload them simultaneously.
  • Drag & Drop support: Allows to upload files by dragging them from your desktop or filemanager and dropping them on your browser window.
  • Upload progress bar: Shows a progress bar indicating the upload progress for individual files.
  • Graceful fallback for legacy browsers: Uploads files via XMLHttpRequests if supported and uses iframes as fallback for legacy browsers.
  • Cross-site file uploads: Supports uploading files to a different domain with Cross-site XMLHttpRequests.

JavaScript Garden: Documentation about the most quirky parts of JS

JavaScript Garden, a growing collection of documentation about the most quirky parts of JavaScript gives advice to avoid common mistakes, subtle bugs, as well as performance issues and bad practices that non-expert JavaScript programmers may encounter on their endeavors into the depths of the language.

In order to understand the topics covered in this guide you should have former knowledge of the language. In order to learn the basics of JavaScript, please head over to the excellent guide on the Mozilla Developer Network.

Some of the quirky parts that are covered include:

  • Objects: Object Usage and Properties, The Prototype, hasOwnProperty, The for in Loop
  • Functions: Function Declarations and Expressions, How this Works, Closures and References, The arguments Object, Constructors, Scopes and Namespaces
  • Arrays: Array Iteration and Properties, The Array Constructor
  • Types: Equality and comparisons, The typeof, operator, The instanceof operator, Type casting
  • Core: Why not to use eval, undefined and null, Automatic semicolon insertion