Shiny Blog http://blog.shinylittlething.com Tue, 10 Mar 2009 15:42:22 +0000 http://wordpress.org/?v=2.7.1 en hourly 1 http://creativecommons.org/licenses/by-nc-sa/3.0/ Enabling Dynamic Plugin Support for your JavaScript Application http://feedproxy.google.com/~r/Moblurorg/~3/WJ02IgsV4NY/ http://blog.shinylittlething.com/2009/03/10/enabling-dynamic-plugin-support-for-your-javascript-application/#comments Tue, 10 Mar 2009 15:38:56 +0000 Nicolas Crovatti http://blog.shinylittlething.com/?p=151
Hi fellow reader, I recently came through a problem while working on a javascript framework on top of jQuery.  At one point, having one big javascript file containing all the application objects becomes hard to both naviguate and maintain. From here you want to ease your developement process by splitting your main class in small, specialized, classes [...]]]>

Hi fellow reader,

I recently came through a problem while working on a javascript framework on top of jQuery.  At one point, having one big javascript file containing all the application objects becomes hard to both naviguate and maintain.

From here you want to ease your developement process by splitting your main class in small, specialized, classes stored in different files and then includes all these files using <script> tags. This is not convenient, you will have HTTP connections overhead even before your page DOM is loaded and displayed.

You could eventually make use of a server side tool like the PHP library Minify to combine, minify and cache your javascript files. Hovewer I’ll talk about a system that dynamically and on-demand loads components using jQuery’s Ajax implementation.

Simple Javascript Class

Let’s start a simple Javascript Class :

var shinyObject = function() {

};

Extending our classe  with the saySomething() method :

shinyObject.saySomething = function() {
  alert("Something");
}

Ok,  in firebug console we can now type shinyObject.saySomething();  and the revelant code will be executed.

Plugin support

Warning, the following code is for concept demonstration pupose only on should not be used in production. Please disregard security concerns, this is not the point.

Onto creating our plugin module loader for our main class. Here is the new method :

shinyObject.loadPlugin = function(options) {
  this.plugin_path = "./";

  $.ajax(
    {
      type      : "get",
      url       : shinyObject.plugin_path + options.name + ".js",
      dataType  : "text",
      success   : function(code) {
        if(typeof shinyObject[options.name] != 'object') {
          var plugin = eval(code);
          if(typeof plugin == 'object') {
            shinyObject[options.name] = plugin;
          }
          else {
            alert("Impossible to load " + options.name + " module. Please check your module code syntax.");
          }
        }
      }
    }
  )

This snippet is rather easy to understand, the loadPlugin method take a single JSON object as argument, this is convenient because we will want to add more parameters later.  The name of an existing file is passed to the ajax() jQuery method and the results of this HTTP request is passed to a callback function.

If  shinyObject do not already have an instance of this particular plugin in its register table, then we evaluate the code. If the evaluated source code is a valid javascript object, we are affecting  it to a new entry in it’s register table, otherwise,  warn the developper of possible mistake in the plugin.

Creating a Plugin

To create a plugin for our appplication let’s create a new file in shinyObject.plugin_path  named saySomethingElse.js and put the following snippet inside :

(function () {
  var a_local_variable = "local variable is local";

  return {
    saySomethingElse = function() {

      alert("Something Else Matters!")
      alert("And you can use local variables because : " + a_local_variable);

    }
  }
})();



The important thing here is the self executing function notation :



(function () {
  /* code */
})();

This notation is making the difference between a simple library and an autoexecuting piece of code that returns an object.

Loading a Plugin

Will are now adding the loadPlugin() call to our the onReady event of the page:


$(document).ready(function() {
  shinyObject.loadPlugin({'name': 'saySomethingElse'});
});

Once the DOM ready for action, our shinyObject will automatically load its dependencies. If the code contained in your plugin do not have to deal with the DOM at all, you can safely make this call directly from the <head> part of your html document. Call me obessional programmer if you want, but I personaly find it more convenient to have everything initialized a the same place.

Using our Plugin

Once loaded successfuly, you can access your plugin’s public methods and properties like this :

/* Simple Method call */
shinyObject.saySomethingElse.saySomethingElse();
/*
Object.ModuleName.Method();
*/



As simple as 1, 2, 3.

Conclusion

What we achieved here is rather simple but can be extremely useful in nowadays web applications, even regarding performances. Let’s say we are building a big application with hundred of plugins that may be optional widgets for our users. The solution described at the begining of this article will generate a great overhead in both bandwith and HTTP requests prior page rendering.

Benefits of our dynamic plugins:

  • Fast Page rendering
  • Decoupled loading using Asyncronous HTTP
  • Saves a part of the Bandwidth
  • Easier library management for developpers

What about you dear reader ? What are your solutions for huge javascript libraries management and plugin support ? I’m really interested to know about it !

Related Posts

]]> http://blog.shinylittlething.com/2009/03/10/enabling-dynamic-plugin-support-for-your-javascript-application/feed/ http://blog.shinylittlething.com/2009/03/10/enabling-dynamic-plugin-support-for-your-javascript-application/ 20+1 Shiny, Colorful iPhone Wallpapers from Flickr Artists http://feedproxy.google.com/~r/Moblurorg/~3/gE2KtjAsGq4/ http://blog.shinylittlething.com/2009/03/06/201-shiny-colorful-iphone-wallpapers-from-flickr-artists/#comments Fri, 06 Mar 2009 14:17:40 +0000 Nicolas Crovatti http://blog.shinylittlething.com/?p=103
I litteraly crawled the flickr website to find high quality, colorful  iPhone wallpapers. All the following items in this collection are licensed under Creative Commons so you can use them freely as long as it’s not for commercial purposes. For more informations you may contact the respective authors. Kohdai Colors Contact : Tumblr profile Flickr profile Tom Ferris Mac OS X Contact : Flickr [...]]]>

