Design, CG Graphics & Inspiration
Fresh Tutorials and Articles for Web Developers: July 2014

Fresh Tutorials and Articles for Web Developers: July 2014

This Saturday our showcase consists of the freshest and useful tutorials and articles for web developers that we have collected here in order to save your precious time and make your workflow more fun and easy!

Typical Oversights When Designing for Print

It is this crucial aspect that many designers forget to consider when designing for print. There are a number of problems that may pop up which can make your final product look different than what you intended. Here are just a few things to keep in mind if you want to be successful.
Typical Oversights When Designing for Print in Fresh Tutorials and Articles for Web Developers: July 2014

The Simple Intro to SVG Animation

This article serves as a first step toward mastering SVG element animation. Included within are links to key resources for diving deeper, so bookmark this page and refer back to it throughout your journey toward SVG mastery.
The Simple Intro to SVG Animation in Fresh Tutorials and Articles for Web Developers: July 2014

Responsive Design is Not About Screen Sizes Any More

Two years into the rise of Responsive Web Design, after every imaginable sort of designer and developer had jumped into the train, it took a test to almost rock the theory to its foundations.
Responsive Design is Not About Screen Sizes Any More in Fresh Tutorials and Articles for Web Developers: July 2014

Are you prepared for life after jQuery?

Zack Bloom argues that life could be better if the libraries we need stopped depending on jQuery.
Are you prepared for life after jQuery? in Fresh Tutorials and Articles for Web Developers: July 2014

Designing Websites Using DISC Analysis

To truly understand the value of DISC analysis to the web designer and usability expert we first have to understand what on earth it is.
Designing Websites Using DISC Analysis in Fresh Tutorials and Articles for Web Developers: July 2014

Build A Blog With Jekyll And GitHub Pages

Build A Blog With Jekyll And GitHub Pages in Fresh Tutorials and Articles for Web Developers: July 2014

The Most Dangerous Word In Software Development

“Just” makes me feel like an idiot. “Just” presumes I come from a specific background, studied certain courses in university, am fluent in certain technologies, and have read all the right books, articles, and resources.
The Most Dangerous Word In Software Development in Fresh Tutorials and Articles for Web Developers: July 2014

CSS Regions and Selectors

The CSS Selectors system is the driving force behind the stylesheets of a Web page. The selector of a rule defines what elements or pseudo-elements get to be styled using that rule. The selectors language has advanced a lot lately and it allows a lot of complex constructs using tag names, ids, classes, pseudo-classes and so on.
CSS Regions and Selectors in Fresh Tutorials and Articles for Web Developers: July 2014

The Subtle Magic Behind Why the Bootstrap 3 Grid Works

I’d like to quickly and visually explain why the Bootstrap grid works, not necessarily how. Let’s check out this one weird trick about how Bootstrap does its magic.
The Subtle Magic Behind Why the Bootstrap 3 Grid Works in Fresh Tutorials and Articles for Web Developers: July 2014

Understanding SVG Coordinate Systems & Transformations

In this article we’re going to go over three of the most important SVG attributes that control SVG coordinate systems.
Understanding SVG Coordinate Systems & Transformations in Fresh Tutorials and Articles for Web Developers: July 2014

The “Just In Time” Theory of User Behavior

The

You May Be Losing Users If Responsive Web Design Is Your Only Mobile Strategy

In this article, we’ll cover the relationship between the mobile web and responsive design, starting with how to apply responsive design intelligently, why performance is so important in mobile, why responsive design should not be your website’s goal, and ending with the performance issues of the technique to help us understand the problem.
You May Be Losing Users If Responsive Web Design Is Your Only Mobile Strategy in Fresh Tutorials and Articles for Web Developers: July 2014

How Do You Design Interaction?

If you have to design an interface it’s almost obvious to think to begin the process by drawing. But is this the best way? I once casually started by writing an imagined human-computer conversation, and only afterwards I continued by drawing.
How Do You Design Interaction? in Fresh Tutorials and Articles for Web Developers: July 2014

Can web animation save flat design?

As web designers, we need to make sure we keep our skills fresh and up-to-date. We don’t need to follow every trend that comes along (like long shadows) but we do need to keep learning and improving our skills as the web grows and matures.
Can web animation save flat design? in Fresh Tutorials and Articles for Web Developers: July 2014

Getting Started With CSS Preprocessors

There is a buzz around CSS preprocessors—for e.g. Less, Sass, and Stylus—these days. I started using CSS preprocessors a couple of years ago. These preprocessors are used to add functionality to your original cascade style sheet (CSS) files.
Getting Started With CSS Preprocessors in Fresh Tutorials and Articles for Web Developers: July 2014

Designing with Dynamic Content

Designing with Dynamic Content in Fresh Tutorials and Articles for Web Developers: July 2014

The Origins and Evolution of Flat Design

The Origins and Evolution of Flat Design in Fresh Tutorials and Articles for Web Developers: July 2014

WordPress Security: The Ultimate Guide

This article details what you need to do to make your WordPress website secure from threats. It has been divided into five main sections.
WordPress Security: The Ultimate Guide in Fresh Tutorials and Articles for Web Developers: July 2014

“RWD Is Bad for Performance” Is Good for Performance

Myths are powerful things. They certainly have the ability to destroy—we’ve seen that many times. But put the right spin on a myth and you can use it to build up; to create something new and better.

Slimmer and faster JavaScript strings in Firefox

Slimmer and faster JavaScript strings in Firefox in Fresh Tutorials and Articles for Web Developers: July 2014

Tutorials

Pure CSS Off-screen Navigation Menu

This article will show you how to make a simple version of the off-canvas menu and sliding effect using only CSS.
Pure CSS Off-screen Navigation Menu in Fresh Tutorials and Articles for Web Developers: July 2014

