Web Design Weekly #172

Headlines

Using Flexbox today

A strategy of how you can enhance your layouts with Flexbox today without having to wait around for browsers to catch up. Included are some suggestions of possible layout enhancements, tips, and common issue troubleshooting as well as some step by step examples of the card pattern and the split screen layout pattern. (chriswrightdesign.com)

“A Web For Everybody” by Marcy Sutton (vimeo.com)

You know how to code, but how are your design skills?

Do you ever wish your websites & apps looked more “professional”? Take one of our online design courses with hands-on projects & 1-on-1 mentoring from expert designers — we guarantee you’ll see an improvement in your work. Sign up today! (trydesignlab.com)

Articles

The God Login

Jeff Atwood at his best. In this article Jeff explores “Logging in”. Something that seems so trivial. A simple form with two fields, a link, and two buttons. And yet it’s often extremely complex and confusing. (blog.codinghorror.com)

On writing maintainable front-end systems

Karolina Szczur from &yet explains why introducing structure helps bring cohesiveness and also empowers less front-end savvy members to improve. (blog.andyet.com)

Visual Design might be a thing

An interesting read by Mark Boulton about how he has adjusted his thinking around the term ‘Visual Design’. (markboulton.co.uk)

A Look Inside Design at Airbnb (blog.invisionapp.com)

Tools / Resources

Codrops CSS Reference

An extensive CSS reference with all the important properties and info to learn CSS from the basics. Sara Soueidan also did a nice post about the finer details. (tympanus.net)

React.js Conf – playlist

A great playlist from the recent React.js conference. If you are having a slow day at work I would highly recommend watching them all. (youtube.com)

Frontend.md

A command line tool which generates documentation for your existing frontend code in seconds. (jameschambers.co)

Flexible folded corner with SCSS & Compass (codepen.io)

HTML5 Boilerplate – 5.0 (github.com)

PhantomJS – 2.0 (github.com)

Inspiration

Respond Conference – Australia

Whether your role in bringing modern, responsive Web designs to life is technical, creative, strategic, or a mixture of all, RESPOND will help you make better decisions, and create more engaging, high performance and attractive products. (webdirections.org)

Designing Twitter Video

A look into the design and prototyping process of the new Twitter Video by Paul Stamatiou. (paulstamatiou.com)

Developer Tea – Podcast

Small bite-sized episodes by Jonathan Cutrell. (developertea.com)

Jobs

Designer at Dropbox

We’re looking for a driven Product Designer to refine Dropbox’s simplicity and apply it to new, amazing, and beautiful user experiences. Dropbox has a bunch of projects in the pipeline, and we have an ongoing cycle of revamping our entire experience across web, client, and mobile. (dropbox.com)

Need to find passionate developers? Why not advertise in the next newsletter!

From The Blog

React.js CSS transitions

This article explores the creation of an interface component to apply React.js CSS transitions on initial render. (web-design-weekly.com)

Last but not least…

The Gooey Effect (css-tricks.com)

The post Web Design Weekly #172 appeared first on Web Design Weekly.

by Jake Bresnehan via Web Design Weekly

Animating Text with Blast.js

Animating an HTML element with CSS or JavaScript nowadays, with the help of libraries, is more or less an easy task. But you can only animate a full existing element.

This means if you want to animate a single word in a paragraph, you have to wrap the word in an individual element (like a span) and then target it accordingly.

If you have only one or two span elements like this, it is not a big deal, but what if you want to animate each character in a paragraph? For every character, you will have to create a span, which adds a lot of extra markup and makes the text difficult to edit. That’s why Blast.js exists.

What is Blast.js?

Blast.js is a jQuery plugin that allows you to animate individual characters, words, or sentences. In this article, I will present some examples so you can see how to use Blast.js. To use Blast.js and try the examples below, you will need jQuery and of course the Blast.js file, which can be found on the project website for Blast.js.

As mentioned, Blast.js lets us create elements around characters, words, or sentences, but the library isn’t only limited to those options. In the next section, we will see some concrete examples to introduce some options. The list of options we will see is not exhaustive; the full list of available options can be found on the project’s website.

Blasting our First Chunk of Text

In this first example, we will blast a title to animate each character and move them, one by one, to the right. The only HTML code needed is the following:

[code language="html"]

Hello World!

[/code]

After including jQuery and Blast.js, the next bit of code in this part will all be in your custom JavaScript file inside of jQuery’s ready handler, to ensure the page is ready:

[code language="javascript"] $(function() { // Animation code }); [/code]

Now we can blast our title. In our example, just using $('h1') to target the element will be enough, but in your case you’ll use whatever selector is appropriate to target the element.

Continue reading %Animating Text with Blast.js%

by Jérémy Heleine via SitePoint

ProjectBlocker – jQuery Blocking Plugin for Websites

ProjectBlocker is a handy jQuery solution for blocking responsive, IE, or incomplete bits from being seen while in development.

by via jQuery-Plugins.net RSS Feed

Introducing Pagoda Box – a PaaS just for PHP

In this article, we’ll take a look at Pagoda Box, another PaaS (Platform as a Service). If you have used other PaaS in previews projects, Pagoda Box is similar to Heroku. Pagoda Box is PHP only (for now) and has a well defined architecture to start developing with PHP. Everything in Pagodabox is a component. The database is a component, the webservers, workers, cron jobs and the caching. Having such an architecture doesn’t only give you ease in development but also a control over money usage. This post will be a quick overview of this platform. We will set up a framework and look at a list of pros and cons, comparing it to Heroku.

Quick overview

Lets have a look at the components that Pagoda Box offers.

The first and the most important component is the Web Component. This component holds all the code and runs it on each request. This is the entry point in the application. You can have up to 25 instances of Web Components. You can chose from 200MB up to 1GB of RAM for each. In total, you can have 25GB per application. One Web Component with 200MB is free.

The database component doesn’t need an introduction. The only database that you can use for now is the MySQL database. You can chose one of two flavours, Cloud MySQL and Private Cloud MySQL. Only the Cloud MySQL has a free basic plan with 10MB of RAM. It can be scaled up to 500MB for one instance and the Private Cloud MySQL goes up to 16 CPU Cores, 16 GB of RAM, and 300 GB of storage.

The Caching Component comes in Redis and Memcached flavors. Both provide a free basic plan of 10MB. Both of them have only the Cloud version - no Private Cloud.

Pagoda Box also offers Cron Job components, Shared Writable Components (with a 10MB free plan) and SSL.

Continue reading %Introducing Pagoda Box – a PaaS just for PHP%

by Aleksander Koko via SitePoint

OAuth, Twitter, the WordPress HTTP API and You

In previous tutorials, we took a deep dive into the WordPress HTTP API. We even went as far as building the following plugins to demonstrate real-world examples of its usage: domain whois and social data widget; CAPTCHA protection plugin for WordPress login, registration & comment; and plugin for stopping disposable email address signup.

In this tutorial, we'll be introduced to the world of OAuth, how Twitter uses it for authorizing HTTP requests to its API and finally, building a PHP class powered by WordPress HTTP API that plugins can take advantage of when consuming Twitter.

Continue reading %OAuth, Twitter, the WordPress HTTP API and You%

by Agbonghama Collins via SitePoint

Localizing a Windows Phone 8 Application

PlayWith

Nice big imagery and device shots in this long One Pager for 'PlayWith' - an iOS app that helps friends and strangers get together to play the sports they love.

by Rob Hope via One Page Love