Totally Free Invoicing by TradeShift
1 Dec
Archive by Author
Free Icons
19 Oct
Get 200+ free “Reflection” icons, well suited for mobile apps and Web sites. It’s a simple no-cost download.
Free CoffeeScript Book
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.
Learning JQuery
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.
Pure CSS alternatives to Javascript
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
Easy zoom in a picture with jQuery
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> |
39 Creative CSS3 uses of shadows
15 May
Really creative usage of the css3 effects, try to apply some of these in your designs.
CSS Transitions made simple
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!
A solid foundation to the basics of JQUERY
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.
Well Written Mysql Tutorials
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
Quickly design your mobile app wireframes
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.
Awesome Interactions With JQuery
24 Feb
Great tips on using the best practice techniques to improve user interaction on your site.
Tons of CodeIgniter Tutorials for Kick-Ass PHP Application
24 Feb
A great collection of CodeIgniter video tutorials that helped me a lot.
Write cross-platform Mobile Applications in HTML5!
23 Feb
- MVC
- HTML5
- JavaScript-all development cycle
- Offline support (automatic cache manifest generation)
- Rich User Interfaces
- DataProvider for local and remote storage persistence
- Internationalization (i18n)
- Open Source (MIT License)
- NodeJS based build tools (called Espresso)
JQuery 1.5 Cheat Sheet
21 Feb
jQuery 1.5 Visual Cheat Sheet is the refined and updated version of my popular jQuery Cheat Sheet. The new edition includes all the reference you will ever need for jQuery 1.5 API.
The Ultimate CSS Gradient Generator
19 Feb
The main gradient control allows you to:
» Adjust the gradient stop position by dragging the stop marker
» Adjust the stop color by double clicking on the stop marker
» Delete a stop by draggin the stop marker up or down
» Add a new stop by clicking anywhere in between the existing stop markers
Social Links