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

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.

Is It Adaptive or Responsive Web Design? – There seems to be a lot of confusion in the industry among both us web folk and clients about the differences between adaptive and responsive web design. I’ve even seen someone go so far as to say they’re both the same thing. They’re not.

Pros and Cons of Using Grids in Web Design – Designers are increasingly learning that the approach that has traditionally been used in the worlds of graphic design and print publishing can deliver huge benefits when building websites.

Parallax Tools and Techniques – Using parallax to give your website some depth and added interest is great, but try to avoid too much of it or you may end up with a site that has too much going on.

Testing @font-face Support on Mobile and Tablet – A few attempts to document font-face support across desktop devices, including the article @font-face feature detection on Paul Irish’s blog, are often misleading and deprecated when it comes to the mobile world of pain.

PHPitfalls – The first thing you come across when starting out with PHP is probably the fact that it has an extremely bad reputation. You will hear lots of things, including “it doesn’t scale”, “it’s not a real language”, “it doesn’t have X so it ..

:hover is dead – With the proliferation of touch enabled devices, the :hover pseudoelement is dying. How many times have you tried to access a menu orsome form of navigation on a touch enabled device only to find that themega-menu is based on :hover events.

A Harder-Working Class – In the next handful of paragraphs, we will look at how these emerging practices – such as object-oriented CSS and SMACSS – are pushing the relevance of class

Using web fonts in email – If you’ve ever flirted with using web fonts in your email designs, it may be your lucky day. With the @import CSS at-rule, support for less-traditional typefaces is looking better than ever.

Placeholders and Overflow – Unfortunately in some circumstances the INPUT element’s placeholder text doesn’t fit within the length of the element, thus displaying an ugly “cut off.” To prevent this ugly display, you can use CSS placeholder styling and text-overflow: ellipsis!

CSS Click Events – An article about different experimental approaches of employing click events using CSS only. It summarizes and shows some clever hacks and smart tricks.

Which JavaScript Recipe Is Right For You? – Let’s start with some fundamental negatives. JavaScript has no good answer for some really basic features of modern programming languages: private variables and functions, packages and modules, standard localization mechanisms, ..

CSS Baseline: The Good, The Bad And The Ugly – Vertical rhythm is clearly an important part of Web design, yet on the subject of baseline, our community seems divided and there is no consensus as to how it fits in — if at all — with our growing and evolving toolkit for designing online.

Calc()ulating layouts & backgrounds with CSS – It’s pretty easy — the calc() function can be used anywhere lengths are required. This means it can be used in margin, padding, width, heights background-position, and a lot more.

How to Detect DOM Changes in CSS – Traditionally the two classical methods for detecting DOM changes are 1) using a timer, or 2) binding on the DOM mutation events. Both methods suck.

Vexing Viewports – Browser makers in turn agree to support those standards and set defaults appropriately, so we can hold up our end of the deal. This agreement has never been more important.

The Worst UI Pattern in Existence – Infinite scroll + footer. Scroll through page content to the footer. As you start reading the footer links, the site injects new content into the page and the footer gets pushed down below the fold.

The Pros & Cons of Responsive Web Design – However, now with Responsive Web Design, a page is constructed in a way that it automatically adapts to the device’s screen size. Although, there are many advantages to Responsive web design, there are few disadvantages as well.

Dive into Flexbox – Flexbox is a new layout mode in CSS3 that is designed for the more sophisticated needs of the modern web. This article will describe the newly-stablized Flexbox syntax in technical detail.

How To Deal With Vendor Prefixes – If you write CSS you almost surely need to be using vendor prefixes on some parts of the code you write in order to ensure the best browser support. So how do we author CSS so that we always are using the correct prefixes all the time?

Choose the right PHP framework – Frameworks provide a foundation where developers’ code can be neatly arranged. Documentation, common problems, solutions, tips and advice can be shared online in an open source fashion.

Creating Semantic 2-Column and 3-Column CSS Layouts – In this tutorial I want to look over a series of different CSS column layouts. We can see how to build websites using floats and direct positioning. There are new standards being written so frequently it can be difficult to gauge the best possible solution.

5 Use Cases for Icon Fonts – Icon fonts are great: You can CSS the crap out of them and they don’t mind, They look good on any display or resolution and There is only one HTTP request for any size set of icons. Let’s look at 5 typical uses cases for icon fonts.

Scrolling Performance – Scrolling doesn’t immediately seem like something you’d think about from a performance perspective. After all, your content is styled and all your assets are loading or loaded, so why all of a sudden might we care about what happens when you scroll?

A Responsive Off-Canvas Menu – We need to embrace the viewport and do more than stack content vertically; one very long scroll is no better UX than a zoomed out, fixed-width format.

