You are currently browsing the archives for the Design & Code category.

jQuery/HTML Tip: Focus cursor inside “contenteditable” element after click

Posted on Wednesday, September 19th, 2012 at 3:20 am

Chrome 21 (and below) has some strange behavior towards elements with the “contenteditable” attribute, if you dynamically clear its text/content on click using $('.className').text("") or $('.className').html(""). After one click, the text/content clears, but there’s no cursor. If you click again, then the cursor appears.

Note 1: Clicking an empty area of the "contenteditable" element makes the cursor appear. Clicking the text itself, however, makes you click a 2nd time to show the cursor.
Note 2: Tabbing/focusing into the element DOES NOT have the same problem.

This is very annoying, and surprising that only Chrome behaves this way. Basically, when you're hooking onto the "focus" event to clear your element's content, clicking the text of the element doesn't trigger the "focus" event you need. That's why the second click is required – to trigger the actual focus event. And again, clicking into your element's empty area fires off the focus event with one click.

Code example after the jump...

Continue Reading »

Posted In: Design & Code, Tips & Tutorials

jQuery Tutorial: Select elements with the same index, across multiple containers

Posted on Monday, August 20th, 2012 at 2:37 am

A few days ago I was working on a project where I needed to set the "active" state of <li> elements across multiple containers. These containers were divided into separate tabs, so one could be viewed at a time, but when one container updated, all the others needed to be updated as well.

Check out the instructions and code after the jump!

Continue Reading »

Posted In: Design & Code, Tips & Tutorials

Imagination, thinking outside of the Cube

Posted on Wednesday, September 14th, 2011 at 7:39 am

I recently came across a very interesting set of videos that really struck a chord in my mind. In short, a glossy black cube was sent to some of the world's top designers, architects, and academics, including Dieter Rams, Stefan Sagmeister, and Massimo Iosa Ghini. In a series of short videos, the fundamental ideologies of simplicity, form, and function are discussed to dissect the essence of the cube.

More after the jump...

Continue Reading »

Posted In: Design & Code, General Stuff

WordPress Custom Post Type & Taxonomy Generators

Posted on Wednesday, June 29th, 2011 at 5:11 pm

WordPress LogoThe launch of WordPress 3.0 skyrocketed the amount of tutorials available for creating Custom Post Types and Taxonomies. Anyone that has worked on highly-customized WordPress themes is familiar with the tedious process. Rest assured, the repetitiveness has been eased thanks to Themergency, a growing resource for WordPress plugins, tutorials and more.

View the Custom Post Type & Taxonomy generators!

Enormous credit must also be handed to Brad Williams, the creator of the Custom Post Type UI plugin, which has been around for quite some time. This plugin automatically takes care of the code without you having to copy and paste generated data into the functions.php file.

Happy theming!

Continue Reading »

Posted In: Design & Code, Tips & Tutorials

Fancy Interaction vs. Minimal/No Interaction

Posted on Sunday, April 10th, 2011 at 6:32 pm

This post is a response to Alexander Interactive's blog entry titled "Amping Up Apple's Compare Grid" regarding Apple's new interactive (draggable columns) Mac comparison chart.

The collapsible rows method only works well when you're dealing with "yes/no" values for each row and column, or simple one (or two) liners such as numbers, a word, or a light combination of both, as demonstrated with Bizfilings and Kaplan.

Apple's chart allows you to clearly compare large chunks of critical information simply by scrolling and looking. There is no unnecessary clicking, toggling, scrolling, or any combination of these elements present in Apple's comparison chart, simply because it would slow the user down in being able to scan all the provided information. More after the jump...

Continue Reading »

Posted In: Design & Code

Pro Tip: Custom WordPress URL Parameters

Posted on Monday, September 6th, 2010 at 5:41 am

WordPress LogoPassing parameters in the URL within WordPress Page Template such as "website.com/page/?name=Lasha&version=214" is generally OK, but be aware! If you use a parameter such as "year" in the URL, it will overwrite WordPress' own "year" variable (if you have pretty URLs enabled) and throw a 404! How did I learn this?

I wrote some PHP code within a Page Template that retrieved data from a custom database by passing parameters through the URL, using the $_GET method. One of my parameters was "year=2010", and I kept getting 404s until I changed it to "fiscalyear" where it no longer interfered with the mod_rewrite rules.

I hope this saves you the headache it caused me when writing custom PHP code within WordPress! 🙂