I litteraly crawled the flickr website to find high quality, colorful  iPhone wallpapers. All the following items in this collection are licensed under Creative Commons so you can use them freely as long as it’s not for commercial purposes. For more informations you may contact the respective authors.

Kohdai

Colors

Colors

Colors

Contact :

Tom Ferris

Mac OS X

Mac OS X

Mac OS X

Contact :

Jake Vance

Redcircle

Redcircle

Redcircle

Greatwave

Greatwave

Greatwave

Contact :

Craftapalooz

Patchwork

Patchwork

Patchwork

Contact :

Paul Parker

Paul Smith iPhone Wallpaper

Paul Smith iPhone Wallpaper

Paul Smith iPhone Wallpaper

Contact :

Koka Sexton

Apple iPhone Wallpaper Serie

Apple

Apple

Abstract

Abstract

Abstract

Contact :

Björn Olsson

Rainbow Apple

Apple

Rainbow Apple

Contact:

Rob Patrick

Neon firefly

Neon firefly

Neon firefly

Contact:

ArtWerk

The Garden

The Garden

The Garden

Snowflake

Snowflake

Contact :

Ballookey Klugeypop

Strawberry

Strawberry

Strawberry

Lucky Kitty

Lucky Kitty

Lucky Kitty

Nouveau Poppies

Nouveau Poppies

Nouveau Poppies

Contact:

Armin Talic

Flow

Flow

Flow

Play

Play

Play

Contact :

Ed Hall

Harmony + Rhapsody

Harmony + Rhapsody

Harmony + Rhapsody

Contact:

Jeffrey “JP”

Burnt

Burnt

Burnt

Grunge Orange

Grunge Orange

Grunge Orange

Contact:

ShinyBlog iPhone Wallpaper

ShinyBlog!

Yeah ! You can now promote my blog every where you go ! Completely free during launch phase ! :P

Shiny Blog iPhone Wallpaper

Shiny Blog iPhone Wallpaper

Well ! What’s that closes this collection ! I really hope you’ve found your beloved wallpaper in this list.

Thanks to the Flickr artists out there to make our life shynier everyday!

Related Posts

  • No Related Post
]]> http://blog.shinylittlething.com/2009/03/06/201-shiny-colorful-iphone-wallpapers-from-flickr-artists/feed/ http://blog.shinylittlething.com/2009/03/06/201-shiny-colorful-iphone-wallpapers-from-flickr-artists/ 8 Ajax Data Controls and Effects to Work with Tables http://feedproxy.google.com/~r/Moblurorg/~3/prFqtwfhw0I/ http://blog.shinylittlething.com/2009/03/04/8-ajax-data-controls-and-effects-to-work-with-tables/#comments Wed, 04 Mar 2009 13:06:52 +0000 Nicolas Crovatti http://blog.shinylittlething.com/?p=75
Hi fellow reader, I browsed various projects that deals with HTML tables and data control. These a neat to achieve spreadsheet like experience for your users in web projects. 1. jqGrid by Tony Tomov jqGrid is a plugin fro jQuery, it supports Json, XML and Javascript Array datatypes. Features : Basic Search engine In place data editing Themes SubGrids Integration with jQuery UI [...]]]>

Hi fellow reader, I browsed various projects that deals with HTML tables and data control. These a neat to achieve spreadsheet like experience for your users in web projects.

1. jqGrid

by Tony Tomov

jqGrid

jqGrid

jqGrid SubGrid

jqGrid SubGrid

jqGrid is a plugin fro jQuery, it supports Json, XML and Javascript Array datatypes.

Features :

  • Basic Search engine
  • In place data editing
  • Themes
  • SubGrids
  • Integration with jQuery UI Datepicker
  • And more, just check out the demos

Ressources :

2. Tablecloth

by Alen Grakalic

Tablecloth

Tablecloth

Table cloth is a great tool to ease your users browsing wide dataset by adding different colors on their precise coordinates in the table.

