Tweet Heat – The hottest Tweets of the Month [June 2012]

Categories Articles

This is a guest post by Jan Rajtoral (AKA Gonzo the Great), founder of gonzodesign, a Dutch design studio specialized in graphic and (responsive) web design. He also writes for the, where above anything else, his passion for writing, technology, communication and design drives him to contribute.

– § –

In this article we’re going to take a look what has been published this last month on the Blogosphere. We hand-picked a selection with the best Resources, Tutorials, Scripts/Snippet and WordPress related Articles for you.

All these design-related links have been mentioned on Twitter in the last month, and collected in this single article. So, I hope you’ll enjoy this roundup cause we think that having resources and staying up-to-date is important in your personal growth and development.


HTML, CSS, PhP, Coding & Resources

Coding & Resources

Media Query Snippets – Great resource for finding the right width for a lot of specified devices: mobile, monitors and tablets. Extremely useful!

50 Web Developer Documentation Manuals You Need To Know About – This is a list of over 50+ Documentation Manuals and Guides for Programmers, Web Developers, and Web Designers. I will actively update this list with more Manuals as I come across them.

5 Essential Points You Should Know About Responsive Web Design – Perhaps some web designers have not understood what responsive design stands for yet. This is why we’ve decided to create a list of the web design elements you should not lose track of during this process.

Responsive images: what’s the problem, and how do we fix it? – Responsive images is a surprisingly complicated topic, and one that’s been steadily gaining attention over the last year as more developers discover they need them and then discover there’s no good solution yet.

HTML5: How To Use <DETAILS> And <SUMMARY> Tags – Among several new tags that are available in HTML5 Specifications, detail and summary tags, in my opinion, are the most useful. With these new tags you can hide some of the long content and display only the summary.

Best practices for efficient HTML5 coding – HTML5 is quickly becoming the standard in terms of front-end coding, and as a web developer you definitely need to know how to code HTML5 websites. After almost two years of HTML5 coding, I have compiled this list ..

50+ PHP Tricks and Tips for Beginners & Developers – PHP is most useful language in making blogs and website, it have a lot of functions which can be used to derive even more custom functions. We have gathered most useful PHP Tricks and Tips for beginners and even Developers.

A Look Into: CSS3 Negation (:NOT) Selector – I’m sure that the :not name itself has already described its function, that it will simply select the opposite of the element or condition specified.

Creating Custom Form Checkboxes and Radio Buttons with Just CSS! – Text inputs are easy, but checkboxes, radio buttons are very difficult to style with CSS. In this tutorial I’ll show you exactly how to style these inputs and make awesome forms with just CSS!

Notes to an Agency Starting Their First Responsive Web Project – This past week I talked with a design agency who was about to embark upon their first responsive web design project. It sounded rather app-like.

Using SVG clipPath – One neat thing you can do with SVG, besides creating your own image filters, is creating a clipping path (or mask) that can be used to alter the shape of your images and the boundaries of links.

How To Tune-Up Responsive Design Websites To Improve Mobile SEO – Let’s look at how responsive design works, and how we can build sites to achieve maximum SEO performance on both the desktop and mobile environments.

Why Your Links Should Never Say “Click Here” – Have you ever wanted your users to click your links, but didn’t know how to get them to act? When some designers run into this problem they’re tempted to use the words “click here” on their links.

CSS Tricks: How to Make your Website Load Faster – By writing your CSS effectively for browser rendering, you will allow your website or blog to take less resource memory from your visitor’s computer so that your website will display much faster.

Quick Tip: Have You Heard About CSS Filters Yet? – The CSS filter property works just like any other CSS property. However, as usual browser support is pretty thin on the ground. The only browsers that support filters are webkit based. For this reason we need to use browser prefixes.

How much does a responsive web design cost? – The fact is that that responsive web design costs more…than doing nothing. But this is 2012. At the very least a web experience should have at least some mobile consideration, and at the very most a site should be full-on mobile optimized.

Getting Started With Scalable Vector Graphics (SVG) – As a web designer it’s high time you knew how to implement SVG (Scalable Vector Graphics) into your websites. Let’s now take a look at the basics of SVG, as well as more complex designs such as logos or icons.

Responsive Web Design: An Ultimate Guide – If you are running a website, you must have a responsive web design so that your website is accessible via mobiles as well. If you are not aware of all the hype responsive web design is getting, you should learn more about it.

