UFO MUFFIN - Productive articles, videos and inspirational content in general http://ufomuffin.com links, articles, web development, startup tools, educational, inspirational Tue, 31 Jan 2012 01:42:25 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Learn HTML and CSS. Well designed tutorial http://ufomuffin.com/learn-html-css-a-well-designed-tutorial/ http://ufomuffin.com/learn-html-css-a-well-designed-tutorial/#comments Tue, 31 Jan 2012 01:40:36 +0000 admin http://ufomuffin.com/?p=1012 Really liked the way this HTML5/CSS3 tutorial is heading. Everything is super clear with corresponding examples.

]]> http://ufomuffin.com/learn-html-css-a-well-designed-tutorial/feed/ 0 Javascript Microframeworks http://ufomuffin.com/microframeworks/ http://ufomuffin.com/microframeworks/#comments Sun, 29 Jan 2012 09:19:41 +0000 admin http://ufomuffin.com/?p=1007 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.

]]> http://ufomuffin.com/microframeworks/feed/ 0 HTML Kickstart – If you know how to type HTML & CSS This is for You http://ufomuffin.com/1001/ http://ufomuffin.com/1001/#comments Sun, 29 Jan 2012 08:25:11 +0000 admin http://ufomuffin.com/?p=1001 HTML KickStart includes everything you need to rapidly create website layouts – things like slideshows, menus, flexible grids, image placeholders, buttons, and more – saving you a ton of time so you can produce faster and make more money.

]]> http://ufomuffin.com/1001/feed/ 0 CoffeeScript solves your Javascript problems http://ufomuffin.com/coffeescript-solves-your-javascript-problems/ http://ufomuffin.com/coffeescript-solves-your-javascript-problems/#comments Thu, 26 Jan 2012 09:56:03 +0000 admin http://ufomuffin.com/?p=990 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.

]]> http://ufomuffin.com/coffeescript-solves-your-javascript-problems/feed/ 0 Stitches An HTML5 sprite sheet generator http://ufomuffin.com/stitches-an-html5-sprite-sheet-generator/ http://ufomuffin.com/stitches-an-html5-sprite-sheet-generator/#comments Tue, 24 Jan 2012 10:56:19 +0000 admin http://ufomuffin.com/?p=986 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.

]]> http://ufomuffin.com/stitches-an-html5-sprite-sheet-generator/feed/ 0 CSSrefresh – Automatically refresh CSS files http://ufomuffin.com/cssrefresh-%e2%80%93-automatically-refresh-css-files/ http://ufomuffin.com/cssrefresh-%e2%80%93-automatically-refresh-css-files/#comments Tue, 24 Jan 2012 10:48:22 +0000 admin http://ufomuffin.com/?p=982 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.

]]> http://ufomuffin.com/cssrefresh-%e2%80%93-automatically-refresh-css-files/feed/ 0 What do you want to learn today? http://ufomuffin.com/what-do-you-want-to-learn-today/ http://ufomuffin.com/what-do-you-want-to-learn-today/#comments Fri, 16 Dec 2011 23:45:49 +0000 admin http://ufomuffin.com/?p=976 Great site to get started with web development tutorials.

]]> http://ufomuffin.com/what-do-you-want-to-learn-today/feed/ 0 HTML, CSS, JS Instant documentation http://ufomuffin.com/html-css-js-instant-documentation/ http://ufomuffin.com/html-css-js-instant-documentation/#comments Wed, 07 Dec 2011 05:03:04 +0000 admin http://ufomuffin.com/?p=972 Very handy online web development documentation

]]> http://ufomuffin.com/html-css-js-instant-documentation/feed/ 0 Totally Free Invoicing by TradeShift http://ufomuffin.com/100-free-invoicing/ http://ufomuffin.com/100-free-invoicing/#comments Fri, 02 Dec 2011 03:13:00 +0000 admin http://ufomuffin.com/?p=968 http://ufomuffin.com/100-free-invoicing/feed/ 0 Free Icons http://ufomuffin.com/free-icons/ http://ufomuffin.com/free-icons/#comments Wed, 19 Oct 2011 18:58:50 +0000 admin http://ufomuffin.com/?p=965 Get 200+ free “Reflection” icons, well suited for mobile apps and Web sites. It’s a simple no-cost download.

]]> http://ufomuffin.com/free-icons/feed/ 0 Free CSS3 Course http://ufomuffin.com/free-css3-course/ http://ufomuffin.com/free-css3-course/#comments Wed, 29 Jun 2011 00:01:00 +0000 admin http://ufomuffin.com/?p=962 http://ufomuffin.com/free-css3-course/feed/ 0 Free CoffeeScript Book http://ufomuffin.com/free-coffeescript-book/ http://ufomuffin.com/free-coffeescript-book/#comments Fri, 17 Jun 2011 18:32:56 +0000 admin http://ufomuffin.com/?p=952 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.

]]> http://ufomuffin.com/free-coffeescript-book/feed/ 0 Learning JQuery http://ufomuffin.com/learning-jquery/ http://ufomuffin.com/learning-jquery/#comments Sat, 11 Jun 2011 04:04:49 +0000 admin http://ufomuffin.com/?p=946 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.

]]> http://ufomuffin.com/learning-jquery/feed/ 0 Pure CSS alternatives to Javascript http://ufomuffin.com/pure-css-alternatives-to-javascript/ http://ufomuffin.com/pure-css-alternatives-to-javascript/#comments Thu, 19 May 2011 21:48:47 +0000 admin http://ufomuffin.com/?p=938 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

]]> http://ufomuffin.com/pure-css-alternatives-to-javascript/feed/ 0 Easy zoom in a picture with jQuery http://ufomuffin.com/zoom-in-a-picture-with-jquery/ http://ufomuffin.com/zoom-in-a-picture-with-jquery/#comments Sun, 15 May 2011 10:56:13 +0000 admin http://ufomuffin.com/?p=918 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>
]]> http://ufomuffin.com/zoom-in-a-picture-with-jquery/feed/ 0