20
A javascript module framework starter
This is the following article to part 1 on javascript patterns.
A namespace to rule them all
This is a small javascript framework that I use for starting my javascript/jQuery project. I think it could be most beneficial for those coming from libraries like jQuery. Dojo being quite expressive on how to work with it, and Mootools and Prototype being a bit more structured.
A small note, I used jQuery in the framework because of the AOP plugin (and because I mainly work with jQuery), you can erase any jQuery reference easily in less than 30 seconds .
What this framework aims to do:
- Easy to understand
- Modular
- Each module will heritage a set of tools and each module can be instantiate
- One namespace
- Can apply tests or unit test out side of the…
22
jQTouch HTML5 database api extension
If you want to dive in mobile website and you are a good jQuery developer, you will love jQTouch. It’s one of the best mobile web framework out there.
However, one thing I found it was missing, was some database api. In webkit you now have access to one database per website address. Think of it as a better cookie. You could for example easily create a To do list with this feature.
Webkit is touchy about its database
You don’t mess with the webkit database, if you do, there is a good chance it will crash. Building this script, I never saw so much crash in Safari! so be careful using it. This script creates an abstraction of the webkit database api, it will enable you…
18
Best front-end workflow within a production team
Optimizing front-end teams’ workflow is hard, there is always something that comes in the way, but it is important to at least try to optimize the front-end work. It could save your team considerable time over a project. Front-enders could work more efficiently together and within the production team.
Let’s take a look at front-enders’ typical relationship within a production team: (take it lightly)
First, you got designers that, generally, do not really like front-end developers because they do not render exactly there graphic design, and you got front-enders that “hate” designers because they are doing complicated design, costing too much money and time to render to HTML.
Back-end developers also have a general tendency to be a bit careless with HTML, which, not visible at first…
8
posAbsolute CSS Framework, website starter kit
Web development companies have a bad habit of doing inconsistent websites depending on which developer coded the website. It is one of the reason we have so much back-end framework. However front-end teams are a bit more in the dark. While there is basic guidelines for CSS and JS, there is generally less management by team leaders. It becomes a big gray zone where inconsistencies often become the norm. This is what this framework aims for, empowering your front-end developers with a tool to make their JS and CSS code more coherent.
Why use a CSS framework
Better quality and coherence coding inside a front-end team
Preset CSS classes, know where your going with highly reusable classes
A collection of some of the best jquery scripts
A solid cross browser…
2
Display your tweets in real time, a basic twitter API use.
Recently I began optimizing social networking on Position Absolute, which lead me to the Twitter API. I wanted to display tweets in the top corner of the site. However I did not want to display my last tweet, but display my tweeting in real time.
Real time ?
This way I do not alienate frequent users with tweets pop-up. When you click on the appearing tweet box, it redirects you to my Twitter account.This is only a small JavaScript plug-in, so it unfortunately resorts to intervals, after 10 seconds it does an API call, after it happens every 30 seconds. By this time if I tweet something, it will appear to everyone on the site.
This may not seem much, but over time I think it may pay…
2
jQuery fade and slide toggle plugin
The jquery slidetoggle() is great, but one thing I always thought it was missing is some opacity fading in the sliding animation. When I was coding this iteration of position absolute I wanted this kind of animation so I went there and coded it.
This is a very small plugin, but I still find the effect cooler than a regular sliding.
Get this to work
First add dependencies in your head document,
-
<script src="js/jquery.js" type="text/javascript"></script>
-
<script type="text/JavaScript" src="js/jquery.fadeSliderToggle.js"></script>
In your dom ready add something like this:
-
$(document).ready(function() {
-
$(".fadeNext").click(function(){
-
$(this).next().fadesliderToggle()
-
return false;
-
})
-
})
Customizations
You can change the animation speed or the easing easily (you need jQuery UI for a non-default easing).
-
$(".tagBtn").click(function(){
-
$(this).next().fadesliderToggle({
-
speed:300,
-
easing : "swing"
-
})
-
return…
18
jQuery “flash like” menu
I was looking at a flash website last night and saw some nice menu effects. I was pretty sure this was easy to re-create in jQuery, so I started coding, and about 2 or 3 hours later, there it was, a nice little jQuery plugin. I know this will not be useful in most website as it take a huge chunk of space, but it is still pretty cool to know you could use this in a more experimental jQuery website.
When you rollover one item of your menu, the font-size expand to 225%, the color fade to yellow and the other items are giving more space to the hovered item, when you roll out it will take its place back in the menu.
Get this…
10
Control your website with hand gestures (javaScript and Flash)
Disclaimer: This is a small proof of concept, I would not recommend using it in your website, this is just for fun.
With netbook and laptop becoming more popular we have new tools opening to us, like the integrated webcam and microphone. There is unfortunately no easy way, even in HTML5, to stream your webcam to the web, however Adobe Flash can do it. The idea is to use simple motion gesture to move a JavaScript images library. In theory you could use this to switch back and forth archive pages and etc.
As said in the disclaimer, this is clunky, I did not get around of discarding your head movement, which is a problem. To get this to work you need to move your hand as…
30
A jQuery inline form validation, because validation is a mess
When it comes to form validation, it’s hard to have a versatile solution that works with every form. Figuring out how to display errors is not a simple task. This is something I tried to remedy with this script. When an error needs to be displayed, the script creates a div and positions it in the top right corner of the input. This way you don’t have to worry about your HTML form structure. The rounded corner and shadow are done with CSS3 and degrade well in non compliant browsers. There is no images needed.
Download the source code View demo
(With ajax submit)
View demo
(With overflown hidden parent)
View demo
Please report issues in the google code project
More informations about how to integrate it with the asp.net MVC framework
Coming in v1.8
Window…
28
Feature your products with Jquery
When you have to put forward 2 or 3 products on your web page, you always ask yourself : How I’m gonna offer an interesting view of these products? Well this script can help a bit. Using Jquery it can animate 2 or 3 products creating an interesting way of displaying them.
When you click on a product, the product image will zoom out to see a featured close-up shot and a description. When you click on another product, the last opened product will zoom back and the new clicked product will zoom out. Here’s an example so you can understand better:
Get this to work on your website
First you will need to use my HTML structure. Don’t forget to put a height and a…
Articles
Some Tweets
- looked at bell and videotron for a tv network solution, full of hidden rules, went with shaw direct @ShawDirect_News , honest service
- interesting post about Cross-domain localStorage http://bit.ly/9dfW8F
- back to work after 2 week of renovation on my house, glad to be back at doing javascript..
- traded my computer for this http://bit.ly/cCKVbr for 2 week, want my computer back..
- kind of old, bit I like it http://www.thereisnopagefold.com/
- I really have a love/hate relationship with the E texteditor, so good but so bad at the same time