Adaptive, Responsive or Mobile First? – There are arguments for using each mobile design methodology. When designing a site from scratch it’s worthwhile investigating mobile first. When resources are tight a quick adaptive site might meet your needs. If you want to serve ..

Using media queries to hide CSS3 from older browsers – While working on a lot of responsive layouts lately I’ve started using an approach that I’ve found reduces the risk of more advanced CSS, especially CSS3, tripping up older browsers.

Expandable Mobile Search Form – today I’m going to share a CSS tutorial on how to make an expandable search form that is suitable for mobile and responsive designs. This trick uses native CSS properties — no Javascript or extra markups required. It is a simple and effective way to design a compact search form.



Tutorials (page turn effect)

Create a page turn effect – To demonstrate the power of combining CSS3 transforms with transitions let’s create a gallery widget for jQuery that mimics a page turning effect. Most modern browsers now support CSS transitions, but not all support 3D transforms just yet.

How to Create an Infinite Scrolling Gallery in 10 Minutes – Pagination is a technique used to break large data sets into small blocks in order to reduce the server load. We used to create pagination buttons with page numbers and next/previous links. Now pagination has gained a new perspective with infinite scrolling.

CSS-Only Responsive Layout with Smooth Transitions – Create a 100% width and height smooth scrolling layout with CSS only. Using a radio button navigation and sibling combinators we will trigger transitions to the respective content panels, creating a “smooth scrolling” effect.

Perfectly Rotate and Mask Thumbnails With CSS3 – Ever seen a website showcasing image thumbnails that are slightly rotated? It’s a simple effect that adds a layer of visual personality. Saying that, if you’re not achieving the rotation effect with CSS, you’re working too hard!

3D Thumbnail Hover Effects – Today we want to show you how to create some exciting 3D hover effects using CSS3 and jQuery. This idea is inspired by the cool hover effect that you can find on the page of the Google SketchUp Showcase.

Cascading Content with CSS3 – Today we’re going to creat a cascade content show with CSS3. The key point is using the checkbox button and a combination of the :checked pseudo-class with sibling combinators.

Coding a Minimalist Contact Form with CAPTCHA Spam Protection – Using PHP we can overlay some text on top of a background texture to build a heightened level of security. But we will also setup the form using jQuery and AJAX to submit the data.

Timed Notifications with CSS Animations– A quick tip on how to create some simple timed notifications with CSS animations. The idea is to show a notification with a progress bar for a specific duration and then make it disappear.

Pull Off Awesome Scroll Effects With Scroll.js –  It’s a super easy to implement library that makes applying mind-boggling scroll effects a breeze. All you have to do is paste in a couple of brief lines of JavaScript, the rest is all handled with HTML and CSS.

Notification bubble with CSS3 keyframe animation – I had to emphasize somehow a dynamic notification bubble. Basically, every time the notification value changes, a visual effect was needed in order to get user’s attention. So I made that using CSS3 keyframe animation.

Responsive 3D Panel Layout – A responsive layout experiment where we arrange panels in a grid-like structure and transition the elements with 3D effects.

CSS3 Pricing Table UI Element (Tutorial) – In this tutorial we’re going to create an amazing pricing table UI element using CSS3. It has a nice hover effect created with CSS3 transitions, when you roll the mouse over a pricing plan.


Tools (web applications, bookmarklets, frameworks etc.)

Tools, Webapp's and bookmarklets – Responsify is a browser based tool, which allows you to create your own responsive template. Think of it as a foundation for you to build upon. You can customise the grid to suit your content, rather than trying to make the content fit the grid.

Snoopy – Snoopy is a bookmarklet for snooping on web pages. It’s intended for use on mobile browsers (such as Mobile Safari on the iPad) where you can’t view-source to poke around under the hood of sites to see how they’re built.

Gridset – We are slowly rolling out invites as we need more participants, so sign up now for an invite and to receive news about the full Gridset launch.

Gradient Finder – Inspired by pngtocss, Gradient Finder is an entirely in browser way to convert an image to its CSS gradient. Currently supports only linear gradients.

FFFFALLBACK – A simple tool for bulletproof web typography. Web fonts are here, sparking an exciting new era in web design. FFFFALLBACK makes it easy to find the perfect fallback fonts, so that your designs degrade gracefully.