Responsive, Fluid-Width, Variable-Item Navigation with CSS

Around six months ago I was asked to develop a single row navigation bar that could contain a variable number of menu items while filling the entire width of the container. The amount of navigational items was dictated elsewhere and likely to change in future. Thinking ahead, it would have been impractical to change the CSS every time a menu item was added or removed. A resolution had to be found, ideally without using JavaScript.
Responsive, Fluid-Width, Variable-Item Navigation with CSS in Fresh Tutorials and Articles for Web Developers: July 2014

Animating SVG text On A Path

This post hopes to serve as a basic introduction to getting your SVG on a path and then get it moving via SMIL animations (animations written within the SVG code itself).
Animating SVG text On A Path in Fresh Tutorials and Articles for Web Developers: July 2014

Speed up Bootstrap Theming with a Library of LESS Variables

If you love Bootstrap but get frustrated with the amount of work it takes to create a theme, you need to dive into LESS. It’s super easy to setup a library of LESS variables and mixins, include it in your base stylesheet, and use it throughout your CSS.
Speed up Bootstrap Theming with a Library of LESS Variables in Fresh Tutorials and Articles for Web Developers: July 2014

How to Style and Animate SVG Elements with CSS

In this tutorial, I will show you step-by-step how to animate a SVG (Scalable Vector Graphic) icon using CSS. This tutorial will give you valuable insight for using SVG as your preferred graphic format. Also, you can improve the UI and UX of your web applications by incorporating subtle animations into your SVG’s.
How to Style and Animate SVG Elements with CSS in Fresh Tutorials and Articles for Web Developers: July 2014

Automating CSS animations with Sass

Automating CSS animations with Sass in Fresh Tutorials and Articles for Web Developers: July 2014

Creating a Full Width Responsive Tiled Menu with CSS

In this tutorial, we’re going to make it fully responsive, and throw in some quick JavaScript at the end to show/hide the navigation on smaller screen widths, via a navigation toggle button. We’ll toss in some CSS3 transitions too for a little extra punch.
Creating a Full Width Responsive Tiled Menu with CSS in Fresh Tutorials and Articles for Web Developers: July 2014

Dynamically Filtering Layouts with Isotope and Bootstrap

In this post, I will show you how to use Isotope to create a magical layout of your own, and how to dynamically filter which elements are displayed.
Dynamically Filtering Layouts with Isotope and Bootstrap in Fresh Tutorials and Articles for Web Developers: July 2014

How to Make Any Website Responsive

How to Make Any Website Responsive in Fresh Tutorials and Articles for Web Developers: July 2014

Responsive Full Background Image Using CSS

In this tutorial, we’ll go over the simplest technique for making a background image fully stretch out to cover the entire browser viewport. We’ll use the CSS background-size property to make it happen; no JavaScript needed.
Responsive Full Background Image Using CSS in Fresh Tutorials and Articles for Web Developers: July 2014

Structuring, Grouping, and Referencing in SVG

In this article we’ll go over these elements, highlighting the difference between them and the advantages of each one.
Structuring, Grouping, and Referencing in SVG in Fresh Tutorials and Articles for Web Developers: July 2014

Dynamically colorize videos with CSS

How do you colorize a video in the very same colors you use in your webdesign? Of course, in CSS. Now what do you do if you have different colors and want them to be reflected in your video? Yes, you animate it.
Dynamically colorize videos with CSS in Fresh Tutorials and Articles for Web Developers: July 2014

Smart Fixed Navigation

A fixed navigation that allows your users to access the menu at any time while they are experiencing your website. It’s smaller than a full-width fixed header, and replaces the back-to-top button with a smarter UX solution.
Smart Fixed Navigation in Fresh Tutorials and Articles for Web Developers: July 2014

Flexbox Based Responsive Equal Height Blocks With JavaScript Fallback

Flexbox Based Responsive Equal Height Blocks With JavaScript Fallback in Fresh Tutorials and Articles for Web Developers: July 2014

Making a SVG HTML Burger Button

Hamburger buttons are used to symbolify hidden menus all across the world, but when I came across this pretty awesome transition of a hamburger button by CreativeDash, I challenged myself with recreating it HTML.
Making a SVG HTML Burger Button in Fresh Tutorials and Articles for Web Developers: July 2014

Notification Styles Inspiration

Some simple ideas and effects for unobtrusive website notifications. A little script is employed for showcasing some styles and CSS animations are used for the effects.
Notification Styles Inspiration in Fresh Tutorials and Articles for Web Developers: July 2014

Draggable Dual-View Slideshow

An experimental slideshow that is draggable and has two views: fullscreen and small carousel. In fullscreen view, a related content area can be viewed.
Draggable Dual-View Slideshow in Fresh Tutorials and Articles for Web Developers: July 2014

Ideas for Subtle Hover Effects

Some creative and subtle hover effect inspiration using modern CSS techniques including 3D translate and pseudo elements.
Ideas for Subtle Hover Effects in Fresh Tutorials and Articles for Web Developers: July 2014

How to Create a Tiled Background Slideshow

A tutorial that shows how to recreate the four tiles slideshow effect seen on the website of Serge Thoroval. Using 3D transforms, transitions and animations, the aim is to implement a smooth effect and add some variations.
How to Create a Tiled Background Slideshow in Fresh Tutorials and Articles for Web Developers: July 2014

SHARE THIS POST

Andrew is the chief editor of Splashnology blog. He has many years of experience within the web design industry and has a passion for the latest web technologies. 3D Models Marketplace

Subscribe for the hottest posts

Subscribe to our email newsletter for useful tips and freebies.

  • nice roundup. thanks for including us!

  • nice roundup. thanks for including us!