Chris Coyier - Programming Blog

Posts Tagged ‘Chris Coyier’

10 Jan 2010

I know we covered different jQuery posts here but you guys don’t stop asking for more. So here we are again covering more jQuery Plugins doing what: Styling Design Elements. So today we need jQuery solutions that are a little more specific. Here are 20 more handy jQuery plugins that have made websites much sleeker and more interesting.

1. jQuery Sequential List

This tutorial will show you how to use jQuery to add a sequent of CSS classes to create a graphical list. The second example in this tutorial will show you how to add a comment counter to a comment list using jQuery’s prepend feature. The code is very simple, the following example shows how you can add a counter number to a comment list.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){

  $("#commentlist li").each(function (i) {
    i = i 1;
    $(this).prepend('<span class="commentnumber"> #' i '</span>');
   });

});
</script>

To get this markup:

<ol id="commentlist">
	<li><span class="commentnumber"> #1</span>
		...
	</li>
	<li><span class="commentnumber"> #2</span>
		...
	</li>
	<li><span class="commentnumber"> #3</span>
		...
	</li>
</ol>

Check out the demo here

2. jQuery Corners

This jQuery plugin will simple allow you to create rounded corner for your design elements including forms or anchor links without using images or obstructive markup.

Once jQuery and jQuery.corners scripts are loaded, rounding corners is easy.

<div style="background-color:#acc; padding:5px" class="rounded">
  Simple Example
</div>
<script>$(document).ready( function(){
  $('.rounded').corners();
});</script>

Check out the demo here

3. jQuery Checkbox

This jQuery plugin will simple skin checkboxes and radio buttons in a nice way.

Check out the demo here

4. Styling Buttons and Toolbars with the jQuery UI CSS Framework

This tutorial demonstrates how to incorporate the power of jQuery UI CSS framework classes in a custom widget to create and style buttons and toolbars.

Creating a basic button is very simple with the jQuery UI CSS framework and styling it is really easy. All you need to do is add the default “clickable” state by assigning the class ui-state-default. We also want these to have rounded corners, so we added the optional ui-corner-all framework class which adds CSS3 corner-radius properties to all corners without the need for any images or extra markup.

<button class="ui-state-default ui-corner-all" type="submit">Button</button>
<a href="#" class="ui-state-default ui-corner-all">Link</a>

Check out the demo here

5. Create A Colorful Sitemap With jQuery

In this article, Chris Coyier teaches us how to build a visually interesting sitemap that makes the hierarchy clearer through the use of color. The idea here is, when the mouse cursor hovers over a list, that list will brighten up a bit and fade to a unique color. When the mouse cursor is removed, the list will return to its original color.

Check out the demo here

6. Style Author Comments Differently with jQuery

Now you want to apply the custom styling applied to comments left by the author on blogger. The script will loop through all of the comments on the page, if the member link on the current comment matches the member link in the profile page on your blog, then it must be an author comment. The script will then apply an additional class to the comment, allowing you to style it separately.

Check out the demo here

7. asmSelect – Alternative Select Multiple

A progressive enhancement to <select multiple> form elements which is easier for users to understand and interact with than regular <select multiple> form elements. Also, it doesn’t require user to Ctrl-Click or Shift-Click multiple elements. Instead users of your form can add or remove elements individually, without risk of losing those that have already been selected.

Check out the demo here

8. Flexgrid

A lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source to load the content. Features include: Resizable columns, Resizable height, Sortable column headers, Cool theme, Can convert an ordinary table, Paging, Show/hide columns and more.

Check out the demo here

9. MaxLength

This plugin makes it easy to apply a "maxlength" attribute to custom elements for example a <textarea>. It also gives you the possibility to add a nice character counter under the element that shows the user how many chars he/she has left before the maxlength is reached, and/or an alert message.

To use this on a simple text area, all you have to do is:

<script type="text/javascript">
  $(document).ready(function(){
    $('#textarea_1_1').maxlength();
  });
</script>

Check out the demo here

10. ClockPick