Features :

  • Lightweight
  • Unobtrusive
  • Configurable highlighting of rows and columns or both
  • Highlight on click
  • Custom CSS

Ressources :

3. YUI Library DataTable Control

by Yahoo! Inc

YUI DataTable Control

YUI DataTable Control

Sample Data :

YAHOO.example.Data = {
    bookorders: [
        {id:"po-0167", date:new Date(1980, 2, 24), quantity:1, amount:4, title:"A Book About Nothing"},
        {id:"po-0783", date:new Date("January 3, 1983"), quantity:null, amount:12.12345, title:"The Meaning of Life"},
        {id:"po-0297", date:new Date(1978, 11, 12), quantity:12, amount:1.25, title:"This Book Was Meant to Be Read Aloud"},
        {id:"po-1482", date:new Date("March 11, 1985"), quantity:6, amount:3.5, title:"Read Me Twice"}
    ]
}

The All in One great DataControl component for YUI Library.

The DataTable control provides a simple yet powerful API to display screen-reader accessible tabular data on a web page. Notable features include sortable columns, pagination, scrolling, row selection, resizeable columns, and inline cell editing.

Features :

  • Column Keys Usage
  • Progressive Enhancement of Markup
  • Accessibility Features
  • Custom Cell Formatting
  • Nested Column Headers
  • Basic Column Sorting
  • Advanced Column Sorting
  • Pagination
  • Scrolling
  • Adjusting the Render Loop Size
  • Row and Cell Selection
  • Column Selection
  • Row, Cell and Column Highlighting
  • More Column APIs
  • Inline Cell Editing
  • And a lot more in examples

Ressources :

4. FlexiGrid for jQuery

by Paulo P.Marinas

FlexiGrid

FlexiGrid

FlexiGrid is a lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content. Similar in concept with the Ext Grid only its pure jQuery love, which makes it light weight and follows the jQuery mantra of running with the least amount of configuration.

Features :

  • Resizable columns
  • Resizable height and width
  • Sortable column headers
  • Cool theme
  • Can convert an ordinary table
  • Ability to connect to an ajax data source (XML and JSON)
  • Paging
  • Show/hide columns
  • Toolbar
  • Search
  • Accessible API

Ressources :

5. Preloading Data with Ajax and JSON

by Ryan Campbell

Demo Page

Demo Page

An Old but extensive and still good actual that describe how to preload your data to enhance your application usability.

Ressources :

6. dhtmlxGrid

by DHTMLX Ltd.

dhtmlxGrid

dhtmlxGrid

dhtmlxGrid is an Ajax-enabled JavaScript grid control with cutting-edge functionality, powerful data binding, and excellent performance with large datasets. The gridview component is easy-to-use and provides great flexibility due to its rich client-side API. dhtmlxGrid supports different datasources, including XML, JSON, CSV, JS array, and HTML table. Since v1.6 grid data can be loaded from custom XML format.

Editions :

  • Standard - available for free download (to use under GPL).
  • Professional - contains additional features (with examples) which are not present in Standard edition. Delivered under Commercial and Enterprise licenses.

Features Pro Edition :

  • Loading XML from String
  • Frozen columns
  • Smart Rendering
  • Paginal Output extension
  • Merged cells
  • Simultanious Update of Database (dhtmlxDataProcessor)
  • Clipboard support
  • Export\Import from CSV

Ressources :

7. treeTable

by Ludo van den Boom

ActsAsTreeTable - Displaying a directory structure.

ActsAsTreeTable - Displaying a directory structure.

treeTable is a plugin for jQuery, the ‘Write Less, Do More, JavaScript Library’. With this plugin you can display a tree in a table, i.e. a directory structure or a nested list. Why not use a list, you say? Because lists are great for displaying a tree, and tables are not. Oh wait, but this plugin uses tables, doesn’t it? Yes. Why do I use a table to display a list? Because I need multiple columns to display additional data besides the tree.

Features:

  • Unobtrusive
  • Branches collapsing and expanding
  • Unlimited tree depth

Ressources:

8. Ext.ux.Livegrid

by Thorsten Suckow-Homberg

Livegrid Drag & drop

Livegrid Drag & drop

Livegrid Sorting and Options

Livegrid Sorting and Options

The Ext.ux.Livegrid component is a user extension that’s build upon the Ext JS Framework and more specificaly extends Ext.grid.GridPanel. The component allows to read chunks of data from an underlying storage (common use case: a database) without the need of paging. Means: You can virtually display and scroll through a large amount of data - the grid will only render the data that comes into the viewport and will request new data for displaying if the user reached a specific cursor position/row index.

Ressources:

See Also:

Well , that closes the collection! I hope it will help you make the right choice for you next and current projects !

