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 gonzoblog.nl, 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

Tweet Heat   The hottest Tweets of the Month [Jan. 2013]

Details about “float” property - Proper use of CSS float property may turn out a daunting task even for an experienced coder. This article contains the examples of applying of property float, as well as some mistakes with illustrative examples.

All you need to know about CSS Transitions - In this post I’m going to delve into some of the more complicated parts of CSS transitions, from chaining and events to hardware acceleration and animation functions.

A Look Into HTML5 Basic Elements: <Header>, <Nav> & <Footer> - HTML5 development is not finish yet. But, there a few new elements in HTML5 that can be used today, elements that are already supported in current and old browsers (with shim) such as header, nav, and footer.

Improving Your Work-Flow – Separate Your Mark-Up From Your Logic! - I urge you to try using this technique when building plugins in the future. Hopefully you’ll find ‘separation of concerns’ to be of benefit to you.

Just Say NO to Wireframing - This word is commonly misused and the cause of considerable frustration for those of us that design experiences. Yup, we Design Experiences. The problem is that in many organizations Wireframinghas become synonymous with Design.

Introduction to gradients – The problem with gradients is that they are a syntactic nightmare. This page gives some more information, as well as workarounds. The gradient spec writers and browser makers changed their mind not once but twice.

The Pursuit of Tappiness : Six Easy Ways to Make Your Website Tablet-Friendly - Now is the time to prioritize your website’s design considerations for tablet functionality. Ignoring this could negatively impact your website’s overall conversion rate, return visits, sales, and more.

Guide to: Using Transparency (Opacity) In Web Design - In this post, we are going to look into how this particular effect is evolving throughout the years in web space, that includes going back a couple of years to see how it’s done prior to the emergence of CSS3.

Write less, do more: CSS Style – When you consider the amount of time and effort wasted writing inefficient CSS for content that falls outside the scope of traditional front end frameworks, I was firm in my belief that the time spent up-front would quickly be recouped with each subsequent project.

Get Started With CSS3 Transitions Today - In this post, we’ll look at the basic syntax, step through some examples, and finally take a brief look at current browser support.

Using Microdata to Markup Structured Data in Your Web Pages - In this blog post you are going to learn how to use the new microdata attributes as well as taking a look at some popular schemas from Schema.org.

A Look Into: HTML5 Shiv And Polyfills -  if we give styles to HTML5 elements then view them in a modern browser, we should see the result of the styles. However, this is not the case when we view them in Internet Explorer 8 and earlier, somehow the styles do not seem to apply.

SVG Styling - SVG is the standard scalable vector based graphics format for the web and it’s supported by all modern web browsers. SVG’s importance has grown with the increasing number of high resolution devices.

How To Use CSS3 Multiple Backgrounds - Adding background image with CSS is nothing new, but we were limited to only add one image in one declaration block. Now, CSS3 is raising the stakes by proiding you the option of adding multiple backgrounds.

11 Useful CSS Code Snippets for Responsive Web Design – Mobile responsive web designs have become extremely popular in the last 2 years, and with a very good reason. As such it’s common to see more code snippets published on the blogosphere, Github repositories, Codepen docs and more.

When Infinite Scroll Doesn’t Work - An infinite scroll works well for something like Twitter where you’re linearly consuming an endlessly flowing stream of data without looking for anything in particular, but for search results ..

Responsive Web Design – Tips To Make It Responsive In True Sense - Little do we realize that the mobile version suffers when the size of the page or the number of elements increase. Now to deal with such situations you need to always prioritize performance over features.

CSS Techniques for Retina Displays - As web designers we have to use the above CSS techniques to make websites ready for high resolution display screens.

Using Unprefixed CSS3 Gradients in Modern Browsers – I’ll take you through some differences between the old and new syntax and behavior and provides some insight into the change. Hopefully it will save you some time as you support many browsers.

All About Cubic Bezier Curves & Transitions – We looked at the basics of CSS transitions, including how to use easing to control how your animation flows. In this post, I want to look deeper at a very powerful easing feature; cubic bezier curves.

How Does Auto Positioning Work In CSS? – As a quick review when you use css positioning on an element it’s position is relative to some containing block. That containing block will be the nearest ancestor element that also has positioning (other than static) applied.

Understanding the CSS Clip Property – The clip property aims at defining what portion of an element you want to show. You may have heard of this stuff as “crop”. There are a bunch of JavaScript plugins out there to crop an element, but actually you can do pretty much the same thing with the CSS clip property.

