Wednesday, July 27, 2016

11 Sites to Help You Find Material Design Inspiration

Material design is a robust and flexible design system that you’ll enjoy using in your projects. Here’s a list of sites that will give you a near-endless supply of material design examples that you can draw inspiration from.

MaterialUp

MaterialUp

Material Design Showcase

Material Design Showcase

Made with Material

Made with Material

Material Design Awards

Material Design Awards

Dribbble: Material Design

Material Design - Dribbble

Behance: Material Design Projects

/r/MaterialDesign

/r/MaterialDesign

Pinterest: Material Design

Pinterest: Material Design

matesign

matesign

materialpatterns

materialpatterns

CodePen: Material Design

Material Design - CodePen

Related Content

9 Tools for Creating Material Design Color Palettes

12 Small CSS Frameworks To Use In Your Web Designs

20 Free UI Kits to Download

Jacob Gube is the founder of Six Revisions. He’s a front-end developer. Connect with him on Twitter and Facebook.

The post 11 Sites to Help You Find Material Design Inspiration appeared first on Six Revisions.


by Jacob Gube via Six Revisions

Arkade London / Audio Reactive Art

Arkade London is a pure personal and experimental webVJ fan art. It's giving users some graphic superpower, featuring my top legend music artist in the world. Huge thanks to Soundcloud, SNMN, and all my beloved music artists. Crafted with love.
by via Awwwards - Sites of the day

Tuesday, July 26, 2016

Adaptive SVG or putting the ‘S’ into ‘SVG’

Here’s a question: ‘Why do we even like CSS, anyway?’ To answer that question, let’s set our time machine dial thingey back to 1998. When we arrive, we know it’s 1998 because we notice: Google is a hot new startup Britney is hitting her baby one more time Lumbering tables and primitive spacer GIFs roam […]

Continue reading %Adaptive SVG or putting the ‘S’ into ‘SVG’%


by Alex Walker via SitePoint

Limitations As A Powerful Source Of Creativity

How Constraints and Limitations Will Make You More Creative

It seems completely illogical. Constrains make you more creative? But they really do. I mean, what is the phenomenon where you can only stare at the blank page and can’t find any way to fill it but an example of having too much choice? Having constraints can be just what you need to choose a direction and really get your creative juices flowing.

But why is that?

by Guest Author via Digital Information World

Ask the UXperts: Make Meaningful Work (from Sleepwalking to Sparkle) — with Dan Szuc

Make Meaningful Work. I love how that sounds, but what does that actually mean?

In Dan’s own words, good energies for a project can be derailed quickly if people do not feel they have a clear understanding of why they are working on something.

Having a clear roadmap and a common goal helps to remove extraneous opinions and egos, and allows a team to work collaboratively towards a common goal.

Dan will use this session to examine some of the elements and skills which might be employed to encourage healthier ways of working. Consider things like challenging assumptions, setting up conditions for success, and creating workspaces that encourage better collaboration.

In his ebook From Sleepwalking to Sparkle, Dan uses his own stories to highlight some of the issues that he sees facing project work today. Take a coffee break and have a read – you won’t regret it.

The Details

Meet Dan Szuc

Dan Szuc - Make Meaningful Work

Dan (@dszuc) is a Principal Consultant at Apogee, as well as the co-founder of the UX Hong Kong conference. He has been involved in the UX field for 25 years, and has been based in Hong Kong for 20 years.

Dan has lectured about usability, user-centred design, and user experience globally. He co-wrote The Usability Kit, an implementation guide providing best practices and guidelines for usability teams, and he holds a Bachelor of Science in Information Management from Melbourne University in Australia.

He recently published a book on Global UX with Whitney Quesenbery.

How to Ask Your Questions

If you can’t make the live session but have questions, we’d love to collect them ahead of time and we’ll ask Dan on your behalf. You can submit your questions here. We’ll publish the responses (along with the full transcript) in the days following the session.

Here are a few questions to get you thinking:

  1. What sorts of things can actually go wrong if we don’t put effort into working in a meaningful way?
  2. Are there some practical things that we can do to ensure we’re working mindfully?
  3. What does the ideal project work environment look like to you?

How does Ask the UXperts work?

These sessions run for approximately an hour and best of all, they don’t cost a cent. We use a dedicated public Slack channel. That means that there is no audio or video, but a full transcript will be posted up on here in the days following the session.

The post Ask the UXperts: Make Meaningful Work (from Sleepwalking to Sparkle) — with Dan Szuc appeared first on UX Mastery.


by Sarah Hawk via UX Mastery

The 10 Best Chrome Extensions for Freelancers

A person working in a café