EditorConfig – EditorConfig helps developers define and maintain consistent coding styles between different editors and IDEs. The EditorConfig project consists of a file format for defining coding styles and a collection of text editor plugins that enable editors to read the ..

Responsive Grid System – Spectacularly Easy Responsive Design. The Responsive Grid System isn’t a framework. It’s not a boilerplate either. It’s a quick, easy & flexible way to create a responsive web site.

Laravel – A PHP framework committed to elegance and simplicity. Programming doesn’t have to be painful. In fact, it can be enjoyable with the right tools. Laravel is for all PHP programmers, even beginners.

Pondasee – Front-end starter kit combined with the power of SCSS & Compass. Pondasee is made to help front-end or developer to accelerate their work-flow in making web application. Pondasee completed with some important mixins which will help you to finished your works faster.

MVCSS – A Sass-based MVC CSS Architecture. MVCSS is our method for creating predictable and maintainable application style by coupling Rails controller and controller action naming conventions to contextual style tweaks.

Mild – Instantly Convert Your Facebook or Twitter into a Custom Blog.

Codepen – A repository for awesome web effects. CodePen, a community of front end folks focused on inspiration and education.

berta – Berta is a fast and simple way to build your custom website and not just a portfolio. It can be anything – from a small business or fashion label to a nursing school in India. Set up your site in few minutes, design and edit directly in a browser window.

animate.css – a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

Brackets – a Revolutionary Code Editor for the Web.  Brackets offers a Live File Preview option which automatically refreshes your browser in real-time as you make changes to the HTML and CSS.

Nitro – Free super awesome task management. Nitro is the best way to get things done. It’s simple, fast and powerful at the same time. Nitro also syncs with Dropbox or Ubuntu One. Due to the power of Nitro, you’ll never get a “conflicted copy”.


jQuery Plugins, Javascript, etc.

jQuery Plugins and JavaScript

Shutter hover plugin – Very cool ‘folding’ effect on hover of a thubnail, image or graphic. Plugin created by: Piotr Falba Inspired by: 3D Hover Effects from Codrops

Responsive Tables – Don’t let tables break your responsive layout anymore. This simple JS/CSS combo will let your tables adapt to small device screens without everything going to hell.

Intelligist – a jQuery plugin that makes it easy to share and demo code in-page, using GitHub gists. It allows you to share one or more gists, and even execute the code, which makes it ideal for demoing JavaScript and CSS in-page.

Ideal Forms – jq-idealforms is a small framework to build awesome responsive forms. It’s built on top of jQuery and LESS. The adaptive approach is the key to responsiveness everywhere, compatible with every browser, and works with any grid system.

Chronoline.js – A library for making a chronology timeline out of events on a horizontal timescale. From a list of dates and events, it can generate a graphical representation of schedules, historical events, deadlines, and more.

gmaps.js – gmaps.js allows you to use the potential of Google Maps in a simple way. No more extensive documentation or large amount of code.

Dynamo.js – A dead-simple way to generate dynamic bits of HTML and add subtle effects to your content. Dynamo is the easiest way to add a new dimension to your site content. Cycle through various bits of text to add subtle variations to your work, or to draw attention to portions of your webpage.

jquery.pep.js – Pep is a lightweight plugin for kinetic drag on mobile/desktop. Pep was built out of a need for kinetic drag support for both mobile and desktop devices (click & drag). It uses the best of jQuery’s animate functions along with CSS3 animations to bring full-blown kinetic drag that works on all HTML5-ready devices.

get.drapache – A python server that uses the dropbox API to serve files that are hosted on dropbox. It will not be particularly useful to a developer who is comfortable with git, heroku, ftp, or another method of hosting a website. It will be useful, however, to people who don’t know how to use these tools.

jQuery Transit Brings CSS3 Animations to Our Favorite Library – This is a jQuery plugin that works the same way as the animate() method, but is all powered by CSS3 transitions. You get the benefit of smooth animations on any device, and a syntax you know and love (supports all major desktop and mobile browsers, weighs at 2kb when gzipped )

touchSlider — A free CSS accelerated jQuery plugin optimized for desktop and mobile browsers. It can be used for sliding images and content. The plugin detects if browser supports CSS transitions, resulting with 3 possible options for animation: Automatic, JavaScript and No Animation.