ClockPick is a timepicker plugin, enabling users to enter a time value into a form field. Using a unique popup div UI, ClockPick gets the job done in about 1/5 the time it takes to enter a time value using a traditional select menu UI.

Check out the demo here

11. jQuery (mb)Menu 1.5

This is a powerful jQuery component to build easily a multilevel tree menu or a contextual menu (right click) in an intuitive way! You can add as many submenus as you want; if your submenu or menu is not declared in the page, the component’ll get it via ajax calling the template page with the id of the menu you need (the value of “menu” attribute) the ajax page should return a well formatted code as the example below for the menu voices code.

Check out the demo here

12. (mb)ContainersPlus 1.0

This is a useful plug in to build full featured and full skinnable containers. The container can be set to draggable, resizable, collapsable and minimizable. The container can be set to draggable and resizable by adding “draggable” and/or “resizable” to the class attribute; there is a custom attribute called buttons that accept: i [iconize], m [minimize], c [close] as value to add buttons to the button-bar. You can also add a left top corner icon by adding the attribute “icon” with the icon path as value.

Check out the demo here

13. Auto line-height for flexible layouts

Adjusts the line-height of a container (such as a div) in proportion to it’s width, relative to the font size.

Check out the demo here

14. UI.Layout

This plugin was inspired by the extJS border-layout, and recreates that functionality as a jQuery plug-in. The UI.Layout plug-in can create any UI look you want – from simple headers or sidebars, to a complex application with toolbars, menus, help-panels, status bars, sub-forms, etc.

Check out the demo here

15. Colorize

Colorize is a jQuery plugin to add background color to alternate table rows, highlight a row/column on mouse over, and colorize a row/column when you click your mouse button over it. You can colorize as many table rows as you want. A repeat mouse click reverts the row to the original background color.

Check out the demo here

16. jQuery 3 State Switch Plugin

jQuery 3 State Switch Plugin(J3SSW) is a jQuery Plugin that expresses the selection and some states of list item using radio button and checkbox at the same time. The applications of J3SSW includes some interfaces for sort key or filter key of any search results.

Check out the demo here

17. Animated Hover

Animated Hover provides animated transitions between hovered items for any jQuery project. Requires jQuery 1.2+ and Dimensions

Check out the demo here

18. jQuery Feed Menu

It’s nice to offer users an alternate way to get at your feeds, here is an easy and standard way of offering your feeds via a nice, compact menu, just like in the location bar, but on your site.

Check out the demo here

19. jquery Hover Sub Tag Cloud

Here is a new way to create your tag cloud Using jQuery and reduce its size, so my demo will introduce “Hover Sub Tags” under each main Tag, for example if you have Ajax as a tag, you can have jquery, mootools, etc… as sub-tags. A Sub Tag Cloud will appear when hovering over the main Tag links.

Check out the demo here

20. jQuery ListNav Plugin

This jQuery plugin supplies an easy way to unobtrusively add a letter-based navigation widget to any UL or OL list. An easily stylable (via CSS) nav bar appears above the list, showing the user the letters A-through-Z. Clicking one of the letters filters the list to show only the items in the list that start with that letter. Hovering over a letter (optionally) shows a count above the letter, indicating how many items will be displayed if that letter is clicked. Other options give you control over the basic functionality.

Check out the demo here

Go to Source

(2) Comments
Tags: anchor links, Chris Coyier, class, design elements, div style, jquery, quot, Script, span, span class, styling design

Quick Tips Of The Week – December 23rd 2009

In: web resources

27 Dec 2009

Quick tips of the week for designers is round again, I will be posting five great tips that I discover during the week and share them with you! This week learn about some great recourses, css opacity change, a photoshop keystroke that will save you tons of time and find out what beautiful HTML looks like!

#1

Chris Coyier and Jeff Starr over at digwp.com have finally released the much anticipated “Digging into Wordpress” book! I personally purchased it when it came out, I haven’t fully read it yet, however I have flicked through all the chapters and let me tell you; this is 400 pages worth investing in. It’s great for beginners and even experienced Wordpess users! I highly recommend picking yourself up a copy for only $27, at the moment it is only available in PDF format however they say a print format is forthcoming. You also receive a lifetime subscription and any updates to the addition will become available to you.
Get yourself a copy today!

