Here is a nice little feature that allows you to download a resource by simply adding a download attribute to an a element, as shown below.

In this case, since the download is added, the file will be downloaded instead of navigating to the href.

Keep in mind this only currently works in Chrome, but will hopefully be added to other modern browsers in the near future.

One great way to add a unique look to your website is by using custom fonts. There are many ways to do this by using images, javascript, etc...

Google Fonts is an easy way to add custom fonts to your site.

The Google Fonts API is compatible with the following browsers:

• Google Chrome: version 4.249.4+
• Mozilla Firefox: version: 3.5+
• Apple Safari: version 3.1+
• Opera: version 10.5+
• Microsoft Internet Explorer: version 6+

To get started, navigate to www.google.com/fonts/.

Once on the page, you'll notice filtering features on the left. You can filter by thickness, slant, width, Serif, Sans Serif, ...

Today we are going to create a responsive layout using media queries, you can download the source files here.

While there are many ways to go about doing this, I am going to focus on 4 distinct layouts.

• One for desktop and Tablet Landscape
• One for Tablet Portrait
• One for Mobile Landscape
• One for Mobile Portrait

To begin we are going to create a wrapper and give it a width of 1000px, this will be the default size for Desktop and Tablet Landscape.

 .wrapper {  
   background: none repeat scroll 0 0 #efefef;  
   box-shadow: 0 0 5px rgba(0, ...

I posted some free backgrounds and colors a few weeks ago, I have added a few new backgrounds, and a modern color palette.

Enjoy!

You can Download the files here.

Today we are going to look into how we can enable styling of HTML5 elements in early versions of Internet Explorer by using HTML5 Shiv.

What is HTML5 Shiv

According to Wikipedia, "HTML5Shiv is a JavaScript workaround, discovered by Sjoerd Visscher, to enable styling of HTML5 elements in versions of Internet Explorer prior to version 9, which do not allow unknown elements to be styled without JavaScript."

How does it work

First we need to target Internet Explorer borwsers before version 9. To do this, copy the code below, and place it in the head tag of your page.

We ...

Today I am going to show you a simple way to bring a viewer to your web site back to the top of a page, with an animation, using jQuery.



You can download the source files, here.

To start make sure your page is loading jQuery, you can do this via a local file or use one of many hosted jQuery files. In this example we are linking to a file hosted by jQuery.com.

  <script src="http://code.jquery.com/jquery-latest.js"></script>  

The second piece of code you will need is a link with a little bit of JavaScript in it, shown below:




You can ...

Today I am going to show you how to make rounded social icons with css.

You can download the source files here.

I have set this project up so that you can create many different icon sizes, border sizes, border colors, backgrounds images, background colors, and light/dark themes.

Let's start with the first large Icon:

Here is the mark-up

 <div class="circle-container extra-large">  
 <div class="box-1 stripe-2 blue-1 border-dark-grey border-10 shadow">  
  <img src="images/facebook-white.png" /> </div>  
 <p>Facebook</p>  
 </div>  

Here are the styles in detail.

 */ =========== Floats the container =========== /*  
 .circle-container {  
     float: left;  
 }  ...

I'm just wrapping up my first project using Icenium, Telerik's cloud-based IDE for creating Android and iOS apps using HTML5, CSS3, and Javascript. I must say that it's been a very enjoyable experience and I've been very impressed with the product that our friends at Telerik have created.

It's a bit unfair to do a full review of this product yet, since it's so new and still in v1. ...

In a previous post, I showed how to create JavaScript widgets in Sitefinity using shared content blocks. This enabled you to create widgets like image carousels and blog rotators on-the-fly without having to compile or deploy. It was so useful in production and we received a lot of good feedback from the community. This is why we felt it deserved to evolve more and began creating a full-fledged Widget Builder for Sitefinity!

The idea is simple… when writing a web-based widget or control for a website, you need a mixture of HTML, CSS, and JavaScript. A portion sometimes goes ...

Listen to this week's installment of "The Tablet Show" featuring Falafel CEO Lino Tadros.
 
The Tablet Show (Show 47, Released Aug. 27th, 2012 )

You'll enjoy this 10-time Microsoft MVP's take on Windows 8 development, HTML 5, JavaScript, iPad and more as Carl Franklin and Richard Campbell ask about his real world experiences developing in the mobile space. 

Our friends at SmartBear Software recently released TestComplete 9, making their already comprehensive software testing suite even better. The web based testing enhancements to TestComplete 9 will knock your socks off. You can now create a single test that can be run in any of the latest browsers and and evaluate virtually any cutting edge technology, including HTML 5. TestComplete 9 allows your tests to easily manage browser tabs, handle JavaScript dialogs, conditionally handle browser types and quickly locate and work with any object on the page, even if that object is from any of a multitude of supported third ...

Another teaser to show where we are going with all the possibilities with the new Falafel Dashboard for Sitefinity 5.1

Please feel free to comment here to request more features, input, must haves, etc…

 

We continue to be very excited about the new release of 5.1 and the world of possibilities it opened to build robust widgets and modules in MVC with the razor syntax

 

JavaScript has been turning up everywhere. With nearly every desktop and mobile web browser on the planet coming equipped with a JavaScript engine, the language has become the de facto standard for client side code. There is just no better way to guarantee your audience can access the full feature set of your application.

Although JavaScript has typically been regarded as a client side technology, in-roads have been made in other areas in recent years. Frameworks like node.js are powering major server side applications and JavaScript can even be found querying some of the major NoSQL databases.

Here at Falafel ...

Our good friends at Telerik were invited to show off Kendo UI in the exclusive Google Developer Sandbox at Google I/O 2012. At Falafel Software, we were especially excited about one of Telerik’s demonstrations; a web-based photo booth application that leverages Kendo UI and new cutting edge HTML5 features available in Google’s updated Chrome browser, codenamed “Canary”.  This web application uses the Media Source API and other early stage HTML5 elements to access your webcam, analyze a constant stream of video data to detect and track multiple faces, overlay a number of props and effects (think funhouse mirrors, ...

Polling AJAX is tricky. If the next interval triggers before the last AJAX request is complete, your app is doomed!! This creates a domino effect where your queue for requests fill up faster then it can complete. Your queue will NEVER finish... similar to an infinite loop.

In light of this, you should never put AJAX into a setInterval function. A clean, more robust option is this:

In case you haven't heard.. JAVASCRIPT IS MAKING A COME BACK!! And it is not the same JavaScript you fiddled around with in the pre-AJAX era. It has become reborn with the help of HTML5, mobile, and even Windows 8 (see Create your first Metro style app using JavaScript). Understanding JavaScript is becoming essential and can no longer be dismissed as a "weakly-typed, toy language with no compilation checks," but instead as a versatile, dynamic, cross-platform language.

Before jumping into code and learning JavaScript, I want to give some background of its purpose. It is important to know ...

With mobile getting all the love lately, I thought I would give back to the desktop community. I showed how to build a mobile web app using Sencha Touch 2 and MVC. Now I will do the same with a desktop web app using Ext JS.

Below is a miniature demo consisting of products, categories, and manufacturers. It is a real MVC-licious Javascript app written in Ext JS 4.1:

---

Let us dissect this app into the following sections: routing, controllers and views. I will leave out models and stores because they are pretty self-explanatory when you see the ...

In my previous post, I showed how to build a mobile web app using jQuery Mobile. Its use of HTML5 data attributes and CSS classes made it pretty straightforward, especially if you are used to building regular websites. The architecture of your mobile website would have to be based on the server-side though, whether this be ASP.NET MVC, PHP, Ruby, etc. Then I came across Sencha Touch which changes this mentality to a more progressive approach… client-side applications!

First let me give you a bit of background about Sencha. These are the guys who made Ext JS, a ...

The mobile revolution has created a plethora of new platforms and languages. It is rare to see old technologies successfully reaching new grounds together. A good example of this is .NET MVC and jQuery Mobile. The blends of Razor, HTML, CSS, and jQuery make mobile a very familiar territory, a package that makes things quick, easy, and beautiful!

Setup the Project

The first thing you want to do is fire up Visual Studio and create a new MVC 3 Internet Application. This will give you membership, templates, and sample content to your website with a single click. Our goal from here is to extend it ...

It seems that Microsoft has positioned itself in the Google-Apple race. Now with Microsoft using Nokia hardware and Google using Motorola hardware, Apple has some serious competition in the future. It worked out that Steve Jobs quit while he was ahead; those are some monsters to be pitted against. So these are the mega-enterprises that will be revolving around "devices and the cloud" for at least another decade (who knows?), but what does this mean for the web?

//Build has pulled the curtains on pushing .NET to a second-class citizen in the future. At best, .NET will turn into a ...