It’s no secret that us freelancers are productivity junkies, always looking for clever ways to make the best use of our time. Personally, I happily welcome any tips and tricks that help me churn out the words. But did you realize that the key to being more efficient might be located right in your browser?

Google’s Chrome Web Store is packed full with tens of thousands of useful extensions. Unfortunately, unless you know exactly what you are looking for, it can be pretty difficult to navigate.

In the hopes of helping to narrow things down, I’ve highlighted 10 Chrome extensions for freelancers looking to improve their workflow and boost productivity.

1. Noisli

Noisli - Chrome Extensions for Freelancers

The right ambient noise can be a lifesaver when it comes to staying focused. Noisli has a variety of noises to choose from and an option to customize your own. You can choose your favorite noise, set a timer, and control the volume, all from your web browser.

We recently took a closer look at Noisli.

Noisli

2. ColorZilla

If you’re a graphic designer, this Chrome extension is about to become your best friend. ColorZilla is an advanced eyedropper that provides color readings in RGB and hexadecimal format. It allows you to easily pull color data from any website on-the-go and without having to open another application.

ColorZilla

3. Boomerang for Gmail

Boomerang - Chrome Extensions for Freelancers

Being a digital nomad has a lot of benefits, but it can also make it difficult to stay atop correspondence. This extension changes everything when it comes to email.

Boomerang allows you to schedule emails to arrive in someone’s inbox precisely when you need them to. This is especially useful for when you are traveling, corresponding with someone in a different time zone, or if you are catching up on emails late at night.

Boomerang also allows you to schedule emails back to yourself, which can be an incredibly useful tool for goal setting, meeting deadlines, invoicing and follow ups. It even has the capability to alert you when you haven’t responded to important messages. The productivity possibilities are endless. It’s surprising that we ever went without it.

Boomerang for Gmail

4. Web Developer

This chrome extension is for those developers that love a good shortcut. It provides an incredible amount of useful dev tools, all conveniently located right in your browser. The Web Developer extension makes viewing responsive layouts, disabling styles, and outlining elements quick and easy.

Web Developer

5. Taco

Taco - Chrome Extensions for Freelancers

Don’t let the name fool you: this Chrome extension is a powerful hub for productivity. For most of us, on any given day we use up to 20 different apps and services — if not more. From Gmail to Trello to Salesforce, you name it.

Taco works by pulling all of your incoming tasks and notifications from various apps into one central location. It may sound unnecessary, like just another to-do list application. But think of how much time it’ll save you to have all of your tasks and notifications in one comprehensive list. It makes prioritizing tasks a whole lot easier.

Taco

6. StayFocusd

Being a freelancer requires a lot of discipline and working on the web makes it all too easy to get distracted and lose focus. We’ve all been there: you step away from your work for five minutes to check Twitter and catch up on some trending topics. Next thing you know, two hours have passed and your motivation has plummeted.

Continue reading %The 10 Best Chrome Extensions for Freelancers%


by Ashley Remstad via SitePoint

Build a JavaScript Command Line Interface (CLI) with Node.js

As great as Node.js is for "traditional" web applications, its potential uses are far broader. Microservices, REST APIs, tooling, working with the Internet of Things and even desktop applications—it's got your back.

Another area where Node.js is really useful is for building command-line applications—and that's what we're going to be doing today. We're going to start by looking at a number of third-party packages designed to help work with the command-line, then build a real-world example from scratch.

What we're going to build is a tool for initializing a Git repository. Sure, it'll run git init under the hood, but it'll do more than just that. It will also create a remote repository on Github right from the command line, allow the user to interactively create a .gitignore file and finally perform an initial commit and push.

As ever, the code accompanying this tutorial can be found on our GitHub repo.

Why Build a Command-line Tool with Node.js?

Before we dive in and start building, it's worth looking at why we might choose Node.js to build a command-line application.

The most obvious advantage is that if you're reading this, you're probably already familiar with it—and indeed, with JavaScript.

Another key advantage, as we'll see as we go along, is that the strong Node.js ecosystem means that among the hundreds of thousands of packages available for all manner of purposes, there are a number which are specifically designed to help build powerful command-line tools.

Finally, we can use npm to manage any dependencies, rather than have to worry about OS-specific package managers such as Aptitude, Yum or Homebrew.

That said, that's not necessarily true, in that your command-line tool may have other external dependencies.

What We're Going to Build—Introducing ginit

Ginit, our Node CLI in action

For this tutorial, We're going to create a command-line utility which I'm calling ginit. It's git init, but on steroids.

You're probably wondering what on earth that means.