Page Weight Matters – Many of us are fortunate to live in high bandwidth regions, but there are still large portions of the world that do not. By keeping your client side code small and lightweight, you can literally open your product up to new markets.

Tutorials

A Visual Database Gallery In Pure CSS – This effect is best suited to a portfolio of two dozen images or less. The goal is to filter the works by type to allow the visitor to view images in different categories, just as a true database would, only visually.

StackSlider: A Fun 3D Image Slider – An experimental image slider that flips through images in 3D. Two stacks resemble image piles where images will be lifted off from and rotated to the center for viewing.

Build an Adaptive CSS Modal Window – This tutorial is yet another fun CSS project that helps you build something that you may have thought was only possible with JavaScript. We’re going to create a modal window that can be shown and hidden with a click that’s powered by a CSS checkbox.

How to Create a Responsive CSS-only Slider – In this tutorial we’ll create a simple responsive home page with a header embellished with a carousel where photos slide from right to left. Our solution will not require javascript, we’ll make our slideshow using css3 animations

Make A Responsive CSS3 Image Slider – Web developers desire solutions that not only scale across viewport sizes, but perform well on mobile devices. The responsive solution detailed here is particularly well-suited to those goals, as it avoids JavaScript entirely, running purely in CSS3

Make a Jquery and CSS3 powered Lightbox Gallery – Learn to make a fully functional lightbox using Jquery with both mouse and keyboard based controls for navigating images. The thumbnails have cool hover effects with zoom icons added by CSS3 pseudo elements to save on repetitive HTML.

Fullscreen Pageflip Layout – A tutorial on how to create a fullscreen pageflip layout using BookBlock. The idea is to flip the content like book pages and access the pages via a sidebar menu that will slide out from the left.

Creating a 3D Button in CSS3 – Today I want to show you how to use some of the awesome new features in CSS3 to create an animated, three-dimensional button. To start off, we care about creating a fun experience that works to its ..

Sticky Captions Concept – A little trick on how to make captions of thumbnails or items “sticky” in order to stay visible in the window or viewport. The main idea is to see when a hovered element overflows the viewport and show the caption in the right place by changing its position from absolute to fixed.

Create a Flexible Folded Paper Effect With CSS3 – In this tutorial we’ll learn to create a flexible (responsive) folded paper effect using CSS3 features like background gradients and box-shadows, which can give a cool-looking background to the content area of your website.

Create Polaroid Image With CSS – In this tutorial we are going to display images in a polaroid style using just CSS. The links will need a title attribute as we will use this as the text for the image caption.

Create an Animated Share Menu With CSS – Today, we’re going to build a simple sharing menu that integrates an icon font as well as some animations. The final product is inspired by Disqus, but has a unique twist of its own.

How To Code a Vertical Accordion Nav Menu with jQuery – In this tutorial I will demonstrate how we can build a simple vertical navigation accordion menu using CSS3 and jQuery techniques. We can build custom styles and format the links to slide down & up on each click.

Slider Pagination Concept – An experimental slider pagination using the jQuery UI slider. The idea is to use a simple navigation concept that preserves layout and style while allowing content to stay easily accessible.

CSS Card Tricks – Know any good card tricks? Hopefully, after today, you will! We’re going to build some simple and attractive playing cards with pure CSS, then we’ll learn how to target and animate each card for some added fun.

MQFramework – A responsive CSS framework based on a 12 column grid, has been structured to suit different needs, be it from a new project to fitting into an existing project with very little changes to the code.

Proto.io – A new UI prototyping tool specifically tailored for mobile applications. The web based environment allows you to start off by creating a project for popular devices like iPhone, iPad, Android phones or tablets, as well as any device with a screen interface.

Extensionizr – A good start to create a Chrome extension and it is also open source. The tool has various options to choose like: the extension type, background page, content scripts, permissions to Chrome modules and more..

xander.io – 90/10 is simple and better than A/B. 90% of page requests go towards your best variant. 10% of your page requests go towards finding the next best variant.

Copybar.io – A simple but revolutionary feature. For any website, on any platform, you can edit your content directly on the page. You do not need to login to a backend. You do not need to toggle between your editor and your page.

HTML_CodeSniffer – A client-side script that checks HTML source code and detects violations of a defined coding standard. HTML_CodeSniffer is written entirely in JavaScript, does not require any server-side processing and can be extended by developers to enforce custom coding standards.

Site44 – Site44 turns Dropbox folders into websites. Edit your HTML locally, and your website will always be up-to-date. Creating a new website with our free plan takes less than a minute

GAS – A wrapper around the Google Analytics Tracking API from Google. It tries to add new functionality while keeping the same API. GAS is not an official Google library and GAS developers are not affiliated with Google.

wysihtml5 – An open source rich text editor based on HTML5 technology and the progressive-enhancement approach. It uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles.

