15 sites web developers and designers should know
Creating a good website isn't an easy task, but there's a few tools that can definitely make your developer or designer life easier. In this article, I have compiled 15 extremely useful website that any web developer or web designer should have bookmarked. ColorCombos When designing a website, one of the firsts (and most important) steps of the process is to choose a color scheme. Color Combos allow you to browse thousand of different colors combinations for getting inspired for your upcomming design. Color schemes can be browsed by colors.Visit colorcombos.com LIpsum Who doesn’t know the extremely popular Lorem Ipsum text? What the font? You just saw a logo or website using a particular font and you enjoyed it. ConvertIcon Favicons are a must have for any website, mostly because on modern browsers as such as Firefox, it is displayed along with the site name in tabs. BgPatterns background Patterns is definitely one of the current webdesign trends. HTML Encoder Test Everything Sprite Generator
A Better Login System | Nettuts+
Net.tuts+ has published several great tutorials on user login systems. Most tutorials only deal with authenticating the user, which allows for two levels of security: logged in and not logged in. For many sites, a finer degree of control is needed to control where users can go and what they can do. Creating an access control list (ACL) system will give you the flexibility for granular permissions. Introduction Imagine you are running a great tutorial site that lets users learn about a wide variety of web development techniques. Your problem You want to restrict users' to only specific pages that their particular account allows access to. The solution Implementing an access control list will allow you a great deal of control over what users can and cannot access on your site. If you view the demo, available with the downloadable source code, you will be greeted with an index page that tests the ACL for each user. Step 1: Create the Database Step 2: Database Include Step 3: Create the ACL Class
Code Snippets - Snipplr Social Snippet Repository
Applying CSS to forms
CSS has come a long way in the 12 years since this article was written. Read our latest blog article to check out our latest thoughts on where we see CSS going in 2016! Forms are an essential part of interaction on the Internet but they can look rather drab. With CSS we can position form items so they all line up nicely and add a bit of colour to jazz them up. The original form That form looks horrible! <form action="#"><p><label for="name">Name</label><input id="name" type="text" /></p><p><label for="e-mail">E-mail</label><input id="e-mail" type="text" /></p><p class="submit"><input type="submit" value="Submit" /></p></form> Positioning the form with CSS The first thing we need to do to the form is make it line up nicely. Right, let's go through that CSS bit-by-bit. The margin-right: 0.5em CSS command means the labels will have a small amount of spacing after them, so that the text isn't up against the input box. So, putting that altogether gives us this form: Applying colours to the form
Adding Custom Google Maps to Your Website | Stiern
Maps are often placed on a company website to help customers find their way there. For that, Google Maps is excellent. But wouldn’t it be nice to add your company logo, parking lots, train stations, etc. to the map, to help the customer even more? It is very simple, and in this article I am going to show you how. Before we start, check out what we are going to create: Now, here is an overview: Overview Google Maps API The Google Maps API allows you to embed maps directly into your website. Getting the Coordinates As I do not expect you to know the precise coordinates of your location, I will explain a very quick way Google has provided to do this. When you enter this in your address bar, you will see this: The coordinates of Apple's head quarter in Cupertino The first number is the status code, and 200 means that everything is okay. Adding the Map to Your Website There’s no need to hesitate – let’s add that map to your website! After the URL, you will notice sensor=false. Write Adding Markers
CSS-Only, Table-less Forms :: Code Samples :: Jeff Howden :: JeffHowden.com
Licensing I've gotten alot of email asking about using this work in various projects and sites. These requests often need me to license my work using one of the myriad of open source licenses. Backend For those that automatically assume I'm using PHP, sorry to burst your bubble. Most of the CSS-only, table-less forms available suck. The problems with Mac/IE5.2 probably aren't worth fixing. Additionally, no amount of persuading, convincing, or beating into submission will get Safari or Firefox on Mac OS 10.2 to honor the tabindexes. Submitting the form will allow you to see how this form displays with error messages for the user. This is a fictitious form, designed purposely to include every possible layout I can anticipate wanting/needing to use. Thanks to the excellent CAPTCHA component from Alagad Systems, I'm able to include CAPTCHA as an example image/field combination in this form. Update June 28, 2006 — Safari v2.0.4 on Mac OS 10.4.6 now at least focuses selects when tabbing.
List of Useful jQuery Plugins
Best jQuery Plugins all in one place. BBQ: Back Button & Query Library Source: Leverages the HTML5 hashchange event to allow simple, yet powerful bookmarkable #hash history. In addition, jQuery BBQ provides a full .deparam() method, along with both hash state management, and fragment / query string parse and merge utility methods. ColorBox: Lightbox Source: A light-weight, customizable lightbox plugin Color Picker Source: Selection: A simple component to select color in the same way you select color in Adobe Photoshop Cookie Source: Selection: Set and get cookies with jQuery. Cycle: Slideshow Source: Slideshow plugin that supports many different types of transition effects. Date Range Picker Source: Flip Flot: Charting
Form Design with Sliding Labels « CSSKarma
A few weeks ago I was reading an article on form UI by Luke Wroblewski of Yahoo!. For those who aren’t familiar with Luke, he (quite literally) wrote the book on good form design. In the article, one certain section about placing labels inside of form fields stood out to me: Because labels within fields need to go away when people are entering their answer into an input field, the context for the answer is gone. So if you suddenly forget what question you’re answering, tough luck—the label is nowhere to be found. As such, labels within inputs aren’t a good solution for long or even medium-length forms. He brings up a good point. For best practice, Luke talks about leaving your labels outside the form field so it’s always available to the user. Enter: Sliding Labels After reading that article it occurred to me that there’s no reason we can’t have the best of both worlds. View demo The HTML At this point we have a pretty basic, and ugly form The CSS The jQuery