#2

One super cool tip you can use with CSS3 is editing the opacity of images, text etc. I’ve been using it to subtly change opacities of images and their hover states, and it is as simple as it sounds. See example.

The Code

	#image		 { opacity: 0.8;}
	#image:hover { opacity: 1.0; }

View Demo

#3

Photoshop Tip

Have you ever wanted to switch to a tool that is in sub-menu of the “shortcut” without clicking and holding the icon? Well if you simply hold SHIFT and then the “SHORTCUT KEY” of the tool it will scroll through all tools that are in the category, thus selected your desired tool.

#4

If you’ve ever wondered what beautiful html looks like, checkout this great article from css-tricks to find out!

#5

Go ahead and sign up for this fantastic FREE ultimate designers resource pack, from tutorial9.

Sorry for the lack of posts, I have been working on my new site, TheDesignersYard.com, which I will post screen shots and features very shortly!

Go to Source

(1) Comment
Tags: Chris Coyier, com, css tricks, HTML, Jeff Starr, lifetime subscription, Opacity, recourses, resource pack, tons of time, tool, week

An Interview with Jason Lengstorf

In: web resources

23 Dec 2009

Jason Lengstorf is a professional web developer who specializes in PHP and jQuery applications. He’s the author of the recently released PHP for Absolute Beginners, which is an expert’s voice in open source. Additionally, he co-authored an eight-part tutorial on Creating a Web App from Scratch with Chris Coyier. Join us as we discuss web development, PHP, and his life in general.

1. Many of us may be familiar with you because of your book: “PHP for Absolute Beginners.” For those who are unfamiliar with you, can you tell us a bit about yourself and your life?

In a nutshell, I’m a PHP developer based out of Missoula, MT. I run a company called Ennui Design that specializes in small business and individual website development. I’m also into front-end development, which I do primarily using jQuery.

I’m 24, and I’ve been working in web development for about six years, and I’ve been developing full-time for about a year and a half now. I’m completely self-taught, so I owe my career to the blogosphere and the great folks who are always helping out on forums like W3schools and the like.

I also try to write, and I’ve written a couple articles around the web for sites like Smashing Magazine, CSS Tricks, and Nettuts+, as well as for my own blog on Ennui Design. Earlier this year, I got the opportunity to write a book for Apress publishing that came out in October, called “PHP for Absolute Beginners”, and I’m currently working on a new title for Apress called “Pro PHP and jQuery.”

2. How did you get started in web development?

I got started in web development out of necessity. When I was 18 or 19, I played in a band, and we needed a website. When we started looking at pricing, we realized there was no way we could afford to have one built for us. So I told the rest of the guys, “Well, I think I can figure this out.”

I got on w3schools (after searching “how to build a website” on Google) and worked through the HTML course, after which I was sure I was an expert web designer. So I built this awful, table-based website, complete with iframes and all inline styling.

When I got done with it, I thought to myself, “Well, that looks terrible.” So I built it again. And again. About fifteen or so rebuilds later, I had learned a little about CSS and JavaScript; the sites started looking a bit better and I felt fairly comfortable building them.

Right around that same time, a couple friends of mine needed websites, and I offered to build them for free. I did, and they were both happy with them, but I realized that maintenance on their sites was really cumbersome. That’s when I got into PHP, because I needed a solution that would allow for easier maintenance.

Since I didn’t know anything about content management systems or that there were existing CMSs available, I ended up rolling my own. It was full of holes, clunky, and feature-poor, but it did the trick, and I loved building it. I spent 14 hours a day in my favorite coffee shop tweaking it and rebuilding it.

After my two friends’ sites launched, I received a call from my first real client, and realized I could actually make money building websites. I spent four years trying to get good enough to build sites full time, and I finally hit that goal in Fall 2008, when I quit my day job at a FedEx Kinko’s to work full-time on Ennui Design projects.

3. What is the best way to learn PHP – and how was your experience writing this book?

