Featured Posts

Notes from An Event Apart Boston 2012 I had a great time at An Event Apart Boston, 2012. Ill post some photos soon. The conference avoided deep dives into code in favor of showing WHY you would do reactive design. As Eric Meyer said "My...

Read more

Judging the CT Student Innovation Exposition (E-Commerce)... Want to know what the next 10 years will look like? Ask a high school student. Their creativity isnt limited by their knowledge of what we currently call technological limitations. They have a vision of...

Read more

The Value of Feeling Appreciated as an Employee in... Whether you’re a new employee or the vice president of the company, everyone wants to feel valued, even appreciated, in the workplace. Not only does it improve morale and make the workplace a more pleasant...

Read more

The difference between classic and motion tweens in... Here it is: If you're used to doing things "the cs3 way" then you can continue to do so with the classic tween tool. It works the same way as you remember, using key frames as normal, but you cannot...

Read more

PHP: If (equal to AND not equal) - eliminate form spam... Just learned a great function of PHP thats already made my forms a lot better. A while back I wrote an article about eliminating form spam without captchas by using css to hide a text input box for bots...

Read more

twitter

Breaking News

  •  

Examples of Responsive Design and a plea for Device Agnostic Design

Category : Art & Design, Cool Websites, CSS, Slick Code, Technology, What I Read

Below are a few of my favorite examples of Responsive Web Design, the practice of setting media types allowing the design to scale to adapt to whatever the size of the screen that the user is using.

http://robot-or-not.com/
http://bostonglobe.com/
http://clearairchallenge.com/
http://www.smashingmagazine.com/

Device Agnostic Design
An article from Smashing Magazine talks about Device Agnostic Design which is a great future proofing advancement from responsive design. Being device agnostic means that you use your content to set break points, not the device you want the content to display on. This is important because if we spend time developing content for specific devices we are creating the next developer nightmare. There is no way to predict the size or aspect ratio of screens in the future. What happens if you design your site to perfectly fit your favorite tablet only to discover that the next generation of that same device has a slightly different sized screen.

For now, it seems as though developers are at the mercy of hardware makers. All we can do is hope they create some sort of a standard, and quick. In the meanwhile, we’ll have to make design decisions based on the content we want to show. After all, content is King.

Moving my way through Codecademy.com

Category : Around The Office, Slick Code, Social

Coming up on 500 points at Codecademy.com. So far, I’ve made: a dice game; rock, paper, scissors; a bunch of core exercises and im working on a blackjack game. You can follow my progress here. Contunue Reading

5 Ways to Reduce the Number of CSS Classes you use

Category : CSS, Slick Code, Technology

You can greatly reduce the number of css classes you use in a project by some best practices while writing or reviewing CSS code.

Use a CSS style Reset:
Browsers come with a default styling for most elements but unfortunately these definitions are not the same across all browsers. Even something as simple as a

tag can be interpreted differently across different browsers. (Bottom vs top margins in older versions of IE 6/7 vs FF and Chrome). Using a CSS reset makes all the default inherited definitions the same and will simplify your debugging while reducing the number of styles needed to account for different default element styling.

There are a number of resets you can find with a quick search. The most extensive is Eric Meyer’s reset, and this maybe a bit overkill as you will have to redefine all properties of every element. Experiment and see what works best for you and how you code. The CSS clear I use is attached below.

If you want to look into this further or if you want t help deciding which reset is right for you, a great article can be found from SixRevisions.

Create a Common CSS library:
Put all your generic one definition selectors in one place (generally the top as this will cascade better–more on this below.) If they only have one definition then you can very likely reuse the class elsewhere in the document. Keeping a generic name will allow you or someone else to easily understand the classes being used. Think float-left, float-right, clear-float, em, caption, highlight, center-text, center-auto, etc… I’ll list this out in another tutorial in the future.

I also declare all the colors used in a project as stand alone classes so I can quickly add them to a class without having to recreate a whole new class just to account for a change in text color.

I may not use the whole library in every project, but I use at least 75-80% and I know my commonly used code is there, and keeping all the colors in one placer makes it easier to copy and paste for other styles.

Cascade your CSS:
I start general and the work my way to being more specific. Using more specific selectors will allow you to drill down in setting properties. If you do this correctly you can greatly reduce the number of !important tags you use in your stylesheet.

CSS hierarchy: Element >> ID >> Classes >> !important >> DOM

Use Bug Killing CSS:
There will probably always be quirks among the many browsers creating the need for browser specific style sheets, but these style sheets should be as simple as possible. They should only list the properties for definitions that need to be overwritten to work in the given browser. Do not copy the entire rule. (I know this seems obvious-Its OK to laugh- but I’ve seen this on major websites).

Validate your CSS:
Don’t forget to use the w3c validation tools. This is the best way to spell check your style sheet in addition to checking syntax of all your elements. Plus, you’ll have the piece of mind knowing that your code is standards compliant.

Use Underscore and !important to defeat IE6 bugs

Category : Coding and Database, Slick Code, Technology

http://modxcms.com/about/team/rthrash/css-hacking-important.html

http://www.wellstyled.com/css-underscore-hack.html

