CSS3PIE

Web programmers are a diverse group of people, meaning that the way one thinks is entirely different from another. We all have our styles, our practices, our points of view, so no two programmers are the same. However, go talk to any programmer, even 100 of them, and they will all agree on one thing: IE needs to die. With all the new technologies being discovered and created, all of the new browsers (Chrome, Firefox, Safari, Opera) have been really good about keeping the fire under their feet and keeping up with the game, but IE is the world's worst about trending. For instance, say you wanted to add a border radius, gradient color, and a box-shadow to a box:

If you are currently in any of the newer browsers, you can see that the right box is rendering perfectly. Sadly, for those using IE, these boxes look exactly the same. This is because IE is waaaay behind when it comes to CSS3, especially for those still running anything below IE9, which is over half the market. Well for us programmers, who tend to want it to be equal all the way across the board, I give you this: CSS3PIE. CSS3PIE is a script file that is saved as an htc, that gives the ability for IE8 and older to understand CSS3.

http://css3pie.com/

JSLint

Nothing makes a page more user friendly and visually appealing than the addition of javascript to your website. This includes anything from dropdown menus, to gallery slideshows, to pulsing colors, you name it, javascript probably has something for that. Now lets say you wanted to take the reigns this time and write your own custom javascript to do something that these pre-built files are just lacking. Kudos to you, first off, cause you are on the right track to being the best programmer you could be. I would like to offer you a tool that will help you on your way to building this file, called JSLint. As we all know, when it comes to debugging code, you can easily program yourself into a corner, which has the potential to make you quit your project and give up! Well JsLint extends a helping hand to assist you along the way. JSLint is an online system that allows you to take the code that you are working on, paste it in a text box, and it will run tests on it to make sure it is going in the right direction, and keeping your coding techniques in check at the same time. You have many different options to choose from to customize the way the program combs through your provided code, and in turn it will output any errors that it sees in your scripting. Anything from syntax errors to logic errors, it certainly is a helpful tool to let you test function by function so you dont end up building a huge file with an equally huge amount of errors imbedded in it. But it doesnt just stop there! Say you only have a small bit of javascript code that you just pasted in a HTML page, because it was too small to have its own file, or you only wanted it on one page. JSLint will scan that too! Not only will it look through all the js inside <script> tags, it will also scan your html as well for any issues that would interfere with your script and give coding advice on your HTML coding style as well. As far as CSS goes, it is still in the beta stage, but feel free to try it out, you never know what kind of help it might give to you, but i would suggest another tool that i will describe in my next post

http://www.jslint.com/

SASS - Syntactically Awesome Stylesheets

Most of you all know, that programming a website becomes easier and easier with every project done. But no matter what, styling that site always becomes a challenge...Making things fit, scaling divs properly, font-size, colors, stacking, etc, etc. It all become very hectic, and in the midst of worrying about getting that design up to meet a deadline, the last thing you want to have to worry about is some stupid ';' or closing } with every style declaration! especially when you have a 2000 line style sheet, you don't want to have to traverse the entire code just to find where you forgot the semicolon that is breaking all the code. This is where SASS comes into play. SASS is an interesting approach at styling your sites because they do away with all the unnecessary syntax that you have to constantly worry about or end up forgetting to tack on. All you have to make sure you do is have a two-space indention where the style declarations go under the selector it belongs too and, viola! It works all the same. Here is an example that they show on their site:

table.hl margin: 2em 0 td.ln text-align: right li font: family: serif weight: bold size: 1.2em	table.hl { margin: 2em 0; } table.hl td.ln { text-align: right; } li { font-family: serif; font-weight: bold; font-size: 1.2em; }

The code on the left is the way SASS is set up, notice how you don't have to worry about curly braces or semicolons, just always indent when desired, and what follows becomes a child of the selector you just typed. For multiple demos and more info on how to implement this into your site, visit their website.

http://sass-lang.com/

Adobe Shadow

