Free PHP scripts classes and info
March 9th, 2010
Updated from the "Zodiac Signs" function already posted here. The other function had some overlapping month/day areas that would determine some birthdate/sign combinations incorrectly. (ie: 10/27 as Libra instead of Scorpio.)March 9th, 2010
Countries of the European Union add an hour to the time during summer to better seize sunlight, so for several months GMT 0 becomes GMT +1, GMT+1 becomes GMT-2 and so on. This is known as Central European Summer Time (CEST). This script takes a Unix timestamp and adds an hour to it (3600 seconds) if we are in this summer period.March 9th, 2010
Allows you to easily keep track of a series of items as either odd or even. Each time you check (using the "which" method) the counter increments so that the next time you check the state will have changed. This is the perfect class for using when you're outputting an HTML table and want to use different classes to differentiate between odd and even rows. Simply create a new instance and call OddEven->which() for each row!March 9th, 2010
Repetitive tasks can quickly become tedious. As a designer, you probably often find yourself designing the same elements over and over from scratch. STOP!
Wasting time is so old-fashioned. It also means you’re wasting money! So, let’s review some ways that you can automate and systematize your Photoshop workflow. And be sure to download the project base for all of your new designs!
The first step in systematizing your workflow is to organize your files. Identify all common elements you use within your designs.
You may come to a list such as the following:
Consider how your final deliverables are used. If they are shipped to a coding business, be as organized and thorough as possible, including notes and fonts where applicable.
You can ensure that you have perfectly organized themes by creating a package that allows you to “fill in the blanks”, so to speak. Simply copy this folder, assign it to the project by renaming it to the project and get working. This is a very simple and efficient way to work, and means that websites you built four years ago can easily be edited, because everything is packed into its very own place.
In the zip file, you’ll find a simple re-useable template starting point. This file contains elements such as dividers, buttons and a pre-gridded template to speed up your design workflow.
See how simple starting a new project is now? It may take a couple of minutes to set-up, but the time saved later is more time for you to be doing what you love best – designing!
Now that we have a solid base to build upon, we can starting filling out our ‘boiler-plater’ with specific files and concepts.
The sample template will allow you to create a page of your most used elements, ready for quick inclusion in your latest project.
If you’re a web designer in particular, you’ll find that a lot of your projects, even those different in every possible way – use and re-use common elements.
Begin by building a few re-usable templates. Don’t worry about which elements you wish to include just yet, because you can always go back and look at your previous projects and analyze more popular features – then re-create them here.
Personally, I use just one template. I have a home page (this contains elements such as news bulletins, blog post stylings, menus, logos and call to actions). I can modify this template to suit blog pages, buy it now forms and more.
The page also has a 960.gs pre-applied. This has been included for download at the end of the article, in the template boilerplate.
Once you’re set-up with this concept, you can build designs very quickly. However, you should definitely consider developing your own, and tailor it to your clients and team. You could go further by adding icons, search elements and online store related items – anything to suit your client base.
The above image demonstrates the tangible difference between an organized layer palette, and a messy one!
When you’re in a real creative flow, it can be difficult to stop and start naming and grouping layers. Photoshop doesn’t really help in this area by default either!
So, take the time as you go to name and group layers. This will help you later when coding the design, or if you ship if off for coding elsewhere.
Name each layer, and try to use a descriptive and short word – such as ‘menu’ for the navigation. Group specific areas, such as the header or a contact form.
This has a two-fold benefit.
So, take the time to stop every five minutes or so, and name and group each element. You’ll be glad you did!
Make good use of the select tool! You can toggle the select mode between layers and groups. This facilitates mass updating and re-aligning designs, so don’t forget it!
If you don’t use actions in your work-flow, then you should begin using them immediately.
Photoshop actions are entirely configurable lists of actions Photoshop should carry out automatically. You can create your own, or choose from the bounty available online. If you work on Photographs for example, and have 400 pictures to edit and resize, this would take a long time. Instead, you can create an action that adjusts the contrast, alters the size and then saves the file in .jpg format, blasting through 400 files in seconds! You must use actions!
If you do not have the knowledge, or experience to create your own actions, GraphicRiver has a large selection of actions available for purchase from $1!
The actions on sale range from simple photo effects to this action which can add various pre-formatted text sections such as contact details or blog posts in seconds.
Start using Actions and you will notice a significant increase in your productivity and reduce the amount of times you need to repeat monotonous tasks over and over.
Making your own action is easy. As an example, we’ll create a simple action to re-size several images at once, then save them.
First off, you need to hit the new action button, on the actions palette.
You shouldn’t need to change any settings as standard, bar changing the name for better organization. Photoshop is now recording your actions. So, all you need to do is re-size the image. Go to image size, and alter the dimensions. The action will change any image to these dimensions. Then hit save.
Finally, press stop on the action palette.
Now, when you press play on the action you’ve created, Photoshop will follow the list of defined actions on your image. Although very simple, an action such as this one could save you hours of monotonous resizing photos and images. This is only a very simple look at actions. They can do so much more, so take your time to get to know them and really use them. The beauty of them is in how you can record basically any action in Photoshop – selecting, changing styles, transforming, re-sizing and saving.
Do you work with user interfaces? If so, you really need to download a GUI element pack for Photoshop.
There are many available for most popular operating systems and mobile platforms.
For example, if you work with the iPhone, you can download the iPhone GUI pack that contains all elements available in the iPhone interface library, and then simply start designing your app. Simple, quick and much easier than attempting to create these from scratch.
http://www.smashingmagazine.com/2009/08/18/android-gui-psd-vector-kit/
Teehan Lax Kits
The agency, Teehan Lax have several high quality, life-like UI kits. These are great for building an iphone app sales site, or designing the actual UI of an app. Kits are available for the iPhone, Palm Pre and Browsers.
http://www.teehanlax.com/blog/2009/07/08/palm-pre-gui-psd/
http://www.teehanlax.com/blog/2008/11/06/iphone-gui-psd-update-13/
http://www.teehanlax.com/blog/2008/12/16/browser-form-elements-psd/
I hope we’ve given you some tips that you can use to improve your productivity and efficiency. Photoshop is a wonderful tool, but, if we’re not careful, we can find ourselves repeating the sames tasks over and over. So be sure to implement the above tips and start saving time, money and your sanity!
Do you have any Photoshop time-saving tips? Have any ideas on other tasks that could be automated to save time and repetition? Feel free to share them with the community via the comments.
March 9th, 2010
March 9th, 2010
March 8th, 2010
Looking for a way to create and update your website simply from your web browser, without having to learn a web editor? Check out the Free Content Management Systems (CMS) PHP Scripts, where yet another web-based software has just been added. This one is fairly new on the scene and even allows you to do page level customisations ("customizations"), where different pages can have different layouts (if you need that sort of thing).
March 8th, 2010
Over the weekend, Elijah Manor tweeted about a new IDE, called WebStorm, that is currently being offered as a public preview, from JetBrains. After spending a few hours with it, I’m extremely impressed! In this video quick tip, I thought I’d show you some of my favorite features that you, frankly, just don’t see much in other code editors.
So, if you’re curious, take some time to look over WebStorm and let me know what you think! I’m still learning it too, so let me know if you found any cool features that I didn’t mention.
March 8th, 2010
jQuery is not always as it appears. There's a lot of cool stuff going on under the surface, and there are many methods just waiting to be discovered, and many potential usages of jQuery's API that you may not have considered before. In this article I'll be taking you through a few of the not-so-obvious things I've discovered about jQuery.
When you call 'jQuery' what happens?
The jQuery function itself is very simple:
jQuery = function (selector, context) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init(selector, context);
};
Under its skin, the jQuery function (commonly referred to as the "wrapper" function) simply returns an instantiated jQuery object — i.e. an instance of the 'jQuery.fn.init' constructor.
This is useful to know; with this information we know that each time we call 'jQuery' we're actually creating a totally unique object with a set of properties. jQuery is clever in that it gives you an object that can be treated as an array. Each of your elements (all together, commonly known as the "collection") is referenced within the object under a numerical index, just like within an array. And jQuery also gives this object a 'length' property, just as you would expect from an array. This opens up a world of possibilities. For one, it means that we can borrow some functionality from 'Array.prototype'. jQuery's 'slice' method is a good example of this — modified from the source:
/* ... jQuery.fn.extend({ ... */
slice: function() {
return this.pushStack(
Array.prototype.slice.apply( this, arguments ),
"slice",
Array.prototype.slice.call(arguments).join(",")
);
},
/* ... */
The native 'slice' method doesn't care that 'this' is not a real array– it'll be fine with anything that's got a 'length' property and [0], [1], [2] etc.
There are some other interesting properties within this jQuery object — '.selector' and '.context' will, most of the time, reflect the arguments that you pass into 'jQuery(…)'.
var jqObject = jQuery('a');
jqObject.selector; // => "a"
One thing that's important to note is that jQuery will sometimes give you new jQuery objects to work with. If you run a method that changes the collection in some way, such as '.parents()', then jQuery won't modify the current object; it'll simply pass you a brand new one:
var originalObject = jQuery('a');
var anotherObject = originalObject.parents();
originalObject === anotherObject; // => false
All methods that appear to mutate the collection in some way return a brand new jQuery object — you can still access the old object though, via '.end()', or more verbosely, via '.prevObject'.
Central to jQuery's DOM capabilities, is its element creation syntax. 1.4 brought with it an entirely new way to create your elements quickly and succinctly. E.g.
var myDiv = jQuery('<div/>', {
id: 'my-new-element',
class: 'foo',
css: {
color: 'red',
backgrondColor: '#FFF',
border: '1px solid #CCC'
},
click: function() {
alert('Clicked!');
},
html: jQuery('<a/>', {
href: '#',
click: function() {
// do something
return false;
}
})
});
As of 1.4 you can pass a second argument to the jQuery function when you're creating an element — the object you pass will, for the most part, act as if you were passing it to '.attr(…)'. However, jQuery will map some of the properties to its own methods, for example, the 'click' property maps to jQuery's 'click' method (which binds an event handler for the 'click' event) and 'css' maps to jQuery's 'css' method etc.
To check out what properties map to jQuery's methods, open your console and type 'jQuery.attrFn'.
jQuery provides a method that you can use to serialize all of the inputs within one or more forms. This is useful when submitting data via XHR ("Ajax"). It's been in jQuery for a long time but it's not often talked about and so many developers don't realise it's there. Submitting an entire form via Ajax, using jQuery, couldn't be simpler:
var myForm = $('#my-form');
jQuery.post('submit.php', myForm.serialize(), function(){
alert('Data has been sent!');
});
jQuery also provides the 'serializeArray' method, which is designed to be used with multiple forms, and the 'param' helper function (under the jQuery namespace) which takes a regular object and returns a query string, e.g.
var data = {
name: 'Joe',
age: 44,
profession: 'Web Developer'
};
jQuery.param(data); // => "name=Joe&age=44&profession=Web+Developer"
jQuery's 'animate' method is probably the most flexible of jQuery's methods. It can be used to animate pretty much anything, not just CSS properties, and not just DOM elements. This is how you would normally use 'animate':
jQuery('#box').animate({
left: 300,
top: 300
});
When you specify a property to animate (e.g. 'top') jQuery checks to see if you're animating something with a style property ('element.style'), and it checks if the specified property ('top') is defined under 'style' — if it's not then jQuery simply updates 'top' on the element itself. Here's an example:
jQuery('#box').animate({
top: 123,
foo: 456
});
'top' is a valid CSS property, so jQuery will update 'element.style.top', but 'foo' is not a valid CSS property, so jQuery will simply update 'element.foo'.
We can use this to our advantage. Let's say, for example, that you want to animate a square on a canvas. First let's define a simple constructor and a 'draw' method that'll be called on every step of the animation:
function Square(cnvs, width, height, color) {
this.x = 0;
this.y = 0;
this.width = width;
this.height = height;
this.color = color;
this.cHeight = cnvs.height;
this.cWidth = cnvs.width;
this.cntxt = cnvs.getContext('2d');
}
Square.prototype.draw = function() {
this.cntxt.clearRect(0, 0, this.cWidth, this.cHeight);
this.cntxt.fillStyle = this.color;
this.cntxt.fillRect(this.x, this.y, this.width, this.height);
};
We've created our 'Square' constructor, and one of its methods. Creating a canvas and then animating it couldn't be simpler:
// Create a <canvas/> element
var canvas = $('<canvas/>').appendTo('body')[0];
canvas.height = 400;
canvas.width = 600;
// Instantiate Square
var square = new Square(canvas, 70, 70, 'rgb(255,0,0)');
jQuery(square).animate({
x: 300,
y: 200
}, {
// 'draw' should be called on every step
// of the animation:
step: jQuery.proxy(square, 'draw'),
duration: 1000
});
This is a very simple effect, but it does clearly demonstrate the possibilities. You can see it in action here: http://jsbin.com/ocida (this will only work in browsers that support the HTML5 canvas)
jQuery's Ajax utility functions ('jQuery.ajax', 'jQuery.get', 'jQuery.post') all return an 'XMLHttpRequest' object which you can use to perform subsequent operations on any request. For example:
var curRequest;
jQuery('button.makeRequest').click(function(){
curRequest = jQuery.get('foo.php', function(response){
alert('Data: ' + response.responseText);
});
});
jQuery('button.cancelRequest').click(function(){
if (curRequest) {
curRequest.abort(); // abort() is a method of XMLHttpRequest
}
});
Here we're making a request whenever the 'makeRequest' button is clicked — and we're cancelling the active request if the user clicks the 'cancelRequest' button.
Another potential usage is for synchronous requests:
var myRequest = jQuery.ajax({
url: 'foo.txt',
async: false
});
console.log(myRequest.responseText);
Read more about the 'XMLHttpRequest' object and also be sure to check out jQuery's Ajax utilities.
jQuery has a built-in queuing mechanism that's used by all of its animation methods (all of which use 'animate()' really). This queuing can be illustrated easily with a simple animation:
jQuery('a').hover(function(){
jQuery(this).animate({paddingLeft:'+=15px'});
}, function(){
jQuery(this).animate({paddingLeft:'-=15px'});
});
Quickly hovering over a bunch of anchors and then hovering over them again will cause the animations to queue up and occur one at a time — I'm sure many of you have witnessed this queuing effect before. If not, check it out here: http://jsbin.com/aqaku
The 'queue' method is similar to the well-known 'each' method in how it's called. You pass a function, which will eventually be called for each of the elements in the collection:
jQuery('a').queue(function(){
jQuery(this).addClass('all-done').dequeue();
});
Passing just a function to 'queue' will cause that function to be added to the default 'fx' queue, i.e. the queue used by all animations done by jQuery. Therefore, this function will not be called until all current animations occurring on each element in the collection (in this case, all anchors) have completed.
Notice that we're adding a class of 'all-done' in the function above. As outlined, this class will only be added when all current animations are complete. We're also calling the 'dequeue' method. This is very important, as it will allow jQuery to continue with the queue (i.e. it lets jQuery know that you're finished with whatever you're doing). jQuery 1.4 provides another way of continuing the queue; instead of calling 'dequeue', simply call the first argument passed to your function:
jQuery('a').queue(function(nextItemInQueue){
// Continue queue:
nextItemInQueue();
});
This does exactly the same, although it's slightly more useful in that it can be called anywhere within your function, even within a mess of closures (that typically destroy the 'this' keyword). Of course, pre-jQuery-1.4 you could just save a reference to 'this', but that would get a bit tiresome.
To add a function to a custom queue, simply pass your custom queue's name as the first argument and the function as the second:
jQuery('a').queue('customQueueName', function(){
// Do stuff
jQuery(this).dequeue('customQueueName');
});
Notice that, since we're not using the default 'fx' queue, we also have to pass our queue's name to the 'dequeue' method, in order to allow jQuery to continue with our custom queue.
Read more about 'queue', 'dequeue' and 'jQuery.queue'.
jQuery provides a way for you to namespace events, which can be very useful when authoring plugins and third-party components. If needed, the user of your plugin can effectively disable your plugin by unbinding all event handlers that it's registered.
To add a namespace when registering an event handler, simply suffix the event name with a period and then your unique namespace (e.g. '.fooPlugin'):
jQuery.fn.foo = function() {
this.bind('click.fooPlugin', function() {
// do stuff
});
this.bind('mouseover.fooPlugin', function() {
// do stuff
});
return this;
};
// Use the plugin:
jQuery('a').foo();
// Destroy its event handlers:
jQuery('a').unbind('.fooPlugin');
Passing just the namespace to 'unbind' will unbind all event handlers with that namespace.
So which ones did I miss? Any helpful features that you feel jQuery doesn’t document well enough? Let’s discuss in the comments!