Sigma.js – A free and open-source JavaScript library to draw graphs, using the HTML5 canvas element. It has been especially designed to share interactive network maps on a Web page or to explore dynamically a network database.

jQuery Picture – jQuery Picture is a tiny (2kb) plugin to add support for responsive images to your layouts. This plugin will be made redundant when the format is approved and implemented by browsers.

AppendAround – A Responsive Markup Pattern. Sometimes, complex responsive layouts are hindered by source order. This pattern allows you to control where an element should be in the DOM by setting one of its potential parent containers to display: block at a particular breakpoint.

Fc.tape – jQuery widget for sprite animations. Background image (sprite) consisting of picture frames is animated like the tape in old-time movie projectors. Widget supports options to adjust smoothness and animation speed as well as methods to control animation behavior.

tablecloth.js – A  jQuery plugin that helps you easily style HTML tables along with some simple customizations. styling tables is typically tedious and time-consuming. If you’d rather spend your valuable time making the other elements of your site pretty, use tablecloth to do the heavy lifting.

Picturefill – A Responsive Images approach that you can use today, that mimics the proposed picture element using divs, for safety sake. Picturefill works best in browsers that support CSS3 media queries.

jquery-countdown – jQuery Countdown plugin that doesn’t sucks! This countdown has a great animation. This project is still at beta stage, soon i’ll implement callbacks and stuff. Did I mention that js code weighs just 1.7 KB?

Percentage Loader – A tiny jQuery plugin for displaying progress in a visual and engaging way. a jQuery plugin for displaying a progress widget in more visually striking way than the ubiquitous horizontal progress bar / textual counter.

Singool.js – A lightweight framework built on top of Backbone.js that helps you develop single-page web applications. It has a structure similar to popular server-side MVC frameworks, and supports plugins and themes.

Annotator – An open-source JavaScript library and tool that can be added to any webpage to make it annotatable. Annotations can have comments, tags, users and more.

Photon – a JavaScript library that adds simple lighting effects to DOM elements in 3D space. It’s rather processor-intensive, so please use responsibly. Photon relies on the WebKitCSSMatrix object, so WebKit is the only browser engine currently supported.

Refine Slide – A lightweight (12kb minified) jQuery slider that features 14 transitions some of which are hardware accelerated in selected browsers. It is fully responsive and also has responsive thumbnail views. It can display HTML captions and is supported by most browsers including IE7 upwards.

Holder.js – Holder renders image placeholders entirely on the client side. It works both online and offline, and offers a chainable API to style and create placeholders with ease.

iOS.js – When developing webapplications or sites, there are a few things that’ll work differently on an iOS device than on a regular browser.
iOS.js contains a set of features that can improve the way your webapp looks and feels.

The Widow Tamer – A Javascript to automatically fix typographic widows on your web pages. It is designed to work with responsive sites, fixing widows as it finds them on resize or orientation change.

Handsontable – Handsontable is a minimalistic approach to Excel-like table editor in HTML & jQuery. Now with column and row headers!

RefineSlide – A simple jQuery plugin for displaying responsive, image-based content (with shiny animations). CSS transitions are used wherever possible, which currently makes for varied performance across browsers and platforms. At the moment it’s probably best to check it ..

Magnifying glass for image zoom using Jquery and CSS3 – Learn to make a realistic magnifying glass using Jquery and CSS3. Hover above the image to see the action. The code uses CSS3 box-shadow and border-radius properties to create the magnifying glass.

SeuratJS – A JavaScript library that extends Raphaël and allows for the creation of vivid animations and pixelated artwork using minimal code. It does this by extacting color data from an image of your choice and rebuilding the original with filled graphical primitives in SVG.


WordPress Related

Wordpress related Articles

WPapptouch – Create awesome mobile web applications who feel like native apps of your WordPress website. WPapptouch is the faster and prettiest WordPress mobile theme. It works by detecting devices like iPhones, iPods, Android & and more mobile platform.

QueryPosts – “What if there was better WordPress code reference. More comprehensive and up-to-date than Codex. More friendly and convenient than raw code and cross-references.”

Designer’s Guide to WordPress – I have been designing websites for nearly 15 years. My background is in design, not programming so my focus has always been the visual interface and usability. Currently I design exclusively in WordPress because ..

Up and Running With Custom Post Types Part 2 – In this post, we’ll cover creating Taxonomies for your custom post types, creating custom fields and meta boxes, saving your data and using it in your WordPress themes.