Related Posts

]]> http://blog.shinylittlething.com/2009/03/04/8-ajax-data-controls-and-effects-to-work-with-tables/feed/ http://blog.shinylittlething.com/2009/03/04/8-ajax-data-controls-and-effects-to-work-with-tables/ Fork me, I’m Famous http://feedproxy.google.com/~r/Moblurorg/~3/EvwzTHezk8o/ http://blog.shinylittlething.com/2009/02/25/fork-me-im-famous/#comments Wed, 25 Feb 2009 09:59:22 +0000 Nicolas Crovatti http://wp.shinylittlething.com/?p=27
Jamis Buck announced it yesterday : “I’m ceasing development on SQLite/Ruby, SQLite3/Ruby, Net::SSH (and related libs, Net::SFTP, Net::SCP, etc.) and Capistrano. I will no longer be accepting patches, bug reports, support requests, feature requests, or general emails related to any of these projects. For Capistrano, I will continue to follow the mailing list, and might appear [...]]]>

Jamis Buck announced it yesterday :

“I’m ceasing development on SQLite/Ruby, SQLite3/Ruby, Net::SSH (and related libs, Net::SFTP, Net::SCP, etc.) and Capistrano. I will no longer be accepting patches, bug reports, support requests, feature requests, or general emails related to any of these projects. For Capistrano, I will continue to follow the mailing list, and might appear in the #capistrano irc channel from time to time, but I am no longer the maintainer of these projects. I will continue to host the capify.org site and wiki for as long as they are of use to people.”

He is ceasing his popular Ruby projects and in my humble opinion, these need forks at least to maintain the code up-to-date.

“That’s entirely up to the community. If you have a neat idea for any of these, please feel free to fork the project on GitHub (see my profile page for the links to the individual projects) and release updates on your own schedule. If no one steps forward, that’s fine—I’m not asking for volunteers. But if someone feels passionately that any of these are not “finished”, and has ideas for how they could be further improved, I will not stand in the way.”

Despite my will to do so, I am still at the learning stage with Ruby, I cannot handle this for now, yet. The best I can do is to pass the word around the world.

Related Posts

  • No Related Post
]]> http://blog.shinylittlething.com/2009/02/25/fork-me-im-famous/feed/ http://blog.shinylittlething.com/2009/02/25/fork-me-im-famous/ 7 jQuery Plugins to Really Enhance Users Experience http://feedproxy.google.com/~r/Moblurorg/~3/EyBqSPH1pnw/ http://blog.shinylittlething.com/2009/02/24/jquery-plugins-to-enhance-users-experience/#comments Tue, 24 Feb 2009 15:28:42 +0000 Nicolas Crovatti http://wp.shinylittlething.com/wordpress/?p=23
Hi fellow reader of the Shiny Blog, today I am tired of seeing this blog posts schema : “[insert random number] [insert random subject] YOU WOULD LITERALY DIE FOR”.  We have an expression for this in France : “On dit qu’il y a à boire et à manger là dedans”. This approximately means that you [...]]]>

Hi fellow reader of the Shiny Blog, today I am tired of seeing this blog posts schema : “[insert random number] [insert random subject] YOU WOULD LITERALY DIE FOR”.  We have an expression for this in France : “On dit qu’il y a à boire et à manger là dedans”. This approximately means that you will actually have to filter the good from the junk yourself.

So, today I’m bringing you only high quality jQuery plugins that, and I know it, will help you to enchance your user’s experience.

I might not be aware of all the great jquery plugins out there, so as usual, if you feel that I ommited your favorite plugin please, Oh please, share your knowledge with us by leaving a comment!

Note: If you feel that these plugins look and feel seems related to Mac OS X then, it’s not a coincidence.

iconDock

by Isaac Roca

iconDock

iconDock is a jQuery JavaScript library plugin that allows you to create a menu on your web like the Mac OS X operating system dock effect one.

It is based on the Google X menu, an approach that Google did to create this effect on the web.

Ressources :

Simple Controls Gallery

by Dynamic Drive

Simple Controls Gallery

Want to display images as an automatic slideshow that can also be explicitly played or paused by the user?

Simple Controls Gallery rotates and displays an image by fading it into view over the previous one, with navigation controls that pop up when the mouse rolls over the Gallery. Lets take a look at the script’s set of features:

  • Displays images either as an automatic or manual slideshow, with the image faded into view over the previous. A Navigational Panel slides up when the mouse rolls over the gallery to play, pause, or step through to a specific image within the gallery.
  • In automatic mode, set the number of cycles before the script stops rotating.
  • Each slide consists of an image that can be hyperlinked.
  • Each slide can have a description associated with it. When defined, a Description Panel slides down from the top of the gallery showing the description.
  • The gallery supports persistence of the last viewed image via session cookies, so going away then coming back to the gallery calls up the last viewed image within a browser session.

The images within the Gallery should all be the same size for best results.

Ressources :

jGrowl

by Stan Lemon

jGrowl

jGrowl is a jQuery plugin that raises unobtrusive messages within the browser, similar to the way that OS X’s Growl Framework works.