As you no doubt already know, git init initializes a git repository in the current folder. However, that's usually only one of a number of repetitive steps involved in the process of hooking up a new or existing project to Git. For example, as part of a typical workflow, you might well:

  1. Initialise the local repository by running git init
  2. Create a remote repository, for example on Github or Bitbucket; typically by leaving the command-line and firing up a web browser
  3. Add the remote
  4. Create a .gitignore file
  5. Add your project files
  6. Commit the initial set of files
  7. Push up to the remote repository

There are often more steps involved, but we'll stick to those for the purposes of our app. Nevertheless, these steps are pretty repetitive. Wouldn't it be better if we could do all this from the command-line, with no copying-and-pasting of Git URLs and such-like?

So what ginit will do is create a Git repository in the current folder, create a remote repository—we'll be using Github for this—and then add it as a remote. Then it will provide a simple interactive "wizard" for creating a .gitignore file, add the contents of the folder and push it up to the remote repository. It might not save you hours, but it'll remove some of the initial friction when starting a new project.

With that in mind, let's get started.

The Application Dependencies

One thing is for certain—in terms of appearence, the console will never have the sophistication of a graphical user interface. Nevertheless, that doesn't mean it has to be plain, ugly, monochrome text. You might be surprised by just how much you can do visually, while at the same time keeping it functional. We'll be looking at a couple of libraries for enhancing the display: chalk for colorizing the output and clui to add some additional visual components. Just for fun, we'll use figlet to create a fancy ASCII-based banner and we'll also use clear to clear the console.

In terms of input and output, the low-level Readline Node.js module could be used to prompt the user and request input, and in simple cases is more than adequate. But we're going to take advantage of a third-party package which adds a greater degree of sophistication—Inquirer. As well as providing a mechanism for asking questions, it also implements simple input controls; think radio buttons and checkboxes, but in the console.

We'll also be using minimist to parse command-line arguments.

Here's a complete list of the packages we'll use specifically for developing on the command-line:

  • chalk - colorizes the output
  • clear - clears the terminal screen
  • clui - draws command line tables, gauges and spinners
  • figlet - creates ASCII art from text
  • inquirer - creates interactive command line user interface
  • minimist - parses argument options
  • preferences - manage CLI application encrypted preferences

Additionally, we'll also be using the following:

  • github - Node wrapper for the GitHub API
  • lodash - JavaScript utility library
  • simple-git - runs Git commands in a Node.js application
  • touch - implementation of the *Nix touch command

Getting Started

Although we're going to create the application from scratch, don't forget that you can also grab a copy of the code from the repository which accompanies this article.

Create a new directory for the project. You don't have to call it ginit, of course.

mkdir ginit
cd ginit

Create a new package.json file:

npm init

Follow the simple wizard, for example:

name: (ginit)
version: (1.0.0)
description: "git init" on steroids
entry point: (index.js)
test command:
git repository:
keywords: Git CLI
author: [YOUR NAME]
license: (ISC)

Now install the depenencies:

npm install chalk clear clui figlet inquirer minimist preferences github lodash simple-git touch --save

Alternatively, simply copy-and-paste the following package.json file—modifying the author appropriately—or grab it from the repository which accompanies this article:

{
  "name": "ginit",
  "version": "1.0.0",
  "description": "\"git init\" on steroids",
  "main": "index.js",
  "keywords": [
    "Git",
    "CLI"
  ],
  "author": "Lukas White <hello@lukaswhite.com>",
  "license": "ISC",
  "dependencies": {
    "chalk": "^1.1.3",
    "clear": "0.0.1",
    "clui": "^0.3.1",
    "figlet": "^1.1.2",
    "github": "^2.1.0",
    "inquirer": "^1.1.0",
    "lodash": "^4.13.1",
    "minimist": "^1.2.0",
    "preferences": "^0.2.1",
    "simple-git": "^1.40.0",
    "touch": "^1.0.0"
  }
}

Now create an index.js file in the same folder and require all of the dependencies:

var chalk       = require('chalk');
var clear       = require('clear');
var CLI         = require('clui');
var figlet      = require('figlet');
var inquirer    = require('inquirer');
var Preferences = require('preferences');
var Spinner     = CLI.Spinner;
var GitHubApi   = require('github');
var _           = require('lodash');
var git         = require('simple-git')();
var touch       = require('touch');
var fs          = require('fs');

Note that the simple-git package exports a function which needs to be called.

Adding Some Helper Methods

In the course of the application, we'll need to do the following:

  • Get the current directory (to get a default repo name)
  • Check whether a directory exists (to determine whether the current folder is already a Git repository by looking for a folder named .git).

This sounds straight forward, but there are a couple of gotchyas to take into consideration.

Continue reading %Build a JavaScript Command Line Interface (CLI) with Node.js%


by Lukas White via SitePoint