Advanced CSS3 2D and 3D Transform Techniques – Gone are the days of using Flash and GIF images for creating animated graphics. It is time to show off some of the best CSS3 capabilities. CSS3 transform has been there in the web for quite some time.

Improving Usability And User Experience Through Consistent Web Design – This article is about how a consistent design can play a vital role in improving website usability and offer a pleasant user experience.

17 Important Tips For Designing Responsive Websites – Responsive web design plays an important role to attract many customers. The main idea here is to create a web design that will easily fit into the size and shape of the chosen screen.

How to Use Icon Fonts in Your Website – Creating icons with icon fonts gives designers the ability to manipulate the icons with CSS. The days of creating two different icon images for rollovers or effects are long gone. Now we can easily change color, size, and even animate the icons just as we would most other HTML elements.

You Don’t Need the DOM Ready Event – It usually takes a long time for the DOM ready event to fire. During this time, many parts of a webpage are inactive as they wait for Javascript to kick in and initialize them. This delay is significant and makes a rich web application become available slower. Creates a bad user experience, doesn’t adhere to any design pattern and is, really, not needed…

The Importance Of HTML5 Sectioning Elements – Whatever you call them — blocks, boxes, areas, regions — we’ve been dividing our Web pages into visible sections for well over a decade. The problem is, we’ve never had the right tools to do so. While our interfaces look all the world like grids, the underlying structure has been cobbled together from numbered headings and unsemantic helper elements

The pro’s guide to CSS layouts – This article is about those new CSS layout methods. About properties that are well implemented and that you can use now; properties that are beginning to appear in experimental builds; properties that are merely proposed, highly subject to change, and may never appear at all.

Front-end performance for web designers and front-end developers – It’s hard, if not impossible, to deny that performance is by far one of the most critical aspects of any decent web project, be it a small portfolio site, a mobile-first web app, right through to a full-scale ecommerce project.

Can I Still Use Px? – Moving from static to flexible layouts involves a move from absolute to relative measurements. That generally means giving up px in favor of ems for vertical measurements and % for horizontal measurements.

UI Design Guidelines for Responsive Design – With various screen sizes coming out each day, and even the big players like Apple switching things up with the new iPad mini, we need to evolve the way we think about design and the user experience as well.

Retina Ready Images and Responsive Web Design – With that said, let me explain to you why Retina ready images and Responsive Web Design go hand in hand and how to create such images for Responsive Web Design.

The New Multi-Screen World – This multi-screen behavior is quickly becoming the norm, and understanding it has become an imperative for businesses. Here are a few insights from Google’s latest research study.

Understand the Favicon – The classic favicon.ico is a 16×16 ICO file, often served in either 16-color or 24bit alpha-transparency format. More recently, favicons have been served as 32×32, which is appropriately scaled down in all major and popular-legacy browsers.

 

Tutorials

Tweet Heat   The hottest Tweets of the Month [Jan. 2013]

Coding a Minimalist Portfolio Layout with Dynamically Sorted Projects - In this tutorial I want to demonstrate how we can build a dynamic filtered portfolio list using jQuery. To speed up the development process we can use a jQuery plugin Quicksand to help with the sorting animations

How to Create a Simple Multi-Item Slider - A tutorial on how to create a simple category slider with a minimal design using CSS animations and jQuery. The idea is to slide the items sequentially depending on the slide direction.

Beautiful Login Form using HTML, CSS3 and JavaScript - Firstly, we will add our stylesheet and and add a simple JavaScript for sliding out icons when we focus on input for entering details.

3D Book Showcase - Today we want to share an experimental book showcase concept with you. The idea is to make books look more realistic by using 3D transforms and apply some fun effects to them, like rotating, flipping and opening.

Perform a Split Reveal With CSS - One limitation that we run into though is that you can’t really slice an image into multiple parts. For instance, if you wanted to cut a photo in half and animate the separation, you couldn’t really do it with pure CSS.

Build a basic responsive site with CSS - Responsive design is much misunderstood. Jason Michael lays to rest some myths, and then walks us through building a simple responsive website.

3D Image Gallery Room – Today we want to share another 3D experiment with you: a gallery room in 3D. The idea is to create a realistic environment for an image exposition using CSS 3D transforms.

“Infinite” Scroll to Load More Content Pagination with jQuery – Pagination with numbers is, in many ways, counter intuitive and time consuming for the user. They have to stop, click on a number, wait for the page to load, and then continue their search.