Ressources :

Flip!

by Luca Manno (@roncioso)

Flip!

Flip is a plugin for jquery that will flip your elements in four directions.

Browser Compatibilty

  • Firefox 2+ (Linux, Windows, Mac OSX)
  • Internet Explorer 6+ (IE8 beta2 included, yeah)
  • Safari (Mac OSX, Windows)
  • Google Chrome (Windows)
  • Opera (Linux, Windows)

Ressources :

seekAttention

by James Padolsey (@jamespadolsey)

seekAttention

The “seekAttention” plugin gracefully get’s your users attention by fading out a definable area but leaving the target element (the element which is seeking attention) un-faded and thereby focusing the users attention on it.

The definable area (to be called “container” from this point forward) can be the entire page or any element which surrounds the target element and the colour which overlays the container can also be defined by you.

Ressources :

FancyBox

by Janis Skarnelis

FancyBox

Simple jQuery plugin for fancy image zooming

Features:

  • Automatically scales large images to fit in window
  • Adds a nice drop shadow under the zoomed item
  • Groups related items and adds navigation through them (uses preloading)
  • Can display images, inline and iframed content
  • Customizable through settings and CSS

Ressources :

Select-to-slider

by Scott Jehl

The purpose of this plugin is to allow for the jQuery UI Slider plugin to be generated using progressive enhancement. The plugin scrapes the data from a select element and generates a jQuery UI Slider in its place, acting as a proxy to the select element (regardless of whether it is still visible, or hidden from the user). This means you can use the jQuery Slider plugin alongside other input elements in a form and submit or serialize the form as if the slider is not even there. This also allows the slider to work with our without javascript since the select element can be used if the slider is unavailable.

Ressources :

Related Posts

]]> http://blog.shinylittlething.com/2009/02/24/jquery-plugins-to-enhance-users-experience/feed/ http://blog.shinylittlething.com/2009/02/24/jquery-plugins-to-enhance-users-experience/ Essential Web-Based tools for JavaScript Developers http://feedproxy.google.com/~r/Moblurorg/~3/gZyakyj-b28/ http://blog.shinylittlething.com/2009/02/23/essential-web-based-tools-for-javascript-developers/#comments Sun, 22 Feb 2009 23:48:57 +0000 Nicolas Crovatti http://wp.shinylittlething.com/wordpress/?p=19
Here is a list of extremely handy online tools that you can’t live without as a JavaScript developper. I found myself using them extensively over the last years while pesting about lack of clue about them before. Maybe you know a part or all the tools presented here, but if a single reader find a [...]]]>

Here is a list of extremely handy online tools that you can’t live without as a JavaScript developper. I found myself using them extensively over the last years while pesting about lack of clue about them before. Maybe you know a part or all the tools presented here, but if a single reader find a new tool I will consider my task completed.

I might not be aware of every tools around here, so if you know any online tools that you find handy or interesting please, I urge you to share it with us by leaving a comment on this post!

Javascript beautifier

by Einar Lielmanis

I rarely used this one. However John Resig made an interesting use of it to reverse engineer a Genetic split testing algorithm written in javascript.

Source :

JavaScript Regex Generator

by Tavs Dokkedahl

If you are not familiar with Regular Expressions the following tool is a good helper as well as an awesome way to learn them!

Source :

JSLint

by Douglas Crockford

“JSLint is a JavaScript program that looks for problems in JavaScript programs.”

This quote from the documentation say it all. This is the most complete online javascript “validator”. It comes with an heavy amount of options to satisfiy all you posible needs.

Source :

Javascript Compression Tools

The following site brought to us by Vance Lucas offers both, Minification and Packing for your javascript files. Those methods respectively created by Douglas Crockford and Dean Edwards are widely used now that the client side exprerience revolution as become more and more important, javascript libraries too, increased their weight. To save your bandwidth and your users one, please, compress your javascripts !

Update : This tool will also combine multiple uploaded files into one to save HTTP requests as well.

Sources :

To finish this article I would like to thank all these people for giving us such great applications!

Related Posts

]]> http://blog.shinylittlething.com/2009/02/23/essential-web-based-tools-for-javascript-developers/feed/ http://blog.shinylittlething.com/2009/02/23/essential-web-based-tools-for-javascript-developers/ Online Tools for Web Designers, The essential List http://feedproxy.google.com/~r/Moblurorg/~3/SFh08UjnGNk/ http://blog.shinylittlething.com/2009/02/20/online-tools-for-web-designers-the-essential-list/#comments Fri, 20 Feb 2009 17:18:17 +0000 Nicolas Crovatti http://wp.shinylittlething.com/wordpress/?p=17
1. Squidfingers / Patterns Set of 158 seamless background patterns free for download! 2. COLOURlovers Find design inspiration with thousands of palettes and color schemes to fall in love with. Influence color trends by rating, commenting and sharing. 3. Typetester The Typetester is an online application for comparison of the fonts for the screen. Its primary role is to make [...]]]>

