July, 2010

Sass stands for syntactically awesome style sheets. Sass is a CSS3 extension.

Why use Sass? It brings variables, nested rules, mixins (see image), and many, many other features to the table.

There are two formats of Sass files: .scss and .sass. Scss files are essentially CSS files with the load of features from sass.

Sass files, on the other hand, combine the features with a syntax that requires very few keystrokes.

It is somewhat reminiscent of Turbine we covered just yesterday.

Sometimes we don’t want the user to write something. An example would be apostrophes in a field that goes to a MySQL database.

InputNotes is a jQuery plugin that tells the user not to write bad stuff.

The plugin works both ways. You can tell the user to type e.g. only numbers. It also supports CSS styling.

You can use this extension for form validation, or for anything else when a precise input by the user is required.

1. AndEngine – The free 2D OpenGL engine for Android
   We all have had a passion for developing video games, and the luckiest of us still have it.This library took me back to 2004 when I miserably tried to replicate Worms on Delphi. Luckily, this mobile engine seems somewhat simpler than DelphiX–see the dev blog for kick-ass examplesof AndEngine in use!




2. 10 Top WordPress Security Plugins
   There shouldn’t be any questions as to why this list made it into this Mashup. An essential resource for anyone willing to protect themselves against spam… and much more.




3. 5 Amazing Examples of Animation Using CSS3
   The title says it all; from rocket ships to a “The Matrix” animation, this wrap-up can make us believe that making games with Flash could become outdated in a few years.
   
   




4. 45 jQuery Based WordPress Plugins And Tutorials
   
   Almost everyone likes jQuery.There is, however, even more than meets the coding hand in jQuery–the library can be used together with CMS’s like WordPress with great results.




5. Improve your jQuery – 25 excellent tips
   We get it, this Mashup is jQuery biased. See #4 for the explanation.

   But honestly, these tips will help any jQuery developer make the most out of jQuery  - perhaps the finest JavaScript library around.
   
   




6. 50 Tileable and Seamless Pattern Sets
   This list of patterns is amazing – every web designer will find something in handy here. They are all free, of course, and come in web formats (.psd, .jpg, .png).

Turbine is a collection of PHP tools that enhances and simplifies the use of Cascading Style Sheets.

For example, Turbine turns this:

#foo
color:red
div.foo, div.bar
margin, padding:4px
border-radius:4px

into this:

#foo {
color: red;
}
#foo div.foo, #foo div.bar {
margin: 4px;
padding: 4px;
-moz-border-radius: 4px;
-khtml-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}

Or, simply put, you can type less and do more CSS with Turbine.

Turbine also tries to fix your code to work for as many browsers as possible.

Furthermore, Turbine also allows making plugins for it with PHP.

MediaElement.js is a java script that enables using the <video> and <audio> tags on any given browser.

The problem with the <video> tag is that it doesn’t work on older browsers.

Furthermore, video formats like H.264 aren’t supported on some browsers.

Luckily, mediaelement.js enables graceful degradation to flash or other media if the browser doesn’t support video’s type, just so you can use the <video> tag without fear.

Alongside enabling H.264, this plugin also enables embedding .FLV and .WMV videos via Flash and Silverlight respectively.

Poshy Tip is a jQuery extension which makes tooltips.

Although we have covered tooltips in the past, this one is a lot more serious plugin with the huge amount of features it has.

PoshyTip includes 7 different color schemes for tooltips; it displays tooltips relatively to forms and inputs; supports asynchronous page loading; can load flickr feeds; has fade-in effects; and much, much more.