/
index.html
241 lines (222 loc) · 16.7 KB
/
index.html
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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Emphasized Insanity - Drew Douglass: The 20 Most Practical and Creative Uses of jQuery</title>
<script type="text/javascript" src="/javascripts/application.js"></script>
<link rel="stylesheet" type="text/css" href="/stylesheets/application.css">
<link rel="alternate" type="application/rss+xml" title="Emphasized Insanity - Elad Meidar" href="http://feeds.feedburner.com/EladOnRails" />
</head>
<body>
<div id="wrap">
<div id="header">
<img src="/images/500.png" alt="Emphasized Insanity" />
<div id="summary">
<h1><strong>EmphasizedInsanity</strong> at <strong>/life
</strong></h1>
<h2>undefined method `Sanity` for #<EladMeidar::Developer:0x12e0670></h2>
<ul>
<li class="first"><strong>file:</strong> <code>
brain.rb</code></li>
<li><strong>location:</strong> <code>instance_missing
</code></li>
<li class="last"><strong>line:
</strong> 1</li>
</ul>
</div>
<div class="clear"></div>
</div>
<div id="backtrace" class='expanded'>
<h3>BACKTRACE</h3>
<p><a href="#" id="expando"
onclick="toggleBacktrace(); return false">(condense)</a></p>
<p id="nav"><strong>JUMP TO:</strong>
<a href="#get-info">GET</a>
<a href="#post-info">POSTS</a>
<a href="#cookie-info">COOKIES</a>
<a href="#env-info">ENV</a>
</p>
<div class="clear"></div>
<ul id="backtrace-ul">
<li class="frame-info framework">
<code>
No, this is not a real Sinatra error :). <br/>
This is the personal homepage of Elad Meidar, a web developer and an entrepreneur specializing in Ruby on Rails. I hang around in Israel, and i am currently having the best time of my life over at <a href="http://fiverr.com">Fiverr.com</a><br/>
I am a proud member of <a href="http://www.railsbridge.org">RailsBridge</a>, Helping new <a href="http://www.railsmentors.org/users/185">Rails developers</a> get into our world and also contributed a few <a href="http://contributors.rubyonrails.org/contributors/elad-meidar/commits">Patches</a> to the Ruby on Rails core.
</code>
</li>
<li class="code framework">
</li>
</ul>
</div> <!-- /BACKTRACE -->
<div id="get">
<a id="homepage_link" href="/">Back to Posts List</a>
<h3 id="get-info">GET</h3>
<h3 class="post_title"><a href="/2009/01/drew-douglass-the-20-most-practical-and-creative-uses-of-jquery">Drew Douglass: The 20 Most Practical and Creative Uses of jQuery</a></h3>
<div class="single_post">
<ul class="webroundup"><li> <br />
<h4>James Padolsey Color Switcher</h4><div><img alt="Screenshot 1" src="http://nettuts.s3.amazonaws.com/175_creativeUses/james.jpg" style="height: 257px; width: 406px;" /></div><p>One of our sporadic writers, James Padolsey, has a nice feature on his website. A “customize” bar in the top right portion of the screen allows you to change the background color of the header.<br />
<a href="http://www.james.padolsey.com/">Visit Site</a><br /></p>
</li>
<li> <br />
<h4>Dragon Interactives jQuery Navigation</h4><div><img alt="Screenshot 1" src="http://nettuts.s3.amazonaws.com/175_creativeUses/img1.jpg" style="height: 123px; width: 340px;" /></div><p>These guys are pretty much Gods of web design, and their site really proves it. Just have a look at the custom jQuery navigation they used on their homepage. Have you ever seen such a sexy navigation in your life?<br />
<a href="http://dragoninteractive.com/">Visit Site</a><br /></p>
</li>
<li> <br />
<h4>FamSpams FaceBox</h4><div><img alt="Screenshot 2" src="http://nettuts.s3.amazonaws.com/175_creativeUses/img2.jpg" style="height: 228px; width: 304px;" /></div><p>FamFamFam needed a custom lightbox like script for FamSpam (whew, say that three times). They ended up building what is now know as <a href="http://famspam.com/facebox">FaceBox</a>, which replicates the effects of lightbox, but goes above and beyond by allowing you to load in static html pages, contact forms, anything you wish really! FaceBox is now a jQuery plugin after all the demand for their script.<br />
<a href="http://famspam.com/">Visit Site</a><br /></p>
</li>
<li> <br />
<h4>Grooveshark Widget Creator</h4><div><img alt="Screenshot 3" src="http://nettuts.s3.amazonaws.com/175_creativeUses/img3.jpg" style="height: 166px; width: 337px;" /></div><p>Instead of going with a typical flash menu/control menu, Grooveshark mixed it up a bit and built a custom jQuery script to allow you to make your own music widgets; pretty nifty indeed.<br />
<a href="http://widgets.grooveshark.com/">Visit Site</a><br /></p>
</li>
<li> <br />
<h4><span class="caps">CSS</span>-Tricks Fade-In Navigation</h4><div><img alt="Screenshot 4" src="http://nettuts.s3.amazonaws.com/175_creativeUses/img4.jpg" style="height: 189px; width: 384px;" /></div><p><span class="caps">CSS</span>-Tricks, by Chris Coyier, is next up on the list with a wonderfully simple and creative jQuery navigation. When the links are hovered over, instead of immediately changing colors, jQuery is used to help the color fade slowly to the desired color.<br />
<a href="http://css-tricks.com/">Visit Site</a><br /></p>
</li>
<li> <br />
<h4>David Walsh Link Nudge</h4><div><img alt="Screenshot 5" src="http://nettuts.s3.amazonaws.com/175_creativeUses/img5.jpg" style="height: 173px; width: 351px;" /></div><p>Developer David Walsh of DavidWalsh.name implements an extremely simple to use script to give your links a little nudge on hover. The script utilizes the strong animation capabilities of jQuery triggered on hover. Check out the links in the sidebar and in the footer to see the effect in action.<br />
<a href="http://davidwalsh.name/">Visit Site</a><br /></p>
</li>
<li> <br />
<h4>CarrotCreative-Custom Sites Lightbox</h4><div><img alt="Screenshot 6" src="http://nettuts.s3.amazonaws.com/175_creativeUses/img6.jpg" style="height: 204px; width: 414px;" /></div><p>If you check out the CarrotCreative website, you will actually notice two really unique jQuery effects. Firstly, if you click on sites in the upper left, you will see a unique application of a ‘lightbox’ like effect listing their sites and icons. Secondly, if you click on any navigation links, you will notice there is no refresh, but that the new page just slides in from the right. Cool stuff!<br />
<a href="http://carrotcreative.com/">Visit Site</a><br /></p>
</li>
<li> <br />
<h4>BrightCreative Portfolio</h4><div><img alt="Screenshot 7" src="http://nettuts.s3.amazonaws.com/175_creativeUses/img7.jpg" style="height: 176px; width: 357px;" /></div><p>Another “two for one” special, Bright Creative uses an extremely subtle glow effect in their navigation that is very calming and warm. In addition, all of their portfolio pages have a tabbing effect, so their is no need for the user to refresh the page every time – thanks to <span class="caps">AJAX</span> and jQuery.<br />
<a href="http://www.brightcreative.com/portfolio/">Visit Site</a><br /></p>
</li>
<li> <br />
<h4>Incredible Login Form</h4><div><img alt="Screenshot 1" src="http://nettuts.s3.amazonaws.com/175_creativeUses/connor.jpg" style="height: 138px; width: 323px;" /></div><p>Not too long ago, Connor Zwick wrote us a nice tutorial that demonstrates exactly how to build an amazing drop-down login form.<br />
<a href="http://nettuts.com/javascript-ajax/build-a-top-panel-with-jquery/">Visit Site</a><br /></p>
</li>
<li> <br />
<h4>Application Scroller by Aviary</h4><div><img alt="Screenshot 8" src="http://nettuts.s3.amazonaws.com/175_creativeUses/img8.jpg" style="height: 167px; width: 339px;" /></div><p>It would be an insult to call this a type of ‘marquee’ (shivers uttering that word). Instead, Aviary came up with a very nice looking and functioning ‘scroller’ to showcase a lot of text in a small amount of space. Even better is that the scroller will degrade gracefully is javascript is disabled.<br />
<a href="http://aviary.com/home?v=b">Visit Site</a><br /></p>
</li>
<li> <br />
<h4>Featured Fade Effect by DesignFlavr</h4><div><img alt="Screenshot 9" src="http://nettuts.s3.amazonaws.com/175_creativeUses/img9.jpg" style="height: 171px; width: 362px;" /></div><p>DesignFlavr, known for their great sources of design inspiration, put together a simple fadeIn/fadeOut script to showcase their featured artwork and corresponding descriptions. Also, they’ve used the lavalamp plugin quite well on their main navigation.<br />
<a href="http://www.designflavr.com/">Visit Site</a><br /></p>
</li>
<li> <br />
<h4>Hv-Designs Fade In <span class="caps">RSS</span> Icon</h4><div><img alt="Screenshot 11" src="http://nettuts.s3.amazonaws.com/175_creativeUses/img12.jpg" style="height: 150px; width: 317px;" /></div><p>On the Hv-Designs homepage, you will notice the the <span class="caps">RSS</span> icon starts off as an outline/sketch of the actual image. Then, when hovered, the rss icons ‘glows’ into place.<br />
<a href="http://hv-designs.co.uk/">Visit Site</a><br /></p>
</li>
<li> <br />
<h4>Asylums Custom Scroller</h4><div><img alt="Screenshot 12" src="http://nettuts.s3.amazonaws.com/175_creativeUses/img13.jpg" style="height: 66px; width: 348px;" /></div><p>Besides being an absolutely hilarious website, Asylum has their own sweet ‘featured articles’ scrolling script. It’s hard to put a finger on why this one is so nice, but that is probably because it behaves slightly differently than most scrolling scripts. It almost seems to snap into place after you give it a click.<br />
<a href="http://www.asylum.com/">Visit Site</a><br /></p>
</li>
<li> <br />
<h4>5 Javascript Tricks Made Easy with jQuery</h4><div><img alt="Screenshot 14" src="http://nettuts.s3.amazonaws.com/175_creativeUses/img15.jpg" style="height: 156px; width: 330px;" /></div><p>Brian Reindel created a webpage showcasing 5 custom scripts you can use however you like. The article takes ideas and previous javascript techniques frequently used and utilizes jQuery to make them powerful, compact, and easy to read.<br />
<a href="http://www.reindel.com/five_javascript_tricks_jquery/">Visit Site</a><br /></p>
</li>
<li> <br />
<h4>Codas Entire Website</h4><div><img alt="Screenshot 15" src="http://nettuts.s3.amazonaws.com/175_creativeUses/img16.jpg" style="height: 166px; width: 342px;" /></div><p>Coda is well known for its amazing UI and site design. It set a fire under the jQuery plugin community by inspiring many developers to re create their page tabbing effect. In addition, they have a wonderful on hover effect on the links located in the header.<br />
<a href="http://www.panic.com/coda/">Visit Site</a><br /></p>
</li>
<li> <br />
<h4>Clark Lab Fading Effect</h4><div><img alt="Screenshot 16" src="http://nettuts.s3.amazonaws.com/175_creativeUses/img17.jpg" style="height: 151px; width: 311px;" /></div><p>ClarkLab is a well known and very successful author on <a href="http://themeforest.net/">ThemeForest</a>. If you visit his portfolio below, you will notice the large header images eventually fade to the next, showcasing all of his latest work. The fade effect is so well done and subtle, you barely notice the new image showing up.<br />
<a href="http://www.clarklab.net/blog/">Visit Site</a><br /></p>
</li>
<li> <br />
<h4>Rob Young | E is for Effort</h4><div><img alt="Screenshot 17" src="http://nettuts.s3.amazonaws.com/175_creativeUses/img19.jpg" style="height: 135px; width: 278px;" /></div><p>Designer and Art Director Rob Young used a unique idea of displaying his artwork on a simulated Mac screen. Then using jQuery scrolling effects, each new page slides into the page view as if it is being loaded on a computer.<br />
<a href="http://www.eisforeffort.com/">Visit Site</a><br /></p>
</li>
<li> <br />
<h4>Web Designer Wall</h4><div><img alt="Screenshot 18" src="http://nettuts.s3.amazonaws.com/175_creativeUses/img20.jpg" style="height: 201px; width: 414px;" /></div><p>Besides being a visually stunning website, <span class="caps">WDW</span> features some unique custom jQuery scripting to add classes to certain elements on hover. Check out the effects when the rss and navigation items are hovered over.<br />
<a href="http://www.webdesignerwall.com/">Visit Site</a><br /></p>
</li>
<li> <br />
<h4>KomodoMedia</h4><div><img alt="Screenshot 19" src="http://nettuts.s3.amazonaws.com/175_creativeUses/img22.jpg" style="height: 144px; width: 297px;" /></div><p>I’ve saved my absolute favorite site for last. First, just look at that design, it’s wonderfully unique and comforting. Using one of the most creative jQuery scripts I have ever seen, KM has a ‘foliage-o-meter’ slider where sliding it either increases or decreases the foliage and design of the theme, depending on the direction the slider is moved. For an easter egg be sure to check out the source code!<br />
<a href="http://www.komodomedia.com/">Visit Site</a><br /></p>
</li>
</ul>
</div>
<div class="clear"></div>
</div> <!-- /GET -->
<div id="post">
<h3 id="post-info">POST</h3>
<div class="clear"></div>
<div id="disqus_thread"></div>
<script type="text/javascript">
/**
* var disqus_identifier; [Optional but recommended: Define a unique identifier (e.g. post id or slug) for this thread]
*/
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://emphasizedinsanity.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript=emphasizedinsanity">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
</div> <!-- /POST -->
<div id="cookies">
<h3 id="cookie-info">COOKIES</h3>
<p class="no-data">I Don't have cookies.</p>
<div class="clear"></div>
</div> <!-- /COOKIES -->
<div id="rack">
<h3 id="env-info">ELAD ENV</h3>
<table class="req">
<tr>
<th>Variable</th>
<th>Value</th>
</tr>
<tr>
<td>LINKEDIN</td>
<td class="code"><div><a href="http://www.linkedin.com/in/eladmeidar">http://www.linkedin.com/in/eladmeidar</a></div></td>
</tr>
<tr>
<td>TWITTER</td>
<td class="code"><div><a href="http://www.twitter.com/eladmeidar">http://www.twitter.com/eladmeidar</a></div></td>
</tr>
<tr>
<td>FACEBOOK</td>
<td class="code"><div><a href="http://www.facebook.com/eladmeidar">http://www.facebook.com/eladmeidar</a></div></td>
</tr>
<tr>
<td>GITHUB</td>
<td class="code"><div><a href="http://github.com/eladmeidar">http://github.com/eladmeidar</a></div></td>
</tr>
<tr>
<td>WWR</td>
<td class="code"><div><code>{ :working_with_rails => '<a href="http://www.workingwithrails.com/person/5844-elad-meidar">http://www.workingwithrails.com/person/5844-elad-meidar</a>' }</code></div></td>
</tr>
<tr>
<td>IRC</td>
<td class="code"><div><code>{ 'irc.freenode.net' => [ '#rubyonrails', '#railsbridge', '#ruby', '#mootools' ]}</code></div></td>
</tr>
<tr>
<td>SKYPE</td>
<td class="code"><div>eladmeidar</div></td>
</tr>
</table>
<div class="clear"></div>
</div> <!-- /RACK ENV -->
<div class="stats">
<p>
<a href="http://feeds2.feedburner.com/EladOnRails"><img src="http://feeds2.feedburner.com/~fc/EladOnRails?bg=FFFFFF&fg=444444&anim=0" height="26" width="88" style="border:0" alt="" /></a>
<script type="text/javascript" language="javascript" src="http://twittercounter.com/embed/?username=eladmeidar&style=white"></script>
</p>
<p>
<script type="text/javascript" src="http://s51.sitemeter.com/js/counter.js?site=s51eizesusrulez"></script>
<noscript>
<a href="http://s51.sitemeter.com/stats.asp?site=s51eizesusrulez" target="_top">
<img src="http://s51.sitemeter.com/meter.asp?site=s51eizesusrulez" alt="Site Meter" border="0"/></a>
</noscript>
</p>
<div class="clear"></div>
</div>
<p id="explanation">You're seeing this error because I think it is funny.</p>
</div> <!-- /WRAP -->
<script type="text/javascript">
var disqus_shortname = 'emphasizedinsanity';
(function () {
var s = document.createElement('script'); s.async = true;
s.src = 'http://disqus.com/forums/emphasizedinsanity/count.js';
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
}());
</script>
</body>
</html>