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.
24 Jan
Drag and drop image files into the space below and click “Generate” to create a sprite sheet and stylesheet. This demo uses a couple of HTML5 APIs, and it is only currently compatible with the latest versions of Chrome and Firefox.
24 Jan
CSSrefresh is a small, unobstructive javascript file that monitors the CSS-files included in your webpage. As soon as you save a CSS-file, the changes are directly implemented, without having to refresh your browser.
16 Dec
Great site to get started with web development tutorials.
7 Dec
Very handy online web development documentation
19 Oct
Get 200+ free “Reflection” icons, well suited for mobile apps and Web sites. It’s a simple no-cost download.
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.
10 Jun
4 videos to get your started with the basic concepts of JQuery. Some of these are for intermediate developers. You will definitely find valuable information on them. I certainly did, specially the deferred concepts.
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> |
15 May
Really creative usage of the css3 effects, try to apply some of these in your designs.
2 Apr
Now that we can use CSS transitions in all the modern browsers, let’s make them pretty. I love the classic Penner equations with Flash and jQuery, so I included most of those. If you’re anything like me*, you probably thought this about the default easing options: “ease-in, ease-out…yawn.” The mysterious cubic-bezier has a lot of potential, but was cumbersome to use. Until now. Also, touch-device friendly!
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.
3 Mar
What is MySQL
1. MySQL is a open source Relational Database Management System developed by Michael Widenius and David Axmark in 1994.
2. MySQL is very popular when it comes to Web development. It is widely-used as the database component of LAMP web application software stack.
3. Source code of MySQL is available under GNU General Public License.
4. MySQL is maintained by a Swedish company MySQL AB, now owned by Oracle Corporation.
Who uses MySQL
26 Feb
If you need to spend less time designing your iphone app, check this app out. Iphone Mockup will let you
wireframe your application in a matter of seconds.
24 Feb
Great tips on using the best practice techniques to improve user interaction on your site.
Social Links