29 Jan
Micro-frameworks are definitely the pocketknives of the JavaScript
library world: short, sweet, to the point. And at 5k and under,
micro-frameworks are very very portable. A micro-framework does one
thing and one thing only — and does it well. No cruft, no featuritis,
no feature creep, no excess anywhere.
26 Jan
Sam Stephenson speaking at the Future of Web Apps London 2011 runs through how to write cleaner and faster JavaScript with CoffeeScript and where this is leading in the future.
17 Jun
Found this nice coffeescript book through the podcast of Jason Seifer (javascriptshow.com). This was my first reference to coffeescript and I have to say that is really easy to learn and makes you write super clean code. Coffeescript compiles down to Javascript and the syntax was inspired by Ruby and Python.
19 May
A list of good alternatives if you want to substitute Javascript with CSS. They’re not meant to replace them for better execution but as an alternative if you want to get something very similar by just coding in CSS. Maybe you want to fall back to CSS for those users that have Javascript disabled.
via. speckyboy
15 May
A simple jQuery script that zooms into an image after 1 second.
check out the demo here
THE CSS
We define a masked area of 200×200 and an absolute position of the main picture to create
a viewport
1 2 3 4 5 6 7 8 9 10 11 12 13 | #window { width: 200px; height: 200px; overflow: hidden; position: relative; } #window img { width: 500px; position: absolute; top: -150px; left: -300px; } |
THE HTML
1 2 3 | <div id="window">
<img src="http://ufomuffin.com/files/etc/tree.jpg">
</div> |
THE JQUERY
We wait a second using delay(1000) and then we use the animate function from jQuery to change the width of the image creating a zoom effect. Notice that at the same time we’re going to the positions top: -150 and , left: -300 to position the viewport in a specific region.
1 2 3 4 5 6 7 8 | $(document).ready(function() { $('#window img').delay(1000).animate({width: 800}, 800, function() { $(this).css({ top: '-150px', left: '-300px' }) }) }); |
The Whole Thing
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | <!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Jquery Zoom / UFOMUFFIN.COM</title>
<style>
#window {
width: 200px;
height: 200px;
overflow: hidden;
position: relative;
}
#window img {
width: 500px;
position: absolute;
top: -150px;
left: -300px;
}
</style>
</head>
<body>
<div id="window">
<img src="http://ufomuffin.com/files/etc/tree.jpg">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#window img').delay(1000).animate({width: 800}, 800, function() {
$(this).css({
top: '-150px',
left: '-300px'
})
})
});
</script>
</body>
</html> |
23 Mar
If you’re new to JQuery, please take the time to read this article by Mike Gleason. He takes a different approach explaining the foundations, how it works (visual approach), compares it to other frameworks, and he even goes in to what AJAX is. Not your usual JQuery tutorial, recommended.
23 Feb
1 Jan
An excellent presentation from Douglas Crockford, including 4 videos
more videos
12 Dec
Eloquent JavaScript is a book providing an introduction to the JavaScript programming language and programming in general.
28 Sep
Drag the bookmarklet to your bookmarks bar or a tab and start having some fun on other pages too! (via erkie.github) 
4 Jan
A very simple method to obtain the href value from an unordered list, using JQUERY. (more…)
Social Links