CSS Validation Service

Check Cascading Style Sheets (CSS) and (X)HTML documents with style sheets

CSS Validation service by W3C. If the CSS validates then there is no difference in rendering in different browsers.

Typically, JavaScript files loaded with the tag, block the download of resources as well as the rendering of elements within the web page. So, even though most modern browsers tend to support the parallel download of JavaScript files, image downloads and page rendering still have to wait for the scripts to finish loading. In turn, the amount of time a user has to wait for the page to display increases.

This is where asynchronous loaders come in to play. Using one of several different load techniques, they remove the inherient blocking nature of a script, which allows for parallel downloading of both the JavaScripts and resources while not interfering with page rendering. In many cases, this can reduce – sometimes drastically – page load times.

Asynchronous loading of scripts on a webpage.

Ajax:Quickly submit a form in JQuery using serialize

I am sure you often do a form submission via Ajax and more easily using JQuery. But did you know using a simple method called serialize in JQuery form submission could be more easier. Serialize method converts the form elements & values in an encoded string and submits to the form action. This helps reducing overhead of grabbing values of the form fields and then submitting it, since serialize method grabs the value of the elements placed in the form automatically.

In this tutorial we are going to discuss this step by step, first of all let’s built a HTML form -

The above is a usual HTML form  and now let us see how do we submit it using JQuery and the serialize method.

$.post("submit.php", $(".myform").serialize());

 

In the above code snippet we are serializing the form(having class “myform”) elements and submitting it using JQuery Ajax via post method. We can even serialize some input elements within the form but it’s always better to serialize all form elements and filter them at the server end as required. Above serialize method will send the following serialized string to the server.

a=name&b=email&c=city&d=state

This method of submitting form definitely saves lot of time when you are developing your web application. This also takes care of encoding the form values making it a better method than the conventional form submitting using Ajax.But you should note that this method only serializes form elements which are currently active. For eg. the radio button or checkboxes if not selected will not be serialized. Also notice that the submit form button is also not serialized.

source digimantra

Snippet Manager is an extremely lightweight (no setup required) freeware utility that you can use for managing your code snippets in a variety of languages. Snippet Manager works with VB, C++, C#, Java, SQL, ASP, PHP, HTML, even COBOL, Assembler and Fortran (37 languages are supported). You can also use Snippet Manager to manage plain old ASCII text data.

Snippet Manager features a powerful search tool that is geared towards developers. You can use regular expressions or simple search criteria to find the exact code you need, when you need it, based on the language, category, dependencies, keywords or the actual code that you are looking for.

Another useful feature is the ability to publish your snippets on the Internet and optionally password protect your code. All you need is an FTP server to host snippets for your company or for anonymous users over the Internet (your choice).

Best of all, Snippet Manager is secure. The software does not "phone home" for any reason. You are virtually guaranteed that the software will never quit working or that your source code will ever be distributed without your permission.

While working on tweaking a notification box design, I wanted to include the element’s heading in a folded ribbon element. I also wanted to avoid using any images and just use CSS. Mostly to try my hand at using generated content and some CSS that I don’t normally get to use.

The basic HTML for all the following example is:

1. <div class="admonition">
2.     <div class="admonition-title">Note</div>
3.     <p>The content goes here</p>
4. </div>

Creating the heading

First I needed to style the box and position the heading element:

1. .admonition {
2.     position: relative;
3.     padding: 23px 10px 22px;
4.     margin: 20px;
5.     background: #fffdf2;
6.     border: 2px solid #ffcb00;
7.     font-family: Helvetica, Arial;
8. }
9. .admonition-title {
10.     position: absolute;
11.     top: -10px;
12.     left: -10px;
13.     padding: 4px 8px;
14.     background: #df9c00;
15.     color: #fff;
16. }

 

This creates elements that look like:

The container box needs to have relative positioning as all the heading and fold element will need to be positioned.

Adding the fold and other effects

Now I need to add the folded element that sits ‘behind’ the heading. Since the fold will be a triangle, I can use border tricks to create a triangle and apply that to an :after pseudo element. I’ll also add some shadows for additional depth:

1. .admonition {
2.     position: relative;
3.     padding: 23px 10px 22px;
4.     margin: 20px;
5.     background: #fffdf2;
6.     border: 2px solid #ffcb00;
7.     font-family: Helvetica, Arial;
8. }
9. .admonition-title {
10.     position: absolute;
11.     top: -10px;
12.     left: -10px;
13.     padding: 4px 8px;
14.     background: #df9c00;
15.     color: #fff;
16.     -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
17.     -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
18.     box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
19. }
20. .admonition-title:after {
21.     content: '';
22.     display: block;
23.     height: 20px;
24.     width: 8px;
25.     position: absolute;
26.     top: 24px;
27.     left: 0px;
28.     background: transparent;
29.     z-index: -1;
30.     border-top: 45px solid #eed993;
31.     border-left: 45px solid transparent;
32. }

This creates the illusion of a folded sheet behind the heading. Its also interesting that you can create any any triangular shape by combining solid and transparent borders. A really nice benefit of this effect is it degrades well in older browsers. Browsers that don’t support box-shadow or pseudo elements get a slightly less sexy result, but they can still access and use the content.

I’ve put an example up on jsfiddle . I’m sure I’m not the first person to figure this out, but I thought it was an interesting way to create an effect with CSS, that previously would have required images.