Here is a nice, sexy addition to your web design arsenal. Its called Adobe Shadow, and its Adobe's stand alone way of helping you make the best designs for websites possible. With shadow, you can attach all of your devices (iphone, ipad, android) to your computer at once, and after launching shadow along with google chrome, the magic begins. So think back to the last site you built that was cross-compatible. You remember making a change to the css or html, hit refresh on your device, and what do you know, the changes aren't reflected on the screen! Thank you browser caching, you saved the day!! We all know how much of a pain it is to reset the cache on your mobile devices, and shadow saw fit to create a solution. Included in the software, you have the ability to click one button, and it resets the cache to not only your desktop browser, but also to all the devices connected to shadow, all at the same time. Now if that isn't fancy enough for you, shadow also provides you with the ability to refresh all the browsers at one time, saving you the same old routine of refreshing all of them, one at a time, especially with having to unlock your iphone/ipad, put in the pass-code, then hit refresh. Still want more? You got it! Another great feature that is included is screenshots, yeah that's right, screenshots. You click the option and it takes a screenshot of all the devices view windows, and saves it to your desktop computer for side by side analysis. Now last but not least, we all know how much easier debugging our html/css code can be, and ever since firebug has been around, it has been a lot easier. Wouldn't it be nice if you would have those options for your mobile devices? Adobe thought so too, and that is what they gave. You have the ability to open up a mock window of your device that is plugged in, and debug the code, very specific to the device's view window, capabilities, etc. In my opinion, this is definitely a piece of software that is needed by every designer/developer. And why not, its FREE!

http://labs.adobe.com/technologies/shadow/

YUI: Tabview

The second component that is worth mentioning out of YUI's library is Tabview. Tabview is a quick and easy code addition that can give you the ability to provide a wide variety of content to the user all on a single page without the page getting unnecessarly too long. What tabview does is shows your content in "tabs", which are like content boxes stacked on top of each other, with the little tab sticking out the top to let you know what is in that particular box. Think of it as looking into a filing cabinet. A filing cabinet is filled with tons of those folders that have the little tab sticking out the top where you write what is in the folder. Its the same concept. Each tab on top is a link that, instead of taking you to a new page, it swaps out the current content with the new content that is linked to that tab you just clicked.

You have multiple choices in how to render this component onto your page. You can make the setup yourself using a format of the following:

      <div id="tabview">
         <ul>
             <li><a href="#foo">foo</a></li>
             <li><a href="#bar">bar</a></li>
             <li><a href="#baz">baz</a></li>
         </ul>
         <div>
             <div id="foo">foo content</div>
             <div id="bar">bar content</div>
             <div id="baz">baz content</div>
         </div>
    </div>

By passing the id of the wrapping div (in this case "tabview") to the tabview instance, it will automatically add the class names and .js to this markup, and after a little css (whether you choose to write the css yourself or import YUI's skin sam css), your tabview widget will be up and running on your site, ready for you to populate. For more info on different strategies and more documentation, visit the tabview site.

http://yuilibrary.com/yui/docs/tabview/

YUI: Autocomplete

Over the next few posts, i will delve into some of the widgets and utilities YUI has to offer for the everyday JavaScript developer. Autocomplete is a great addition to any website that you build because it gives the user an easier way to use a search bar to find a specific spot on your site that they are there for. Nothing will frustrate someone exploring your website more than having to click through multiple levels of pages to find the specific content they originally came for. You have to keep in the mindset that the average user today has absolutely zero patience and wants everything they request to be delivered to them as soon as possible, so provide them with a widget that will do just that.

Autocomplete is very simple to use, and comes along with excellent documentation on how to implement this nifty functionality to your site. It can bring in many different types of datasources to query on (whether it be an array that you declare yourself, if the list isnt long, or a table in a database that includes 5000 rows of words and phrases that pinpoints every nook and cranny of your site). By simply providing the location of this source (if it is a file or query object, you will need to use YUI's IO utility, which i will cover in my next post), the input node for the autocomplete instance to attach itself to, and a few preexisting formatting options for you to choose from, you can have an autocomplete search tool up and running on your site, and in turn, keeping your visitors happy.

http://yuilibrary.com/yui/docs/autocomplete/

Yahoo! User Interface (YUI)

Today, I am going to share a bit about Yahoo User interface, or YUI. When it comes to jazzing up your website, it certainly helps to slap up some JavaScript to your content to make the information you are providing or selling really pop out to the consumer. However, most beginner web developers have a hard time when it comes to using JavaScript, and they usually stick to basic html driven sites. With the introduction of YUI, it has made the addition of JavaScript incredibly easy for the average developer to spruce up their sites. With their in-depth examples and tutorials, along with user guides and access to the files in a git hub, adding this functionality to your site is a piece of cake. I would definitely recommend checking our their site to see if there is anything that they provide in their components that will give your site that needed spark to drive your visitors through the roof!

yuilibrary.com/projects/yui3/