Find any tutorial you need, from website design to Advanced coding, we will find the best tutorials for you.

  • Html5 an introduction

    Learn about what Html5 is and what it has to offer, check it out here at the Html5 Introduction.

  • Css3 rounded borders

    This tutorial teaches you how to uses css3 to add curved borders to your website.

  • The best online website builders

    Website builders are everywhere nowadays, anybody who has no experience in website languages can easily build any sort of website.

  • Adding OpenId to your website

    Allow users to log into your website using their Google, Facebook or Yahoo account.

  • Three interesting Wordpress Marketplaces

    Sometimes it can be hard to find a decent marketplace which sells templates you need, I have put together three impressive marketplace for you to visit.

  • Things to know about .Htaccess

    After spending all day searching for a decent .htaccess tutorial, I decided to make one. This tutorial will teach some of the basics of .htaccess

  • Favicon and it's purpose

    A very short introduction to favicon

  • Building an iPhone website

    Learn how to build an iPhone website from your main Pc version website.

  • jQTouch, impressive iPhone websites

    Have a look at the jQuery of the mobile universe

  • Wordpress shortcodes

    A very brief introduction to Wordpress shortcodes

  • Building a jQuery lightbox plugin

    Learn how to build a basic lightbox plugin built with jQuery.

  • Using Mysql in Php

    Learn how to add or remove content from a Mysql database. This covers all the necessary commands to use Mysql in Php.

  • Wordpress, find the category ID

    A very short tutorial on how to find the category ID in wordpress

  • Useful Wordpress Snippets and Plugins

    Here are some of the most useful wordpress functions and commands I have come across.

  • Building a jQtouch website - Basics

    Learn how to build a jQtouch website, This tutorial will teach you the basics to jQtouch websites

  • Building a jQtouch website - Animations

    jQtouch is famous for its amazing and very iPhone like animations, In this tutorial we will be covering these animations and how to use them in your jQtouch websites

  • 28 HTML5 Features, Tips, and Techniques you Must Know

    Twice a month, we revisit some of our readers’ favorite posts from throughout the history of Nettuts+. This tutorial was first published in August, 2010. This industry moves fast — really fast! If you’re not careful, you’ll be left in its dust. So, if you’re feeling a bit overwhelmed with the coming changes/updates in HTML5, use this as a primer of the things you must know. 1. New Doctype Still using that pesky, impossible-to-memorize XHTML doctype? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> If so, why? Switch to the new HTML5 doctype. You’ll live longer — as Douglas Quaid might say. <!DOCTYPE html> In fact, did you know that it truthfully isn’t even really necessary for HTML5? However, it’s used for current, and older browsers that require a specified doctype. Browsers that do not understand this doctype will simply render the contained markup in standards mode. So, without worry, feel free to throw caution to the wind, and embrace the new HTML5 doctype. 2. The Figure Element Consider the following mark-up for an image: <img src="path/to/image" alt="About image" /> <p>Image of Mars. </p> There unfortunately isn’t any easy or semantic way to associate the caption, wrapped in a paragraph tag, with the image element itself. HTML5 rectifies this, with the introduction of the <figure> element. When combined with the <figcaption> element, we can now semantically associate captions with their image counterparts. <figure> <img src="path/to/image" alt="About image" /> <figcaption> <p>This is an image of something interesting. </p> </figcaption> </figure> 3. <small> Redefined Not long ago, I utilized the <small> element to create subheadings that are closely related to the logo. It’s a useful presentational element; however, now, that would be an incorrect usage. The small element has been redefined, more appropriately, to refer to small print. Imagine a copyright statement in the footer of your site; according to the new HTML5 definition of this element; the <small> would be the correct wrapper for this information. The small element now refers to “small print.” 4. No More Types for Scripts and Links You possibly still add the type attribute to your link and script tags. <link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" /> <script type="text/javascript" src="path/to/script.js"></script> This is no longer necessary. It’s implied that both of these tags refer to stylesheets and scripts, respectively. As such, we can remove the type attribute all together. <link rel="stylesheet" href="path/to/stylesheet.css" /> <script src="path/to/script.js"></script> 5. To Quote or Not to Quote. …That is the question. Remember, HTML5 is not XHTML. You don’t have to wrap your attributes in quotation marks if you don’t want to you. You don’t have to close your elements. With that said, there’s nothing wrong with doing so, if it makes you feel more comfortable. I find that this is true for myself. <p class=myClass id=someId> Start the reactor. Make up your own mind on this one. If you prefer a more structured document, by all means, stick with the quotes. 6. Make your Content Editable The new browsers have a nifty new attribute that can be applied to elements, called contenteditable. As the name implies, this allows the user to edit any of the text contained within the element, including its children. There are a variety of uses ...

  • How to Submit a Form with Control + Enter

    You’ve probably seen it on Twitter, Google+, or Facebook. You’ve got a text box, where you write your status/message and then click a button to submit it. But, if you’re lazy like me, you don’t like to switch to the mouse to click the button. These services help us out by allowing us to press control + enter to submit. Let’s recreate this scenario for our own projects. Prefer Video? Of course, the reason we can’t submit on just enter is because we’ll be using a textarea, so that the user can include line breaks. Normally, the browser will just ignore the control key and add another line break when we hit control + enter, but we’ll intercept this and perform our magic. Step 1: The Template We’re not here to talk about HTML and CSS so much, so here’s the “template” we start with: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Text Box Enter</title> <style> body { font: 16px/1.5 helvetica-neue, helvetica, arial, san-serif; } textarea { border: 1px solid #ccc; display:block; width: 250px; height: 100px; } p { border: 1px solid #ccc; background: #ececec; padding: 10px; margin: 10px 0; width: 230px; } button { border: 1px solid #ccc; background: #ececec; -webkit-border-radius: 3px; padding: 5px 20px; margin-top:10px; } </style> </head> <body> </body> </html> Step 2: The HTML We need a few element to work with here, so let’s add them: <textarea id="msg"></textarea> <button type="submit">Post</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script> </script> I’m really simplifying this here: we only have a textarea and a button. If this were the real deal, we would want an official form here, that would work and submit your message without JavaScript. We’re also including jQuery and an empty script tag that we will take advantage of next. Step 3: The JavaScript We’re going to make this as a jQuery plugin that we’ll call ctrlEnter. Here’s what we start with: $.fn.ctrlEnter = function (btns, fn) { var thiz = $(this); btns = $(btns); }; We’re taking two parameters. We will call this plugin function on the textarea, so we already have that element. The first parameter is a string of one or more selectors that will be passed to jQuery. These are elements that must have the same functionality when clicked. The second parameter is the function that will be executed when control + enter is pressed. Then, we’re creating variables: the jQueryified textarea and the jQueryified btns. function performAction (e) { fn.call(thiz, e); } Next, we create a function that wraps the function we passed in. We do this so that we can make sure the function is called with the textarea element as this within the function. We’re also passing it the event object from the event. thiz.bind("keydown", function (e) { if (e.keyCode === 13 && e.ctrlKey) { performAction(e); e.preventDefault(); } }); btns.bind("click", performAction); Next, we have the actual event handlers. The first wires a function to the keydown event on the textarea element. e.keyCode === 13 means the enter key is being pressed. If e.ctrlKey is true, that means the user was pressing the control key when the...

  • Build Communication Apps with Twilio: New Premium Tutorial

    In this two-part Premium tutorial, we’re going to cover Twilio, a web service that allows you to integrate web applications with telecommunications. This is neat because you can use a phone to access your web app, or even your web app to access phones! Become a Premium member to read this tutorial, as well as hundreds of other advanced tutorials and screencasts. Join Net Premium For those unfamiliar, the family of Tuts+ sites runs a premium membership service. For $9 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Nettuts+, Psdtuts+, Aetuts+, Audiotuts+, Vectortuts+, and CgTuts+ For the price of a pizza, you’ll learn from some of the best minds in the business. Become a Premium member to read this tutorial, as well as hundreds of other advanced tutorials and screencasts. ...

  • Magento: Up and Running – New on Premium

    Getting started with Magento themes is far more intimidating than it needs to be. This tutorial will get you familiar with Magento’s theming file structure, how Magento makes your life easier with a theme fallback system, and how to use layout configuration files. Become a Premium member to read this tutorial, as well as hundreds of other advanced tutorials and screencasts. Join Net Premium For those unfamiliar, the family of Tuts+ sites runs a premium membership service. For $9 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Nettuts+, Psdtuts+, Aetuts+, Audiotuts+, Vectortuts+, and CgTuts+ For the price of a pizza, you’ll learn from some of the best minds in the business. Become a Premium member to read this tutorial, as well as hundreds of other advanced tutorials and screencasts. ...

  • Getting Good With JavaScript: New Rockable Book (Plus a Free Sample!)

    You’ve been writing HTML and CSS for a while now, and are pretty comfy with it. Scratch that: you’re uber-comfy with it. And you’re ready to move on to the next level. But that means learning JavaScript! Yikes! Learning JavaScript isn’t as hard as you might think. However, there’s a bit of a problem: there’s a lot of bad information out there. And how are you—the HTML and CSS expert who knows nothing about JavaScript—supposed to discern the good from the bad? You Needn’t do it Alone! In Getting Good With JavaScript, I’ll quickly take you from novice to advanced novice! “Wait, what?” you respond. Yes, advanced novice. Let me explain: There’s more to learn about JavaScript than anyone could put into a single book. This book doesn’t get anywhere close to attempting that. It doesn’t even try to cover everything the normal JavaScript-for-beginners book covers. Instead, I’ll give you a solid foundation by clearly explaining all the basic syntax. Once that settles, we’ll go on to covering several important concepts, features, and best practices. eBook (PDF, ePub, and Kindle) and Screencasts – $19 – Buy Now Print Book, eBooks, and Screencasts – $24 – Buy Now Best Practices? . . . that reminds me: I’ve attempted to make this book pure as a blank text editor. You won’t find any bad practices or bad features (gasp! They do exist.) outlined herein, not even for the sake of completeness. As a beginner, you can be sure that everything you’re learning is considered best practice by the industry heavyweights. So, no, this book isn’t the JavaScript book to rule them all. And that’s not the goal. If this book takes you from not knowing a thing about JavaScript to being comfortable with writing (relatively) simple code and ready to learn intermediate and advanced techniques from the plethora of awesome sources available on the web, it will have done its job. What You’re Getting Chapter 1: Getting Started Chapter 2: The Basics Chapter 3: More Basics Chapter 4: More Concepts and Best Practices Chapter 5: Working with HTML It’s all packed into about 140 pages; plus, it comes with almost 6 hours of screencasts, and over 100 example files. The Official Pitch Ever wanted to spice up your websites with a dash of JavaScript, but not known where to start? In Getting Good with JavaScript, author Andrew Burgess breaks programming in JavaScript down into easy, straight-forward principles and practices. This book will introduce you to important programming concepts, show you how to write your first scripts, and make you comfortable with JavaScript code. You’ll learn The basics of types, variables, and operators Best practices for efficient coding Testing and optimizing your JavaScript Interacting with HTML elements Andrew Burgess will help you get past the learning curve and get you Getting Good with JavaScript. eBook (PDF, ePub, and Kindle) and Screencasts – $19 – Buy Now Print Book, eBooks, and Screencasts – $24 – Buy Now Sample Pages Nothing beats trying before buying, right? You can check out

  • Should You Start Using CSSLint?

    Getting our code reviewed by a pro is a great way of improving code quality but what happens if you don’t have access to a rockstar programmer? You do the next best thing and grab a ‘lint’ for that language. Today, I’d like to talk a little about CSSLint, a recently released code analysis tool for, you guessed it, CSS. Join me after the jump! What Exactly is a Lint? Let’s hit Wikipedia for a definition: Lint is a tool that flags suspicious usage in software written in any computer language. Basically, a lint looks at our code and checks for bad programming practices. Undefined variables, inefficient constructs, things like that. You’re probably wondering why you’d ever need such a tool. Let’s face it: not all of us possess supreme knowledge of what we’re working with or have the luxury of getting our code peer reviewed. In these cases, sticking our code in a lint is the next best option. And unlike clean up tools, lint spits out tidbits about your code and how to improve it. Introducing CSSLint Created by Nicholas Zakas and Nicole Sullivan, CSSLint is an open source tool that checks your syntax against a set of predefined rules to root out possible inefficiencies and make sure that your presentation works as expected with little surprises. After heading over to the CSSLint site, you can merely paste in your source CSS and choose which rules you’d like enforced. Hit the lint button and CSSLint will start eroding your smugness. If you’re a Node junkie like me, there’s a version for that as well. Just type in sudo npm install -g csslint and you’re good to go! The CSS Lint Rules Let’s take a quick look at the rules that CSSLint enforces. Parsing errors should be fixed Don’t use adjoining classes Remove empty rules Use correct properties for a display Don’t use too many floats Don’t use too many web fonts Don’t use too may font-size declarations Don’t use IDs in selectors Don’t qualify headings Heading styles should only be defined once Zero values don’t need units Vendor prefixed properties should also have the standard CSS gradients require all browser prefixes Avoid selectors that look like regular expressions Beware of broken box models Don’t use @import Don’t use !important Include all compatible vendor prefixes Avoid duplicate properties If you’re anything like me, a few of the rules must have had you flummoxed. Do the Rules make Sense? Quite frankly, yes, no and everything in between. After lurking at a number of discussion boards and IRC rooms, I found out that many developers seem to be in uproar over the rules and maybe right so. Let me attempt to explain why most of the rules make sense but others do not. The Controversial Rules Don’t use IDs in selectors IDs shouldn’t be used in selectors because these rules are too tightly coupled with the HTML and have no possibility of reuse. It’s much preferred to use classes in selectors and then apply a class to an element in the page. This one struck a nerve with a lot of developers since we’re quite accustomed to assigning IDs for the main structural components of a layout like the header and footer. CSSLint argues that the styling for such elements, by definition, can’t be directly reused. If you want dual sidebars on your page, a class lets you reuse styling while an ID will not. Keep in mind that just because a class can be reused doesn’t mean it has to be. Unique classes are perfectly acceptable and a swell way to reuse styling if the need arises. Don’t qualify headings Heading elements (h1-h6) should be defi...

  • The Ins and Outs of WebMatrix: .NET Programming Using the Razor Syntax

    This tutorial gives you an overview of programming with ASP.NET Web Pages using the Razor syntax. ASP.NET is Microsoft's technology for running dynamic web pages on web servers. ol ul li, ul ol li { background: none !important; } td .tutorial_image { display: none !important; } What You'll Learn: The top 8 programming tips for getting started with programming ASP.NET Web Pages using Razor syntax. Basic programming concepts you'll need for this session. What ASP.NET server code and the Razor syntax is all about. The Top 8 Programming Tips This section lists a few tips that you absolutely need to know as you start writing ASP.NET server code using the Razor syntax. Note: The Razor syntax is based on the C# programming language, and that's the language used throughout this session. However, the Razor syntax also supports the Visual Basic language, and everything you see in this session you can also do in Visual Basic. 1. You add code to a page using the @ character. The @ character starts inline expressions, single statement blocks, and multi-statement blocks: <!-- Single statement blocks --> @{ var total = 7; } @{ var myMessage = "Hello World"; } <!-- Inline expressions --> <p>The value of your account is: @total </p> <p>The value of myMessage is: @myMessage</p> <!-- Multi-statement block --> @{ var greeting = "Welcome to our site!"; var weekDay = DateTime.Now.DayOfWeek; var greetingMessage = greeting + " Today is: " + weekDay; } <p>The greeting is: @greetingMessage</p> This is what these statements look like when the page runs in a browser: HTML Encoding When you display content in a page using the @ character, as in the preceding examples, ASP.NET HTML-encodes the output. This replaces reserved HTML characters (such as < and > and &) with codes that enable the characters to be displayed as characters in a web page instead of being interpreted as HTML tags or entities. Without HTML encoding, the output from your server code might not display correctly, and could expose a page to security risks. If your goal is to output HTML markup that renders tags as markup (for example <p></p> for a paragraph or <em></em> to emphasize text), see the section Combining Text, Markup, and Code in Code Blocks later in this article. 2. You enclose code blocks in braces. A code block includes one or more code statements and is enclosed in braces. <!-- Single statement block. --> @{ var theMonth = DateTime.Now.Month; } <p>The numeric value of the current month: @theMonth</p> <!-- Multi-statement block. --> @{ var outsideTemp = 79; var weatherMessage = "Hello, it is " + outsideTemp + " degrees."; } <p>Today's weather: @weatherMessage</p> The result displayed in a browser: 3. Inside a block, you end each code statement with a semicolon. Inside a code block, each complete code statement must end with a semicolon. Inline expressions don’t end with a semicolon. <!-- Single-statement block --> @{ var theMonth = DateTime.Now.Month; } <!-- Multi-statement block --> @{ var outsideTemp = 79; var weatherMessage = "Hello, it is " + outsideTemp + " degrees."; } <!-- Inline expression, so no semicolon --> <p>Today's weather: @weatherMessage</p> 4. You use variables to store values. You can store values in a variable, including strings, numbers, and dates, etc. You create a new variable using the var keyword. You can insert variable values directly in a page using @. <!-- Storing a string --> @{ var welcomeMessa...

  • Ruby for Newbies: Missing Methods

    Ruby is a one of the most popular languages used on the web. We’re running a Session here on Nettuts+ that will introduce you to Ruby, as well as the great frameworks and tools that go along with Ruby development. In this episode, we’re going to look at the too-cool-to-be-true way that Ruby objects deal with methods that don’t exist. Video Tutorial? Subscribe to our YouTube and Blip.tv channels to watch more screencasts. A Problem (and a Solution) Let’s say your working with a Ruby object. And let’s also say that you aren’t entirely familiar with this object. And let’s also say that you call a method that doesn’t exist on the object. o = Object.new o.some_method # NoMethodError: undefined method `some_method' for #<Object:0x00000100939828> This is less than desirable, so Ruby has an awesome way of allowing us to rescue ourselves from this. Check this out: class OurClass def method_missing (method_name) puts "there's no method called '#{method_name}'" end end o = OurClass.new o.some_method # => there's no method called 'some_method' We can create a method called method_missing in our class. If the object we’re calling the method on doesn’t have the method (and doesn’t inherit the method from another class or module), Ruby will give us one more chance to do something useful: if the class has a method_missing method, we’ll hand the information about the method cal to method_missing and let it sort the mess out. Well, that’s great; we’re no longer getting an error message. A Better Use But stop and think about this for a second. First of all: no, we’re not getting an error message any more, but we aren’t getting something useful. It’s hard to say what useful would be in this case, because out method name doesn’t suggest anything. Second of all, this is pretty powerful, because it allows you to basically pass any method to an object and get an intelligent result. Let’s do something that makes more sense; start with this: class TutsSite attr_accessor :name, :tutorials def initialize name = "", tuts = [] @name = name @tutorials = tuts end def get_tuts_about_javascript @tutorials.select do |tut| tut[:tags].include? "javascript" end end def get_tuts_by_jeffrey_way @tutorials.select do |tut| tut[:author] == "Jeffrey Way" end end end Here you see a little class for a tutorial website. When creating a new website object, we pass it a name and an array of tutorials. We expect tutorials to be hashes in the following form: { title: "Some title", author: "the author", tags: ["array", "of", "tags"] # Ruby 1.9 # OR { :title => "Some title", :author => "the author", :tags => ["array", "of", "tags"] # Ruby 1.8 We expect symbols as the keys; notice that if you’re not using Ruby 1.9, you’ll have to use the bottom format for your hashes (both work in 1.9) Then, we’ve got two helper functions that allow us to get only the tutorial that have a JavaScript tag, or only the tutorials by Jeffrey Way. These are useful for filtering the tutorials … but they don’t give us too many options. Of course, we could make methods named get_tuts_with_tag and get_tuts_by_author that take parameters with the tag or author name. However, we’re going to go a different route: method_missing. As we saw, method_missing gets the attempted method name as a parameter. What I didn’t mention is that it’s a symbol. Also, the parameters that ge...

  • Nettuts+ Quiz #3: JavaScript

    Fancy yourself as a competent JavaScript developer? I’m back with another quiz today! Think you can get ‘em all and stake your claim to JavaScript glory? A Few Notes Ok, I may have exaggerated a bit in the intro. This quiz is best taken by those who are fluent with the basics of the language but not quite at the intermediate level yet. Most of the questions here are pretty simple once you’ve gone through the code carefully — the questions will look similar from a cursory look! And yes, the code is needlessly convoluted for a reason! This is not supposed to be something that you’ll really be seeing in real life. Hell, if I saw someone write code like this, I’d punch them in the teeth. Most of the questions are about JavaScript basics merely wrapped around oddly annoying code for the sake of being interesting. This is just a fun quiz, not the developer equivalent of the bar or the MCATs! So relax and have fun! $(document).ready(function(){ $('#quiz-container').jquizzy({ questions: init.questions, resultComments: init.resultComments, twitterStatus: 'Woo! I scored {score} on the Nettuts JavaScript quiz. Give it a shot!', twitterImage: 'http://d2o0t5hpnwv4c1.cloudfront.net/jquizzy-1.0/img/share.png', twitterUsername: 'envatowebdev', splashImage: 'http://d2o0t5hpnwv4c1.cloudfront.net/1013_quiz3jsbgint/intro.png', }); }); A Friendly Plug So how’d you do? If you liked today’s quiz, consider buying jQuizzy, the engine that powers it, on CodeCanyon. You’ll love it, I promise! ...

  • Generating Traditional URLs with ASP.NET MVC3

    There are certain truths in the world: we’re born, we die, and URLs should end with a slash if it doesn’t point to a file. The ASP.NET MVC framework bucks tradition and convention, and the built-in methods that generate URLs do so by omitting the trailing slash. It may seem like a non-issue (and to many people it’s not one), but many developers, this author included, are bugged by them. First, Some Background URL stands for Uniform Resource Locator; it tells web-aware clients where to locate a particular resource on the Internet. The URL of http://www.example.com/directory/file.html points to a physical file (the resource) called file.html that resides in a directory called directory on a web server found at the example.com domain. When the web server for example.com receives a request for that URL, it knows exactly where to look for the resource. If it finds the file, it serves its contents; if not, it responds with an error. Traditional web servers do the same thing for directory requests. Consider the URL of http://www.example.com/directory/. This URL ends with a trailing slash, denoting a directory. When the web server receives this request, it looks for the directory directory, and if it finds it, it gets the default document and returns it to the client. Otherwise, it responds with an error. These two examples demonstrate a simple process, but it can get more complex with ambiguous requests. For example, the URL http://www.example.com/ambiguous points to a resource called ambiguous, but it is unclear what that resource is. It could be a file, but there is no extension; it could be a directory, but there’s no trailing slash. When receiving a request for this resource, a traditional web server goes through the following process: The server looks for a file called ambiguous. If it finds one, it returns it. Otherwise… It sends a response back to the client, redirecting it to http://www.example.com/ambiguous/ The client requests the new URL The server looks for the ambiguous directory and returns the appropriate response Without explicitly specifying a resource, the requester creates an overhead in both processing time and bandwidth usage. Without explicitly specifying a resource, the requester creates an overhead in both processing time and bandwidth usage. For this reason, the prevailing rule of thumb has been to put the trailing slash on all URLs that point to a directory. Doing so completely eliminates the wasted processing time and bandwidth usage. It has become second nature to many (maybe most?) web veterans to always include the slash at the end of URLs that do not point to a file. So where does ASP.NET MVC fit into this? Well, ASP.NET, as you probably know, typically runs on Microsoft’s web server, called IIS. IIS, by default, behaves just like any other web server, but its true power lies in its ability to pass the handling of requests to ISAPI modules or, even better, .NET code. In the case of an ASP.NET MVC application, IIS passes each request to the MVC app for processing. There, the app determines if the request should be routed to a method on a controller, or if it should pass control back to IIS to find a physical file or directory on the file system. So the process of handling a request for http://www.example.com/ambiguous by IIS and an MVC app looks something like this: Wait, wait, wait! If MVC applications ignore the trailing slash, what’s the problem? When the app routes the request to a controller, the method on that controller executes, processes whatever data it needs, and returns a result to the client. It does not redirect the client to another URL (unless the method is supposed to do that). MVC applications don’t care if URLs end with a slash or not–in fact, MVC apps ignore trailing slashes. As long a...

  • Showcase of Desert Photography

    In this past we have showcased examples of landscape photography, which includes photos of mountains, valleys, plains, lakes, coast lines, and a variety of other types of landscapes. Deserts may not be the first thing that comes to mind when you think of subjects for landscape photography, but even a barren desert provides opportunities for photographers. In this post we'll showcase 30 outstanding examples of desert photography from a variety of different photographers. Hopefully it will serve as inspiration for you in your own work. Photo credit: alfzecat...

  • Create a Drippy Spray Paint Vector

    Spray paint and splatter effects are very commonly used in web and graphic design. There are a number of Photoshop brushes and vectors available that can be used to add these effects to your work, but sometimes you may not be able to find exactly what you are looking for, or what you find may not be licensed for what you need. In these situations you can create your own, and it's not as difficult as you might think. In this tutorial we'll create a spray paint vector that can be used in any number of different ways. The vector that we are creating here is a part of the spray paint vector set available at Vandelay Premier. Here is a look at what we will be creating: ...

  • Comment to Win a Premium WordPress Theme from Themify

    Our friends at Themify have offered to give a premium WordPress theme to five lucky readers of the Vandelay Design blog! ...

  • Aerial Photography: 30 Amazing Examples

    Some of the most interesting photos are those that show the world from a different point of view. Aerial photography can take certain subjects that we're used to seeing in a certain way and present it in a much more interesting and intriguing manner. In this post we'll showcase 30 beautiful aerial photos. They feature a variety of different subjects including landscapes like mountains and coastlines, plus other types of subjects like buildings and cities. Photo credit: Rafal Rudomina...

  • Restaurant Websites: Inspiration and Options

    Restaurants that use their websites effectively are able to have a significant impact on their business. Whether it is allowing customers to view menus and specials, find a location, make reservations, sign up for a mailing list, or place an order online, there are a lot of ways that restaurants can benefit from a website. National chains and small, local restaurants both have the potential for impact with their website, and in this post we'll showcase 25 well-designed websites for your inspiration. You'll see a lot of sites that make use of vibrant colors, and of course photos of temping food. At the end of the post we'll also list a few options for creating a restaurant website, including some of the best templates and themes. Mellow Mushroom ...

  • Designers Using Freebies to Grow Their Business

    With so much competition out there, freelance designers are always looking for new ways to stand out from the crowd. Some designers have used free resources to build their reputation. While it may seem counterproductive to give away resources that you have created, there can be significant benefits that make it worth your time. In this post we'll take a look at 7 examples where giving away freebies has been beneficial to the business and career of designers. Free resources like Photoshop brushes, textures, vectors, icons, and PSD files are in high demand because they can help designers to save time and create impressive results. Those who provide the free resources can also benefit from this interest even though they are not charging anything for the resources. The designer can benefit from added exposure and name recognition, from traffic to their site or blog (and possibly increased ad sales), and from the opportunity to promote their other products and services to these new visitors. Let's take a look at some specific examples of designers who have helped the design community, and themselves, by distributing free resources. Jay Hilgert Jay Hilgert is a designer and blogger that has used freebies to boost his profile within the industry. Jay's blog Bittbox is one of the best resources for design freebies. Over the last several years Jay has distributed freebies such as Photoshop brushes, textures, vectors and fonts. Each week a new free texture pack is released, and the Bittbox Photoshop brushes are some of the most popular brush sets found anywhere (the watercolor brushes have been downloaded more than 1 million times). Currently, Bittbox release freebies from other designers as well, but Jay's freebies are what established the site's reputation. As a result of the Bittbox freebies, Jay has a successful blog and is recognized as a creator of high-quality graphic design resources. ...

  • 40 Sets of Free Social Media Icons

    Designers love free icon sets. Having quality icons can help to make a site's design look complete, and can also help with the usability of the site. Social media icons are some of the most commonly used icons, especially in blog design. Fortunately, there are a number of free sets of quality social media icons. In this post we'll feature 40 social media icon sets from various designers. Click on the links to be led to the source where the icons can be downloaded. As always when you are dealing with freebies, check the terms and conditions to be sure that you're using them in a way that is allowed by the designer. ElegantThemes Social Media Icons ...

  • The Best Email Newsletters for Designers

    The web/graphic design community includes a huge number of active blogs that post articles, tutorials, inspiration, and other types of content. Design blogs are a part of the daily routine for many designers, but there are also several quality email newsletters that cover topics related to design and development. In this post we'll highlight some of the best newsletters out there for designers. If you enjoy getting helpful information and news in your inbox, take a look at the newsletters on this list and see if there are any that are of interest to you. Smashing Magazine Smashing Magazine not only runs the most popular blog for web designers, they also have an email newsletter that is published every two weeks. Their newsletter issues include industry news, inspiration, and links to useful websites and apps. ...

  • Create Re-Usable Button Styles in Photoshop

    Buttons are an extremely common design element that are used by almost every website. Web buttons are critical for usability and navigation, and they can also be used to help direct the action of the user as you encourage them to add a product to a shopping cart, take a tour, get more information, or contact you. Creating new buttons while keeping the same style can be very simple by using Photoshop's layer styles. In this post we'll take a quick look at how you can create your own button layer styles to save yourself some time. You may have had situations in the past where you found yourself creating multiple buttons for a mockup and adding the same layer styles over and over again. Or you may have wanted to create a new button that matches the style of an existing button, but you can't remember the details of the layer effects that were used. Both of these situations could be made much easier if the button effects were saved as a layer style that could be re-used at any time. Layer styles are a preset in Photoshop, like brushes, patterns, and custom shapes. Layer styles can be saved as an .asl file and then can be loaded at any time, or distributed with others working on the project. Creating Button Styles Let's start by creating a basic button in Photoshop. Set the foreground color to #166ecc and the background color to #4495ee. Select the rounded rectangle tool with a radius of 10 pixels and draw a rectangle that is 250 pixels wide and 40 pixels high. ...

  • Save 20% on Your First 12 Months of Hosting with Eleven2!

    Every website needs quality, affordable hosting. We're happy to announce that our host, Eleven2, is offering a 20% discount for the first twelve months on new plans with the promo code "vandelay" (please continue reading for details)! Several months ago we posted a few coupon codes that would save you some money on the first month of a hosting account with Eleven2, and a number of readers took advantage of that promo. That offer drew enough response that we thought that this deal is certainly worth mentioning. We use Eleven2 ourselves and we frequently recommend them to our clients as well (we've written a more detailed review of Eleven2 if you are interested). ...

  • Creating a PHP and CSS3 Powered About Page

    Here we will be creating a simple about page that is powered by PHP, HTML5 and CSS3. It will present your contact information to your visitors, with an option for downloading it as a vCard (useful for importing it in third party applications)....

  • 15 Powerful jQuery Tips and Tricks for Developers

    In this article we will take a look at 15 jQuery techniques for your effective use of the library. We will start with a few tips about performance and continue with some of the library's more obscure features....

  • Making a Beautiful HTML5 Portfolio

    In today's tutorial we will be making a beautiful HTML5 portfolio powered by jQuery and the Quicksand plugin. You can use it to showcase your latest work and it is fully customizable, so potentially you could expand it to do much more....

  • Making a Simple Tweet to Download System

    This time we will be building a simple Tweet to Download system with jQuery and Twitter's Web Intents gateway. It will offer your website visitors a free download, but only after they tweet about your website....

  • Generating Files with JavaScript

    This time we will be making a jQuery plugin which, combined with a simple php script, can generate a file and make it available for download. Perfect for exporting the settings of your webapp or providing reports....

  • App Engine Series #5: The Front End

    In this final part of the series, we will be creating the jQuery / CSS front end. We will be using the Flot jquery plugin to build a live visualization of the uptime data gathered by our dashboard....

  • Making a CSS3 Animated Menu

    In this short tutorial, we will be using the power of CSS3 effects and transitions, to build a JavaScript-free animated navigation menu which you can use to add a polished look to your website or template....

  • App Engine Series #4: The Controllers

    Picking up where we left last time, we will take a look at the controllers that comprise our app engine application. ...

  • Photobooth with PHP, jQuery and CSS3

    In this tutorial, we will be building a jQuery and PHP powered photobooth. It will allow your website visitors to take a snapshot with their web camera and upload it from a neat CSS3 interface....

  • Making a Custom Facebook Wall with jQuery Templates

    In this tutorial, we are going to create our own version of Facebook's wall using Facebook's Graph API with jQuery, and the template plugin....

  • Book: “CSS3: Visual QuickStart Guide”

    With the arrival of Internet Explorer 9 which has CSS3 support, now all major browsers can work with CSS3. It is time to get started with CSS3. As its name implies, this book gets you started quickly with a lot of diagrams and screen shots. CSS3 works best with HTML5. So this book has a [...]...

  • How to Build a Shortlink App with Ruby and Redis

    In this tutorial, we’ll be building a quick shortlink web app with Ruby, the Sinatra web framework, and the Redis database. By the conclusion of this tutorial, you’ll end up with a dead simple, high performance shortlink webapp that’s super easy to scale. Step 1. Getting Started To follow along with this tutorial, you’ll need Ruby installed on your system (I’m using 1.9.2), as well as the sinatra and redis gems, and Redis. If you don’t already have Ruby installed on your system, then you should be able to install it relatively easily. OS X, Debian or CentOS users may need to compile a newer version of Ruby. It’s a pretty straightforward process. Refer here to learn about how to install Ruby, via RVM. Now you’ll need to install the required Ruby Gems. Gems are a convenient way of installing virtually any Ruby library available. Simply type the following in your terminal window to install the required gems: gem install sinatra redis We’ll also need to install and compile Redis. Don’t worry, it’s really small and only takes roughly 15 seconds to compile on my machine. wget http://redis.googlecode.com/files/redis-2.0.4.tar.gz tar zfx redis-2.0.4.tar.gz cd redis-2.0.4 make sudo make install cd .. You can run the Redis server by typing redis-server into your terminal, and if you feel like playing around with Redis, give redis-cli a go. Step 2. Building the App One of the great things about Sinatra is how quick and easy it makes whipping up simple little apps – it’s almost silly! The code for the shortlink app itself won’t be very long, so it should be really easy to understand. Don’t worry if you don’t understand it at first, I’ll explain how it all works shortly. Make a folder for your webapp – I’ve called mine redis-ruby-shortlink – and put the following files in it. shortlink_app.rb require 'sinatra' require 'redis' redis = Redis.new helpers do include Rack::Utils alias_method :h, :escape_html def random_string(length) rand(36**length).to_s(36) end end get '/' do erb :index end post '/' do if params[:url] and not params[:url].empty? @shortcode = random_string 5 redis.setnx "links:#{@shortcode}", params[:url] end erb :index end get '/:shortcode' do @url = redis.get "links:#{params[:shortcode]}" redirect @url || '/' end That’s it. Pretty simple, eh? In that little Sinatra app above, I’ve done a few key things. In the first two lines, I’m bringing in the libraries we need – sinatra and redis. On line 4, I establish a connection to the Redis server, listening on localhost. The lines after this is where it all starts to get interesting! In Sinatra, you can specify helpers that are executed every time one of your routes (those get and post parts) is run. We can put anything that we might need often in the helpers block. In my helpers block, I’ve aliased h to Rack’s escape_html, and defined a method to generate a random alphanumeric string of a certain length. Next up are the routes. The first route is rather simple. Whenever a client makes a GET request to /, it just renders the index.erb page (I’ve included the source to this further down.) The next route is where the good stuff happens. First, we make sure that the user has actually typed a URL into the URL box. If so, we generate a random shortcode five characters long by calling the random_string method we defined before. Then, we tell Redis to setnx (Set if n exists), a key representin...

  • 25 Ecommerce Websites for Your Design Inspiration

    Ecommerce websites can be one of the more challenging types of websites for designers. There is a lot that needs to be considered (see 9 Characteristics of Well-Designed Ecommerce Websites) and the design decisions can have a significant impact on the effectiveness of the website at converting visitors to customers. In this post we'll showcase 25 ecommerce websites that feature an attractive visual design. They should serve as an excellent source of inspiration when working on ecommerce projects of your own. Red Velvet ...

  • How to Create a jQuery Image Cropping Plugin from Scratch – Part I

    Web applications need to provide easy-to-use solutions for uploading and manipulating rich content. This process can create difficulties for some users who have minimal photo editing skills. Cropping is one of the most used photo manipulation techniques, and this step-by-step tutorial will cover the entire development process of an image cropping plug-in for the jQuery JavaScript library. Step 1. Setting Up The Workspace First, we are going to set up our project workspace for this tutorial. Begin by creating a hierarchy of directories and empty files named as exemplified in the image below: Next, you’ll need to download the jQuery JavaScript library and place it inside the /resources/js/ folder. The image used in this tutorial must be named example.jpg and placed inside the /resources/images/ folder. You can use this image (thanks to gsso-stock), provided with the source files of this tutorial, or one of your own. And the last file is the outline.gif file, which must be placed inside the /resources/js/imageCrop/ folder. Step 2. Creating The Test Page To test our plug-in, we’ll need to attach it to an image. Before starting to work at it, we’ll create a simple page containg that image. The HTML Open up the index.html file in your favorite text editor and write the following code. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> <title>jQuery Image Cropping Plug-In</title> <link href="style.css" media="screen" rel="stylesheet" type="text/css" /> <link href="resources/js/imageCrop/jquery.imagecrop.css" media="screen" rel="stylesheet" type="text/css" /> <script src="resources/js/jquery-1.6.2.min.js" type="text/javascript"></script> <script src="resources/js/imageCrop/jquery.imagecrop.js" type="text/javascript"></script> </head> <body> <div id="wrapper"> <h1>jQuery Image Cropping Plug-In</h1> <div class="image-decorator"> <img alt="jQuery Image Cropping Plug-In" height="360" id="example" src="resources/images/example.jpg" width="480" /> </div><!-- .image-decorator --> </div><!-- #wrapper --> </body> </html> There’s nothing fancy here: just plain HTML code. We have loaded a stylesheet for the page, jQuery, our plug-in files (which are currently empty) and placed an image inside the document. The CSS Now edit style.css as shown above. * { margin : 0; outline : 0; padding : 0; } body { background-color : #ededed; color : #646464; font-family : 'Verdana', 'Geneva', sans-serif; font-size : 12px; text-shadow : 0 1px 0 #ffffff; } h1 { font-size : 24px; font-weight : normal; margin : 0 0 10px 0; } div#wrapper { margin : 25px 25px 25px 25px; } div.image-decorator { -moz-border-radius : 5px 5px 5px 5px; -moz-box-shadow : 0 0 6px #c8c8c8; -webkit-border-radius : 5px 5px 5px 5px; -webkit-box-shadow : 0 0 6px #c8c8c8; background-color : #ffffff; border : 1px solid #c8c8c8; border-radius : 5px 5px 5px 5px; box-shadow : 0 0 6px #c8c8c8; display : inline-block; height : 360px; padding : 5px 5px 5px 5px; width : 480px; } We’ve c...

  • 50 Fireworks Tutorials for Designers

    Although Fireworks doesn't get as much attention as Photoshop, for web designers it can be as good or a better tool for many tasks as compared to Photoshop. One of the challenges of working with Fireworks is that most of us simply feel more comfortable in Photoshop because of having more experience with it. In the  absence of experience, quality tutorials can become a very valuable resource to help with the learning curve. In this post we'll link to 50 tutorials that will help designers to learn more about Fireworks and what can be accomplished with it. The Abduzeetles Rockband Website in Fireworks ...

  • Having Fun With CSS3: Spinning Newspapers

    Lets have some fun today, and build the classical "spinning newspaper" scene using CSS3 animations, jQuery, and the canvas element, picking useful techniques along the way....

  • Python from Scratch – Functions and Modules

    Welcome back to the Python from Scratch series. In the previous lesson, we learned how to use variables and control structures to store and manipulate data. Be sure to review it if you need a refresher! Video Tutorial Press the HD button for the clearest picture. Subscribe to our YouTube and Blip.tv channels to watch more screencasts. Transcript In today’s tutorial, we’re going to be looking at functions – what they are, how they work, and how to make your own. We’re also going to be reviewing some of the built-in functions, and how to use them effectively. Finally, we’re going to have a look at creating and importing modules. Functions – Writing your Own Functions are an important step to cover, when introducing additional complexity into your programming. If a variable is a named container for data, then a function is a named container for a block of code that can be executed on demand. This is useful if you have a program that executes a certain operation lots of times. Instead of copying and pasting the code to do that operation each section where it’s needed, you can simply write one single function to do it for you. A function is a named container for a block of code. There are two types of functions: the ones that you write yourself and include in your code, and the ones that are included in Python natively, which carry out common procedures, such as converting an integer to a string, or finding the length of a string. We’re going to look at writing a simple function now, and demonstrate how it can be useful in the real world code. Then, we’ll have a look at some of the most important built-in functions. A simple Example Let’s imagine that we want to make a script for a shopping cart that takes the cost of all the items in your cart, and then adds them together to return a total cost. To write a function that would take two costs, add them up, and then print out the output, we might do something like: #our two costs to add up cost1 = 15 cost2 = 20 def sumCart(): totalCost = cost1 + cost2 print totalCost sumCart() To define the function, we need to use the ‘def‘ keyword, and then the name of the function. Next, we type two parentheses (we’ll come back to those later), and then a colon. After that, all of the code that we want to be encased within the function should be indented, just as with if, while and for loops. To make the code in the function run, we type the name of the function, followed by the two parentheses again. If you run this code, you’ll see it print out ’35′, which is the correct output. Arguments That’s great, but at the moment, our functions are a bit rigid – everything about the function is hard-coded into them. For example, let’ say we want to use the sumCart function somewhere else, in a different part of the program, but instead of adding cost1 and cost2 together, we want to add two other costs together that were held in different variables. We’d have to write a whole new function, even though that new function would be exactly the same as the current one, with the names of the variables swapped around – that hardly seems like an efficient solution. To solve this issue, we use ‘arguments’, and that’s what the parentheses are for. An argument is a way of passing data into a function when we don’t know which variable or variables that data is going to be in. If that’s confusing, let’s take the example that I just referenced. We’ll add two more costs: cost3 and cost4. Now, we’re going to add two arguments for the two items that we want to add up. Arguments are defined inside the parentheses, and each argument is given a name, with a comma separating each. An argument acts as a temporary reference to the data that you passed in while the function is running. ...

  • CSS: Elastic Videos

    While I was coding the Elemin Theme (a responsive WordPress theme that I recently designed), one of the challenges that I faced was to make the embedded videos elastic. Using the max-width:100% and height:auto trick works with native HTML5 video tag, but it doesn't work with embed code using iframe or object tag. After hours [...] with BSA...

  • Speaking at Mad in Spain

    I just wanted to post a quick announcement that I will be speaking at Mad in Spain on June 3rd, 2011 (organized by Domestika). This will their 6th anniversary. Mad in Spain is one of the biggest design conferences in Spain. My presentation topic is about applying art in modern web design. After the conference, [...] with BSA...

  • Japan Earthquake Poster

    Recently I've joined a group of artists to support Japan earthquake relief efforts. Each artist contributed a piece of art work dedicated to raise funds. The artworks will be displayed and available for purchase at the To Japan with Love (Facebook event) art show which is organized by Linda Nakanishi. All proceeds from the show [...] with BSA...

  • Animated Scroll to Top

    Due to a number of requests, I'm writing a detail tutorial on how to create an animated scroll to top as seen on Web Designer Wall. It is very simple to do with jQuery (just a few lines of code). It checks if the scrollbar top position is greater than certain value, then fade in [...] with BSA...

  • Free iPad 2 Giveaway at Themify

    I'm givingaway a brand new iPad 2 at Themify.me to promote the new buy 1 get 1 free WordPress theme special deal. To enter the iPad 2 Giveaway Contest, all you have to do is to help to spread the word by tweeting a message: "iPad Giveaway: @themify now offers buy 1 get 1 WordPress [...] with BSA...

  • Best of Design 2010

    As 2010 is wrapping up, it is about time do a sum up of the best sites that I've featured on Best Web Gallery. Again I've selected 50 sites from different categories: personal blog, commercial, agency, portfolio, and software. In 2010, CSS design is getting more interactive. People are using jQuery and CSS animation to [...] with BSA...

  • Illustrator & Photoshop CS5 Review

    Did you know that Adobe Photoshop is 20 years old and Illustrator has been around over 24 years? I've been using Photoshop since version 5 and Illustrator since version 8. It is amazing to see how they are progressively improving and adding more features. Now with vector features and 3D tools, Photoshop is no longer [...] with BSA...

  • WDL Premium: Apparel Vector Pack

    with BSAHere’s a high-quality vector pack for our WDL Premium Members. This Apparel Vector Pack is from Go Media. Inside the pack you will find tees, hoodies and a lot of vectors to help you presenting your designs, check it out. Be sure to check out Go Media’s Arsenal for more awesome vectors, brushes, and more. [...]...

  • 10 New High-Quality Free Fonts

    with BSAWe know that every designer needs new fonts once in a while to have some backup elements to count on, and that is why we are here for, to help you searching for resources to use on your projects. So knowing that every one is looking around for high quality fonts to spice up their [...]...

  • DesignTNT Launch Giveaway

    with BSADesign TNT is a new resource website of design goodies which has just made its entrance into the design industry. The website was launched Yesterday (Jul, 11) and is already getting lots of attention. Design TNT’s mission is to provide all designers out there with high quality resources – all in one place! Update: Congratulations [...]...

  • WDL Premium: Scrolls Vector Pack

    with BSAHere’s a new set of vectors for our WDL Premium Members. This pack from Designious contains 12 royalty-free ribbons, all hand-made and original. These will be perfect for adding an unique touch to your designs. Be sure to check out Designious for more design resources. Here’s a preview of the vectors. Download Scrolls Vector Pack [...]...

  • 30 Login Forms with Creative Design

    with BSAOn many sites, the one page that people see over and over again is the login page. That makes it important to not only make it something worth looking at repeatedly, but also easy to use, as the designers below have done. Effective and pleasant registration form design is also important – as this will [...] with BSA...

  • Managing Your Time with Freelance and Personal Design Projects

    with BSAProviding your services as a freelancer is hard work. It will require a lot of your time, patience, and gratitude towards your customers. Set aside the fact you’ll be slaving away on many projects just to pay bills, all the while often ignoring your own creative project ideas. The most important skill any freelance web [...] with BSA...

  • Weekly Design News – Resources, Tutorials and Freebies (N.95)

    with BSAThis is our weekly column were we share our favorites design related articles, resources and resources all from the previous week. If you would like to be kept up to date with loads of fresh design news and resources, you can follow us on Twitter, on Facebook, on Stumbleupon or by subscribing to our RSS [...] with BSA...

  • Getting Started with WordPress Shortcodes (+Examples)

    with BSAShortcodes were introduced in WordPress 2.5, and help you to create macro codes to use within your content. If you think about it, this is a great way to create something like a dynamic ad spot or a call-to-action button in your posts. If we use the call-to-action example, you could add something like this [...] with BSA...

  • We Have 50 Free Invites to BT:Engage – Redeem yours now!!!

    with BSAWe have been kindly given 50 invites to BT:Engage, developed by www.brandthunder.com, to give away to our readers. It is a new premium app that gives you the power to transform your drab and boring browser into a beautiful engagement tool for your personal, business or community needs. Within moments, you can build your own [...] with BSA...

  • Keys to Effective Web Design Proposals

    Being able to draft an effective proposal is an essential part of staying busy and keeping money coming in as a freelance designer. In order to land client work you will need to be able to break down what you have to offer. Working on proposals is often an intimidating part of the process for new freelancers, so we'll take a look at some things that you can do to improve the effectiveness of your own proposals for client projects. Here are some keys to proposals that will help you to land the client's business. Meets the Needs and Wants of the Client Before submitting a proposal to the client you should take the time to get to know their project and specifically what they want and need. A proposal that matches up with what the client wants will obviously be the most effective in terms of landing the business, but some designers tend to rush the initial stages of getting familiar with the client and project. This often leads to a proposal that doesn't really fit with what the client wants, and it results in lost business and missed opportunities. In addition to covering the things that the client wants, if you have identified some things that the client really needs you should include them in your proposal, and explain to the client why it is in their best interest. This will help the project to be more successful for the client, and if they choose not to follow your advice at least you have done your part by advising....

  • Showcase of Urban Decay Photography

    Urban decay can serve as an excellent source of design inspiration for textured, grunge-style designs. Taking in these scenes first hand is a great way to get some inspiration offline from your surroundings, but viewing photos of urban decay is a suitable substitute when it's not possible to experience in person. In this post we'll showcase 40 examples of urban decay photography for your inspiration. To see any of the photos in larger sizes or to see more work from the photographer, click through the links to be led to the source. Photo credit: Jonas Bunten...

  • 35 Quality Brochure Templates

    A well-designed and effective brochure can be an excellent marketing tool for any business. If you're in need of a brochure for yourself or for a client you may be able to find a high-quality template that will meet your needs or at least serve as a starting point that you can customize. In this post we'll showcase 35 premium brochure templates that can be purchased very inexpensively. Ultimate Creative Studio Trifold Brochure ($5) ...

  • Design Inspiration: Purple Websites

    Continuing with our current series on color inspiration, today we focus on purple websites. As you will see in the 25 sites showcased in this post, purple is a primary color in a lot of beautiful websites. The sites showcased here should provide some examples and spark ideas for how you can use purple in your own designs, and show examples of color schemes that can be built around purple. You may also be interested in: Blue Websites Green Websites Orange Websites MFG Labs ...

  • Long-Term Considerations for Freelance Designers

    Working as a freelance designer is appealing to a lot of people because of the flexibility and independence. Freelancing also can provide designers in a wide variety of situations with a way to earn a living, and in some cases the experience that is gained becomes just as valuable as the income. However, freelancing for the long-term presents some unique challenges that should be considered from the start. In this article we'll take a look at 10 things that should be considered before you start freelancing full-time, and hopefully they will help you to be better prepared in case freelancing turns out to be a long-term job. 1. Is Freelancing a Temporary or Long-Term Part or Your Career Path? Everyone has different reasons for freelancing. For some it can be a starting point that allows them to build their experience and their reputation in the industry before a transition to working as an employee at a design agency or as an in-house designer. For others freelancing may be a short-term solution after losing a job. And for some freelancing may be a long-term part of their career. Freelancing is capable of serving all of these purposes, but it is important to consider what you want to get out of your time and effort freelancing. If it is a short-term solution that you hope will serve as a springboard to a full-time job you will probably approach it much differently than if you plan to still be freelancing 10 years from now. If you're leaning towards that long-term approach there are a lot of things you should consider, and that's what we'll look at here....

  • 33 Photoshop Photo Editing Tutorials

    Photoshop makes it possible to edit your photos in countless ways. With endless possibilities the challenge is knowing how to use the photo editing tools effectively. In this post we'll feature 33 tutorials that teach different photo editing techniques and tricks. You're sure to find at least a few that can be put to good use in your own work, whether it be on your photos or on those of your clients. Master a Professional Photo Retouching Workflow ...

  • Design Inspiration: Orange Websites

    Today we continue our current series on color inspiration by focusing on beautiful orange websites. When it comes to layouts and color schemes, orange can be a very strong color, which often makes it more challenging use it effectively. If you're looking for inspiration of the use of orange, or if you are looking for other colors to use in your color scheme, the 25 sites showcased here should help. You may also be interested in: Blue Websites Green Websites LightCMS ...

  • Client Follow Up Tips for Freelancers

    Freelancers are always looking for new ways to attract clients and to land new projects. There are any number of ways to find new work, but the ideal situation involves not dedicating a lot of time or money in the search for projects. If you've been freelancing for a little while you should have a number of clients that you have done some work for in the past, and they can be a great source of new projects. Maybe they need a full website re-design, or maybe they need some related services that you could also provide. An effective approach to client follow up will help you to stay in touch with those past clients, to keep them aware of the range of services that you offer, and to secure their business when their need arises for some type of work. And best of all, with an organized approach it doesn't have to be time consuming or costly. If you haven't been making the most of follow up opportunities with past clients here are a few tips that will help you. 1. Keep Track of Contact with Past Clients In order to be effective with your client follow up you will need a method to keep track of clients' contact info and to record the dates and details of follow up. You could use a customer relationship management app like Highrise or Zoho CRM, which will help to organize your contacts and all relevant data. For freelancers or independent designers simply keeping an organized spreadsheet could do the trick. Whatever works for you is the approach that you should take. The important thing is that you have all of your clients' contact info organized and that you can easily see the details of your recent contact with them. This will help you to know when to reach out to them without going overboard and emailing them too much because of poor organization and record keeping....

  • 30 Poster Design Tutorials for Photoshop

    Photoshop allows designers to create amazing posters that can be used for a variety or purposes like movie promos, product promos, event promos, as well as just for fun and practice. There are a lot of quality tutorials out there that teach the process of designing a poster in Photoshop. In this post we'll feature 30 poster tutorials from a variety of different designers. In this collection you should find at least a few tutorials that teach something that could be helpful in your own work. Create a Vibrant Space-Themed Poster in Photoshop ...

  • 39 Beautiful Email Newsletter Templates

    Email newsletters are an important marketing and communication tool for many businesses. The appearance of your newsletter can be enhanced with an attractive design, but having a custom design isn't the only option. Templates are available for newsletters, and many of them are provided by companies that manage mailing lists like MailChimp and Campaign Monitor. Those two providers market towards designers more than competitors like AWeber, so as a result they tend to have better quality and quantity of templates available. Here is a look at some of the templates available. MailChimp Templates: These templates are free for use on paid accounts. Free accounts are limited to more basic templates. ...

  • HTML5 File Uploads with jQuery

    Today we will be developing a small HTML5 web application that will allow people to upload photos from their computers by dragging and dropping them onto the browser window....

  • jQuery PointPoint – A Plugin For Pointing To Things

    In this tutorial, we will be writing a jQuery plugin that will help you draw users' attention to a specific part of the page, in the form of a small arrow that is displayed next to their mouse cursor....

  • Shuffle Letters Effect: a jQuery Plugin

    In this short tutorial we will be making a jQuery plugin that will shuffle the text content of any DOM element - an interesting effect that can be used in headings, logos and slideshows....

  • Building a Website with PHP, MySQL and jQuery Mobile, Part 2

    In the second part of this two-part tutorial, we will complete our MVC driven computer web store by writing the views and discussing jQuery mobile....

  • Building a Website with PHP, MySQL and jQuery Mobile, Part 1

    This is the first of a two-part tutorial, in which we will be building a simple computer shop website with PHP, MySQL and jQuery Mobile using the Model-View-Controller (MVC) pattern....

  • Display your Favorite Tweets using PHP and jQuery

    In this tutorial, we will be writing a PHP class that will fetch, cache, and display your favorite tweets in a beautiful CSS3 interface....

  • Bubble Slideshow Effect with jQuery

    Today we will be building a jQuery-powered bubble animation effect. It will be a great way to present a set of images on your website as a interesting slideshow....

  • CSS3 Image Styles

    When applying CSS3 inset box-shadow or border-radius directly to the image element, the browser doesn't render the CSS style perfectly. However, if the image is applied as background-image, you can add any style to it and have it rendered properly. Darcy Clarke and I put a quick tutorial together on how to use jQuery to [...] with BSA...

  • Postcards Giveaway With MOO

    I am delighted to work alongside MOO in offering a 20 postcard giveaway for 10 readers. The winners can upload their own design to redeem the postcards (shipping is included). Also, one lucky winner will win $50 in print credit to use at MOO. If you've not come across MOO before, they just love to [...] with BSA...

  • Best Web Gallery Revamped

    Finding inspiration has always been part of my work and life. I created Best Web Gallery back in 2006 as my personal bookmark tool where I featured the best design on the web. I've featured more than 1700+ sites in the past years. Today I'm happy to announce the redesign. The new design gives the [...] with BSA...

  • 30 Colorful Autumn Wallpapers

    with BSAA clean workspace and an inspiring wallpaper can help push you into a positive and productive mood. Summer holidays have flown away and now is the time to focus on work. To find motivation to work we present you 30 inspiring autumn season wallpapers with variety of colors and interesting compositions. Autumn season is often [...]...

  • 10 jQuery Plugins to Enhance your User Interfaces

    with BSAWith a recently estimated over 20 million websites currently using jQuery it is essential to know what jQuery plugins there are out there in order to stay with the web design trend. Today, we’ll put some focus on some popular jQuery user interface plugins to help you enhance your current website to stay ahead of [...]...

  • 23 Examples of Screenshots in Web Design

    with BSAWhether you’re developing apps or websites, it’s a good idea to show potential customers what they’re getting in the form of screenshots. And if your product is good looking enough, you might just want to put them front and center, making them the focal point of the home page. For your inspiration, we’ve gathered some [...]...

  • 20 More Creative Print Ads from Lego

    with BSAAs regular visitors to this site will know, we love Lego. We really, really do. We love its creativity, its originality, its endless possibilities and most of all, we love it because it is darn good fun. As we mention with our with our previous Lego ads article (39 Creative Lego Advertisements), its creativity is not only limited to plastic building bricks. It even extends to their impressive advertising campaigns as well. They have taken the simplest of ideas and [...] with BSA...

  • Breaking the Norm: Unusual and Creative Web Layouts

    with BSAWeb design does not have to be limited to a typical grid structured layout. It sometimes feels like we are locked in an endless cycle of header, content, sidebar and footer. That is it. It would be great if we could to tear away from convention sometimes and also force ourselves to break some usability rules. Just imagine what we could create. In today’s post we have for you a selection of sites that do exactly as described above: They [...] with BSA...

  • 40 New jQuery Plugins

    with BSAEvery six months or we do like to take a look at some of the greatest and freshest jQuery plugins from within that time. Each time we do this the jQuery community never ever fails to let you down. Constantly releasing plugins that are not only useful and problem solving, but also releasing plugins that can aid you with new technologies like HTML5 and CSS3. Hope you enjoy this selection. You might also like: 50 jQuery Plugins for Form Functionality, [...] with BSA...

  • Weekly Design News – Resources, Tutorials and Freebies (N.105)

    with BSAThis is our weekly column were we share our favorite design related articles, resources and cool tidbits from the past week. Enjoy :) If you would like to receive our daily updates you can follow us on Twitter, on Facebookor by subscribing to our RSS feed. How to Create a CSS3 3D Text Plugin for jQuery Responsive Image Gallery with Thumbnail Carousel jmFullWall- FullZoom Portfolio with jQuery CSS3 Image Styles How to Create a Beautiful Icon with CSS3 How To [...] with BSA...

  • 20 More Tileable and Seamless Pattern Sets (500+ Patterns)

    with BSAUsing seamless/tileable patterns are a fantastic method for giving your design some added depth and character by either subtly highlighting key areas or for creating a background that will push your layout design to the forefront. The seamless patterns sets in this post range in format from .eps, .ai, .png, .pat, .psd and .jpg, with each set containing anything at least 3 patterns rising all the way up to 300. They vary from fabrics, geometric shapes, flowery, retro, vintage, grunge, [...] with BSA...

  • Recently in Web Development (September Edition)

    Web development is an industry that’s in a state of constant flux with technologies and jargon changing and mutating in an endless cycle. Not to mention the sheer deluge of information one has to process everyday. In this series, published monthly, we’ll seek to rectify this by bringing you all the important news, announcements, releases and interesting discussions within the web development industry in a concise package. Join me after the jump! News and Releases All of the important news in a single place: releases, announcements, companies bickering, security issues and all related hoopla. Firefox 7 Officially Available And just like that another version of the hugely popular Firefox browser is out. In keeping with their earlier promise of faster release, version 7 is out just a few weeks after version 6. The new version is touted to use as low half as much as memory as the previous version. A little testing does indeed show the the browser is much snappier than before. Another feature that should keep users and web devs happy is hardware acceleration for the canvas tag. As someone who messes around with canvas all the time, this is indeed a big one. Hit the link below to glean more about the new features and updates. Read more Ruby on Rails 3.1 is Released This one is for the Rails aficionados. This extremely popular Ruby framework just released a major point release of the framework. Big features in this version include jQuery being included as the default JavaScript library and support for HTTP streaming. Hit the link below for the entire change log. Read more jQuery Mobile arc2released! The jQuery team is back at their super productive best with their beta 3 and RC1 release of jQuery mobile. Among a big set of fixes and improvements, this release also include support for pushState and the beforechangepage event along with improvements for the iOS5 platform. Hit the link below for more. Read more PostgreSQL 9.1 is Out Among all the talk about noSQL, it’s easy to forget that we still are in a world where SQL is the dominant force. PostgreSQL, one of the well known SQL vendors just released a point update to their software with a lot of new features and improvements. Read more MongoDB 2.0 Released And to just spite the SQL camp, MongoDB is out with version 2 of their flagship MongoDB data store. MongoDB is one of the more well known noSQL solutions and just finished a round of funding from Sequoia, for the more entrepreneurish amongst you. I recommend visiting the link below to find out more about what has changed here. Read more Rails Installer Now Supports Rails 3.1 While Unix and Linux devs have the ...

  • The Newbie’s Guide to Test-Driven Development

    Twice a month, we revisit some of our readers’ favorite posts from throughout the history of Nettuts+. This tutorial was first published in August, 2010. Testing your code is annoying, but the impact of not doing so can be orders of magnitude more annoying! In this article, we’ll use test-driven development to write and test our code more effectively. What is Test-Driven Development? Since the dawn of the computer era, programmers and bugs have battled for supremacy. It’s an inevitable occurrence. Even the greatest programmers fall prey to these anomalies. No code is safe. That’s why we do testing. Programmers, at least sane ones, test their code by running it on development machines to make sure it does what it’s supposed to. Sane programmer who tests his programs. Image courtesy of http://www.youthedesigner.com Insane programmer who doesn’t test his programs. Image courtesy of http://www.internetannoyanceday.com Test-driven development is a programming technique that requires you to write actual code and automated test code simultaneously. This ensures that you test your code—and enables you to retest your code quickly and easily, since it’s automated. How does it work? Test-driven development, or TDD as we’ll call it from now on, revolves around a short iterative development cycle that goes something like this: Before writing any code, you must first write an automated test for your code. While writing the automated tests, you must take into account all possible inputs, errors, and outputs. This way, your mind is not clouded by any code that’s already been written. The first time you run your automated test, the test should fail—indicating that the code is not yet ready. Afterward, you can begin programming. Since there’s already an automated test, as long as the code fails it, it means that it’s still not ready. The code can be fixed until it passes all assertions. Once the code passes the test, you can then begin cleaning it up, via refactoring. As long as the code still passes the test, it means that it still works. You no longer have to worry about changes that introduce new bugs. Start the whole thing over again with some other method or program. The test-driven development cycle Image courtesy of http://en.wikipedia.org/wiki/Test-driven_development Great, but how is this better than regular testing? Have you ever purposefully skipped testing a program because: You felt it was a waste of time to test, since it was only a slight code change? You felt lazy testing everything again? You didn’t have enough time to test because the project manager wanted it moved up to production ASAP? You told yourself you’d do it “tomorrow”? You had to choose between manual testing, or watching the latest episode of your favorite TV show (Big Bang Theory)? Most of the time, nothing happens, and you successfully move your code to production without any problems. But sometimes, after you’ve moved to production, everything goes wrong. You’re stuck fixing a hundred holes in a sinking ship, with more appearing every minute. You do not want to find yourself in this situation. Screw it, just move it to production! Image...

  • How to Create an HTML5 Microdata Powered Resume

    In May 2009, Google introduced Rich Snippets, a small block of information displayed in Google’s search engine results to make it easier for users to decide which pages are relevant to their search. In June 2011, Google announced the creation of Schema.org, a new initiative from Google, Bing and Yahoo! that aims to improve the web by creating structured data markup schema. This tutorial demonstrates how to create an online resume that incorporates Schema.org Microdata. The tutorial also includes instructions on how to use Authorship Markup! Bonus Items Included! The tutorial demo is a one page site template that you are free to use for your online resume. As a bonus, several color versions are included in the source files zip; dark green, light green, dark blue and light blue. Please note that this is not a web design or CSS tutorial, so only the HTML5 and Schema.org Microdata markup will be covered. Now, let’s begin! Step 1: The CSS Create a CSS style sheet called “style.css” and include the following code. Don’t worry; it’s fairly simple, and understanding it isn’t necessary for this tutorial. /* Default Styles --------------------------------------------------- */ body { margin: 0px; padding: 0px; background: url("../images/bg_dark_green.png"); background-color: inherit; font-size: 16px; font-family: "Trebuchet MS", Helvetica, sans-serif; color: #000; } a:link { text-decoration: underline; color: #000; font-weight: bold; } a:visited { text-decoration: underline; color: #000; font-weight: bold; } a:hover { text-decoration: underline; color: #669933; font-weight: bold; } a:active { text-decoration: underline; color: #000; font-weight: bold; } #wrapper { width: 965px; margin: 0 auto; } #content { background-color: #eee; width: 960px; text-align: left; overflow: auto; position: relative; margin: 25px 0px 25px 0px; border: #fff solid 2px; } .clear { float: none; clear: both; margin: 20px 0px 20px 0px; } /* Header --------------------------------------------------- */ #contact-details .header_1 { float: left; width: 350px; text-align: center; margin: 40px 0px 0px 20px; } #contact-details .header_1 img { border: #fff solid 4px; background: url("../images/bg_img_dark_green.png"); padding: 16px; margin: 10px 0px 0px 0px; } #contact-details .header_2 { float: left; width: 570px; margin: 40px 0px 0px 10px; } #contact-details .header_2 a { font-weight: normal; } #contact-details h1 { margin: 0px 0px 0px 20px; font-size: 52px; font-weight: bold; } #contact-details h3 { margin: 0px 0px 32px 20px; font-size: 30px; font-weight: bold; font-style: italic; } #contact-details ul.info_1 { list-style: none; margin: 0px 0px 0px -12px; font-size: 18px; } #contact-details ul.info_2 { list-style: none; margin: 0px 0px 15px -12px; font-size: 18px; } #contact-details li.address { background: url("../images/home.png") no-repeat; background-position: 0px 0px; padding: 0px 0px 12px 40px; } #contact-details li.phone { background: url("../images/phone.png") no-repeat; background-position: 0px 0px; padding: 0px 0px 12px 40px; } #contact-details li.email { background: url("../images/mail.png") no-repeat; background-position: 0px 0px; padding: 0px 0px 12px 40px; } #contact-details li.site_url { background: url("../images/computer.png") no-repeat; background-position: 0px 2px; padding: 0px 0px 12px 40px; } #contact-details li.twitter { background: url("../images/twitter_sm.png") no-repeat; background-position: 0px 0px; padding: 0px 0px 12px 40px; } /* Main Content --------------------------------------------------- */ h2.top { margin: 0px; font-size: 22px; font-weight: bold; } h2 { margin: 40px 0px 0px 0px; font-size: 22px; font-weight: bold; } dl { margin: 0px 50px 0px 0px; } dt { float: left; width: 200px; font-size: 20px; font-weight: bo...

  • Into the Ring with Knockout.js: The Title Fight

    In this final part in our knockout mini-series, we’ll add a couple more feature to the simple contacts app that we’ve built over the course of the last two tutorials. We’ve already covered the core fundamentals of the library – data-binding, templating, observables and dependant observables – so this part will consolidate what we’ve learned so far. One of the features that we’ll add in this part is the ability to filter the displayed list of contacts by the first letter of their name – quite a common feature that can be difficult to execute manually. Additionally, a reader of part two in this series asked how difficult it would be to add a search feature using Knockout, so we’ll also add a search box to the UI that will allow a subset of contacts which match a specific search term to be displayed. Let’s get started. Round 1 – Getting Started We’ll begin by adding the new mark-up to the view. In the index.html file from the previous tutorial, add the following new mark-up to the start of the <body> tag: <div id="alphaFilter"> <span>Filter name by:</span> <ul data-bind="template: 'letterTemplate'"></ul> <a id="clear" href="#" title="Clear Filter" data-bind="click: clearLetter, css: { disabled: filterLetter() === '' }">Clear filter</a> <fieldset id="searchForm"> <span>Search for:</span> <button data-bind="click: setTerm, disable: filterTerm" type="button">Go</button> <input id="term"> <a data-bind="visible: filterTerm, click: clearTerm" title="Clear search" href="#">x</a> </fieldset> </div> <script id="letterTemplate" type="text/x-jquery-tmpl"> {{each(i, val) letters}} <li> <a href="#" title="Filter name by ${ val }" data-bind="click: function() { filterLetter(val) }, css: { disabled: val === filterLetter() }"> ${ val } </a> </li> {{/each}} </script> We start with a simple outer container to hold our new UI elements, which we give an id for styling purposes. Inside is a <span> containing an explanatory label for the letters used to filter the contacts by name, followed by an empty <ul> element that we bind to the letters template using the data-bind attribute. Following the list is a link; this link is used to clear the filter and has two bindings: the first is a click binding, which is linked to a method on our viewModel that we’ll add in a moment. The second binding is the css binding, which is used to add the class name disabled to the element when a filtering letter has not been selected. The search component of our UI uses a <fieldset> with an id (also for styling) which contains an explanatory text label, a <button> element that will trigger the search, the <input> that the search term will be typed into, and a link that can be used to clear the search. The <button> uses the click and disable bindings; the click binding is used to trigger the search and the disable binding will disable the button when the filterTerm equals an empty string (which equates to false). The clearing link also has two bindings: visible and click. The visible binding is used to only display the link when a search has been performed, and the click binding is used to clear the search. Next we add the letters jQuery template that is used to create the letters used to filter by the first letter of each contact’s name. As with the numeric paging from the last tutorial, we use the jQuery tmpl syntax here instead of Knockout’s templating functionality. This means that the whole template will be re-rendered when one of the items changes, but in this example that doesn’t impact performance too much. ...

  • 20 JavaScript Frameworks Worth Checking Out

    The number of web applications being created and used has grown rapidly since the new millenium. And importantly, so has the sheer complexity of them — specially on the front end. No more static pages, no sir! You have a ton of sections each interacting with each other and the server and yes, it’s as complicated as it sounds and just as hard to pull off. Today, I’d like to talk about a few, choice JavaScript frameworks that aim to simplify front end application development. Why We Need Frameworks Like These If you think jQuery is the answer, you lose a cookie and get an F grade! Creating responsive, fluid, and maintainable interfaces for web apps isn’t as easy as one would imagine — there is data to be sent back to the server and the results parsed, data stores to be updated, views to be re-rendered and so much else that needs to be done in the background. Desktop developers have it much easier with robust tools and well defined workflows. Us, poor web devs? We’ve been twiddling DOM elements, creating models by hand and pulling our hair out trying to keep everything synched. The monstrous rise in the number of web apps being built recently has really made it apparent that we need better tools and frameworks and the devs have responded with a staggering amount of solutions. Today, we’re going to go over just a few of these. A couple of these are quite old but I’m certain you can learn a lot from perusing their code base. Sure, a few of these may be a little old but their code bases have lots of lessons to teach. Sproutcore Sproutcore powers a lot of high profile apps including MobileMe amongst others. Sproutcore has a steeper learning curve compared to the other options but makes up for it with developer productivity once he/she has learned the ropes. This framework boasts a UI framework, the market standard MVC architecture and well written documentation. Related links: Using SproutCore 2.0 with jQuery UI Build a Micro-Blog with SproutCore When To Use SproutCore, and When Not To Cappuccino Cappuccino was created by the 280North team, now owned by Motorola. This framework gained significant coverage with the release of the 280Slides — built completely with Cappuccino. This framework varies dramatically from the others in that a developers doesn’t need to understand or work with any of the front end trifecta — HTML, CSS or the DOM. All you need to master is the framework! Related links: Cappuccino Casts Building rich web application in Objective-J Learning Objective-J JavaScriptMVC Built on jQuery, JavaScriptMVC is a veteran in the front end frameworks battlefield, dating back to 2008. Featuring a familiar, and obvious, MVC architecture, this framework is quite full featured with support for code generators, testing and dependency management. Related links: JavaScriptMVC Documentation Quick Overview of JavaScriptMVC Asana Luna

  • Build Ajax Data Grids with CodeIgniter and jQuery

    In this lesson, we will create a CodeIgniter library that allows us to generate data grids automatically for managing any database table. I’ll explain each step required to create this class; so you’ll likely learn some new OOP techniques/concepts in the process! As a bonus, we’ll proceed to write some jQuery code that will enable a user to update the data grid’s content without having to wait for a page refresh. Please Note… This tutorial assumes that you have a modest understanding of the CodeIgniter and jQuery frameworks. What is a Data Grid? A datagrid is a table that displays the contents of a database or table along with sorting controls. A datagrid is a table that displays the contents of a database or table along with sorting controls. In this tutorial, we will be tasked with providing this functionality, but also saving the user from waiting for the page to refresh each time an operation is performed. Thanks to jQuery, this will be a fairly simple task! What about the users who don’t have Javascript enabled? Don’t worry, we’ll compensate for them as well! Step 1: Build a Data Grid Generator Class We want to build a tool that will enable us to create datagrids dynamically for any database table that we have. This means the code is not tied up to any specific table structure, and, thus, is independent on the data itself. All the coder (the developer who uses our class) must know is the name of the table to be transformed into a grid and the primary key for that table. Here is the preface of the class that we will be developing for the most part of this tutorial: <?php class Datagrid{ private $hide_pk_col = true; private $hide_cols = array(); private $tbl_name = ''; private $pk_col = ''; private $headings = array(); private $tbl_fields = array(); } ?> The Datagrid Class could well be added to the application/library folder, but we are going to add it as a helper to the CodeIgniter framework. Why? Because loading libraries doesn’t allow us to pass arguments to the class’ constructor, thus loading it as a helper will solve the problem. This point will make more sense for you when we have finished writing the constructor. The Class’ Constructor Method public function __construct($tbl_name, $pk_col = 'id'){ $this->CI =& get_instance(); $this->CI->load->database(); $this->tbl_fields = $this->CI->db->list_fields($tbl_name); if(!in_array($pk_col,$this->tbl_fields)){ throw new Exception("Primary key column '$pk_col' not found in table '$tbl_name'"); } $this->tbl_name = $tbl_name; $this->pk_col = $pk_col; $this->CI->load->library('table'); } We have much going on already; but don’t worry, as I’ll explain everything for you in the next paragraph. The constructor takes two arguments: the first one being the name of the table in your database that you wish to display as a datagrid to the user; the second param is the name of the column serving as the primary key for that table (more on that later). Inside the constructor’s body, we instantiate the CodeIgniter Object, the Database Object and the HTML Table class/library. All of these will be needed throughout a Datagrid object’s lifetime and are already built into the CI framework. Notice that we also check if the primary key really exists in the given table, and, in case it does not, we throw an exception reporting the error. Now the $this->tbl_fields member variable will be available for later use, so we don’t have to fetch the database again. “We can use the command, $CI->db->list_fields($tbl_name) to fetch the names of all fields that a table has. However, for better performance, I recommend caching the results.” Method for Customizing Table Headings public function setHeadings(array $headings){ $this->headings = array_merge($this->headings, $headings); } This permits you to customize the headings of your data grid table – that is, with it, you can overwrite the original column names for certain table fields. It takes an associative array, like this: regdate => “Registration Date”. Instead of just the tech...

  • Open Discussion: LinkedIn for Developers?

    Over at FreelanceSwitch, we’ve had a few posts recently discussing the usefulness of networking sites like LinkedIn for freelance professionals: 5 Reasons to Use LinkedIn, Are You Getting Clients on LinkedIn? In last year’s Freelancer’s Survey we learned that (among other things): a) a growing portion of freelancers indicated they’re finding more clients using social media and b) many of those freelancers are web developers and programmers. LinkedIn seems geared towards more traditional employer-employee opportunities, so is it useful for landing development gigs on the side? I’d love to hear the Nettuts+ community weigh in! Do you use LinkedIn? Has LinkedIn ever landed you a gig or new opportunity? I was curious what the web developer demographic was for a network like LinkedIn, so I pulled up the stats: 659,000 members currently list themselves as web developers. 1.8 million members identify themselves as developers. 817,000 members use “programmer” in their title. Many major tech and web companies use LinkedIn to field new hires, including Google, eBay, Rackspace and more. LinkedIn boasts some active web developer communities like End to End Web Developers and Open Source group. Also a Q&A section on Web Development. Do you use LinkedIn to get in touch with other developers or clients? Participate in any active developer Groups? Share in the comments below! If you’re interested in improving your LinkedIn activity, Rockable Press just released LinkedIn and Lovin’ It! in three, DRM-free formats (pdf, epub, and mobi). You can download a 14 page sample for free. It’s available for $17, but if you join Rockable Press’ own LinkedIn group, you can get a voucher for $3 off. Stop in and say hi! For those of you on the Envato Marketplaces, the eBook can also be purchased with marketplace credit on the Tuts+ Marketplace. ...

  • The Best Way to Learn JavaScript

    Learning something new is scary. For me, the biggest issue with picking up a new skill is that I don’t know what I don’t know. Given that, it’s often useful to find a plan for learning whatever you’re interested in. That’s what this post is: your blueprint, your roadmap, your plan of action for learning JavaScript! You don’t have to worry about finding the best resources, sorting out the bad ones, and figuring out what to learn next. It’s all here. Just follow it, step by step. Assignment 0: Understand what JavaScript Is and Isn’t JavaScript is the language of the browser. Before you actually begin learning JavaScript, take a minute to understand what it is and does. JavaScript is not jQuery, Flash, or Java. It’s a programming language separate from all of those. JavaScript is the language of the browser (not exclusively these days, though). It’s primary purpose is to add interactivity to an otherwise static page. In the browser, it’s not going to replace PHP or Ruby for you. It’s not even going to replace your HTML or CSS; you’ll use it in conjunction to them. Also, it isn’t as terrible to learn as you might have thought or heard. One more note: you’ve heard about jQuery, which is probably the most widely-used JavaScript library. Or maybe you’ve heard about one of the other popular JavaScript frameworks, like Mootools, YUI, Dojo, and others. Where do these fit into the picture? Consider them a collection of JavaScript helper utilities; you’re still writing JavaScript when using them, but it’s heavily abstracted JavaScript. It saves you a ton of work. You might even have heard someone say that you should start with jQuery (or another library) and learn JavaScript after. I respectfully yet strongly disagree. Get a good handle on JavaScript first, and then use libraries. You’ll understand what you’re doing much better; and, consequently, you’ll be writing much better JavaScript. Assignment 1: Work Through the Courses at Codecademy.com Codecademy is a relatively new website that bills itself as “the easiest way to learn how to code.” You’ll be the judge of that! Currently, there are only two course: “Getting Started with Programming” and “JavaScript Quick Start Guide.” This is an awesome way to dip your toes in the JavaScript pool. Very similar to the Try Ruby exercises, you’ll follow short lessons, writing code inside the browser and watching the results. All while earning points and unlocking achievement badges. If you’re already familiar with another programming language, you can probably start with the “JavaScript Quick Start Guide”; if this is your first time taking up programming (beyond HTML and CSS), then you’ll find the “Getting Started with Programming” course immensely helpful. Codecademy is free, but signing up is required. Assignment 2: appendTo’s Screencasts The folks at appendTo have a fantastic set of screencasts geared specifically for beginners. If you want to learn JavaScript the right (and easy) way, definitely work along with these lessons. Visual training is always a plus! “Level up your skills with our on demand, pragmatic training solution. No signup required. No catch. No kidding.” Assignment 3: Read A Good JavaScript Introduction Once you work through the courses at the Codecademy, you’ll want to get a more thorough introduction to JavaScript – an introduction that will introduce you to the all the types, operators, control structures, and more. A handful of good introductions, if I may: A Re-introduction to JavaScript – This introduction is on the Mozilla Developer...

  • CentOS 5: File Server Essentials: New on Premium

    What powers a file serving environment? In this tutorial, we’ll begin to learn the skills required to install an enterprise grade operating system and discover the power and simplicity that makes CentOS the robust and reliable solution trusted by professional throughout the world. No previous experience of this operating system is assumed and during this presentation we will build on the process of a ‘basic server installation’ in order to get you up and running in no time at all. Become a Premium member to read this tutorial/screencast, as well as hundreds of other advanced tutorials and screencasts from the Tuts+ network. Before We Begin … …Some basic requirements and a few assumptions will be made. This tutorial is intended to be an introduction to CentOS during which we will build a typical server installation without a GUI. No prior knowledge or experience of this operating system is assumed but a basic familiarity with the console environment, downloading and burning a CD/DVD image are assumed. In this instance we will be concentrating on the 32bit version using IPv4 but unless otherwise stated you may assume the 64 bit version is similar with very little modification required (you may need to remove some 32bit applications). IPv6 will not be discussed. All administration tasks will be achieved directly via the console (or a secure shell environment) and you will be shown how to configure the operating system, partition your hard disks, install a file-sharing environment, manage users and maintain a firewall. Additional options (including Apache, PHP/Perl, Virtual Hosts, MySQL, BIND etc … ) will be discussed in a future tutorial. CentOS will run on almost any hardware but for the purpose of this tutorial we will be using the computer system described below. Screenshots have been provided (where possible) to support the main body of text together with reasoning and related notes; and as I am from the UK you should be aware that my writing and examples will carry a harmless ‘anglophile’ bias. Throughout this tutorial I have used the text editor ‘nano’ due to its simplicity for new users but do change this to your preferred editor as and when required. This tutorial is considered to be a guide and there is no guarantee that a replication of the following instruction will work for you without making the necessary changes to suit your needs (i.e. computer name, user names, ip addresses etc …) whilst performing additional steps (based on your network topology) that are beyond the scope of this document. I hope that this tutorial proves to be useful. Members may continue reading at Tuts+ Premium. ...

  • How to Create a Beautiful Icon with CSS3

    Today, I’d like to show you a neat trick. We’ll create a document icon with pure CSS3. Even better, this effect will only require a single HTML element. The Game Plan Create a square box Round the edges Use pseudo elements to create a curled corner Create the illusion of text with a striped gradient Let’s get started! Step 1: Create a Box We’ll begin by adding our single HTML element: an anchor tag. This makes sense, as most icons also serve to be links. <a class="docIcon" href="#">Document Icon</a> Let’s set the somewhat arbitrary dimensions for our icon. We’ll do 40x56px – simply for this demo. In a real world application, you’ll likely want to reduce this! Also, keep in mind that we need to add display: block, since all anchor tags are inline, by default. .docIcon { background:#eee; background: linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); border:1px solid #ccc; display:block; width:40px; height:56px; position:relative; margin:42px auto; } Note that, above, we’re setting a positioning context in order to work with pseudo elements shortly. You’ll find that I’ve only used the official CSS3 syntax for the gradient. You’ll likely want to use the various browser prefixes as well. To speed things up, you can use Prefixr.com, or its API in your favorite code editor. Simply copy the code snippet above, paste it into Prefixr’s textarea, and click enter. It’ll then spit out all of the various prefixized properties, like so: .docIcon { background: #eee; background: -webkit-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); background: -moz-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); background: -o-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); background: -ms-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); background: linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); border: 1px solid #ccc; display: block; width: 40px; height: 56px; position: relative; margin: 42px auto; } Next, let’s add some shine using CSS box shadows. I’ve also used the text-indent property to hide the text. .docIcon { ... -webkit-box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px; -moz-box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px; box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px; text-indent:-9999em; } So Far, We Have: Step 2: Rounded Corners Next, we need to create a rounded corner effect. Add the following: .docIcon { ... -webkit-border-radius:3px 15px 3px 3px; -moz-border-radius:3px 15px 3px 3px; border-radius:3px 15px 3px 3px; } By passing four values, we can specify the top, right, bottom, and left radii, accordingly. This is similar to the way you would apply margins or padding. Which Gives Us… Step 3: One Curled Corner To create the illusion of a curled corner, we’ll use generated content, or pseudo elements. First, add content :before our icon. In this case, we don’t require any specific text. Instead, we need to create a 15px box, and apply a background gradient. .docIcon:before { content: ""; display: block; position: absolute; top: 0; right: 0; width: 15px; height: 15px; background: #ccc; background: -webkit-linear-gradient(45deg, #fff 0, #eee 50%, #ccc 100%); background: -moz-linear-gradient(45deg, #fff 0, #eee 50%, #ccc 100%); background: -o-linear-gradient(45deg, #fff 0, #eee 50%, #ccc...

  • How to Use Omniauth to Authenticate your Users

    I hate signing up for websites. I’ve already signed up for so many, using different usernames, that going back to one of them and trying to remember my credentials is sometimes impossible. These days, most sites have begun offering alternative ways to sign up, by allowing you to use your Facebook, Twitter or even your Google account. Creating such an integration sometimes feels like a long and arduous task. But fear not, Omniauth is here to help. Omniauth allows you to easily integrate more than sixty authentication providers, including Facebook, Google, Twitter and GitHub. In this tutorial, I’m going to explain how to integrate these authentication providers into your app. Step 1: Preparing your Application Let’s create a new Rails application and add the necessary gems. I’m going to assume you’ve already installed Ruby and Ruby on Rails 3.1 using RubyGems. rails new omniauth-tutorial Now open your Gemfile and reference the omniauth gem. gem 'omniauth' Next, per usual, run the bundle install command to install the gem. Step 2: Creating a Provider In order to add a provider to Omniauth, you will need to sign up as a developer on the provider’s site. Once you’ve signed up, you’ll be given two strings (sort of like a username and a password), that needs to be passed on to Omniauth. If you’re using an OpenID provider, then all you need is the OpenID URL. If you want to use Facebook authentication, head over to developers.facebook.com/apps and click on “Create New App”. Fill in all necessary information, and once finished, copy your App’s ID and Secret. Configuring Twitter is a bit more complicated on a development machine, since they don’t allow you to use “localhost” as a domain for callbacks. Configuring your development environment for this kind of thing is outside of the scope of this tutorial, however, I recommend you use Pow if you’re on a Mac. Step 3: Add your Providers to the App Create a new file under config/initializers called omniauth.rb. We’re going to configure our authentication providers through this file. Paste the following code into the file we created earlier: Rails.application.config.middleware.use OmniAuth::Builder do provider :facebook, YOUR_APP_ID, YOUR_APP_SECRET end This is honestly all the configuration you need to get this going. The rest is taken care of by Omniauth, as we’re going to find in the next step. Step 4: Creating the Login Page Let’s create our sessions controller. Run the following code in your terminal to create a new sessions controller, and the new, create, and failure actions. rails generate controller sessions new create failure Next, open your config/routes.rb file and add this: get '/login', :to => 'sessions#new', :as => :login match '/auth/:provider/callback', :to => 'sessions#create' match '/auth/failure', :to => 'sessions#failure' Let’s break this down: The first line is used to create a simple login form where the user will see a simple “Connect with Facebook” link. The second line is to catch the provider’s callback. After a user authorizes your app, the provider redirects the user to this url, so we can make use of their data. The last one will be used when there’s a problem, or if the user didn’t authorize our application. Make sure you d...

  • Best of Tuts+ in September

    Each month, we bring together a selection of the best tutorials and articles from across the whole Tuts+ network. Whether you’d like to read the top posts from your favourite site, or would like to start learning something completely new, this is the best place to start! Psdtuts+ — Photoshop Tutorials Create Animal Textured Typography In this tutorial we are going to create fun, realistic, animal textured, 3D typography in Photoshop using CS5′s Repousse tool. Let’s get started! Visit Article Create a Detailed User Interface for an iPad Application In this tutorial we will show you how to design a detailed user interface for an audio-themed iPad application. We will design this application using a retina display resolution and will make use of Photoshop’s shape layers and layer styles. Let’s get started! Visit Article How to Apply Light, Shading, and Shadow to Round Objects Photoshop is an excellent tool for manipulating photographs but it can also be used as a means to create stunning digital art. This tutorial is part of a 25-part video tutorial series demonstrating everything you will need to know to start producing digital art in Photoshop. Digital Art for Beginners, by Adobe Certified Expert and Instructor, Martin Perhiniak will begin by teaching you how to draw in Photoshop. At the conclusion of this series you will know all you need to produce your own concept art and matte paintings in Photoshop. Visit Article Nettuts+ — Web Development Tutorials Ways you can be Sure you’ve Married a Geek Everyone knows that when you get married, your life changes. When Jeffrey and I recently tied the knot, we were advised by the older and wiser that the first year of marriage is the hardest. But so far, it has been fantastic. Dont get me wrong; just because married life is proving to be bliss does not mean there havent been any of those aforementioned changes. Recently, I realized that the ’married life changes” that I am adjusting to are all coincidentally related to the fact that Jeffrey is a web developer, a.k.a Geek. Visit Article Is Conference Pricing Out of Control? You’ve surely experienced the letdown of registering for a conference, only to find that it costs $1,000 (or more) to attend (not including travel expenses). Isn’t that a bit extreme for two days worth of training? Then again, is that the only way the conference organizers can cover the high cost of planning such an event? Let’s see…

  • How to Deploy your First Rails App: New on Premium

    In this Premium video tutorial, we’ll teach you how to deploy your first Rails web application with Heroku. Particularly if you’re somewhat new to Rails, you may find that you’re met with a long string of errors when pushing your app and database to their servers. Don’t worry, though; this screencast will take you through the entire process from scratch. Become a Premium member to watch this video, as well as hundreds of other advanced tutorials and screencasts from the Tuts+ network. You’ll Learn How To… Work with models and controllers Adjust routes Source control with Git Install and work with Heroku Convert a Sqlite3 database to PostgreSQL Debugging Heroku errors ...

  • Design Inspiration: Red Websites

    Continuing our current series on color inspiration, today we focus on red websites. Here you will find 25 websites that feature the color red. Some use a darker shade of red and some use a brighter shade. Some use red as a background for the full page and others use it for a header or in some other prominent way. Hopefully it will give you some ideas for using red in your own work, and for giving you some ideas about what other colors to use in your palette. You may also be interested in: Blue Websites Green Websites Orange Websites Purple Websites Republic2 ...

  • 10 Online HTML5 Tools For Web Designers

    with BSAIf you haven’t heard, HTML5 is taking the web by storm! It is currently being enhanced by experts to provide us Web Designers & Developers with awesome new revolutionary web page features! HTML5 Background Information For those of you who are new to HTML5, here is some quick background information to get you up to [...]...

  • 25 Examples of Dark Websites

    with BSALast week we showcased examples of color usage in web design, and this week we will keep the focus on color, but this time around we will showcase examples of dark colors usage in web design. The right amount of dark color can create an elegant and beautiful site, so check out the examples we [...]...

  • Guidelines to Writing a Web Design Proposal

    with BSAWriting website proposals is boring. There are no two ways about it, but they’re a necessary evil. The proposal is the final push before our client signs on the dotted line. We need to make sure we have all our bases covered and that we project, as always, an image of professionalism. Photo Credit: Stacey Shintani Whether you intend to create your website proposals in Word, Indesign, or use an online service to help you out, its important that you [...] with BSA...

  • Weekly Design News – Resources, Tutorials and Freebies (N.106)

    with BSAThis is our weekly column were we share our favorite design related articles, resources and cool tidbits from the past week. Enjoy :) If you would like to receive our daily updates you can follow us on Twitter, on Facebookor by subscribing to our RSS feed. Scalable and Modular Architecture for CSS Incredibly Useful CSS Snippets Google+ Styled UI Buttons, Icon Buttons & Dropdown Menu Buttons How To Design A Clean And Minimal WordPress Theme (Tutorial) Integrating HTML5, CSS and [...] with BSA...

  • Getting Real-Time with Pusher

    Do you want to spice up your web applications by making them real-time — but don’t want to create new infrastructures for the sole purpose of getting web sockets to work? In this article, we’ll explore how to use and implement Pusher, an HTML5 WebSocket-powered real-time messaging service for your applications. Introduction What are WebSockets? According to the WebSocket Wikipedia page, WebSocket is a technology providing for bi-directional, full-duplex communication channels, over a single TCP socket. In layman’s terms, WebSockets enable a client and a server to communicate in both directions. It lets a server send messages to the client, and vice-versa. How is this relevant to my web application? Over the years, data expiration has always been a problem with web applications, specifically those that have multiple people logged in and working on the same things. For example, in a project management application, users sometimes create to-do items which their team members are creating at the same time. With WebSockets, this can be mitigated by allowing the server to push notifications to all connected parties, allowing browsers to receive new data in real-time. In effect, before you create a duplicate to-do item, you’ll see that someone else has already created it. What is Pusher? Pusher is a hosted API for quickly, easily and securely adding scalable real-time functionality via WebSockets to web and mobile apps. Essentially, Pusher encapsulates WebSockets implementation, functionality, debugging, and hosting for you. Instead of having to run your own WebSockets server, it allows you to offload the entire process to Pusher’s servers, saving you both time and money. Pusher is a hosted API for quickly, easily and securely adding scalable real-time functionality via WebSockets to web and mobile apps. For Pusher to work, you’ll need both a client library and a publisher library. Client libraries are used with the client that’s interfacing with your application. This might be a browser (via JavaScript), an iPhone app (via Objective-C), or a Flash app (via ActionScript). Publisher libraries are used on your server to send events to your clients. Currently, Pusher has client libraries for JavaScript, Objective-C, ActionScript, .NET and Silverlight, Ruby, and Arduino. It has publisher libraries for Node.js, Java, Groovy, Grails, Clojure, Python, VB.NET, C#, PHP, Ruby, Perl, and ColdFusion. For the purposes of this tutorial, we’ll be using the JavaScript client library and the PHP publisher library. The implementation shouldn’t be too different if you’re using another programming language. I feel like building a live chat widget so people can chat in real-time on a website. With this in mind, let’s continue. Setting up Pusher Step 1: Register for a free Pusher developer account To begin, go to the Pusher website and register for your account. They offer a free account for Sandbox plan users, which includes 20 connections and 100,000 messages per day. When you’re ready, you can always upgrade to a paid plan, but since we’re only going to use it for our sample application, a free Sandbox plan will do the trick! Pusher Registration On the site, click on the Sign Up button that you’ll find on the top-right corner and enter the required details. Once done, click on the Sign Up