Javascript, HTML and CSS playground
I have just come across a very interesting website that just simply blew my mind away. It's called JsFiddle it's a virtual playground for Web Dev's to try out snippets of code.
JsFiddle comes with a variety of preloaded Javascript libraries for every taste, it also come with an Ajax echo backend so you can dive right into hacking code. You can also check out some very cool pre loaded examples.
It has a very slick and intuitive interface, thre distinct boxes for js, Css and HTML code to be placed and a fourth box where the results of the executed code will be displayed.
And something this handy wouldn't be complete if it didn't count with a very cool sharing and embed options to share your hacks with your programming peers.
Happy coding and enjoy!
Resetting your CSS Styles
All HTML elements are treated differently among browsers and have default predetermined CSS styling applied to them. These predefined styles are among the most common culprits when it comes to cross browser styling issues.
So it's a very practical and recommended practice to reset these styles to prevent obscure quirks to appear in our designs. Applying this technique will remove and neutralize the inconsistent default styling among A-grade Browsers providing a solid foundation on which to create great web designs.
When it comes to resetting your CSS styles I've come across things of this nature:
* {
padding: 0;
margin: 0;
border: 0;
}
I don't recommend using this technique it's to aggressive and breaks many default properties on some HTML elements.
The technique I use to reset my CSS styles is based on the Eric's Meyer technique which he also based from YUI's reset.css.
So enough said lets dive into the code:
html, body, div, span,
applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dd, dl, dt, li, ol, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
line-height: 1;
font-family: inherit;
text-align: left;
vertical-align: baseline;
}
a img, :link img, :visited img {
border: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
ol, ul {
list-style: none;
}
It's almost a copy of the same rules used by Eric but with 2 small changes, I removed the property of font-size:100% which I find conflicts with the default behavior when using the Header HTML tags ( <h1> ..<h6>) and also removed the styling rules for block quotes which I have found doesn't work quite right with multilingual website designs.
Enjoy.