1. Squidfingers / Patterns

Squidfingers / Patterns

Set of 158 seamless background patterns free for download!

2. COLOURlovers

COULOURlovers

Find design inspiration with thousands of palettes and color schemes to fall in love with. Influence color trends by rating, commenting and sharing.

3. Typetester

The Typetester

The Typetester is an online application for comparison of the fonts for the screen. Its primary role is to make web designer’s life easier.

4. Color Scheme Designer 3

Color Scheme Designer 3

5. Favikon

Favikon

Upload images, crop them, and create favicons for free!

6. AjaxLoad

AjaxLoad

Ajax loading gif generator.

7. FontStruct

Build, Share, Download Fonts the social way.

8. Tiled backgrounds designer

bgpatterns

Just small useful tool to create patterns. Experiment with pictures, colors, textures and transparency to get best result.

9. Lipsum

Lipsum

Lipsum generator

Related Posts

  • No Related Post
]]> http://blog.shinylittlething.com/2009/02/20/online-tools-for-web-designers-the-essential-list/feed/ http://blog.shinylittlething.com/2009/02/20/online-tools-for-web-designers-the-essential-list/ 6 Image Manipulation Plugins for jQuery You Should Know About http://feedproxy.google.com/~r/Moblurorg/~3/Q4-ZSU3MOQY/ http://blog.shinylittlething.com/2009/02/20/image-manipulation-jquery-plugins/#comments Fri, 20 Feb 2009 15:00:13 +0000 Nicolas Crovatti http://wp.shinylittlething.com/wordpress/?p=11
Hi, In the past few months, I bookmarked some interesting jQuery plugins or usages to deal with image manipulation, editing or effects. Today I’m sharing this list with you. 1. jQZoom Evolution JQZoom is a javascript image magnifier built at the top of the popular jQuery javascript framework.jQzoom is a great and a really easy to use [...]]]>

Hi, In the past few months, I bookmarked some interesting jQuery plugins or usages to deal with image manipulation, editing or effects. Today I’m sharing this list with you.

1. jQZoom Evolution

JQZoom is a javascript image magnifier built at the top of the popular jQuery javascript framework.jQzoom is a great and a really easy to use script to magnify what you want.

Visit JQZoom

2. InnerFade

InnerFade is a small plugin for the jQuery-JavaScript-Library. It’s designed to fade you any element inside a container in and out.

These elements could be anything you want, e.g. images, list-items, divs. Simply produce your own slideshow for your portfolio gallery or advertisings. Create a newsticker or do an animation.

Visit InnerFade

3. Wilq32.RotateImage

JQuery plugin to rotate images made in pure Javascript + HTML5 Canvas element

Visit Wilq32.RotateImage

4. Jcrop

Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.

Jcrop

Visit Jcrop

5. maxImage

This plugin will resize and scale targeted images to their max width according to the browser and some simple specs.

// Example usage
$(document).ready(function(){
  $('img.widthmaximage').maxImage({
    verticalOffset: 91,
    horizontalOffset: 490,
    maxFollows: 'width'
  });
});

Visit maxImage

6. jParallax

jParallax turns a selected element into a ‘window’, or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse, and, depending on their dimensions (and options for layer initialisation), they move by different amounts, in a parallaxy kind of way.

Visit jParallax

If you think I ommited any interresting jQuery Image plugin please feel free to leave it in the comments section !

Related Posts

]]> http://blog.shinylittlething.com/2009/02/20/image-manipulation-jquery-plugins/feed/ http://blog.shinylittlething.com/2009/02/20/image-manipulation-jquery-plugins/ I know now a dead language http://feedproxy.google.com/~r/Moblurorg/~3/fGkYzsTRafo/ http://blog.shinylittlething.com/2009/02/15/i-know-now-a-dead-language/#comments Sun, 15 Feb 2009 11:24:37 +0000 Nicolas Crovatti http://wp.shinylittlething.com/wordpress/?p=9
As Ryan Stemkoski recently stated in a blog post, Microsoft ASP is now dead. Thanks to my extremely sharpened sense in detecting living-dead programming languages, I switched to PHP about seven years ago. Related Posts No Related Post ]]>

As Ryan Stemkoski recently stated in a blog post, Microsoft ASP is now dead.

Thanks to my extremely sharpened sense in detecting living-dead programming languages, I switched to PHP about seven years ago.

Related Posts

  • No Related Post
]]> http://blog.shinylittlething.com/2009/02/15/i-know-now-a-dead-language/feed/ http://blog.shinylittlething.com/2009/02/15/i-know-now-a-dead-language/ 10 Years of programming http://feedproxy.google.com/~r/Moblurorg/~3/WSOBwlpavSA/ http://blog.shinylittlething.com/2009/01/22/10-years-of-programming/#comments Thu, 22 Jan 2009 11:05:39 +0000 Nicolas Crovatti http://wp.shinylittlething.com/wordpress/?p=3
Oh, hi… Let me introduce myself. My name is Nicolas Crovatti, I am a self taught developer and easily distracted by shiny things. This site, is my very own Shiny Thing and distracts me from my other activities. A shiny thing in my opinion ranges in order of importance from anything to new programming languages [...]]]>