Learning PHP is like learning any language. Yeah, you can do a bunch of exercises that don’t have real world application (”Repeat after me: ‘Cette espadon est glissante! This swordfish is slippery!’”), but that only helps you memorize concepts. I think you have to really immerse yourself in real world uses of the language so that you can see how and why it’s used.

That’s the approach I took when writing “PHP for Absolute Beginners.” We cover the basic concepts, then immediately build a real-world project (a very basic content management system).

Writing the book was great for me, because it forced me to defend my approach in development. I had a technical, editorial, and project reviewer, all keeping an eye on how everything was put together, which put the pressure on to do everything the right way, with no shortcuts. Learning to just do it properly the first time was a good lesson in patience for me. It will also help me when I’m working on future projects with collaborators, because I now have a better grip on writing self-descriptive code, including better inline documentation, and justifying my programming choices with concrete reasoning.

4. Recently, you co-wrote an 8-Part series called “Creating a Web App from Scratch” with Chris Coyier on CSS-Tricks>. What was that like?

Chris Coyier is the man, hands-down. I’m a workaholic, but that guy manages to make me feel like a slacker with the amount of work he produces consistently.
The tutorial series was a great way to force myself back into blogging (because I’ve been slacking lately), and an opportunity to give another real-world example to beginner to intermediate level developers. It’s one thing to explain a concept, but an entirely different beast when you’re attempting to explain a concept in the context of a real-life production site.

The comments we received were really helpful, because it showed us pieces of the app that we hadn’t thought of, like some security holes that we hadn’t considered and features that would really enhance the app.

That series was one of my favorite tutorials I’ve ever worked on, and I hope to put more of them together along those lines in the future.

5. Can you provide us with any information on your upcoming book, “Pro PHP and jQuery”?

Pro PHP and jQuery is going to be for intermediate to advanced PHP developers who want to become familiar with jQuery’s capabilities. It’s going to cover the creation of an AJAX-powered events calendar that’ll have a bunch of features like tooltips, file uploads, drag-n-drop ordering of events and photos, and other useful concepts.

AJAX is really powerful, and it allows developers to create web apps that feel like desktop apps (because they don’t have to reload all the time, etc.). The rise of jQuery and similar JavaScript libraries has made all that AJAX functionality really accessible to developers, and my goal with Pro PHP and jQuery is to bring the reader up to speed with building top-notch web apps.

6. You are owner of Ennui Design, which offers custom web development. What’s your day-to-day like?

As I mentioned earlier, Ennui Design is the company name under which I do my freelance work. I’ve tried to become a one-man army of sorts by offering top-to-bottom site development, from art and design to customized content management systems. Recently I’ve started to take on clients who need custom applications, and that’s been a lot of fun.

As of this month, I’m expanding Ennui Design and trying to build a network of fellow freelancers to help me handle my client load. I just brought on Drew Douglass recently, and I’m really excited to be working with him. I’m still looking for a front-end designer to help me with artwork and PSD-to-XHTML conversion, so if you know anyone…

7-What is your favorite web application framework and why?

Because I never knew that web application frameworks existed, I never learned any of them. I subscribe to the concept of multi-tiered architecture, and I’ve even written an article about it for Nettuts+.

I’ve looked into other patterns, like MVC, and I think they’re great, but I try not to get bogged down in programming dogma; if it’s easy to read, easy to maintain, and DRY for the most part, I consider it to be good code.

8. Can you tell us a bit about your personal projects?

Currently, I’m working on getting my CMS ready for an open source release with Drew Douglass and a few other friends. I’m also planning on developing a version 2.0 of Colored Lists with Chris Coyier (the app we built in our 8-part “Building a Web App from Scratch” series).I’ve also got a few jQuery plugins that I want to tidy up and release sometime in the future.

I recently decided to try my hand at product design as well and launched an apparel company called Humblecock with a couple close friends. We wanted high-quality, ultra-comfortable shirts for ourselves, and we decided that the best way to get them was to make them ourselves. It’s a brand new adventure, and I’m having a blast with it so far. It was one of my favorite websites to design, and it was really cool to design physical products.

