iWebInspector is a free tool to debug, profile and inspect web applications running on iOS Simulator (iPhone or iPad). You can check resources, see and change HTML & CSS, use breakpoints on JavaScript code, create charts and more just as if you were on Safari for Desktop, Chrome or Firebug.

Typography is everyone’s favorite toy in web design. One particularly fun tool that CSS gives you to play with your type is text-shadow, which seems simple enough at first but can be used to create some remarkable effects with a little ingenuity and creativity.

Today we’re going to run through several text-shadow examples that you can copy and paste for your own work.

For the images that are in a post or a static page/template page, all you have to do is, add the above CSS to the style.css file, and then remove the ‘width’ and ‘height’ properties from the < img > tag in your WordPress editor. That’s it!
But for the image that are displayed dynamically by WordPress, such as post thumbnails, the width and height needs to be removed dynamically using a function.

As I'm sure you’re all aware 'fluid images'  – which make use of max-width: 100% – require that images have no fixed width or height in order that they can scale to the size of their container. Unfortunately, WordPress automatically calculates the dimensions of images generated from the Media library and adds the corresponding width and height attributes to any <img> tags.

Sass and Compass CSS animation library based on Animate.css

The child browser allows you to display external webpages within your PhoneGap/Cordova application.

PhotoSwipe is a FREE HTML/CSS/JavaScript based image gallery specifically targeting mobile devices.

The Pagination plugin creates touch-drag navigation between separate HTML pages. Simply add this plugin to your page and link together documents via ordinary HTML anchors. The linked pages will pre-fetch, and in browsers that support touch events, you'll be able to drag between the linked pages, while desktop users can navigate with mouse or keyboard. Like all navigation in jQuery Mobile, this plugin ties into your browser's history, so bookmarking, and using the browser's back and forward buttons work as expected!

How it works: This fix works by listening to the device's accelerometer to predict when an orientation change is about to occur. When it deems an orientation change imminent, the script disables user zooming, allowing the orientation change to occur properly, with zooming disabled. The script restores zoom again once the device is either oriented close to upright, or after its orientation has changed. This way, user zooming is never disabled while the page is in use.

Introducing EnhanceJS, a JavaScript framework designed specifically to deliver a usable experience to the widest possible audience, by testing the browser to determine whether it is capable of correctly supporting a range of essential CSS and JavaScript properties, and delivering features only to those that pass the test.

jScroll is an iScroll plugin for jQuery. It works by attaching id's to any elements in the wrapper set that don't have them, and then attaches iScroll. It also keeps track of the iScroll instances in a global array, so that they can be unset easily in single-page applications (think PhoneGap apps). By default, it also uses native iOS 5+ scrolling if it's available.

SwipeView is the super simple solution to endless seamlessly loopable carousels for the mobile browser. It’s memory conservative as it uses only three elements at any given time, it’s smooth as velvet since it takes advantage of hardware acceleration, it’s bandwidth friendly with its 1.5kb minified/gzipped footprint.

Swipe is a responsive, lightweight slider with accurate 1:1 touch movement. Read more and check out the demo at swipejs.com.

In this article, we take a break from some of the more advanced ways to customize WordPress, and share some super-easy customization techniques for the WordPress Admin area.

The standard buttons provided by third parties (such as Facebook, Twitter and SoundCloud) vary in size, style and interactivity. A consistent button set could reduce a lot of that visual noise and inconsistency. Furthermore, having it in CSS format means that changing the text for certain actions would be a breeze for developers, and it also allows administrators of non-English websites to translate labels into their native languages.
The button set was designed from the beginning to require no extra markup, and the elements used are entirely the choice of the (semantically considerate) designer. All buttons are fully scalable and customizable, and they degrade gracefully on older browsers, although the aesthetics in IE 6 and 7 are admittedly inferior to image-based alternatives.

