Tweet Heat – the hottest tweets of the month [June 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

RWD Resources ~ The Ultimate Responsive Web Design Beginners Resource List. This post is a compilation of resources we found useful when developing and designing responsive websites.

CSS Shapes the future of the web – Once they are widely supported, CSS Shapes have the potential to herald a new era of web design, one in which designs aren’t restricted to the rectangular box model.

GoodUI.org – A Good User Interface has high conversion rates and is easy to use. In other words, it’s nice to both the business side as well as the people using it. Here is a running list of practical ideas to try out.

CSS3 Transitions 101: What are Transitions? – Transitions are the most-used type of CSS3 animation. Despite widespread adoption and a relatively simple syntax, there are several gotchas and options of which even the most knowledgeable developers are blissfully unaware!

Lifting the lid on PHP 5.5 – There’s been a new version of PHP released: PHP 5.5. This articles gives you a quick overview of the new features, why you might care, and what this means for those of us using older versions of PHP.

frontend-dev-bookmarks – A huge list of frontend development resources I collected over time. Pull requests are welcome. Website coming soon.

Native equivalents of jQuery functions – Obviously native methods are faster because jQuery has to deal with older browsers and host of other things. I completely agree. That’s why this post is not meant at all to be anti-jQuery.

How to design a responsive HTML email – Making responsive HTML emails isn’t the easiest thing in the world. But it can be done. Here are some helpful tips. Responsive email design is still a compromise.

What is a Box Model? – Every element on a page is in fact a box, whether or not it has a set width or height. I think that this is nothing shocking to you but it is something to keep in mind in order to understand what the box model is.

CSS Regions: New working draft – On May 28th 2013, we published a new W3C working draft for CSS Regions, one of the features proposed by the Adobe Web Platform team. Here are the most important changes you should be aware of.

UI Principles for Great Interaction Design – Today we are going over some different aspects than the ones you are used to: we will jump into user interface and principles for designing great interaction on your website.

Choosing A Responsive Image Solution – This article leads you through the basics of making responsive images and arms you with the information you’ll need to pick the best responsive image solution for your situation.

New technology – fullscreen mode – There are few notifications: when the full-screen mode is successfully enabled, the document receives a ‘mozfullscreenchange’ event. When the full-screen mode is canceled, the document receives the mozfullscreenchange event (again).

CSS Custom Filters – Today, I’m going to talk about something truly awesome (and new), and that is CSS Custom Filters. These allow us to morph and warp regular HTML elements into shapes that were impossible before.

Responsive Design Patterns – Designers should take advantage of design patterns like this, because more often than not, the problem they’re dealing with has already been solved by someone else. No need to reinvent the wheel if it’s already been built, tested, and perfected.

The Importance of Mobile Optimised Content – Say goodbye to nostalgic introductions and long winded descriptions, mobile users want the key facts at their fingertips the instant they load your site. Here are four aspects you might want to adjust to capture your mobile audience

Tutorials

Animated Books with CSS 3D Transforms – In this playground we’ll show you some creative, animated books with CSS 3D transforms and transitions. We’ll show you two types of book designs: hardcover and paperback.

Developing Google Chrome Extensions – the fact that you can build an extension for it using only HTML, CSS, and JavaScript. I always support such products, products that are open to the community and Chrome happens to be one of these products.

Justified and Vertically Centered Header Elements – A little journey into positioning header elements to be centered vertically and justified with the help of pseudo-elements. I just want to show you some simple CSS tricks that will do it right, in my opinion.

On Scroll Header Effects – The demo for the effects serves as inspiration only and we’ve used a technique that involves changing the state classes of the header which would of course be customized depending on which effect would like to be used.

How to create a simple parallax effect – It’s an appealing effect, and can be applied to as many layers as you like. In this article I’m going to introduce the basic principles by showing you how to build a simple two layer parallax effect.

Tools (web applications, bookmarklets, frameworks etc.)

UIKit – A lightweight and modular front-end framework for developing fast and powerful web interfaces. UIkit gives you a comprehensive collection of HTML, CSS, and JS components which is simple to use, easy to customize and extendable.

localtunnel – The easiest way to share localhost web servers to the rest of the world. The localtunnel server is provided as a free public service. However, you can also deploy your own localtunnel server on dotCloud or your own server.

Out of Words! – The responsive typography framework. The structure & layout are indented for being used inside Words app. This can be interesting to anyone who wants to see how newspaper layouts in HTML/CSS can look like.

Instabug – Instant bug reporting tool for mobile apps. Save your time. Get the most out of your users. Hear from them and build better apps!

Proty – A tool that allows you to make quick, interactive wireframes that can be fully customized for designers. It lets you show your clients how thingrashman ~

CSS Trashman – The trashman examines your site’s live DOM and reverse engineers a new, more elegant definition. Wipe your old CSS clean and download replacement styles for a harmonious new beginning.

ESLint – A tool for identifying and reporting on patterns found in ECMAScript/JavaScript code. In many ways, it is similar to JSLint and JSHint with a few exceptions.

Stylify Me – A tool that helps designers quickly gain an overview of the style guide of a site, including colours, fonts, sizing and spacing. This tool allows the designer to research sites efficiently without the need to inspect each element.

Effeckt.css – Ever notice how small flourishes and subtle transitions dramatically increases the value of the experience you enjoy with an app or site?

Furatto – A front-end framework, that uses Bootstrap and Foundation as a base, for developing websites quickly. The framework makes use of the popular flat UI trend and built with responsive layouts in mind.

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.

Fontastic – Create Your Icon Fonts. Keep the standard settings, or change the character and CSS mapping to make it easier to code. Download a packaged folder including all the fonts, the HTML & CSS code, and a reference page.

Freader – A small yet powerful RSS Feed Reader working with Node.js and Angular. Freader provides you with a simple page with all your feeds and the last item in them.

FROONT – Runs in your browser and allows you to see what you’re designing in the same way users will. Present comps online on all devices. Instead of giving static images to your developer, provide them with fully functional HTML and CSS code.

HTML Inspector – A code quality tool to help you and your team write better markup. It’s written in JavaScript and runs in the browser, so testing your HTML has never been easier.

gridism – A simple responsive CSS grid. Each .grid element is a horizontal row which can contain .unit elements of various widths. Width combinations are illustrated below.

Pure – A set of small, responsive CSS modules that you can use in every web project. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered.

CSSCSS – Analyzes your CSS files to see which rulesets have duplicate declarations. This makes your CSS lighter and easier to maintain.

SassMeister – A playground for Sass. Add some Sass and SassMeister will show you the rendered CSS. SassMeister supports both Sass and SCSS syntaxes, all output styles, and a growing number of Compass extensions and Sass libraries.

Litmus Scope – Create a clean, web-based version of any email, with desktop and mobile previews.It’s perfect for sharing, and it’s totally free.

jQuery Plugins, Javascript, APIs, etc.

Squishy – A jQuery plugin that automatically resizes text to exactly fit the container with no extra work on your part. This plugin only works for a single line!

dimple – An object-oriented API for business analytics. The aim of dimple is to open up the power and flexibility of d3 to analysts. It aims to give a gentle learning curve and minimal code to achieve something productive.

kern.js – A super-simple bookmarklet for designers that finally puts you back in control of your website’s typography. Then just click and drag to adjust your kerning, line-height, letter placement and more to your heart’s content!

imagefill.js – The jQuery plugin for making images fill their containers (and be centered). Imagefill continuously checks to see if the size of the image container changes, then it adjusts the size of the image inside.

Minified.js – A client-side JavaScript library, comparable to jQuery and MooTools in scope. Its features include DOM manipulation, animation, events, cookies and HTTP requests.

Aristochart.js – A highly customizable and flexible line charting library for canvas. Aristochart allows you to focus on aesthetic while it manages the data behind the scenes.

Voyeur – A tiny Javascript library that allows you to traverse the DOM via the dot operator like you would any Javascript object. This makes for a streamlined and native experience like it always should have been.

Transit – Super-smooth CSS transitions & transformations for jQuery. Transition any CSS property. They will happen much smoother than if you were to use jQuery’s default .animate().

FlipClock.js – After reviewing as many of the existing solutions as possible, it was determined a proper extendible API needed to be written to create any kind of clock or counter (and the flip effect is just cool).

Tabulous.js – A jQuery tabs module for todays web. Tabulous.js can be used with any contents you choose in the tabs and it couldn’t be more simpler to use.

MasonJS – A jQuery Plugin was created to solve a problem with most grid system currently available. Gaps. When using Masonry, Isotope or any of the other grid plugins out there sometimes your grid will contain gaps or ragged edges.

Chance – A minimalist generator of random strings, numbers, etc. to help reduce some monotony particularly while writing automated tests. Chance is open source software.

Flippant.js – A mini JavaScript and CSS library that lets you flip things over. It has zero dependencies, is easily customized, and exports a single function: flip.

CSSRegions.js – An experimental polyfill that uses JavaScript to bring CSS Regions functionality to browsers that don’t support the feature.

CollagePlus – An image gallery plugin for jQuery. This plugin for jQuery will arrange your images to fit exactly within a container. You can define the padding between images, give the images css borders and define a target row height.

Color Swatches – A jQuery plugin for turning any div into a color swatch. It’s easy to customize with different classes, and defining swatch colors is as simple as defining a comma-separated list of hex codes.

Progression.js – A jQuery plugin that shows tips about an active form field and also displays the progress (how much of the form is filled). It has options for customizing the tooltip and can be implemented into any form so easily.

Countable – A JavaScript function to add live paragraph-, word- and character-counting to an HTML element. Countable is a zero-dependency library and comes in at 1KB when minified and gzipped.

jQuery Builder – Lets you easily build a custom version of jQuery that just includes the modules you need. Choose which modules you’d like to include in your custom build

WordPress Related

WP CleanFix – WP CleanFix is an all in one tool for check, repair, fix and optimize your WordPress blog.

Google Typography – A simple plugin that lets you use and customize (in real-time!) any fonts from Google Fonts on your existing WordPress site.

The Best Shopping Cart Plugins to Sell With WordPress – Adding cart functionality to your WordPress install makes it easy to build simple online stores with the familiarity of the WordPress template system. Let’s take a look at the best shopping cart plugins available.

Interacting With The WordPress Database – In this article, I want to take you to one of the “deeper” areas of the system, the $wpdb class. The $wpdb class is a simple utility for interacting with the database directly. If you’ve been around WordPress code you’ve probably seen the get_posts() function or the WP_Query class.

Working with Classes and IDs Generated By WordPress – A helpful feature of WordPress is the way it generates classes and IDs. Some of these are generated by the system itself, while in other cases you insert some PHP in your theme and WordPress uses that to add classes and IDs to the page markup.

Developing a WordPress Blog Post Scoring System – the creation of a new type of feature for my blog posts, a scoring system that automatically calculates your post’s score based on the number of Facebook likes, Tweets, Google +1s, and more activities, and displays it in your blog post in real time.

Techniques for improving page speed – Marketers need to ask providers or their technical team about page download speeds and optimisations used such as content distribution networks (CDNs), caching and code minimisation.

.. and don’t forget these!

Butterick’s Practical Typography – Without ty­pog­ra­phy, one could ar­gue, mes­sages will still be leg­i­ble, but if one re­al­ly wants to com­mu­ni­cate rather than sim­ply dis­play a heap of al­phanu­mer­ic data, some con­sid­er­a­tion would be help­ful.

Forecast Font – A web-font for creating multi-layered weather icons. It was created to enable you to have more control over the look and feel of the icons, rather than only having a single colour or style.

Cikonss – Created in order to be pure CSS, responsive and cross-browser usable. By “cross-browser” I mean IE8 as well. This means that CSS2 is in use which leads to limited shapes (and icons) available.

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.