Code a Spinning Circular Menu With CSS – Building a circular navigation menu that spins to different points as the user hovers over an anchor. Along the way we’ll have to overcome several obstacles like how to structure our HTML to be conducive to a remote hover and how to position all of the elements just right so that everything works.

Putting CSS Clip to Work: Expanding Overlay Effect – We want to show how to leverage the CSS clip property to make a smooth transition when clicking on a box element. The idea is to show some kind of overlay as if it’s actually underneath the respective element.

Theming jQuery UI Accordion – In this post we are going to create something real and functional, and we are going to make use of the structural selector, box-sizing and CSS3 gradients from our previous lessons to create a custom theme for jQuery UI Accordion and sharpen our CSS skills.

How to Create a Metro Style Accordion – We will be learning how to code a Metro Style Accordion menu in just a few steps. This menu uses jQuery and jQueryUI, it can be done in a few other ways but I will show you the way I do it, it’s just something I feel comfortable with.

:only-child and Breadcrumb Separators – This comes in super handy for breadcrumbs. Often breadcrumbs have a visual separator between the links. Sometimes this is between all list items except the last one.

Create a Retro Navigation Menu with CSS3 – In this you’ll learn how to create a vintage-looking navigation menu using pure CSS3. I hope you’ll enjoy this tutorial and you’ll learn some new techniques.

 

Tools (web applications, bookmarklets, frameworks etc.)

Tweet Heat   The hottest Tweets of the Month [Jan. 2013]

Vagrant – Development environments made easy.Create and configure lightweight, reproducible, and portable development environments.

Type Zebra – A local font explorer. It lets you test your locally installed typefaces in a web browser. Type Zebra is for typeface designers, web designers and other creatives who care about how their typefaces appear in web browsers.

Antwort – Responsive layouts for email that both fits and adapt to client widths. Don’t underwhelm desktop users with single column layouts that work for mobile. Antwort offers columns on desktop that automatically become rows on mobile.

Mockup Designer – A simple, web-based app for creating mockups and wireframes. It uses your computer’s own local storage for the backend.

Unit Grid System - An Unitless, Fluid, Elastic, Semantic, Responsive, Scalable, Debuggable, Declarative, Simple to use Grid System! And… HTML5 and CSS3 Ready!

Junior – A front-end framework for building HTML5 mobile apps with a native look and feel.

Bedrock – A responsive, mobile-first 18 column grid that has been designed to easily extend your current grid framework with its mobile classes, in the same way that the Foldy utility does for the 960.gs.

Gridlover – A tool to establish a type system with modular scale and vertical rhythm to build upon. Gridlover keeps sizing type tidy and logical. Font sizes are calculated by stepping up the font size by the scale factor. Elements in Gridlover are always kept aligned to a baseline grid.

Schematic Ipsum – A simple service that generates fake JSON data in accordance with a JSON Schema. By making requests to a simple API, you can generate rich structured data with appropriately typed content, as opposed to your average plain text lorem ipsum.

Centurion – A responsive web framework that was built using SASS and CSS3 media queries. It uses semantic HTML5, and even makes it easy to build quick prototypes.

InK – An interface kit for quick development of web interfaces, simple to use and expand on. It uses a combination of HTML, CSS and JavaScript to offer modern solutions for building layouts, display common interface elements and implement interactive features that are content-centric and user friendly.

Puma.io – A Modern, Concurrent Web Server for Ruby. Unlike other Ruby Webservers, Puma was built for speed and parallelism. Puma is a small library that provides a very fast and concurrent HTTP 1.1 server for Ruby web applications

Profound Grid – A responsive grid system for creating both fixed and fluid layouts, built with SCSS. You can add or remove columns as needed, change column and gutter widths, and much more..

Responsive Boilerplate – A lightweight (only 2kb) base that makes use of CSS3, for bringing responsive websites to life. The boilerplate has a single container + a 12-column grid and supports any content with images, video or fluid media with major breakpoints.

Curator – A fast way to create great minimalist presentations for your designs or illustrations. They’re emailed to you in PDF format so you can easily forward to your clients.

Fakeimg.pl – A little tool that generates images with an URL. Choose the size, the colors, even the text. It’s free and open-source. You just have to put your image size after our URL.

