bri.design

Graphic and web designer, developer, artist and sports geek. Technophile, motorhome enthusiast and coffee drinker. Loving husband. Luckiest guy in the world. Brian Dodson Twitter: @bridesign Facebook LinkedIn Pinterest Google+

[factoryset]

[briandodson-blog]

I think this is the first time I've come across this 1986 Donruss style Michael Jordan baseball card. What the heck is it?!?

[briandodson-blog]

Introducing SUBARU WRX Concept

What do you get when you design a whole new car to push the boundaries even further with a turbocharged engine and all-wheel drive capabilities? Experience the all-new SUBARU WRX concept come to life. http://www.subaru.com/nyas-concept

One of the coolest uses of the Parallax concept I've come across in web design. Simple, but extremely effective. Very well executed (just get past the Flash video at the beginning).

[wonderfulworldofwebdesign]

When a client sends through the 20th "small change" to a design they already approved

[briandodson-blog]

Ha! Sometimes I can certainly relate!

[sourcetocode]

There are a number of different media queries that you can use on your design, if you don’t know where to start with media queries here is a good boilerplate to go with.

[briandodson-blog]

Well, this is pretty darn handy.

[beardyvonthightickler-deactivat]

Whoever developed AJAX needs a fucking medal.

[theindieaccord]

how to use the Date object in javascript! I wanted to create a timer for the upcoming butler release. The problem? I had no idea how javascript handles dates. Luckily, it has a nice built in object that makes everything easy. I headed over to w3schools.com and learned how to use it. I simply...

[briandodson-blog]

I've found Keith Wood's plugin, jQuery Countdown to be simply the best there is for handling countdowns, timers, and anything else you can think of for comparing time between dates/times, etc.

Datejs is the best date object library I've come across. Work this guy in with jQuery Countdown, and the sky's the limit (or perhaps it's January 16, 2038).

[p4u1x]

IMO this is a big part of my profession, and it is something I try to make time for every week. For any fellow web designers or developers who occasionally feel lost or behind with constantly changing/improving web technologies then I would suggest Chris Coyier’s advice on the matter and some of the sources he recommends. Learn to explore new technologies but make decisions for your projects based on requirements and the technologies that you think will hold up over time and with the different people who will need to support them.

[briandodson-blog]

Couldn't agree more. There's so much out there, and new things popping up all the time. I'd consider myself a "jack of all trades" when it comes to the interwebs, but I certainly haven't mastered (or even looked at) everything out there. Over the past 6 years or so, no matter what new stuff comes out, I've pretty much kept the same tools in my workshed. For me, the following has, so far, stood that test of time, and I believe in them in the long run (in terms of general web development):

Environment: LAMP (Linux based Apache, MySQL, PHP codebase) Framework: CodeIgniter Javascript: jQuery (enough said.) CMS: Expression Engine, Wordpress eCommerce: Magento (before Magento, I used Zen Cart for years and years)

And drilling down into each of these tools, I have multiple tools that I continuously fall back on. Individual PHP functions and scripts, Expression Engine or Wordpress addons and plugins, jQuery plugins, etc. I'll still experiment with different things, and I try to browse the latest and greatest whenever I can, but my workshed has and always will (probably) work for 99% of the work I do.

[briandodson-blog]

Cycle Multiple Images At A Time With JQuery

So I was trying to find an easy way to cycle through images, but instead of cycling one image at a time, I wanted it to cycle through two images (or more!) at a time. Google didn't get me anything immediately, so I set out to develop a lightweight version of this. As usual, jQuery made this so freakin' simple. The below script is simple. It loops through my list of images, slices them into groups of two, then wraps each of those in a wrapper div. It'll even wrap the last image in a div by itself to keep consistency if there are an odd number of images in the list. Combine that with a the fantastic jQuery.cycle plugin, and you have a nice little script that will rotate two (three, four...) images at a time!

The Markup

The Markup

<div class="wrapper">     <img alt="image" src="images/01.jpg">     <img alt="image" src="images/02.jpg">     <img alt="image" src="images/03.jpg">     <img alt="image" src="images/04.jpg">     <img alt="image" src="images/05.jpg">     <img alt="image" src="images/06.jpg">     <img alt="image" src="images/07.jpg"> </div>

Now, jQuery Awesome-sauce-ness

$(function(){     var $images = $('img'), //Define objects to loop through     $c = 2; //How many images to cycle at a time //Loop through our images     //Slice them into groups of $c     //Of course jQuery makes it so easy to wrap each of these groups in another object using .wrapAll()     for(var i = 0, n = $images.length; i < n; i += $c) {         $images.slice(i, i+$c) .wrapAll('<div class="group"></div>');     }     //Now cycle through our .group objects     //jQuery.cycle will cycle immediate children of the parent you specify, so we bind .cycle() to the .wrapper     $('.wrapper').cycle({         speed: 1000,         timeout: 4000,         pause: 0 });     }); });

Conclusion

The power of jQuery is all-encompassing and should not be ignored. .slice() and .wrapAll() are just two of the many, many functions that make it ridiculously easy to traverse dom objects and manipulate them at will. Yay, jQuery.

[butlerm]

Here is a completely FREE vector icon of the instagram app.  I was unable to find a suitable vector logo so I decided I might as well make my own and provide it to everyone to use.  So this file contains a .ai file, .eps file, and two png files at 300px x 300px and 30px x 30px.  The .ai and .eps file will work in adobe illustrator CS3 and higher or other vector based program.  Click on the image to download the file or else you can click here.  Enjoy!!

[briandodson-blog]

Fine pleasantries on a warm Mexican evening (at Playa Palms Hotel)

[briandodson-blog]

Lovely night in Playa del Carmen (at Playa Palms Hotel)

[briandodson-blog]

Watch out for CSS Media Queries

Responsive design, sweet.

Careful...

In particular with media queries that are designed to target iPads and other tablets. Keep in mind that there are still plenty of good folks out there who are working on older machines, or older, low resolution monitors. Many of these monitors only display up to 980px or 1024px wide. Guess what? Adding a media query designed to target iPad, such as:

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px){/* Styles */}

Will also be recognized by ANY monitor that is 1024px or less in width. Not to mention browser windows. Keep in mind that people can control the size of their browsers on larger monitors, and many (most?) will minimize the browser window, or at least resize it so that they can multitask. As soon as that browser window gets resized to 1024px or less, that media query will kick in.

I've found that most of my iPad-specific styling tends to be adjustments to layout and widths in order to accommodate the touch-screen interface. This includes adding overflow:hidden styles, replacing large background images with smaller (980px max width), optimized images, and enlarging text, etc. for better ease of use on the touch-screen iPad. Responsive design is great, but be careful that you don't start inheriting UI changes meant for touch-screen on the desktop.

[urhajos]

Tattooed People Do It Better

[briandodson-blog]

Wow, that's incredible

[briandodson-blog]

Oops, wrong tumblr...

Post was moved... click here for the right post.

[briandodson-blog]

My patience is very thin today I fear. Friday can't end quick enough.

[briandodson-blog]

[briandodson-blog]