My blog, unfortunately, has fallen victim to my overloaded project schedule. Between my client load and deadlines with my publisher, I’ve had very little free time. However, with the addition of Drew and (hopefully) other freelancers to the Ennui Design network, I’m hoping to have more time to blog again.

9. What are your favorite online resources to stay up to date on the web development industry?

I try to keep up with as many blogs as possible, really. If I’ve got a spare moment I’ll try and power-read as many articles as I can to see if any new developments are directly affecting any of the work I’m doing. Some of the sites I frequent are:

Chris Shiflett also has a lot of good articles on security in his back catalog that I use for reference regularly.

10. What’s your opinion on WordPress and Drupal?

I’ve barely used either, so I don’t think I’m really qualified to answer this question.

11. When working, how do you concentrate while writing code, and what is your favorite code editor?

I generally work at my home desk when I’m doing any kind of writing or heavy development. However, when I need a change of atmosphere, I’m known to haunt a local coffee shop (I actually spent so much time there that they had me build their website ).

I use XAMPP, Eclipse, and Firefox (with Firebug/FirePHP/Web Developer Toolbar) for the majority of my development. Eclipse is Java-based, but it’s also open source and has support for everything I’ve ever needed. I’ve briefly played with a few other IDEs, but it would take a pretty solid argument to convince me to switch at this point.

12. What do you think the future holds for PHP?

In the immediate future, it holds great news like anonymous functions and namespaces (with the adoption of PHP 5.3). I can’t wait until there’s wide enough support by the hosting companies to start using them.

On a less specific level, I think PHP and other “web” languages are going to start becoming more and more relevant for serious development. The whole world is moving online, and web apps are beginning to matter just as much as native apps, if not more so. I’m excited to see what’s next for PHP.

13. Any code pet peeves?

Personally, I hate to see code that sprawls. It really bothers me when code is written as a long string of actions instead of chunked up into small functions or methods that handle one action. That lack of separation leads to incredibly bloated, difficult to maintain files, and there tends to be a lot of repetitive code. It just begs for errors when you have two chunks of code that do the exact same thing.

In general, I just wish everyone would code like there was someone else working with you that needs to understand what the hell you’re talking about. The arrogance that leads someone to think, “If you’re not smart enough to understand how my code works, you shouldn’t be in my source code,” really bothers me; I think a better question is, “If you’re not smart enough to write clear code that any functional developer can understand, you shouldn’t be talking down to anyone.”

14. What type of music do you like? Any hobbies?

I grew up on country music, then started listening to Top 40 stuff as I got a bit older. I got introduced to metal, then punk and hardcore, then hip-hop, then folk. I found some good in all of it, but I listen to mostly folk/alternative and hip-hop now. I spend an inordinate amount of time listening to music, and I track it all through Last.fm.

I stay pretty busy, so I don’t have too many hobbies, but I make an effort to keep them non-geeky (I mean, at some point I’m going to need to impress the ladies, right?). I lift weights a few times a week, and I like cooking. I’m also a big time beer lover, and I love finding new microbrews and specialty beers (especially stouts and porters). I brew my own beer every month or two for fun, which is way more fun than it sounds. Plus, there’s nothing better than drinking a beer you bottled yourself. I try to travel as much as possible, also. I’m planning a couple road trips that pass by some of my favorite breweries in the spring, and I’m hoping to get out of the country next fall and hang out in Europe for a bit.

15. What are your future plans?

If I get everything I’m hoping for, I’ll be doing a little less in terms of freelance work and focusing more on the teaching aspect of programming. I’d love to continue producing in-depth tutorials alongside influential bloggers in the community, like Chris Coyier. I also hope to start speaking at conferences in 2010, if I’m lucky enough to get the opportunity.

Apress has been great, and I hope to continue writing books about web development. I also want to get back into writing articles for sites like Nettuts+ (I haven’t forgotten about that article, Jeffrey! I promise!) and regularly blogging on Ennui Design.

I also want to try and grow Humblecock as much as possible, if for no other reason than I want to be able to make exactly the clothes I want to wear.
And at some point I’ll have to grow more of a social life and start dating. My mother will have a heart attack if I keep coming home alone for Christmas.