Add Your Website

Most popular content.

Useful Resourses.

jQuery

Mootools

Php

  • Latest Tutorials
  • Useful Links
  • Upcoming Websites & Blogs
  • New Authors
  • Content Editable

    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

    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

    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. ...

  • Book Cover

    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

  • CSSLint

    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...

  • Ch2-Img1

    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....