Helium – A frontend responsive web framework for rapid prototyping and production-ready development using HTML5 and CSS3. In many ways it is similar to both Twitter Bootstrap and ZURB Foundation – in fact, it uses bits of their code.

Mueller – A modular grid system for responsive/adaptive and non–responsive layouts, based on Compass. You have full control over column width, gutter width, baseline grid and media–queries.

xyCSS – A simplistic and lightweight CSS framework (with a single CSS file) for building responsive and liquid layouts. It includes styles for the structure + typography and focuses on clean, semantic markup.

Legit – A complementary command-line interface for Git, optimized for workflow simplicity. It is heavily inspired by GitHub for Mac.

CSS triangle generator – An online generator for creating triangles in CSS, copy/paste the CSS outcome into your own style sheet.

DocBlockr – A Sublime Text 2 package which makes writing documentation a breeze. DocBlockr supports Javascript, PHP, ActionScript, CoffeeScript, Java, Objective C, C and C++.

Selector* – Great for sites with mostly static content. Just connect Selector* to your FTP and it will become instantly editable, in style.

modern.IE – Testing for Internet Explorer just got a little easier

CSS Trashman – A tool that will automatically refactor your CSS and generate a new stylesheet for your site. It works by examining your site’s live DOM in the browser and reverse engineering a new, more elegant definition that captures styles down to the last pixel.

 

jQuery Plugins, Javascript, APIs, etc.

Tweet Heat   The hottest Tweets of the Month [Jan. 2013]

PageSlide – A jQuery plugin which slides a webpage over to reveal an additional interaction pane. Clicking on a button or link slides the page over to reveal a hidden pane, one that usually contains secondary navigation, a form, or additional information.

Apiary.io – A REST API tool that makes it easy to create documentation and other tools for your users to use your API. It even includes tools to get the community to create your documentation for you on GitHub.

Maskew – A JavaScript library for skewing the shapes of elements. It’s mobile-friendly, has no dependencies, and is less than 5k.

Top Drawer – A smooth dropdown menu for responsive web design. It is designed to demonstrate smoother reveal menus in small contexts using CSS3 rather than animating with JavaScript.

Elevate Zoom – An image zooming jQuery plugin. It’s particularly useful to display large version of product image, and this tool has been a famous solution in e-commerce websites. It has different mode, such as tinted, gallery & lightbox, inner-zoom and lens zoom.

Parsley.js – A lightweight (12k minified) forms validation JavaScript library with a difference. Instead of validating the forms with JS it uses data attributes to achieve the same effect. It works with both jQuery and Zepto and it is very easy to configure, allowing you to override almost every Parsley default behavior to fit your exact needs.

Infinite-Social-Wall – An infinite social stream based on RSS feeds with a MySQL backend. It currently supports the following social networks: Google Plus, GitHub, Pinterest, Twitter, Stackoverflow, Reddit and Instagram.

Selectik – A cross-browser and completely customizable alternative to the standard select form element all neatly wrapped up in an easy-to-use jQuery plugin.

Opentip – A pretty cool JavaScript tooltips framework that can work with jQuery, Prototype or standalone. It creates the tooltips with HTML5 canvas so that any creative designs are possible and they are rendered almost equally in all browsers.

detectMQ.js – A JavaScript plugin that detects if a Media Query is currently being used. DetectMQ is based on the post and the ideas on Jeremy Keith’s site to make the detection of currently used Media Query easier.

Tooltipster – A lightweight, flexible jQuery plugin enabling you to easily create semantic, modern tooltips enhanced with the power of CSS.

Analytics.js – A simple, clean wrapper for all of your web analytics services. Instead of littering your codebase with hooks for every analytics service you want to use, you instrument your website once and your data gets routed to any analytics service you want!

-prefix-free – Lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed.

css-animations.js -Create, Modify, and Remove CSS3 Keyframe Animations with javascript! This library uses the CSS DOM API to access CSS3 keyframe animations, enabling you to do anything you want with them from javascript.

Lazy Line Painter – A pretty original jQuery plugin for preparing and presenting SVG path animations using  jQuery. It works for any SVG file (any design can be exported with Illustrator in seconds) and simply by drag ‘n’ dropping it to an online generator provided by the plugin.

 

WordPress Related

Tweet Heat   The hottest Tweets of the Month [Jan. 2013]

gist:4557917 – Slightly smarter filtering to remove hard-coded width and height attributes from *all* images in WordPress (post thumbnails, images inserted into posts, and gravatars). Handy for responsive designs. Add the code below to the functions.php file in your theme’s folder.