Continue Reading »

Posted In: Design & Code, Tips & Tutorials

Using WordPress as a CMS

Posted on Sunday, August 22nd, 2010 at 9:28 pm

WordPress LogoRecently, I completed a project where I used WordPress as the CMS, and it was a fantastic experience! I learned a tremendous amount about WordPress, its inner workings, and how to hack it to do (almost) anything you want! Those who say WordPress can't be used as a full fledged CMS don't know what they're talking about. Sure, it might not be jam-packed and heavy like Drupal, but it does a heck of a job at controlling content!

Best parts about WordPress:

  • Customizable Category & Post views
  • Custom templates for Pages (completely different layouts for each page)
  • Super intuitive built-in functions.
  • Template "includes" that adhere to the loop, etc.
  • Plugins and community support! (Plugins saved my life)
  • Documentation (second to none, for the MOST part :))

Continue Reading »

Posted In: Design & Code

Design Tip of the Day 04: Work in a new medium

Posted on Saturday, December 12th, 2009 at 4:37 am

If you work only on the web, learn about print design and production. If you work only in print, learn the basics of web design & development. Expanding your skills will up your competitive level in a market that has become overly saturated with basic talent.

One cannot express how important it is to design for the web. The web has become an instant phenomenon that is being quickly taken over by the big dogs of the media world. Methods of content consumption based on the Internet are multiplying faster than any other form of media in the past.

First there was the Amazon Kindle, and now we have the Android-based Nook eBook reader. Rumors about Apple releasing a Tablet of their own are flying around like aimless torpedoes. If you were to ask me, Apple is definitely planning something, and it'll probably be a huge hit.

To put it simply, the world is changing very quickly. If we fail to keep up to date with what's happening, our jobs will leave us for someone else. Stay open minded and read a lot of design blogs. See what people are raving about so that you can contribute in your own way. Don't forget to collect inspiration along your journey.

PS.  Print is not dead. As long as creativity isn't lost, it will continue to be a dominant form of media, regardless of the changes it goes through.

Continue Reading »

Posted In: Design & Code, Tips & Tutorials

Adobe Flash CS5 and Native iPhone Apps

Posted on Sunday, November 8th, 2009 at 5:32 pm

Flash CS5 iPhone AppA few weeks ago I learned that Adobe Flash CS5 will have the functionality to create native iPhone applications. I thought to myself, "Holy cow, this will allow anyone who knows Flash to create iPhone apps!" I've always wanted to make iPhone apps but the lack of Objective-C programming skills prevented me from doing so.

If Flash CS5's iPhone application authoring does what it promises, the future of app development is in for treat. This means that anybody with ActionScript skills can make iPhone apps/games. The average user will become the "average developer" very quickly. It appears that this will erase the dividing line between design/development professionals and the average Joe.

Click here to view the Adobe Labs page for iPhone Apps.

Despite the high chance of crap-output from developer-wannabes, this will  give people an opportunity to create quality products. From what Adobe Labs has shown so far, it proves that this model works. In the meantime, I'll be boosting my ActionScript 3 skills, learning to make some awesome apps.

Feedback: Does this make you want to develop for the iPhone, or will this saturate the App Store with even more fart apps?

Continue Reading »

Posted In: Design & Code, In the News, Technology

iPhone future looks stronger than ever, thanks to Palm Pre

Posted on Sunday, April 5th, 2009 at 5:54 pm

Palm PreJust before the iPhone 3.0 software was announced, I was ready to publish an article saying how the Palm Pre was going to give Apple a lot of trouble. Then, I realized how wrong it would have been if I had done so. Now I will tell you why I think the iPhone is here to stay, and push the competition out of the way.

The Palm Pre, for the longest time, had the biggest chance to put a little fear in Apple. And so it did. Just a couple of weeks ago, the iPhone 3.0 software was revealed and most of the iPhone's nuances have been eliminated. I actually believed that if the Pre kept up its game, it would force me to switch, but thankfully, that is no longer the case.

Palm has claimed that OS X on the iPhone is not a true mobile platform, thus it will never be as speedy and sleek as what they are cooking up. I respectfully disagree! Let's just put it this way; Smooth scrolling and seamless portrait/landscape transitions is not what makes a great device. Yes, the Pre certainly competes in the visuals department, but that will only take the device so far.

More after the jump...

Continue Reading »

Posted In: Design & Code, On the Web, Technology