10 Transition Effects: The art of Showing/Hiding Content

Category : Art & Design, Great Tutorials, Slick Code

Great archive of different show/hide effects using JQuery, which I gotta say is quickly becoming the new “Flash” of the internet. You dont need a special player for JQuery and it interacts (and even plays nice) with other non JQuery elements, something Flash can never do.

http://devsnippets.com/article/10-transition-effects-the-art-of-showinghiding-content.html

Check out whats possible and then start learning JQuery.

7 Principles Of Clean And Optimized CSS Code

Category : CSS, Great Tutorials, Slick Code

http://www.smashingmagazine.com/2008/08/18/7-principles-of-clean-and-optimized-css-code/
This is another post from SmachingMagazine. The principles are a pretty good standard ruleset.

#1 (shorthand CSS) is key. I opt for the least amount of whitespace as I can as some of the CSS files I write for larger sites still have a few hundred lines. This is without the IE 6 hacks, which are in a separate CSS file, which they recommend in #2. This allows your code to validate and also be condensed. Both good things.

Thank you Tony White.
Enjoy!

PHP: If (equal to AND not equal) – eliminate form spam without using a captcha

Category : Featured, Great Tutorials, Slick Code, Technology

Just learned a great function of PHP thats already made my forms a lot better. A while back I wrote an article about eliminating form spam without captchas by using css to hide a text input box for bots to fill in. By giving the input box a legit sounding name like “email” the bots fall for the trap and the php handler discards their form entry results.

The only problem was that I still got blank entries every now and again from people using their back button, or search engine spiders. You could also trick the validation script by surfing with java turned off . And while I still dont know exactly which one of the above was the cause I have an ultimate solution.

The equal to and not equal to feature in PHP.

Instead of:

if ($test == "") {
mail($mailto, $mailsubj, $mailbody, $mailhead);
}

We use:

if ($test == "" && $email != "") {
mail($mailto, $mailsubj, $mailbody, $mailhead);
}

This little change not only checks to see that there is nothing in the hidden field but also checks to see that there IS something in the email field. As the email is required this is nothing new, but will dump all the blank entries I’ve been getting.

FYI:
&& = = and
!= = not equal to

Cross Brower Css Footer -tested and true

Category : Great Tutorials, Slick Code, Technology

For one of my soon to be released projects I was asked to create a footer background image that was stuck to the bottom of the website or broswer window. Finding a cross browser css footer was a pain, and inplementing it took some trial and error with the numbers but it worked!

Thanks going to:

http://ryanfait.com/sticky-footer/

For his great tutorial on the subject, and his solution.

A more graphical tutorial can be found here: http://fortysevenmedia.com/blog/archives/making_your_footer_stay_put_with_css/

Form spam: BE GONE!

Category : Coding and Database, Great Tutorials, Slick Code, Technology

I started getting emails last month from the forms on one of my client’s websites. The spam came as a long string of links in the comments section of one of the forms. The idea for this type of spam is, I think, to boost search engine ranking by increasing the clicked rate to your site. It is easy enough to detect and delete but still, its quite a pain to delete 10-12 emails a day. Not to mention there is a more malicious form of form spamming that I was lucky enough not to have been attacked by where the spammer inputs php code into the form fields which tricks your mail server into sending bogus messages from your return address. This has had the effect of some sites being blacklisted from search engines for spamming, but I hear that google and others are going to be lenient on this in response to the rise in form spam in the recent months.

So there was the worst case scenario and to avoid it all together we needed to add some sort of form validation. Client side java script could be used, but if the spammer simply turned off java script, we’d me back to a naked form, so although useful to make sure humans are using real email addresses (with the @ symbol) it would be useless to stop a bot.

The next step would be to use a captcha, but I hate these things and good OCR software can read them better then people with poor eye sight so this isn’t the best answer either. New captchas are evolving into fill in the blanks, picture description, and general questions (“whats the letter after b?”). Machines will not understand the question and thereby cannot guess the answer.

But still, this is slightly intrusive because it requires the user to think. Sometimes that’s enough to put people off. I wanted a solution that eliminated bot generated spam without encumbering the real users at all.

My solution was code the PHP mailto into an if statement that checked the value in a hidden field. If anything had been entered into this field then we can deduce that it was not filled out by a human (who would never see this field) so the request fails the php if statement and the mail command is never fired.

However, the PHP code will still look like the page email was sent. This is important as it lets the spammer think everything has worked. After putting this into play spam on our forms has effectively ended. I say effectively because I read somewhere that some people actually sit an copy and paste this sort of junk into forms by hand. What a waste. No one reads it anyway.

I just wanted a solution that freed up my client without affecting his customers.

The HTML/CSS looks like this:
<input style=”display:none” type=”text” id=”email” name=”email”>

PHP:
$test = $_POST["email"];

if ($test == “”) {
mail($mailto, $mailsubj, $mailbody, $mailhead);
}

Currently I’m working on a great book by: Steve Krug called Don’t Make Me Think.

Update: August 1st, 2008:
To eliminate the “random blanks” I got from users pressing the back button and non javascript browsers I modified the above code to include a few more conditions. Read the next article on using the IF equal to AND not equal to function in php to find out more.