Lorempixels – Placeholder Images for every case. Webdesign or Print. It’s simple and absolutely free! Just put the custom url in your code to get your FPO / dummy image.

Framote – Give us an initial URL and we’ll generate you a Framote.com short link which will embed yours. You’ll be able to change the embedded URL anytime.

Centurion – A CSS framework, built using SASS and CSS3 media queries, for creating (mostly prototype) layouts that behave good on all devices. It includes a 960px grid (that scales down to 320px), can handle image scaling and has a navigation with desktop and mobile versions.

HTML5 Bones – A template that goes back to basics and provides you with the bare minimum required to get going withHTML5. Inline comments explain how and when to use some of the most common HTML5 elements.

jQuery Plugins, Javascript, etc.

FooTable – A jQuery plugin that aims to make HTML tables on smaller devices look awesome – No matter how many columns of data you may have in them. FooTable transforms your HTML tables into expandable responsive tables.

extender – A library that helps in making APIs chainable. It does this by creating a function that accepts different values and returns an object with functions based on the type.

Vegas – An exciting jQuery plugin for creating fullscreen backgrounds for web pages. The plugin’s capability is not limited to displaying a single image but can also rotate a list of images automatically.

sigma.js – An open-source and lightweight JavaScript library for drawing graphs, using the HTML canvas element. It has been designed to display interactive static graphs exported from a graph visualization software.

php.js – An open source project that brings high-level PHP functions to low-level JavaScript platforms such as webbrowsers, AIR, V8 and rhino. If you want to perform high-level operations on these platforms, ..

FooTable – A jQuery plugin that aims to make HTML tables on smaller devices look awesome – No matter how many columns of data you may have in them. FooTable transforms your HTML tables into expandable responsive tables.

version.is – An API for getting the latest version of Open Source projects

Tweed – jQuery plugin for dysplaying a simple feed of recent tweets. Type of query that determines what kind of API request will be made. Three types of queries are supported

TypedJS ~ Save your JavaScript code by sanity checking it. Harness the power of type annotations and program specifications to make your code robust. It’s easy to get started.

Aware.js – A simple jQuery plugin that allows a site to customize and personalize the display of content based on a reader’s behavior without requiring login, authentication, or any server-side processing.

ABalytics.js – A pure javascript library allows you to do simple A/B testing working only on your client-side code. All data is registered as custom variables in your website Google Analytics profile, so you don’t need to configure anything server side.

jQuery.Shapeshift – Inspired heavily by the jQuery Masonry plugin, Shapeshift by Scott Elwood is a jQuery plugin that will dynamically arrange a collection of elements into a grid in their parent container (like on Pinterest).

WordPress Related

Glider – A one-template-file WordPress theme that uses jQuery’s .load() function to ping WordPress for single posts, then inline-loads the post in question – this results in the ability to read all the posts without any (apparent) page loads.

How to Create a Custom Options Page in WordPress – One thing that seems to define technology is that users like both ease of use and the ability to customize the appearance of everything they use. Custom preferences pages within the WordPress are the best way to combine these interests.

Discover WordPress Conditional Tags – They are simply great because thanks to these tags it’s very easy to create conditional statements. You can for example display content only for some users, or load scripts only if a page is using ..

The Ultimate Guide to WordPress Permalinks – One important consideration when building and setting up a new WordPress site is definitely your URL structure, better known in WordPress as the permalink structure.

Inserting Widgets With Shortcodes – The shortcode ability of WordPress is extremely underrated. It enables the end user to create intricate elements with a few keystrokes while also modularizing editing tasks.

How to Add Rotating Testimonials in WordPress – In this article, we will show you how you can create a rotating testimonials area in WordPress where testimonials fade in and out automatically. You can use this technique for other uses as well such as quotes, etc.

Pros and Cons of using WordPress Template Frameworks – In this article, we are going to understand what does it mean by WordPress template Framework and why did it come into existence. Later we will discuss about the Pros and Cons of WordPress Template Framework.

.. and don’t forget these!

One Div – An inspiring set and showcase of icons that are created with a single <div> element and with the help of creative CSS3 rules. There are 55+ icons, new ones are added from time-to-time and it is possible to click the source codes with a click or download them.

Colour Accessibility – Colour is very relative — not just in the way that it appears differently across different devices due to screen quality and colour management, but it can also be seen differently by different people — something we really need to be more mindful of when designing.

10 Free Online Books for Web designers – Today we have collected 10 free online books to add to your collection. From classics that you know to new presentations transformed in pdf files, we have 11 files for you.

Four Custom Icon Font Generators Compared – Icon fonts are all the rage right now. They make it so dang easy to embed vector graphics into a page that designers everywhere are turning to them as the primary way to handle icons.

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.