Adaptive Images detects your visitor's screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of your web page's embeded HTML images. No mark-up changes needed. It is intended for use with Responsive Designs and to be combined with Fluid Image techniques.
Why? Because your site is being increasingly viewed on smaller, slower, low bandwidth devices. On those devices your desktop-centric images load slowly, cause UI lag, and cost you and your visitors un-necessary bandwidth and money. Adaptive Images fixes that.

SlickMap CSS is a simple stylesheet for displaying finished site maps directly from HTML unordered list navigation. It’s suitable for most web sites – accommodating up to three levels of page navigation and additional utility links – and can easily be customized to meet your own individual needs, branding, or style preferences.

The general idea of SlickMap CSS is to streamline the web design process by automating the illustration of site maps while at the same time allowing for the pre-development of functional HTML navigation.

Simple Fields for WordPress let you add groups of fields to your edit post page.

Simple Fields turns WordPress into an even more powerful Content Management System (CMS).

Features and highlight
Add textboxes, text areas, checkboxes, radio buttons, dropdowns, and file browser to the post admin area
Much easier for the user than regular custom fields
Group fields together into logical groups. For example combine File + Name + Description into a an Attachments-group, that let's you add multiple files to your posts
Use "repeatable" field groups to add many any amount of field groups to a single post (great for images or attachments!)
Use drag and drop to change order of added repeatable groups
Different post types can use different field groups - actually you can even use different field groups even for same post type
Can be used on any post type, including custom post types
Nice GUI that looks like it belongs to the regular WordPress GUI

HI THERE. First of all excuse me for my bad english, second excuse me if you will find some bugs on Camera slideshow. I developed it for free, so it's not easy to find the time to work on it. If you want to help me with a donation I'll appreciate :-)