How to Protect WordPress from Malware Infections –  In this article we’re going to go over the basic steps of how to protect your WordPress website from malware, virus infections, and malicious code and scripts.

What’s New in WordPress 3.4 – With WordPress 3.4 set to arrive this week, it’s a great time to familiarize ourselves with the new features and additions. The new version of WordPress brings many improvements, including custom backgrounds and headers, a live theme-customizer,  ..

Dropbox Photo Sideloader – Adds a new tab to the Media Uploader, which allows you to pull image files from your Dropbox into WordPress.

Using the Power of the .htaccess File to Improve WordPress SEO – mere optimization of the website’s content is not the only way to get new visitors through search results. Increasingly, SEO professionals are relying on the little-known .htaccess file to ..

Using Conditional Tags to Supercharge Your Blog – Conditional Tags are one of the many great structures that WordPress has to help us develop for WordPress easier. In this article, we’re going to get to know some of them and use them in example functions like removing ..

How to Investigate and Remove Malware From a Hacked WordPress – In this tutorial we are going to learn how to investigate, detect and remove a malware without harming your Data and Files.

Quick Fixes for Common WordPress Problems – This post is intended to provide some quick answers to common WordPress problems that wouldn’t otherwise merit a full post or tutorial. I’ll be keeping this updated with new information, so if you have a quick problem, or ..

Create A Responsive, Mobile-First WordPress Theme – WordPress is an extremely popular, flexible, easy to use and open-source blogging and CMS system. And the need is growing for more beautifully designed and coded WordPress themes that work well across all of these devices.

Adding Custom Navigation Menus in WordPress Themes – Navigation Menu was introduced in WordPress Version 3.0 and in a new WordPress Version 3.4  you can  utilize these great features to customise the navigation menus into any theme. All you have to add few code segments in your theme.

Build a Slideshow Plugin for WordPress – By following this tutorial, it is implied that you are running an Apache and MySQL server locally or remotely in order to be able to install WordPress. Also, that you have a 3.1+ version of WordPress installed that you have access ..

12 Must-Do Tasks for the New WordPress Site Owner– This post shares the top 12 power sources you can plug into with your brand-new WordPress site.  It may seem like a lot to do, but they’re listed in order of importance. Work on the top of the list first.

Get to grips with shortcodes in WordPress – So why use shortcodes? Well, for a start they are a super short way to add all kinds of content in a shorthand way, it saves repeating blocks of code and running into issues and errors.

Custom Functionality Plugin for WordPress – Pros and Cons – This article introduces the custom functionality plugin as a modular and portable alternative to code’s copy/pasting into the theme’s functions.php file. There are advantages and disadvantages of such an approach, which are discussed from time to time in the WordPress community.


.. and don’t forget these!

Powerful New CSS- and JavaScript Techniques – With CSS3, some of the older techniques now have become obsolete, others have established themselves as standards, and many techniques are still in the “crazy experimentation” stage.

Typography: Common Myths and Mistakes – As graphic or web designers we work with typography all the time, and even if we don’t all call ourselves typographers, setting type in one form or another is unavoidable. It’s a very large part of our job.

What you should know when coding HTML emails – HTML emails continue to be a popular way of marketing. While social media is definitely a force to be reckoned with, emails are still considered the official way of communicating with customers and clients.

Leading: space is just as important as words – Selecting fonts, sizes and colors can be a big part of how you outline your site. Just as important as the letterforms themselves, is the spacing around those letters and the leading used in blocks of text.

Fluid Type – Embracing the fluid & flexible aspect of RWD was an easy decision, but I’ve been less sure-footed when it comes to balancing that with setting type on the web. From a purely typographic perspective, one could argue that an adaptive approach is ideal.

Moral Design – All good design is moral design, and only moral design can ever be good. Morality is seldom discussed in design circles, but it is, however, inseparable from the ultimate goals of any design, and thus any discussion that aims to evaluate a particular design or tries to derive principles for good design ..


If you want to stay up-to-date with the latest articles and resources from the design community, you should follow Inspired Magazine on Twitter.


Jan Rajtoral AKA Gonzo the Great is the Founder of and Designer at gonzodesign, providing design services across the full spectrum of Brand Identity, Graphic Design, Print and Advertising Design & Website Design.