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

Categories Articles, Twitter, Web Design, Wordpress

This is a guest post by Jan Rajtoral AKA Gonzo the Great, founder of gonzodesign, who provides design services across the full spectrum of Brand Identity, Graphic Design, Print and Advertising Design & Website Design.

In this new series of posts we’re going to take a look at what has been published last month in the Blogosphere. We hand-picked the best stuff including resources, tutorials, scripts/snippets, WordPress related posts and a lot more. All these design-related links have been mentioned on Twitter in the last month, and collated 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 as a (web) designer or developer.

HTML, CSS, PhP, Coding & Resources

HTML5 Please – Look up HTML5, CSS3, etc features, know if they are ready for use, and if so find out how you should use them – with polyfills, fallbacks or as they are. Use the new and shiny responsibly.

When can I use… Support tables for HTML5, CSS3, etc – Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers.

PHP script to find malicious code on a hacked server – When hackers get into a server, they often modify files to inject malicious code, install PHP backdoor scripts, or modify .htaccess to redirect requests to another site.

Filament Group’s Open Source Code Repositories – This page will serve as a centralized list of all projects, which we’ll keep updated as we develop new widgets and techniques. Look below for links to downloadable code, live demos, and articles explaining our thought process

Javascript Best Practices – a list of best practices and preferred ways of developing javascript code, based on opinions and experience from many developers in the javascript community. Since this is a list of recommendations rather than a list of absolute rules.

The State Of HTML5 Video – HTML5 has entered the online video market, which is both exciting and challenging for developers in the industry. Our State of HTML5 Video Report is a place for us to share with other developers/users in the industry just what HTML5 can and cannot support.

The Lowdown on :Before and :After in CSS – What is a pseudo-element and how does it differ from a pseud-class? Why do pseudo-elements sometimes have one colon and sometimes have two? How are :before and :after implemented in CSS?

Using webfonts to insert characters or symbols in a website – In this article I am not gonna talk about the greatness of webfonts in general—the opportunity to pick any type style we want for our website—or the possibility to use sets of vector pictograms instead of bitmap images.

Responsive Data Table Roundup – The idea of the original was to abandon the grid layout of the table and make each cell it’s own line. Each of those lines is labeled with a pseudo element. This creates a much taller table, requiring more vertical scrolling, but does not require horizontal scrolling.

Design • Curate – Design Curate is a collection of free and commercial resources for designers. All our free resources are licensed under a Creative Commons Attribution license.



Filter Functionality with CSS3 – Using the general sibling combinator and the :checked pseudo-class, we can toggle states of other elements by checking a checkbox or a radio button. In this tutorial we will be exploring those CSS3 properties by creating a experimental portfolio filter that will toggle the states of items of a specific type.

(Better) Tabs with Round Out Borders – A good-looking tab control usually has one feature that I’ve always found impossible to reproduce without images: borders that bend to the outside at the bottom of each tab. In this article I would like to show how you can use the CSS :before and:after pseudo elements to create this effect without using images.

Textarea Auto Resize – On a current project, I was trying to find a way to auto-resize a textarea according to some content that would be loaded in dynamically via Ajax. I didn’t know the height of the content and the textarea element doesn’t resize naturally like other HTML elements, so I needed to update the height of the element with JavaScript each time the content changed.

CSS Buttons with Pseudo-Elements – I’ve been experimenting with the power of CSS pseudo-elements, specially when it comes to mixing them with buttons and that way recreating some great effects that were only possible to do with sprites, in the past. In this tutorial, I’ll show you how to create buttons with a twist, using just one anchor tag per button and the great power of CSS.

git – the simple guide – just a simple guide for getting started with git. no deep shit ;)


Tools (web applications, bookmarklets, frameworks etc.)

3×4 Grid Builder – Drag and drop. View the code. Grid Builder enables you to easily build an HTML grid with a simple drag and drop interface.

deCSS3 – A bookmarklet for testing your graceful degradation. Use this bookmarklet to get a whiff of what your site will look like on older browsers that don’t support CSS3 (Currently supports: Chrome, Safari).

Initializr – With Great Templates Comes Great Responsivity! (Responsive Template, boilerplate code of a responsive layout)

Fbootstrapp – Fbootstrapp is a toolkit designed to kickstart development of facebook iframe apps in both relevant sizes. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more, styled in the typical facebook look and feel.

dabblet– an interactive playground for quickly testing snippets of CSS and HTML code. It uses -prefix-free, so that you won’t have to add any prefixes in your CSS code. You can save your work in Github gists, embed it on websites and share it with others.

CSSrefresh – CSSrefresh is a small, unobstructive javascript file that monitors the CSS-files included in your webpage. As soon as you save a CSS-file, the changes are directly implemented, without having to refresh your browser.

w3clove – Site-wide markup validation. There’s no need to manually submit all your URLs. Just give us the URL of your home page and we’ll scrape it to get its internal links.

WebINK’s free plugin – Server based Font management, use real web fonts in Photoshop for your web designs. Design with Google and WebINK web fonts.