Generate WP -  Provides tools for developers to create advanced systems built on WordPress. Currently there are 6 working generators – Taxonomy Generator, Post Type Generator, Post Status Generator, Sidebar Generator, Navigation Menus Generator and Theme Support Generator.

Setting Up a Local WordPress Testing Environment - Having a local test version of your website is a must if you modify or update it often. So here’s an article that will try to explain how to set up a local testing environment for your WordPress powered website.

5 WordPress Mistakes Even Experts Can Miss - Keep in mind that even though I’m labeling these tips as “advanced,” there’s absolutely no reason why you can’t tackle them.

4 Ways to Make Your WordPress Site More Accessible - If you want your site to be accessible to individuals with disabilities, you’ll find that basic WordPress has much that is needed to facilitate the development of an accessible website, and it is not hard to take that further through the addition of plugins and good technique.

Creating Highly Customized Post Types with Custom Meta Boxes - Once you start unraveling powerful features like this that are built into WordPress, which can seem a little overwhelming at first, you realize just how powerful it can be.

Powering WordPress and website security, Most complete guide - Basically, security is not about perfectly super protected CMS or systems in general. Something like that might well be impractical, or impossible to find or maintain.

An Comprehensive Beginners Guide to the WordPress Loop - The WordPress Loop is the code used to display main content and excerpts of content on WordPress sites. Often times the loop is used to “loop” through and display a number of posts titles and excerpts like on a blog listing page.

Methods for Customizing the WordPress Login Form - In this article I would like to present just a couple of methods for re-designing your WordPress login form. The techniques may take a couple of hours developing new styles, but it can be finished within a day.

WordPress Blog Maintenance Checklist – If you’ve been blogging along for a couple of years without giving any thought to blog maintenance, then hang onto your hat and grab up your cleaning supplies.

Featured Posts Area in WordPress – In order to complete this featured posts area, you will need to use secondary and tertiary WordPress Loops, PHP and XHTML coding (with some light CSS), and a small piece of jQuery code for optional animations and transition effects.

Customize External Links in your WordPress Posts – Hacks to edit the link styles for opening into new windows, or dynamically setting the title tooltips. I have put together this brief guide for editing custom settings with your anchor links through WP functionality.

32 Ways to Speed Up Your WordPress Site – Load time greatly effects how visitors interact with your website. Fast load times make your visitors happy, and slow load times frustrate users and cause them to leave. Duh. Everyone knows that

Understanding and using Post meta in WordPress – But as you start using WordPress for different types of site and start publishing different types of content using WordPress you might find the need to associate more content with the post.

The Top 6 WordPress SEO Mistakes & How to Correct Them – So what are the most common SEO mistakes for WordPress sites? I’ve used data from wp.io to help draw up a list of the most common mistakes found on WordPress sites.

Easy Steps for Hardening WordPress Security – First of all, make sure that any and all PCs and web servers you use are kept properly secure. Make sure you’re running the most recent release of your favorite web browser, and make sure that it’s set to automatically patch.

 

.. and don’t forget these!

.htaccess – High performance drop-in .htaccess file for your site

Top 50 Free and High-Quality Fonts of 2012 – These free fonts are designed to be well suited for web as well for print, in particular for the use in headlines, logo and flyer designs. I strongly believe that type can set the mood of every design and can make your message more personal.

Design is not veneer - Now, let me tell you what design is not: it is not a silver sixpence. And it’s not something you add to your site in half an hour. There are no ‘quick design fixes’. Design is not synonymous with aesthetics, although aesthetics are a component of design.

10 Useful and Free Tools to Search and Identify Fonts – I always want to know what kinda font is being used when I see a lovely example on paper or on screen. You want to use that font, but how do you go about finding out how that font is called? Sounds familiar?

The Flat Sink – Remove all affordances, and you make it harder for the user to know where to click. Put everything on the same plane, and you make it harder to focus on a specific section of the page.

The Post-PSD Era – Throughout my career, I’ve watched immensely talented designers waste a shitload of time creating fully fleshed-out comps of what a website could look like. It’s an increasingly-pathetic process that makes less and less sense in this multi-device age.

Sketching: The Most Underutilized Design Tool? – I would class sketching as a tool, just as I would with Photoshop, Fireworks or any other app I use to help me create the finished product. For me, Sketching is an essential part of the design workflow that would make up a majority of projects.

 - § -

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.