It is compatible with MooTools 1.2.x. It does not depend on a specific data source (XHR, Json). Instead, the developer supplies the data which can come from anywhere. New TextboxList is now using Binary search for maximum performance. It supports new options, such as addOnEnter, which adds boxes upon pressing enter (useful for tags or categories widgets).
Requirements: Mootools 1.2.x
Demo: http://devthought.com/projects/mootools/textboxlist/
License: License Free
PHPanywhere is a web based free Integrated Development Environment or IDE for the PHP language, in other words it is an application that gives developers all the code editing capabilities they need to develop PHP applications online. It includes a real-time syntax code editor with support for all web formats and a powerful FTP editor.
PHPanywhere works in a browser, you can start coding right away, no need for installing anything. Best of all you can work from anywhere. You can also share your work and allow others to work on your projects on PHPanywhere easily.
Requirements: -
Demo: http://phpanywhere.net/
License: License Free
Ethan Marcotte has raised an issue about Fluid Grids, that working with non-fixed layouts can be more difficult once you introduce fixed-width elements into them. By default, an image element that’s sized at, say, 500px doesn’t exactly play nicely with an container that can be as large as 800px, but as small as 100px. What’s a designer to do?
He has wriiten a little script that makes Fluid Images. In short, it cycles through your document, swaps out the images for a transparent GIF, and applies the AlphaImageLoader property to each one. Then, whenever the window’s resized, the script automatically recalculates the proper, proportional height and width of the image, and resizes the spacer graphic accordingly. You can see it in action, and download the script.
Requirements: -
Demo: http://unstoppablerobotninja.com/entry/fluid-images/
License: License Free
Code reviews play an integral part in the development process for making quality software. We can find out security holes, memory leaks, poor queries and heavy file structures from code reviews. Unfortunately, these reviews are also very time consuming.
We spend a lot of time echoing queries, memory stats and objects to the browser just to see how they are being used in the code. To reduce this repetition, Ryan Campbell has invested some time creating the PHP Quick Profiler (PQP). It’s a small tool (think Firebug for PHP) to provide profiling and debugging related information to developers without needing them to add a lot of programmatic overhead to their code.
Now, we only need to toggle one config setting to true and we can have access to an automated tool to help create a faster and more consistent review experience. Since anyone can use it, PQP also gives the initial developer an idea of where their code stands before the review.
Requirements: -
Demo: http://particletree.com/examples/pqp/
License: License Free
The web is full of resources, but they’re often hard to reach. This is the reason why I think it’s important to organize them with a coherent structure and share it with you. So just bookmark this page for whenever you’ll need it, it’ll be useful. Please also mention if I missed anything.
Supersized is a jQuery plugin that automatically resizes (background) images to the size of the browser while maintaining image dimension ratio and runs them as a slideshow. There is no extra whitespace, no scrollbars - the entire browser window is always filled. It is lightweight and plays nice with Firefox, Safari, Opera, IE7, and IE6. Requirements: jQuery Framework Accessible News Slider is a JavaScript plugin built for the jQuery library. The plugin does not use color as a primary indicator of a change in state for the slider. Instead, the “back” and “next” navigation is either visible or hidden. There is also an indicator that communicates the total number of news items. If the user chooses to resize the text via the browser file menu, the slider will flex vertically to accommodate the larger text, and still function. Although the core functionality of the news slider is partially accessible with a keyboard, the “View All” link was added as a catch-all mechanism. Hitting the “Enter” key while focused on the hidden “Skip to News” anchor will mimic the same behavior, since it is assumed the user is tabbing through content. The JavaScript is only 2 KB packed. The CSS, XHTML and JavaScript were developed specifically to meet the WCAG 1.0, and this will always be the number one priority of the plugin. The ZIP download contains all of the necessary files, including a packed version of jQuery v.1.2.6. Requirements: jQuery Framework Agile Carousel is a jQuery plugin that allows you to easily create a custom carousel. Call jQuery UI to enable many different additional transition types and easing methods. It uses PHP to draw images from the folder you specify. You can also configure Agile Carousel with many different options including controls, slide timer length, easing type, transition type (e.g. blind, drop, pulsate, shake, slide and etc…) and more. The script is currently in beta version, security & feature enhancements are on the way. Requirements: jQuery Framework This dynamic JavaScript slideshow is feature packed and under 5KB. You can find the new features include description support, link support, no naming restrictions, portrait image support, graceful degradation and active thumbnail status. The init function takes 5 parameters (id of the slideshow content placeholder, the id of the image placeholder, the id of the previous image placeholder, the id of the next image placeholder, the id of the image link placeholder). This script has been tested in Firefox, Internet Explorer, Opera, Safari and Chrome. This script is available for any personal or commercial projects under the creative commons license and is offered as-is, no free support provided. Requirements: Javascript Enabled The s3Slider jQuery plugin is made by example of JonDesign’s smooth slideshow script. The author needed something like that for jQuery. Since he didnt find it after a small research, he decided to build it by himself. This script is licensed under Creative Commons Attribution 2.5. So you can use it in all you projects even commercial ones. This plugin has been tested and is known to work in Firefox, Opera, Safari, Internet Explorer and Google Chrome. Requirements: jQuery Framework Devthought has created an elegant, lightweight slideshow script called BarackSlideshow. It works with MooTools 1.2, and supports all kinds of shape transformations (top and left coordinates, and height and width properties), which means it can now be used with vertical, horizontal, or even irregular lists. Devthought came up with a new class that receives the images and loading spinner as parameters as well. The CSS plays a major role. You should analyze it carefully before implementing it in your applications or websites. You’ll probably need to adjust the ids, or use classes instead to keep your stylesheets clean. Requirements: Mootools Framework This is an automated news slider using the new AS3 XML features. The main propose of this news slider is show news on the front page, with a title, an image, some descriptive text, and a link to the full article. It loads 4 articles and changes from one article to another automatically in a lapsus of time, and the user could stop, rewind or forward whenever he wants. The data source uses XML, so it could be adapted to any programming language that could generate XML data. Requirements: - noobSlide is a mootools based slide show gallery. You can see 7 different styles of images galleries / slide shows. I think they are working smoothly and looking nice. However, I particular like example 6 and 7. If your web application / website is already using mootools, noobSlide is definitely a good choice to power your image gallery. noobSlide is licensed under MIT License. Requirements: Mootools Framework Couloir Slideshow is a demonstration of Flash-like behavior implemented solely in Javascript, HTML, and CSS. It is a very good resources for creating a gallery with resizing and fading effects. You are permitted to use it on your own project so long as you do so according to the rules outlined in the Creative Commons ‘Attribution-ShareAlike 2.0′ License and the license terms contained in the associated, third-party APIs. Requirements: Any Modern Browsers with Javascript Enabled SmoothGallery is a javascript gallery and slideshow system using MooTools. It allows you to have simple and cross-fading image galleries, timed slideshows and showcases.Unlike Lightbox 2, you can define the time of switching pictures automatically.And also, you can jump to a specific picture from the pictures menu and do not need to flick through all pictures in between. Requirements: Firefox, Opera, Safari, Internet Explorer 6.0+
Supersized - Full Screen Slideshow jQuery Plugin
Demo: http://buildinternet.com/live/supersized/
License: License Free
Accessible News Slider Plugin Built for jQuery
Demo: http://www.reindel.com/accessible_news_slider/
License: License Free
Create Custom Carousel with Agile Carousel jQuery Plugin
Demo: http://code.google.com/p/agile-carousel/
License: New BSD License
Free Dynamic Javascript Slideshow Under 5KB
Demo: http://sandbox.leigeber.com/javascript-slideshow/
License: Creative Commons License
Build Your Own Slideshow with s3Slider jQuery Plugin
Demo: http://www.serie3.info/s3slider/demonstration.html
License: Creative Commons 2.5 License
Elegant and Lightweight Slideshow Script
Demo: http://devthought.com/wp-content/moogets/BarackSlideshow/demo.html
License: MIT License
Automated News Slider using AS3 XML Feature
Demo: http://works.faustocarrera.com.ar/news_slider/
License: License Free
noobSlide - Mootools Slide Show Image Galleries
Demo: http://efectorelativo.net/laboratory/noobSlide/sample.html
License: MIT License
Couloir.org Resizing and Fading Slideshow Gallery
Demo: http://www.couloir.org/js_slideshow
License: Creative Commons License
JonDesign’s SmoothGallery for Slideshows
Demo: http://smoothgallery.jondesign.net/showcase/gallery
License: GPL License
Read more...
One of my absolute favorite design books is, Robin Williams Design Workshop. It looks into practical design theories and showcases awesome examples. One of the areas of focus that I’ve taken into all my designs are the four major design principles. They include: contrast, repetition, alignment, and proximity.
This post will discuss those four principles as they relate to web design. By keeping these design theories fresh in your mind, you will be sure to design cleaner, more aesthetically pleasing sites.
Great contrast can leave a very good first impression on a user. Without a focal point, the viewer is generally lost in a sea of equally-sized elements and typography. It’s the designer’s job to create visual elements of significance that guide the user’s experience. You can achieve great contrast on your site by choosing your images, colors and fonts wisely.
It’s often very effective to showcase a large illustration next to smaller elements. Here’s what I mean:
This site utilizes a large image to bring in the reader’s attention. Also the monochromatic nature of the site allows the limited use of blue to play a bigger role.
Do the eye test on this site. What do you notice first? More than likely it’s the star on the box. Just like The Invoice Machine, they’ve created a focal point using a large image and limited color.
Sprinkling in color at just the right amount is another way to create effective contrast within a website. It can be created using a different color in headers and text copy, as well as within the colors of an image or illustration.
This site is a fantastic example of almost all of the design principles. For color contrast take a look at the large yellow header versus the smaller light gray copy. Alignment, image contrast, repetition and proximity are all strong throughout.
Is it any surprise that a website built to showcase typography would give us a great example right in its own header? I love their font choice and how the green color plays nicely off the darker gray.
If you are trying to create contrast with fonts you should avoid using two very similar font faces and sizes. The similarity of the fonts tends to create confusion and blur the design. However, it can be very effective if you make the font sizes very different, or mix the lightest version of the font in combination with the boldest. Also, you’ll be surprised at the visually impressive combos you can create by using two very different fonts in tandem. For instance a san serif font with a hand-written font.
Wow! I love the typography and colors on this site. Check out all the size and stroke variations on their slogan. I also love the grunge that is sprinkled in, and the limited use of blue.
Repetition in print design is much more common than it is in web design, however it can be equally effective. Repeating design elements helps create a consistent look and improves branding. In web design a great way to achieve this is by repeating elements in the header and footer. Check out a couple of examples below.
Ten24 Media uses a creative grass illustration in both the header and footer.
This site is just awesome! I definitely could have showcased it in the contrast section, but it works just as well here because the theme and branding are clearly used throughout. Check out the use of the bananas as bullets, and the forest illustration at the header and footer.
Alignment plays an intricate role in taking your site designs from looking amateur to professional. I’ve recently become a huge advocate for designing sites using a grid. Doing so cleans up your designs and gives you an awesome framework to work from. If you’re interested in learning more about designing for a grid, check out my recent post (insert shameless self promotion here), Design A Fresh Blog Theme On The 960 Grid.
This site is showcased on the 960 Grid website. It’s alignment is consistent and striking. I love the way the main content is left justified and flush in its column, however some of the larger level headings break the rule and shift into the left sidebar. They also do a good job with generous amounts of white space and contrasting sized fonts.
A List Apart features a visually obvious grid. The columns are well defined and contain everything in very readable chunks. Studies have shown that really wide columns drastically reduce readability. Your eyes will get tired when trying to follow text across wide column widths. A List Apart also features a fantastic article that argues, Good Designers Redesign, Great Designers Realign.
The last principle is proximity. This has to do with grouping like elements together and separating those that are not. It can really ruin user experience if you group everything into one lump text block. That’s why its very important to use header tags and proper spacing.
This site does a beautiful job of organizing it’s content into three major categories. They are well spaced and clearly defined.
This site is well structured. The headers are clear and concise. The spacing is good and the content is separated into logical chunks.
It’s unbelievable how much better your designs will become when you take into consideration these four basic principles. There are always more things to consider, but a foundation of contrast, repetition, alignment and proximity will improve your designs dramatically.
Join the discussion. What do you think of these design principles? Are there more that you’d like to share?
Sometimes we just want to get our WordPress Admin area to look neat and professional just to add a bit more functionality and enhance the way we use it. In this case, WordPress Admin themes and plugins come to the rescue. Here are 20 WordPress Admin themes and plug-ins that expand the functionality of the admin area specially if design isn’t your primary skill set.
Of course WordPress 2.7 comes with a huge number of changes, a good chunk of them making some older plugins redundant. However some of us might need time to upgrade, until the vital plugins that we depend on gets upgraded too to be compatible with the new release.
If you need to create your own Admin WordPress theme you might find this post useful.
A very clean WordPress admin theme created by “Dean Robinson” with a smooth grey color scheme, menus rearranged, main menus down left, sub menus across the top, support for several popular plugins including Ozh’s Admin Drop Down menus and NextGEN Gallery. Fluency only works with CSS2 compliant browsers (Firefox and Safari - and IE8!) at the moment.
Inspired by Mac OSX Leopard, uses the power and flexibility of CSS to overlay the style on top of the original design.
Mobile Admin adapts the WordPress admin UI to be more friendly to mobile devices, specifically phones. The iPhone / iPod Touch browser was the first target, but most other mobile browsers are supported at a basic level, and plugins can be used to customize for specific browsers where desired.
The Stylish Blue theme keeps the same default admin structure. Having a nice dark blue color scheme.
Planet X7 WordPress Admin Theme A dark blue, white and yellow (link) theme compatible with Opera, Firefox, Internet Explorer 7 and, Internet Explorer 6 (there will be a few little problems in ie6).
Looking to manage your WordPress install via your phone. It creates an option while logging in to replace the default admin interface with one designed for your phone.
The Easy Admin Color Schemes plugin allows users to easily customize the colors of the administration interface for WordPress. It works by adding a new page to the Settings area in the WordPress admin interface. Users can use the simple form to change the look of the admin interface without needing to know a great deal about WordPress.
With the WordPress admin themer plugin, you can change that, and not touch a single line of your WordPress code.
This Admin theme is based on the SpotMilk Admin. With a drop down menu, available in 2 colors: blue and green.
Adds some icons to the posts/pages management panel with AJAX-driven CMS-known functions like toggling post/page visibility, changing publication date and title without having to open the edit screens or reload the page, plus changing page order with drag’n'drop, inline category management and inline tag management, plus much more.
This plugin allows you to add whatever you want to the Wordpress dashboard through PHP and HTML even Sidebar Widgets. You can also wipe the entire dashboard or individually remove some of the more irritating sections like the Dev news, Planet Wordpress and the getting started section.
Custom Write Panel provides the functionality to create individual write panels similar to “Write Post” panel only with customized input fields. This plugin allows adding new input fields with a specific type. The following are the supported types.
All admin links available in a neat CSS driven drop down menu. No need to click on “Manage” then “Pages” to edit pages, go to any admin page from any admin page.
This is a perfect tool to manage perfeclty your WP 2.3 and 2.5 tags
Lighter Menus creates Drop Down Menus instead of the regular Admin menus for WordPress, so that you can browse items with one click. Fast to load, adaptable to color schemes, Lighter Menus comes with silk icons, a option page, and a design that fits within the Wordpress interface taking the less room possible.
Removes that advanced category selector below the write panel. Adds a primitive category selector to the sidebar.
A simple reminder plugin that could be used from the administration panel within WordPress. Your reminders are input through the WordPress administration interface, and you can format them in a variety of ways. When displaying the reminders, each reminder has a checkbox that you can check to mark that you’ve completed that item.
This multi-purpose plugin specializes in simple toggle-on/off changes. It adds many useful settings pertaining to comments, posts, SEO, security, the administration back-end, and much more. Some tweaks can even replace plugins that you may already have installed.
WP-CMS is a plugin for Wordpress that changes the functionality of the Wordpress admin backend to act more like a CMS. The blog functionality becomes optional and the focus is on writing pages to make Wordpress as user friendly for you and your clients as possible.
Visually compresses the administratrive header so that more admin page content can be initially seen. Adminimize is a WordPress plugin that lets you hide ‘unnecessary’ items from the WordPress administration menu, submenu and even the ‘Dashboard’, with forwarding to the Manage-page. On top of that, you can also hide post meta controls on the Write page and other areas in the admin-area and Write-page, so as to simplify the editing interface.
Performance is a key factor for any successful website. And since WordPress is becoming more popular than ever, it will only be at its best when raised in the proper conditions. Here are a few things to try if you find that your WordPress site is not performing as well as it could be due to high traffic or hidden issues you don’t know about.
WordPress 2.7 have manny performance improvements over previous versions. So you better upgrade to latest release to make use of this.
Remove any plugins that you aren’t using. Deactivate them and physically delete them from your web server. Deactivated plugins will affect the speed of a site because the Wordpress checks to see if they are activated or not. Also you must stay up to date with the latest versions of the plugins you are currently using. Developers release new versions because they’ve modified the code in some way to make the plugin work better.
I read about this great tip on Wpcandy’s simple ways to speed up WordPress post. It makes a lot of sense, cutting down on PHP and database queries. Each time a page on your site loads, if your browser has to execute any PHP queries, it adds to the load time. If you replace the PHP queries with static HTML, every time a page loads, your browser just reads the HTML.
Every week or so you should login to your myPhpAdmin and optimize your db. Locate your Wordpress DatabaseTables, check all the tables in the Check Boxes, select the Optimise Tables Option and repair. You would be surprised how well this trick might work, it saved more than 10% of my current database size.
Try moving the common web images, CSS, JavaScript and other static files to Amazon S3 Storage service and you will notice the average CPU load / memory requirement of the web server will be reduced a lot. Read this step by step guide.
You can also try this WordPress plugin, WP-Offload will boost the performance of your blog by seamlessly offloading static content like images, documents and movies. This will greatly reduce bandwidth consumption and the number of HTTP requests issued to your web server. Additional features such as remote image manipulation and thumbnail generation are provided.
Shrink O’Matic is an AIR application to easily (batch) resize (shrink) images. It handles JPGs, GIFs and PNGs. Simply drag and drop images and they’ll be resized as you wish! Options allow you to choose the output sizes, names and formats.
I guess many of you know why we always insist on using this plugin. This plugin generates static html files from your dynamic WordPress blog. After an html file is generated your webserver will serve that file instead of processing the comparatively heavier and more expensive WordPress PHP scripts and will not actually load any content from the database at all therefore the post will load faster with less stress on your server.
PHP Speedy WP can quickly and easily speed up your WordPress site and improve your blog’s response time without too much effort on your side by allowing us to automatically combine all JS and CSS files into only two files - which in turn helps greatly with page loading times. CSS Background Images are automatically converted to data URIs. This is useful in reducing the amount of HTTP requests even further. And, importantly, it’s compatible with Internet Explorer, even though it doesn’t support data URIs. Unfortunately, PHP speedy comes with few flaws out of box that need fixing: Combined JavaScript is placed at the top of the page instead at the bottom, it does not work with WP Super Cache. In order to get this two working like we want them, you have to check this great article by Prelovac to make few adjustments to both plugins.
This plugin GZIP and strip whitespace from your CSS files. It allows you to confidently use @import inside a CSS file and not worry about what happens on the user’s end. It will look through your style.css file and put any @import files into it. A cache expiry time can also be set. You can also add CSS files to a specific page or post and putting all of them into one file.
This plugin caches every database query with given lifetime. It is very fast and uses small disk space for caching.
I didn’t try this plugin yet but I’ve read many reviews recommending it. Let me know what do you guys think about it so we can update this post with correct information about its performance.
The AJAX Libraries API is an attempt to make Web applications faster for developers in simple ways by becoming a content distribution network and loading architecture for popular javascript libraries including:
You can either link to the source code directly:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>
Or you can use Google’s API:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("prototype", "1.6.0.2");</script>
By using the google.load() method, your application has high speed, globally available access to a growing list of the most popular, open source and up to date JavaScript libraries.
Here is a simple code to insert on your template to know how long it took for your page to load, or how many sql queries were executed. This tip is very good for knowing how well is your WordPress blog is optimized.
<?php echo get_num_queries(); ?> queries in <?php timer_stop(1); ?> seconds.
MySQL is a great database, but it doesn’t clean itself up the way it should sometimes. This plugin runs an optimize table command on your WordPress tables, effectively defragmenting it. This is very useful for tables that are frequently updated. The interface is very simple at the moment: just one button: Optimize Now, and some info on how much space will be saved. It looks like this:
ThemeFlash : The Quality Web Resources. Copyright 2009-2010 All Rights Reserved Revolution Two Church theme by Brian Gardner Converted into Blogger Template by Bloganol