Oh, hi… Let me introduce myself. My name is Nicolas Crovatti, I am a self taught developer and easily distracted by shiny things. This site, is my very own Shiny Thing and distracts me from my other activities. A shiny thing in my opinion ranges in order of importance from anything to new programming languages (new to me at least). This site is my playground. I am learning a brand new programming language, Ruby and the Rails framework for instance.

Over the years I developed various personal websites. My first (Frontpage generated HTML junk does not count!) was a portal (buzzword from the previous millennium) named Genius-line.com; back in 1999, web hosting was not cheap especialy when you were interested in learning ASP v3.0 and had no spare cash. As a matter of fact, this was a huge sacrifice (not counting my time) in the name of what I was already calling my Passion.

Genius-line.com provided basic web stat analysis for friend’s websites using javascript and ASP to gather informations and log everything into a MS Access database. This application gave an idea to my my boss in a ShopBot Start up, and this tool evolved into a complete reporting/billing system to track leads to our customer’s products.

At the beginning, it was powered by ASP and MS Access, the database quickly grew up and we had to migrate the back end to SQL server, and then a few months later, to Oracle because of poor speed performance.

Then, one night in 2000, out of fucking nowhere, came PHP. Web hosting became cheaper, in fact, it became free at a huge price: uncontrolled advertising was automatically injected in your pages.

Back to PHP, I started to learn this language (v3.0 at that time) by creating a developer’s community called Gencoding.com. The editorial content and targeted audience where mainly french speaking people. Meanwhile I was also learning Perl, so I was hosting both PHP and Perldoc mirrors on my domain as part of my effort to contribute to these beloved languages. Gencoding.com’s community members were mainly friends and co-workers. The site itself, despite some nice features like online helpers who were registered members and developers available for a chat on ICQ (Most popular chat system at that time) to help others newbies, a nifty shoutbox and a karma system for posts, only lasted one single year because of domain renewal procrastination.

The Shiny thing had shattered.

In 2001, I totally ported the reporting system at my job to PHP and MySQL and was very excited to do so as PHP offered various new and therefore shiny extensions. Graphics in the old version of the reporting system was made of images tags organized by table cells.

 100%
 - --- ---
 | | | | | <-- Transparent gif
 | --- | |
 | |#| ---
 | |#| |#|
 | |#| |#| <-- Colored
 | |#| |#| 1px image
 | --- ---
 |________________________ _ _ _
 0 1 2 3 ... etc

One of these extensions was (and still is) GD. Coupled (or not) with JPGraph I made a step forward into graphic’s generation.

I just love graphics. They are colorful and therefore, Shiny.

In 2002, I managed to learn the dark arcana called Linux. I did not learned ALL the Linux you fool, but big enough to feel myself comfortable to host my own web site and services.

* Sudden flashback *

Over the past several years, I installed many linux distributions. My first try was a disaster. I totally lost my windows 95 install. That experience kept me away from linux for a few months. Finally in 95 or 96 I managed to successfully install a RedHat 4.0 distribution. I had to downgrade my graphic card in order to run AfterStep on X but no matter, IT WORKED. I could do *almost* everything I could already do with Windows but, almost was not enough to stick with it. You know, Games and Internet Explorer were essential applications that I couldn’t live without.

A Bernard Madoff’s failure sized numbers of linux installations later, Debian hooked on me. I guess Linux’s user interface improvements and installation process easing along with personal evolving and self documentation about linux’s and *nix systems potential and spare hardware were the major factors why I switched.

2002 was also the year of my Do It Yourself Shiny thing.

Counter-clan.net, the domain name says it all. A full featured CounterStrike community site with clan rankings, clan ladder, Game servers informations, and so on.

It never happened.

Not shiny anymore CounterStrike was. After several years of almost complete dedication to this game, the impulse to create the Counter-clan.net masterpiece failed me.

Nevermind Counter-clan.net became my homepage. Here is a quote from the welcome page :

Welcome to the Counter-Clan Network! Actually this site is a multi-purpose-web-site, I mean you may find not strictly Counter-Strike related content (I love this sentence). In other words, it’s a personnal homepage with a nice domain name. :)

Here is a link to web-archive.org : http://web.archive.org/web/20020604090613/http://www.counter-clan.net/

I created various interesting things hosted on my good old AMD Duron @800mhz! Here’s a list for my own record (Remember, you are visiting my shiny thing):

Counter Spy

Perl CGI that queried Counter Strike servers for various informations like players, scores or free slots. Note that the CGI was a port of a functionality of LazVegaz my IRC bot written in Perl that haunted efnet for years.

