Contact Us
  • HYPERlinks February 3, 2012: A Weekly Roundup of Links to Great Design, Web Tools and Services

    Web Development and Design Resources for Web Developers

    HYPERlinks: February 3, 2012

    This week we have a wide range of cool links to share – from competitive coding to responsive notebooks to really nerdy plugins and CSS features.

    And just for fun, because we love the internet:

    “Every second one hour of video is uploaded to YouTube. Let’s visualize that.”

    Jenni Schwartz / Designer

    Go Code Racer, Go!

    Pretend you are at one of Facebook’s Code-A-Thons and race to finish code challenges before your contenders while using special weapons to foil their process. Win awards, the right to gloat, and of course you may even learn a thing or two.

    Who’s Hungry?

    We are finally seeing a design shift in the restaurant industry for the better. View the link below to view 30 delicious and inspirational restaurant website designs. Most of the sites are showing large images of food to entice the potential customer.

    Eliminate HTML Email Nightmares

    So, you’ve come up with a beautiful HTML email design that you’re happy with. Woo hoo! Before you start mailing it out, you’re going to need to test it. With Email on Acid, you can preview your email in 48 variations of the most popular email clients and mobile devices. Their code validation and analysis tools will help you identify rendering issues – fast! Please note, we do not recommend taking acid while using this application.

    Bill Dailey - HyperArts Programmer & Project Manager

    Bill Dailey / Project Manager & Programmer

    Using an .htaccess on your Apache server

    If you host your website on an Apache-based webserver, you may have seen a file called .htaccess in various directories on your server. This file can be modified to do all kinds of cool things – redirecting old page to new ones, restricting access to files, and custom error pages. This article from TutsPlus will get you started.

    Allowing your images to be responsive

    You may have heard all the buzz lately about “responsive” web design — allowing your website to adapt so that it looks great on any screen size. One of the most challenging aspects of creating a responsive design is scaling images to different sizes. This article from 24ways has some great techniques that should help make your images look awesome.

    Fun with QR Codes

    A hot trend over the last few months has been QR (Quick Response) codes, which allow you to scan the code with your smart phone to be taken to a website. This fun article takes a look at some more creative uses of QR codes out in the wild.

    Daniel Dy-Liacco / Front-end Developer

    Gridpak – The Responsive Grid Generator

    Gridpak is an online responsive grid generator that is “the starting point for your responsive projects.” The resulting download contains PNGs of each grid you created, CSS files that are IE8+-compatible but also contain more experimental CSS properties such as media queries, and a JavaScript file that allows you to toggle your grid on and off in a browser.

    Responsive Design Sketchbook

    As invaluable as Gridpak may be in starting a responsive project, some of us like sketching things out first. This 50-page sketchbook priced at $12.95 helps make this easy. Each page in this sketchbook provides multiple grids for thumbnail sketches of various viewports and a grid showing break point indicators.

    HTML5 Please

    Itching to dive into HTML5 and CSS3 but you’re not sure which features are ready for primetime? This site tells you what they are and how to use them.

    Rachel Tietjen / WordPress Programmer

    Tutorial: Adding Fields to the WordPress Media Gallery

    Learn how to add custom fields to the media uploader in WordPress that allow you to attach additional meta data to images and other media. The examples in this tutorial show you how to add linked captions and how to specify which images you want to use in your gallery. Super useful ways to extend the gallery functionality!

    PLUGIN: Additional Image Sizes

    Create additional image sizes (in addition to the predefined WordPress defaults: thumbnail, medium and large) for your WordPress site/blog. It will also re-size the predefined WordPress sizes if the size(s) in Settings > Media have been edited. This is great if you (or a not-too-tech-savvy client) want to be able to add an image of a specific size to a page or post using the media uploader, it will add your new custom size option to the uploader window.

    Tutorial on How to Create CSS Box Shadows (box-shadow)

    This may be old news for some people, but here’s a tutorial with examples on all of the different ways to implement the box-shadow style, one of CSS3’s awesome features!

    Share your cool web links in the comments!


    1. Cool post, thanks for all the tips 😀

    2. Love the QR Code thing !

    Speak Your Mind