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

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.

– § –

You may also be interested in these articles:

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

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.

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.

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.

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 ..

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.

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.

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.

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.

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.

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.

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.)

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.

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 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.

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.

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.

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.

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.

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!

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.

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.

Share this:

Related

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.