IMDb PHP Class

My first OpenSource project. An interface that permitted visitors to search the imdb site from your own site, display summary informations and casting about movies and saves results along with poster into mySQL for caching purpose. Fun with Binary Large Object field and regular expressions.

Fellow developpers found this project interesting and were involved in creating plug-ins and adding new features for various popular CMS like PostNuke, PHPNuke and Xoops.

As part of these developers, Greg Allan aka Adam Baum, co-founder and lead developer of PostNuke who died on June 16, 2002 in a motorcycle accident who ported IMDb PHP Class to PostNuke.

The project has been closed shortly after I received a notice from a dude at IMDB.com who was not aggree with me about advertisements stripped from content. Or something like that.

Webalizer patch

This patch was mainly an aestethical update to the popular Webalizer web stat analysis software. It mainly consisted of CSS support to skin Webalizer.

Various guides

Since CVS was the FOTY, as part of imdb php class, I proposed a cvs server for involved developers. This guide was a mini Quickstart Howto about using CVS.

I was very proud of my box uptime! I can’t remember exactly how much it was: web-archive.org states 98 days but I’m fairly sure it was a 3 numbers figure starting with 2 before the Teh Blackout.

Teh Blackout

In 2003, like I just stated, my server was running really well! I even was hosting my own smtp server while struggling with spam and Procmail. Then on summer 2003, I was on a trip in Berlin, Germany. Even if a one-week trip away from my long time running box seemed trivial, the Murphy’s Law stabbed me in the back.

I was checking once a day my sites stats and new forum’s posts from a cyber coffee near my hotel till the moment it couldn’t even respond to ping requests.

I knew later when back home what happened. Server’s aging motherboard and hard drives couldn’t handle the hit. My two years of personal work had been defeated by a single capricious thunderstorm. And mainly the fact that I never, even thought about backing-up anything, you know, all was so steady … Linux … Steady … Uptime …

Lesson learned.

[ insert random morpg addiction during 2004 ]

I guess I had to take a new breath.

In 2005, I tried to follow the blog way of life. My first blog was created that year, and was about me. I did not find enough to tell about this subject and stopped writing about a month after launch.

2006 was the year of new geographical location, new job, new projects to work on. Nothing I can expose here.

Over 2007 and 2008, I started moblur.org

Moblur.org was my second blog. I purchased a dedicated hosting for this one because I wanted to talk about what I know best: programming languages.

And I did well. I was writting about a subject and developed it in a “Workshop” with proof of concept and more in-depth explanations.

From these posts, an idea came to me, building a favicon archive. That has never been done yet; that was useless so I found it to be necessary. I started the crawler coding in PHP5 backed up by a Postgresql database.

I quickly organised various cron jobs to manage my crawler’s instances. Database and filesystem started to grow really big, so I had to ask for help to my fellow colleague Phil concerning PostgreSQL indexes strategies. And then, when all was running flawlessly, teh Shiny faded.

When I stoped the hosting contract for moblur.org the 250GB web partition was almost full and the database was 9GB big. I learned a lot about web crawling and large scale web applications from this experiment.

For instance, I had to find a smart way to store a huge number of little favicon files (some were not that little and easily broken the 10 megs line). I first saved them by using reverse fqdn here is an example for www.shinylittlething.com/favicon.ico :

com.shinylittlething.www.ico

That was cool, I could easily find all icons related to a specific domain name but it was flawed. What about millions of files in a single folder ? System Management became harder above 10k files since standard bash commands failed to deal with such large list.

I then recalled Sourceforge directory structure for users’ home organisation in their shell environment.

When I first noticed this, I was like: OMG, how dumb they are to create sub-directories named of single letters that occurred to be the first couple username letter?! /home/users/n/c/ncrovatti/ lol!

Several years later, I finally understood.

Huge amount of files are easier to manage when split in small chunks. I promptly created the bash script to create such directory structure and another to sort already existing files.

This directory structure gave me the opportunity to enhance my backup system while still allowing alike navigation.

In 2009, I’m now hitting the 10 years experience mark. I’m still really glad with the career that chooses me. I’m still passionate and learning a huge amount of new techniques and improvements everyday, the nature of technologies is to be a constant evolution. That hints me that I am still *far* to be bored.

So far my friend… Despite my bad english, you have read this self-centred article till the end; I just have to consider you as a friend for this mark of interest.

See you my friend, see you in another 10 years after 20 years of shiny distractions and way sooner in my next article “The Genesis of a developper”.

I couldn’t safely close this article without thanking zejulio for the invaluable help he gave me by fixing my english.

Trully yours,

Nicolas Crovatti.

Related Posts

  • No Related Post
]]> http://blog.shinylittlething.com/2009/01/22/10-years-of-programming/feed/ http://blog.shinylittlething.com/2009/01/22/10-years-of-programming/