Bootstrap Generator – Kick-start your Twitter Bootstrap project the way you want. Simply alter some options and click “Generate” to get your compiled Bootstrap CSS file.

Gridpak – an interactive web application for generating responsive grid layouts very quickly. Once you have setup the layout, a custom download is ready which includes a CSS, LESS, SCSS file, etc.

hextone – A great tool to convert HEX color codes to RGB


jQuery Plugins, Javascript, etc.

impress.js – It’s a presentation tool inspired by the idea behind and based on the power of CSS3 transforms and transitions in modern browsers.

Scrollorama – The jQuery plugin for doing cool scrolly stuff (any numeric CSS property). Design and build your site, dividing your content into blocks. Embed scrollorama.js after jQuery and initialize the plugin, passing the blocks class selector as a parameter.

Sugar – Sugar is a Javascript library that extends native objects with helpful methods. It is designed to be intuitive, unobtrusive, and let you do more with less code.

Lightbox_me – Lightbox_me is an essential tool for the jQuery developer’s toolbox. Feed it a DOM element wrapped in a jQuery object and it will lightbox it for you, no muss no fuss.

slabText – a jQuery plugin for producing big, bold & responsive headlines. Put simply, the script splits headlines into rows before resizing each row to fill the available horizontal space.

PxLoader – A Javascript library that helps you download images, sound files or anything else you need before you take a specific action on your site (like showing a user interface or starting a game). You can use it to create a preloader for HTML5 games and websites.

ResponsiveSlides.js – ResponsiveSlides.js is a tiny jQuery plugin that creates a responsive slideshow using images inside a single container. It work with wide range of browsers including all IE versions from IE6 and up.

CraftMap – jQuery plugin that converts a simple image into a functional map. Like Google Maps, you can place your own marker icons and add location information to specific markers with a draggable image interface.

Popcorn.js – An HTML5 media framework written in JavaScript for filmmakers, web developers, and anyone who wants to create time-based interactive media on the web. Popcorn.js is part of Mozilla’s Popcorn project.

TextExt Plugin for jQuery – TextExt’s modular design allows you easily turn a standard HTML text input into a wide range of modern, tailored to your needs input field without bloating your source code and slowing down your site with the code that you aren’t using.

Arctext.js – The main idea behind the Arctext plugin is to rotate letters with CSS3 transforms in order to place them along a curved path. The curve is always a segment of a circle (hence arc) for which the radius can be specified.

Sharrre (Social Sharing jQuery Plugin) – All sharing buttons are different, with Sharrre you can create uniform buttons to integrate with your designs. With Sharrre, the API buttons are called on demand and once, regardless of how many buttons you have.

Font.js: A Powerful Font Toolkit for JavaScript – a little font toolkit for your JavaScript that is kind of akin to the built-in Image object but for Fonts.  It gives you font loading events using a technique perfected in Mozilla’s pdf.js project, metrics information, and a better version of the canvas element’s measureText method with additional information such as height, bounding box, and leading.


WordPress Related

Weever app for WordPress – a free new HTML5 tool to build a mobile app for your WordPress site.

slYder – Lightweight WordPress Slider – slYder is an extremely lightweight wordpress slider, it allows you to add an extremely lightweight wordpress content slider anywhere in your theme via template tag or wordpress shortcode.

How to Customize the WordPress 3.3 Toolbar – You can make the WordPress interface easier for clients by removing unnecessary menus, widgets and meta boxes. However, in WordPress 3.3, the admin and header bars have been merged to create a single toolbar.

Yoast’s WordPress SEO vs All in One SEO Pack – There are currently two very popular WordPress plugins to help you strengthen your site’s search engine friendliness. Yoast’s WordPress SEO Plugin and the Grand old Daddy of SEO plugins, All in One SEO Pack.

How To Create Custom Taxonomies In WordPress – The following release of 3.1 included many features to enhance support of custom taxonomies. Better import and export handling, advanced queries with tax_query, hierarchical support, body classes and a bunch of wonderful functions to play with were all part of the package.

The WordPress Gallery Shortcode: A Comprehensive Overview – If you haven’t had the chance to use the WordPress Gallery Shortcode in the past, this is going to be a great starting out point for you. For others who have used it, we are going to be covering some features of the shortcode that you might not have considered yet.

The Ultimate WordPress Theme Development Glossary – This post is an attempt to provide a glossary for the common terms used in WordPress Themes. This glossary will help new WordPress users understand the features offered by a theme and they can make informed ..

Prevent Password Reset WordPress Plugin – It adds a checkbox to the “Personal Options” section of each user’s profile page in the WordPress admin, once this option is selected for a user, their password cannot be reset via the “lost password” form.

The Ultimate Quickstart Guide to Speeding Up Your WordPress Site – In this tutorial we will cover all aspects of W3 caching, ySlow, Google page speed, CSS sprites & htaccess rules, to achieve a high ySlow score like i have done on my blog.


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.

  • Lots of awesome resources here.


  • Hi Paul,

    Thanks for your comment, glad you liked it mate!
    Cheers & Ciao ..