weboideas

To see what is going on in those minified, one-line javascripts…

These instructions are the rather verbose, but hopefully easy enough to follow, steps to build a new Linux server using Varnish, Nginx, W3 Total Cache, and WordPress, to build a WordPress blog on a Amazon Micro server (or equivalent), all costing under $15 a month.

A useful tool from Google to compile and minimize JavaScript code…

It is also part of Page Speed tools of Google…

Official Desc: The Closure Compiler is a tool for making JavaScript download and run faster. It is a true compiler for JavaScript. Instead of compiling from a source language to machine code, it compiles from JavaScript to better JavaScript. It parses your JavaScript, analyzes it, removes dead code and rewrites and minimizes what’s left. It also checks syntax, variable references, and types, and warns about common JavaScript pitfalls.

 It provides:

• An ADO.NET profiler, capable of profiling calls on raw ADO.NET (SQL Server, Oracle, etc), LINQ-to-SQL, EF / “Code First”, LightSpeed and a range of other data access scenarios
• A pragmatic Step instrumentation that you can add to code you want to explicitly profile

MVC Mini Profiler was designed by the team at Stack Overflow. It is in production use there and on the Stack Exchange family of sites.

Welcome to our advent calendar. Every day in december 2011 (until the 24th) we will post new cool HTML5 and CSS3 techniques here. These techniques may not work yet in all browsers because they are part of not quite finished specs. This also means that you may not be able to view all of the examples, but we’ll always tell you in which browser it actually does work.

With this post we have highlighted the 50 plugins that, we feel, are not only the most useful and popular from the this year, but also the most ground-breaking. To help you find a specific solution, we have split all of the plugins into the following categories: Form & Validation Plugins, Plugins for Responsive Layouts, Sliders, Galleries & Carousels, Modal Window Plugins, Mobile Specific Plugins, Web Typography Plugins, Animation Plugins and finally everything in-between.

Hitting a database every few seconds is expensive. Hitting Redis every few seconds (even for thousands of concurrent users) is no problem at all.

Nice tutorial about Redis and its usage in various areas…

Nice tips for software developers…

Celery is an asynchronous task queue/job queue based on distributed message passing. It is focused on real-time operation, but supports scheduling as well.

These are some common use cases:

• Running something in the background. For example, to finish the web request as soon as possible, then update the users page incrementally. This gives the user the impression of good performance and “snappiness”, even though the real work might actually take some time.
• Running something after the web request has finished.
• Making sure something is done, by executing it asynchronously and using retries.
• Scheduling periodic work.

And to some degree:

• Distributed computing.
• Parallel execution.

My note: It can be useful in Django projects…

More information on Queues: http://decafbad.com/blog/2008/07/04/queue-everything-and-delight-everyone

Some nice <hr> styles by Chris Coyier. They work on Chrome but not in IE8 (as expected)

body {
   padding: 50px;    
}
hr {
   margin: 50px 0;   
}
hr.style-one {
    border: 0;
    height: 1px;
    background: #333;
    background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc); 
    background-image:    -moz-linear-gradient(left, #ccc, #333, #ccc); 
    background-image:     -ms-linear-gradient(left, #ccc, #333, #ccc); 
    background-image:      -o-linear-gradient(left, #ccc, #333, #ccc); 
}
hr.style-two {
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
}
hr.style-three {
    border: 0;
    border-bottom: 1px dashed #ccc;
    background: #999;
}
hr.style-four {
    height: 6px;
    border: 0;
    box-shadow: inset 0 6px 6px -6px black;
}
hr.style-five {
    border: 0;
    height: 0;
    box-shadow: 0 0 10px 1px black;
}
 
<!— Gradient color1 - color2 - color1 —>
<hr class=”style-one”>
<!— Gradient transparent - color - transparent —>
<hr class=”style-two”>
<!— Double-color dashed line —>
<hr class=”style-three”>
<!— Single-direction drop shadow —>
<hr class=”style-four”>
<!— Cloud —>
<hr class=”style-five”>

A definitive API reference for JavaScript.

Each reference page contains detailed descriptions and examples you can modify and run to quickly learn by doing.

Worth noting… 

You should DEFINITELY read the original article but for a quick shot you can check my notes from the article:

• Add “window.” as a prefix to your event handler function calls or global variables like this:
  Ex.
  <div onclick=”window.localName()”> to prevent name collisions…
• When you plan to use a feature use object-detection to sniff for that exact feature (if possible). Do not assume presence/absense of one feature implies presence/absense of another feature…
• Test your code at least in Firefox, Chrome or Safari, Opera and IE.
• When using a new feature (even standard ones) that is not universally implemented, make sure to test in a browser that doesn’t implement it to see its behavior.
• If you want to user vendor prefixed CSS features add the unprefixed version of the feature to the end of list iff this unprefixed version is implemented at least one of the browsers.
  Ex. 
  .pretty-element {
    -vnd-make-it-pretty: sometimes;
    make-it-pretty: sometimes;
  }
• Pass a validator to ensure all your “>” characters are present… Otherwise your code in browsers with HTML5 support can lead to unexpected situations.
• If you try using a CSS property to do something you want, but it has no effect, remove it.  It might start doing something you don’t expect in the future.

DHTMLX Touch is a free JavaScript mobile framework for building HTML5-based web apps for mobile and touch devices as stated in their web page. 

• It includes an online skin builder for skin customizations. (Of course, you can modify the CSS anytime…)
• It can be integrated into most of the main IDEs providing autocomplete feature…
• It has an acceptable range of supported platforms (Chrome,Safari,FF,IE8+,Opera…). Also desktop browser can run the apps…
• Also there is the Online Visual Designer Tool that you should take a look!

I haven’t used it but after using jQuery Mobile I must say that these HTML5-based web apps are the future and these frameworks makes it enjoyable…

Thanks to:@umutm

I liked this blog a lot… You can find very usefull information when you dig into it…

Very stylish and well described animated CSS3 button development tutorial. 

References: 
http://decodering.com/
http://tyb.tumblr.com/

Webfaction is recommended by some of the people I follow.. I haven’t used it yet but it seems reasonable…