Camera slideshow is an open source project, based on Diapo slideshow (http://www.pixedelic.com/plugins/diapo, no more supported, sorry), but improved a lot. You can suggest changes or improvements if you want. You can download it and use for free, you can also include it in your projects and sell it as part of a bigger work (in this case please consider a donation).

Camera slideshow (as Diapo) is tested on new browsers, but I tried to make it compatible with the old versions of Internet Explorer too (8 and 7). But I don't think I will spend many hours to improve this feature, sorry.

Camera slideshow requires jQuery 1.4+ and other jQuery plugins are necessary if you want to use some functionalities: jQuery Easing (visit the project page) and a customized version of jQuery Mobile (visit the project page) to use Camera with mobile devices. These plugins are included in the zip you can download at the bottom of this page.

A compass extension based on ceasar css easing animation tool by @matthewlein This extension provides transitions based on the classic Penner equations from Flash and jQuery.

First things first - these demos are showing of CSS transitions, transforms (2D and 3D) and animations. Currently (January 2012), 2D transforms are available in all current browsers including IE9, transitions are available in all browsers except Internet Explorer 9 and less, while 3D transforms are in Safari, Chrome, Firefox and IE10 and up. Animations are available in Safari, Chrome, Firefox 5+ and IE10. Most examples degrade nicely, so if you are using a legacy browser you can still use a site using these, you just won't get animation. 3D transforms generally don't degrade nicely, so be careful when using them.

With the latest advances in CSS3 many of the effects that were once only achievable in Photoshop can now be replicated in CSS code, but it’s sometimes difficult to visualise the appearance of these effects when staring at a few lines of syntax. This is where CSS generators come in handy, this roundup of tools makes it easy to create the exact CSS effects you need with the help of graphical interfaces.

A Sencha style carousel plugin for jquery mobile

This wizard uses the Google Static Maps API v2. It originally used Static Maps API v1, but that API is now deprecated. Please see the upgrade guide for information on upgrading.

As with any new technology, getting started is often the hardest part.
With this frustration in mind, we have put together some of my handiest tips, tricks and code snippets related to the jQuery Mobile library.
Because this is not a full-on primer for using the library, we will skip over some of the things that become rather obvious as you get started and instead get straight to the items that become rather frustrating or troublesome.
Also be sure to let us know in the comments which snippets you found useful and of any others that you know of that can be useful.

"What do I need in a new jQuery Mobile project?". This project is meant to be a single place for developers to get started using jQuery Mobile. It includes icon files, robots.txt (and human).txt files, as well as an extensive snippets library that developers can use as reference.

download it
and it will add many window management features to most Mac applications:

This plug-in converts scss files into css files. You can set it up to automatically convert on save. By default you must manually process scss files via the Coda Plug-ins menu. You can also specify where the css files should be saved. By default they are saved next to the scss files.

Timeago is a jQuery plugin that makes it easy to support automatically updating fuzzy timestamps (e.g. "4 minutes ago" or "about 1 day ago"). Download, view the examples, and enjoy.

This document defines formatting and style rules for HTML and CSS. It aims at improving collaboration, code quality, and enabling supporting infrastructure. It applies to raw, working files that use HTML and CSS, including GSS files. Tools are free to obfuscate, minify, and compile as long as the general code quality is maintained.

Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly, particularly with the help of the Compass style library.

A Coda and SubEthaEdit syntax highlighting mode for Sass’ scss syntax

jquery-mobile-960 is a port of 960 grid to jquery mobile. It merge the flexibility of 960.gs, and the ease of jquery mobile. It aims to bring more flexibility to jquery-mobile layout and thus make it easier to use on tablets.

Recently I realized I had a problem. I’ve been coming across a lot of very useful bits of code that you can put into your theme’s functions file.
That may not sound like a problem, but it is. Because these files are tied to your theme, if you ever want to use them again on a different theme, you have to go digging around for the bits of code and then manually add them again to your new theme.
The answer, it seemed, was to turn these bits of code into simple plugins that I could easily install on any site, and of course, with any theme.

The Advanced Custom Fields plugin gives you the tools to create your own custom edit screens. Boasting a professional interface and a powerfull API, it’s a must have for any web developer working with WordPress.Field types include: Wysiwyg, text, textarea, image, file, select, checkbox, page link, post object, date picker, color picker and more!

WordPress Creation Kit consists of three brand new plugins that can help you with the tough task of creating and maintaining custom post types, custom taxonomies and most importantly, custom fields and metaboxes for your posts, pages or CPT’s.

Lets you use more than one content "block" on a template. You only have to insert one tag inside the template, so it's easy to use.

AJAX Thumbnail Rebuild allows you to rebuild all thumbnails on your site. There are already some plugins available for this, but they have one thing in common: All thumbnails are rebuilt in a single step. This works fine when you don’t have that many photos on your site. When you have a lot of full-size photos, the script on the server side takes a long time to run. Unfortunately the time a script is allowed to run is limited, which sets an upper limit to the number of thumbnails you can regenerate. This number depends on the server configuration and the computing power your server has available. When you get over this limit, you won’t be able to rebuild your thumbnails.

Webhooks are a simple paradigm for developing instant notifications and mashups based on simple HTTP requests. With HookPress you can set up webhooks so that a specified URL (a public service or something you set up) is requested when certain WordPress actions occur. Possible uses include generating push notifications or using non-PHP web technology to extend WordPress.

The WPAlchemy_MetaBox PHP class can be used to create WordPress meta boxes quickly. It will give you the flexibility you need as a developer, allowing you to quickly build custom meta boxes for your themes and plugins.

As Elliot mentioned in our first post we wanted to try out a few relatively new techniques on this site, the main one being the inclusion of Josh Emerson’s Responsive-Enhance script to serve resolution-dependent images.
The simplest way to see the script in action (if you are using a desktop browser) is to resize this screen so that it’s very narrow and hit refresh; all being well the image above should turn into a black and white version, physically smaller in terms of dimensions and file size. Now slowly stretch the screen out again and you should see the colour version kick back in. Josh’s script cleverly replaces the lo-res version with the full size colour version — nice and easy.

The Events Calendar is a fully featured event management system with multiple views, 3rd party integrations, and a slew of premium add-ons

To me, a mind blowing WordPress Plugin is one that breaks the rules. It is unique and original in its implementation, and pushes WordPress. It might not be a Plugin that everyone must have on their site. It might not be a Plugin that even interests you. What these will do is to get you to look at the incredible diversity of Plugins available. If you are a Plugin author, hopefully these will light up your imagination as to the possible, building upon these and incorporating their originality into your Plugins.

GigPress is a powerful WordPress plugin designed for musicians and other performers. Manage all of your upcoming and past performances right from within the WordPress admin, and display them on your site using simple shortcodes, PHP template tags, or the GigPress widget on your WordPress-powered website.

WordPress is one of the most popular content management systems out there. Thousands of bloggers use WordPress to power their blogs, websites, forums and other online publications. The best thing regarding WordPress is it’s rich inventory of useful plugins – there are different types of plugins available for customizing your requirements.

Here is a quick Qtranslate tutorial for those who are a bit lost. I don't know if it's the best plugin for a multilanguage website, it depends on your needs, but for me, it was by far the best choice! :D

Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript) and adds the following much-sought-after enhancements:

jPop is jQuery plugin for making iPad style popovers. The plugin comes with a default skin modeled off the iPad style, but the popovers can be skinned with images to any style.

Jquery popover is a JQuery plugin that provides an easy way to create iPad like popovers.

LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (Chrome, Safari, Firefox) and server-side, with Node.js and Rhino.

CINEMA 4D PLUGINS

We have all seen the gorgeous scrolling image carousel that iTunes and Finder uses. CoverFlux reproduces that slideshow effect for still images, producing movies & project files for Final Cut Pro, Motion, Final Cut Express & After Effects.

CoverFlux2 has been completely rewritten, redefining this signature browsing slideshow with stunning new visual effects. It's faster with over 10 unique features added:

I was very reluctant to adopt Final Cut X and Motion 5 due to a number of reasons, one of the biggest of which was my favorite plugins working with the new software. I am very happy to say after many months, plugins are now available and coming out strong.
Let’s go on a little video lover’s escapade into the world of digital video and check some cool plugins! I even threw in a plugin for those who have not switched over to FCP X.

Flash ads are annoying and I am sure many of the pro web users never need them around. They are make browsing slow, sluggish and ruin user experience if they are designed to make sound while mouse hover or some of them even automatically play videos and audio. Currently there is no option in chrome which let you disable flash or block flash ads the reason is the missing feature of plugin support in chrome or by default ad block integration.

Less.CSS is becoming a popular tool for making stylesheets “dynamic”. I’ve been working with integrating Less.CSS with WordPress for a while now, so today we’re going to be looking at a short tutorial on how to get started with using it and the BluePrint CSS framework for a faster workflow in WordPress.

The LESS editor and compiler that almost makes it too easy

{Less} extends CSS with variables, nested rules, operators and more. If you're still building websites without it, you're an idiot. This app makes it dead simple to use {Less} by automatically compiling *.less files into standard CSS.

Skeleton is a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone. Skeleton is built on three core principles:

Dig responsive design? Hate fluid grids? Try a Frameless grid.

This page showcases the demos for part 1 of the TimThumb primer. Getting Started with TimThumb

TimThumb is a simple, flexible, PHP script that resizes images. You give it a bunch of parameters, and it spits out a thumbnail image that you can display on your site.

I can not take any credit for this at all, the Sugar was orginially created by Alison Barrett for MacRabbit's all in one editor Espresso.

It was released for Espresso 1 back in 2010 and now updated for Espresso 2 in 2011 thank to continued support

So why is it here? Simple I could not get the autocomplete to work so I thought I'd have a look under the covers, it never hurts to have enough code on GitHub I guess.

jQuery Zoom

A plugin to enlarge images on mouseover or mousedown.

ColorBox

A lightweight customizable lightbox plugin for jQuery

Fork me on GitHub

Golden Grid System (GGS) splits the screen into 18 even columns. The leftmost and rightmost columns are used as the outer margins of the grid, which leaves 16 columns for use in design.