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
Definitive front-end performance guide – So why do we keep making slow sites that lead to a bad user experience? This is a community-driven practical guide that will show you how to make websites faster.
tinytype – A compatibility table showing the available default system fonts across different mobile platforms. This shows the state of default system fonts across the most popular platforms. I put this together as a way of finding alternatives to certain webfonts when page weight starts to get too heavy.
HTML5 Introduction – What is HTML5 Capable of, Features, and Resources – HTML5 is the newest hyper text markup language for websites from the World Wide Web Consortium (W3C). The first draft was made public in 2008, but not much happened until 2011.
Improving UX Through Front-End Performance – It’s time we make performance optimization a fundamental part of how we design, build, and test every single site we create—for every single device. Website performance starts with design.
Comprehending the Clipping and Masking Process with CSS – Masking and clipping are two important features available in CSS that a developer should adhere to while designing. A lot of mistakes are made while carrying out these features in reality.
Working with flexbox: The new specification – Flexible layouts. Equal height columns. Presentation independence from your HTML source order. These things haven’t been so easy to achieve with CSS—until now. The flexible box layout, the new flexbox specification, makes creating any of these layouts easy, and much more.
How to use CSS3 columns – CSS3 actually does provide a way for you to style your text into various columns, it even gives the ability to set a gutter — the space between those columns — this way you have full control instead of the framework or grid system setting those gaps for you.
A guide for creating a better retina web – Almost all up-to-date mobile phones and tablets on the market have one and desktop products are now following this trend. I’m sure we will see a lot of new devices with retina displays in the next two years.
Resizing Responsive Designs with CSS – There’s another way to achieve flexibility that doesn’t involve keeping track of ems or percentages — the new CSS REM unit. REMs are just like ems — REM stands for Root Em — but instead of being relative to the parent element like Ems, REMs are relative to the document root’s font size.
Thoughts on Using Web Frameworks – Are frameworks a crutch, or can they be a useful tool to experienced front-end developers? Do they have a place in our workflow if we want to build websites that don’t look like every other website out there?
How to structure a Sass project – One of the most useful features of Sass is being able to separate your stylesheets into separate files. You can then use the @import directive to include the source of your individual files into one master stylesheet.
8 Guidelines and 1 Rule for Responsive Images – If I could wave a magic wand for organizations, what would I put in place for their responsive images processes and tools? The result was eight guidelines and one rule for responsive images.
Media Queries are a Hack – Big buzzwords in CSS these days are “modular” and “responsive”. But we’re still trying to achieve those goals with the wrong tool: Media Queries. What we actually need is a tool that doesn’t exist yet: Element Queries.
Website Performance Checklist – People like things fast. Fast cars, fast food, and fast downloads. Who wouldn’t? There’s nothing more annoying than sitting on your phone and waiting for something to load. And if something takes too long to load, we move on.
Create An Interactive Metro Style Grid Dashboard – In this tutorial we are going to create a metro style dashboard, to do this we are going to use a very useful jQuery plugin called gridster. Gridster will allow you to create a drag and drop multi-column grid.
Build a portfolio with CSS3 transitions – Here we’re going to build a modern, interactive portfolio page using CSS3 transitions to replace jQuery animation and HTML5 markup. We’ll be looking at vendor prefix issues and adding fallbacks for less supportive browsers.
How to create a beautiful login form – We will create this login form in three separate steps, the first step will deal with the HTML Markup, while the second step will focus on the positioning of the elements, finally the third step will focus the styling of the different elements.
A Super Simple and Sexy Tooltip [Only CSS] – Pure CSS tooltips have been around for some while now, so I searched the interwebs for tutorials based on the features I wanted/needed for my tooltip. There are quite some articles about this topic, but all of the solutions I’ve found had some kind of limitations.
Nested Accordion – A simple accordion that allows for a nested structure. The style comes with some examples of how to style three levels and how to add a media query for decreasing the size on smaller screens. Clicking a trigger element will open the content.
Create an E-Commerce Web Element with CSS3 – In this tutorial you’ll learn how to create a web element very popular among E-Commerce websites. The design of this element can be found in The Bricks UI.
Grabbing Popular Dribbble Shots Dynamically via jQuery – In this tutorial I want to demonstrate how we can build a small webapp which dynamically pulls all the most recent popular shots from Dribbble. The interface is very simple to work with and we want to create all these effects without refreshing the page.
Tools (web applications, bookmarklets, frameworks etc.)
Page Layers – A website screenshot app for Mac OS X. It converts web pages to Photoshop files with separate layers for all page elements. It enables you to open web pages in Photoshop and saves you lots of time when re-designing or improving existing web page designs.
Letterpress – A minimal, Markdown based blogging system written in Python. Letterpress monitors Markdown files in press_folder. When an new Markdown file is detected Letterpress generates a new HTML file from that Markdown file.
Bolt – A simple, lightweight, and sophisticated tool for content management. It’s quick and easy to set up and configure, and great to use. Full documentation and support (via forum) is available.
Validatr – Uses HTML5 input attributes to perform validation. Validatr will use native validation whereever possible, relying on a small piece of Modernizr to test for support. If an input type is not supported or a custom test is found Validatr will use it’s own ruleset to supplement native validation.
Client-Hints (Internet Draft) – There are thousands of different devices accessing the web, each with different device capabilities and preference information. These device capabilities include hardware and software characteristics, as well as dynamic user and client preferences.
CSS Beautifier -Beautifies your CSS automatically so that it is consistent and easy to read.
Colourco – A full screen color picker for designers .Color-Picker based on hsl-color. Just click and lock the color code.
Slingpic – An image sharing tool that allows your users to share images from your site quickly and easily. Allow your site’s visitors to share images across social networks, email, blogs and more at the click of a button.
CSS3Ps – free cloud based photoshop plugin that converts your layers to CSS3.
Browser Refresh for Sublime Text 2 – After installing this plugin you can hit ‘command + shift + r’ on Mac OS X or ‘ctrl + shift + r’ on Windows while using your favorite browser, the last active window will come to the foreground and reload the active tab.
GetSimple – An XML based, stand-a-alone, fully independant and lite Content Management System. To go along with its best-in-class user interface, we have loaded it with features that every website needs, but with nothing it doesn’t.
Screenr – Screenr’s web-based screen recorder makes it a breeze to create and share your screencasts around the web. Just click the record button, capture your screen & voice, and share the link.
Boxen – A dangerously opinionated framework that automates every piece of your development environment. It’s configuration management for everyone: Designers, HR mavens, legal eagles, and developers.
Sassaparilla – A fast way to start your responsive web design projects that harnesses the power of Sass and Compass. Nail your vertical rhythm with some help from compass’ awesome typography module.
htaccess tester -To test your htaccess rewrite rules, simply fill in the url that you’re applying the rules to, place the contents of your htaccess on the larger input area and press “Check Now” button.
Niice – It’s a kind of inspiration search engine that checks works on Dribbble, Behance and Design Inspiration.
sw4tch – Create swatchbooks of simple, reusable styles with CSS, SCSS & Compass, or Stylus & Nib.
Compress PNG – A tool to compress PNG images into PNG-8 format with transparency support and full browser compatibility. Start with selecting up to 20 PNG files from you computer, then upload queue.
Spoon – A simple and elegant wireframe kit. Light weight, clear and exactly what you need. Every elements are carefully crafted, customizable for different usage.
CSSmatic – A non-profit project, made by developers for developers and it’s a new, simple and intuitive way of editing and tunning CSS properties. CSSmatic is a non-profit project, made by developers for developers
Am I Responsive – This tool allows you to make screen shots of the various device breakpoints for responsive design quickly, and hopefully it can be helpful for showing your more visual clients what you mean by responsive design.
RazorFlow – A PHP framework for easily creating dashboards that work well on all major devices and browsers. It works by simply inserting a single PHP file into any app, feeding it with data and choosing the output type.
5grid – A responsive HTML5+CSS3 design framework I originally created for my own use, but after some polishing and testing I figured I’d release it publicly. As the name implies, it’s built around a grid system that’s both powerful and easy to use.
Drawscript – An extension for Illustrator (available in Adobe® Creative Cloud). It generates graphics code from vector shapes in realtime.
Uslide – Turn your smartphone into a presentation remote: Backup your presentation online, then use Uslide. Turns your smartphone into a presentation remote.
styledocco – StyleDocco generates style guide documents from your stylesheets by parsing your stylesheet comments through Markdown. You can write HTML snippets in your stylesheet comments and StyleDocco will show a preview with the styles applied, as well as display the example HTML code.
Antwort – Responsive Layouts for Email. Originally made for transactional Emails with dynamic content so the layouts are thoroughly tested – in live environments with real data and edge cases.
Loadersuite – An advanced online loading animation generator. Create custom, professional-looking animations in your browser. Animated GIFs do have transparency, but remember to set a background color regardless.
PocketGrid – A lightweight pure CSS grid system allowing responsive, semantic, mobile-first, with an unlimited number of columns and breakpoints. Lightweight: about 0.5kB! Pure CSS-only (no CSS preprocessor needed)
Framebase – No need to hire a team to deal with transcoding configurations, device compatibility bugs, or CDN contracts. With just two lines of code, you can start treating videos as class instances. That means playback as simple as an echo, and uploads as simple as an <input>.
IVORY – A lightweight front-end framework that can handle responsive layouts from 320px to 1200px widths. It has a 12-column grid and comes with styles for typography, forms, buttons, tables, and more.
Gumby Framework – A flexible, responsive CSS Framework, Powered by SASS. Create rapid and logical page layout and app prototypes with a flexible and responsive grid system and UI kit.
MOSTO – A lightweight framework for forms. Forms aren’t much fun to build, I think most web designers find them pretty tedious to design and code. For that reason I wanted to make this framework which should suit most situations.
Test Responsive – A bookmarklet to check the responsiveness of a website.
Contrast ratio -This sample text attempts to visually demonstrate how readable this color combination is, for normal or bold text of various sizes and font styles.
Helios – An open-source framework that provides essential backend services for iOS apps, from data synchronization and user accounts to push notifications, in-app purchases, and passbook integration
Sidr – The best jQuery plugin for creating side menus and the easiest way for doing your menu responsive. You will be able to create multiple sidrs on both sides of your web to make responsives menus (or not, it works perfectly on desktop too).
JResponsive – Organize your content in an efficient, dynamic and responsive layout. It can be applied to a container element and it will arrange its children in a layout that makes optimal use of screen space, by “packing” them in tightly.
jPanelMenu – A jQuery plugin that creates a paneled-style menu like the type seen in the mobile versions of Facebook and Google, as well as in many native iPhone applications. Animation is handled by CSS transitions, for browsers with support.
perfect-scrollbar – Tiny but perfect jQuery scrollbar plugin. perfect means… There’s no css change on any original element. Do not affect the original design layout. The scrollbar css is fully customizable and the scrollbar size and position can be updated.
Imageloader.js – A jQuery plugin for preloading images. The code is simple to implement, with minimal customization options outside of the array of image URLs to load.
Jquery Alpha Image Plugin – This plugin can change selected colours to transparent on your image and give result as image or imagedata. This plugin works on IE9+, Chrome, Firefox, Safari. I didn’t try in opera.
lunr.js – A simple full text search engine for your client side applications. It is designed to be small, yet full featured, enabling you to provide a great search experience without the need for external, server side, search services.
Emblem.js – A concise, beautiful, and fully compatible templating alternative for Handlebars.js. Emblem is HTML5-aware; Render HTML if a line starts with known HTML tag, else invoke HB helper or perform property lookup. These defaults are easily overridable when necessary.
Navi.js – Simplifies the display of dynamic content on your site. Write all of your pages in a single HTML file and keep your site tree uncluttered. It uses the current hash to change content, leaving your visitors’ back button functional.
Selecter – A jQuery plugin for replacing default select elements.Replace those boring default select elements with something a little nicer. Selecter also integrates with Scroller, giving you complete control of your project’s UI.
HTML5 Drag & Swap Zepto Plugin – 2KB (minified).Built using native HTML5 drag and drop API, supports both list and grid style layouts. Add drop animations with CSS3. Class control for move, over, drop and exclude. Vender prefix getter for detecting animation end.
Faker.js – Generate massive amounts of fake data in the browser and node.js
Chart.js – Easy, object oriented client side graphs for designers and developers. Chart.js uses the HTML5 canvas element. It supports all modern browsers, and polyfills provide support for IE7/8.
Fool.js – A jQuery Plugin For April Fools’ Day Jokes. The plugin can feature various jokes including “falling scrollbar”, “displaying annoying videos”, “hiding random elements”, “turning the page upside down” and more.
Sails.js – Makes it easy to build custom, enterprise-grade Node.js apps. It is designed to resemble the MVC architecture from frameworks like Ruby on Rails, but with support for the more modern, data-oriented style of web app development.
Swipe.js ~ A responsive image slider with touch support developed by Brad Birdsall.
social-feed – A jQuery plugin which shows a user feed from the most popular social networks. Currently supports: Facebook, Twitter, VK. The current version of plugin does not fully support IE browser.
jResize – A responsive web development tool, built in jQuery to assist the workflow of developers on responsive projects. There are various tools for responsive development, iframes at different widths embedded in the page, and the tedious resizing of the browser.
jAutochecklist – A jQuery plugin that help you to create an user-friendly HTML list which can be used to replace the old tradition select list.
Photoset Grid – A simple jQuery plugin to arrange images into a flexible grid, based on Tumblr’s photoset feature. Originally the plugin was created for the Style Hatch Tumblr themes as a way to use the photoset grid in responsive layouts.
iCheck – Super customized checkboxes and radio buttons with jQuery. iCheck is created to avoid routine of reinventing the wheel when working with checkboxes and radio buttons
Desant – An open source, single page web application for handling such cases with ease. Any page built with it can easily collect user information via forms, it keeps track of the referring URLs and the locations of visitors.
bespoke.js -DIY Presentation Micro-Framework. Bespoke.js provides the foundation, then gets out of your way so you can focus on uniquely crafting your own personal deck style.
Draggabilly – Make that shiz draggable. Rad because it supports IE8+ and multi-touch.
MagicSuggest – A highly flexible auto-suggest combobox with Bootstrap theme using jQuery.
Canvas Query – A wrapper library for HTML5 canvas which allows it to be used with jQuery-like syntax. It also offers a lot of commonly used image manipulation methods mainly convenient for game developers.
pixi.js – The aim of this project is to provide a fast lightweight 2D library that works across all devices. The Pixi renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of webGL.
Intro.js – Better introductions for websites and features with a step-by-step guide for your projects. Better compatibility is on the roadmap, but currently it should work in recent versions of Firefox, Chrome and IE8 also.
jtwt.js – An easy-to-use jQuery plugin that allows you to display your recent tweets on your website or elsewhere. jtwt.js comes with a bunch of options to create the best experience for your users.
Swipebox – A jQuery “lightbox” plugin for desktop, mobile and tablet. Include jquery and the swipebox script in your head> tags or right before your body closing tag.
scrollUp jQuery plugin – ScrollUp is a lightweight jQuery plugin to create a customisable “Scroll to top” feature that will work with any website, with ease.
Photoset Grid – A simple jQuery plugin to arrange images into a flexible grid, originally the plugin was created for our Style Hatch Tumblr themes as a way to use the photoset grid in responsive layouts, but we have since expanded it for use outside of the themes.
Chardin.js – A jQuery plugin that creates a simple overlay to display instructions on existent elements. It is inspired by the recent Gmail new composer tour which I loved.
iCheck – Super customized checkboxes and radio buttons with jQuery. iCheck works with checkboxes and radio buttons like a constructor. It wraps each input with a div, which you may customize yourself or use one of the available skins.
fragment.js – A tiny (625 bytes gzipped) tool for easily loading html fragments and templates. Fragment.js allows you to load html fragments into any element, by just adding a ‘data-fragment’ attribute.
jQuery lockfixed – Lets you stick elements within the viewport when a user scrolls. Position:fixed is toggled on only after scrolling the viewport, replicating the proposed future CSS position:sticky.
Panzoom – A progressive plugin to create panning and zooming functionality for an element. Rather than setting width and height on an image tag, Panzoom uses CSS transforms and matrix functions to take advantage of hardware/GPU acceleration in the browser.
Creating Client Testimonials With Custom Post Types – The easiest way to add this functionality to your site would be to include it as a plugin. I’ve put together all the necessary files and included a download link for the Client Testimonials plugin above.
aThe Ins and Outs of WordPress Semantics – Most software that is released has its own language made of words specific to the program. The same is true for WordPress. This article will introduce you to jargon that is specific to WordPress.
How To Create Custom Queries In WordPress – There are 3 ways you can query the WordPress database, you can use the pre_get_posts action, query_posts() function or the WP_Query class.
How to Efficiently Clean Hidden Link Injections in Your Hacked WordPress Sites – Recently I had a very sobering experience that demonstrated just how serious the threat of hacked WordPress sites is. I discovered hidden link injections in some posts on a few of my old sites.
Using WP e-Commerce – With an agglomeration of ecommerce plug-ins available for WordPress, WP e-Commerce stands out as a standardised solution – it’s incredibly powerful and expandable, and works with just about every theme you can think of.
Simple Steps for Creating a Fixed Navigation Bar – When designing a navigation system for your website it is important to consider dynamic alterations for handling mobile support and responsive designs. But another systematic approach is to keep your visitors in full control throughout the entire viewing process.
Code a Dynamic Featured Image Gallery Layout using jQuery – In this tutorial I want to demonstrate how we can build a small layout wrapped around a full image gallery carousel. I will be using the Pikachoose jQuery plugin for this example.
A Beginner’s Guide to Enqueuing jQuery – we’re going to review a few concepts around jQuery and WordPress to make sure that we, as developers, are not only working to build our products correctly, but that we also know how to properly diagnose problems as they arise in our customer’s sites.
How to Style WordPress Comment Form – In this article, we will show you how to style WordPress comment form and take it to the next level by adding social logins, subscribe to comments, comment policy, and more.
WordPress Security: Tackling Backdoors, Pharma Hacks and Redirects - Every now and then, a story pops up about a WordPress website being compromised. The reasons for such security issues can be many — ranging from a flawed plugin to an outdated version of WordPress or a Pharma attack.
Common WordPress Problems & Errors and How to Solve Them – Have you ever faced a situation where after updating a theme or a plugin, your WordPress site displays nothing but a white page? So bad, that you’re even locked out of the WordPress dashboard?
.. and don’t forget these!
Designer, Dare to Experiment! – The internet and specifically websites have the power to be used as a creative and expressive medium. Looking at a website as an artistic medium will broaden your limits and encourage creativity.
Designing for users – What we do is not art. We’re paid to fulfil a business need and ensure our client makes a return on their investment. We help others succeed, grow and gain respect. We are service providers in a commercial industry: a very chaotic, misunderstood, and undervalued industry.
Breaking free of the print design mentality – In a world where even your watch can access the web, it amazes me how many are still fighting for pixel control over their websites. It’s time to put them straight.
There Are No Best Practices – There are no best practices, only actions that have worked for others in other situations. Yet we feverishly seek them out, apply them out of context, and expect they’ll solve a problem unrelated to their heritage.
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.