Web Design Weekly #202

Headlines

The future of layout with CSS

Patrick Brosset takes a look at the wonderful world of the CSS Grid Layout which is a relatively new W3C specification that some browsers have started to implement. (medium.com)

Evolving the Google Identity

Alex Cook, Jonathan Jarvis, & Jonathan Lee look at the finer details of how the new Google identity came about. (design.google.com)

ParallaxOne – Free One Page WordPress theme

You don’t even need to read the documentation. Everything is customizable and built with developers in mind. No framework to learn, no custom functions or a special file system. Just plain ol’ WordPress. Take a look for yourself at the demo. (themeisle.com)

Articles

Prefetching, preloading, prebrowsing

Robin Rendle looks at some interesting prefetching performance techniques to help improve the user experience. (css-tricks.com)

What happened to Web Components?

Web Components have been around for 3 years and much of the excitement has calmed down, Web Components are alive and kicking. In this article Dr. Axel Rauschmayer looks at the recent developments and shares some information on what we can expect in the future. (2ality.com)

Design the Beginning

Julie Zhuo who is a product design director at Facebook expresses her concern that most of the time we design something new, we start at the middle and this is jeopardising our product. (medium.com)

Angular 1 to Angular 2 – the path to a seamless upgrade

If you are currently worried about what you will need to do to upgrade your Angular 1 code to Angular 2, then hopefully this post by the Angular team helps ease the stress. (angularjs.blogspot.com)

Word Wrapping Woes

Joni Trythall looks at a number of properties to tackle tricky text wrapping/overflow issues. (jonibologna.com)

The anatomy of responsive images (jakearchibald.com)

Diving deep into SVG animations (medium.com)

Tools / Resources

An In-Depth Overview of Living Style Guide Tools

Robert Haritonov takes a look at various living style guides to help us transform front-end code bases into well-described pattern libraries with the minimum of effort. (smashingmagazine.com)

Gulp for Beginners

Keen to dive into Gulp? Or just get a little overview. Well this is a great introduction by Zell Liew that is worth checking out. (css-tricks.com)

Sublime Text 2 and Markdown

If you are keen to utilise Sublime Text as your writing tool this article explores some really good tips and tricks. (macstories.net)

Alex – Catch insensitive, inconsiderate writing

Whether your own or someone else’s writing, Alex helps you find unequal phrasing. (alexjs.com)

Hackpad – a web-based realtime wiki is now open sourced (github.com)

Hack – a typeface designed for source code (github.com)

Embracing the Network (speakerdeck.com)

Inspiration

Spheres with CSS Animations

The very talented Donovan Hutchinson takes a simple rounded shape and adds some CSS animation to bring them to life. (cssanimation.rocks)

Reading the HTML specifications for 100 days (melanie-richards.com)

Jobs

Product Designer at Campaign Monitor

We’re looking for a Product Designer who shares our vision for designing beautiful software that thousands of people love to use. We’re looking for someone with a strong understanding of interaction design and knows how to apply that to directly drive product growth. We’re hoping that might be you. (campaignmonitor.com)

Front-End Engineer at Delighted

We need a front-end engineer with experience working on a wide variety of projects – building custom UI components, implementing responsive interfaces, or working to improve the responsiveness and performance of our application. (delighted.com)

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

Last but not least…

A Day of REST — a conference devoted to the WordPress REST API (poststatus.com)

How to write a great error message (medium.com)

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

by Jake Bresnehan via Web Design Weekly

How to Write Modular Code with Angular UI-Router & Named Views

One of the most important concepts in web development is writing clean, modular code. This is especially relevant when working as part of a team on highly complex applications. The Angular framework was built to create high-level applications, which can become very complex very fast, which in turn makes writing modular code all the more […]

Continue reading %How to Write Modular Code with Angular UI-Router & Named Views%

by Thomas Greco via SitePoint

How to Make a Useful Toggl Time Tracker with Particle and Node

I have recently been tracking my time on projects more closely throughout the day. It is useful to see which projects take up more time than others and helps me measure which days I'm most productive (and what is distracting me!). My service of choice for this is Toggl. It is simple, clean and syncs across devices. Best of all - it has an API which you can hook up your own applications and devices to. I decided to set up a button connected to my Particle Photon that would start and stop my Toggl timer for me. I used a simple Node server to manage the communication between my Particle device and Toggl.

Clicking a physical button feels just that little bit more empowering than tapping a software button and prevents me needing to get out my smartphone or click around on my Mac to find the timer!

What You'll Need

• A Particle Core or Photon - I'll be using a Particle Photon but both should be compatible with the demo
• A physical button of some kind
• A breadboard, resistors and jumper wires - If you are new to tinkering with microcontrollers, SparkFun has a great new Inventors Kit for the Photon
• A Toggl account - If you don't have one, head to the Toggl website to sign up!
• Knowledge of how to get code onto your Particle device - if you're new to this, I published a SitePoint article a few weeks back on connecting to the Photon. The Particle Core is similar.
• A basic understanding of running a Node server and using npm - Peter Dierx at SitePoint has written a pretty comphrensive guide on starting with npm.

Note: Particle also sell a big physical button. You could quite likely adapt this concept to the big button for a lot of fun, I just don't own one of those... yet.

Finding Your API Keys

To get your Toggl API key, visit the Toggl "My Profile" Page. If you scroll down to the bottom of this page, you'll find a unique API token you can use like so:

Copy that token to a safe place. You'll need it!

You can also reset it using the tiny "Reset" link on the right hand side (useful in moments like just then when I revealed my API key to you all).

If it has been a while since your last Particle build session and you need a refresher on finding your Particle API key, go to the Particle Build online editor and click the gear icon at the very bottom to get to the settings page. From there, you'll see a screen which shows you your access token.

Copy that one too.

Our Particle Sketch

Our sketch with the layout of the breadboard, Particle device (shown as a Core in this pic but both this and a Photon will work), LED and button looks like so:

Download The Code

All of the code for this example can be found on GitHub.

Our Particle Code

Our Particle code will keep track of whether or not the button is pressed and whether or not we want to have our LED lit up or not. All the rest of the functionality will be taken care of by our Node server.

The Particle code looks like so:

[code language="c"]
int ledPin = D0;
int buttonPin = D5;
bool ready = true;
int last;

void setup() {
pinMode(ledPin, OUTPUT);
pinMode(buttonPin, INPUT);
last = millis();
digitalWrite(ledPin, LOW);

Spark.function("ledTrigger", ledTrigger);
}

void loop() {
if (millis() - last > 200) {
if (digitalRead(buttonPin)) {
if (ready) {
ready = false;
Spark.publish("buttonPressed");
last = millis();
}
} else {
ready = true; // button ready to be pressed again
}
}
}

int ledTrigger(String value) {
if (value == "ON") {
digitalWrite(ledPin, HIGH);
} else {
digitalWrite(ledPin, LOW);
}

return 0;
}
[/code]

I'll explain what each bit of that code means. To start with, we define our two components and the pins they are attached to. Our button is attached to D5 and our LED is attached to pin D0.

[code language="c"]
int ledPin = D0;
int buttonPin = D5;
[/code]

The next two variables are there to keep track of timing within our loop. ready tracks whether our button is ready to be pressed again. We want to ensure there is a period between when we first click it and when it can be clicked again. last is the variable which helps track this period of time, it keeps track of the last time the loop has been run. That might make more sense when you see it in action soon.

[code language="c"]
bool ready = true;
int last;
[/code]

In our setup() function, we start by setting the pin mode for our LED to output and set it to input for our button.

[code language="c"]
void setup() {
pinMode(ledPin, OUTPUT);
pinMode(buttonPin, INPUT);

// more code explained next!
}
[/code]

Continue reading %How to Make a Useful Toggl Time Tracker with Particle and Node%

by Patrick Catanzariti via SitePoint

Object Orientated Development with WordPress

Object Orientated code is everywhere and WordPress is no exception.

The Core of WordPress is built on series of objects/classes used to control everything from manipulation of the database to the look and feel of your site.

Throughout this tutorial, we will look into Object Orientated design and how you can use these in practical applications when developing for WordPress including:

• Understanding exactly what object orientated design is.
• Discussing why we should use object orientated design.
• Examining a real world example to showcase how it can work.

Note 1: Also note that this tutorial outlines primarily WordPress centric concepts, so if you are entirely new to object orientated design you should probably get a quick overview of OO via the PHP reference guide.

Note 2: If you're keen on downloading everything right away feel free to download the source from my GitHub repository and follow along with the tutorial.

Let's jump right into it!

What Is Object Orientated Design Anyway?

Object Orientation Design (OO Design) is a different methodology for solving issues, separate from the traditional procedural approach.

With Object Orientated Design you create a structure (class) that will group together all of your related functions (methods) and information (properties) to solve an issue.

This is different from procedural development in which you create functions and variables to solve issues, however, these elements can be separated across multiple files, re-declared and often loosely related.

Continue reading %Object Orientated Development with WordPress%

by Simon Codrington via SitePoint

An Introduction to GameplayKit: Part 3

Heliom

Gorgeously minimal and spacious One Pager for Canadian digital agency 'Heliom'. Great reference to a quality team photo followed by their roles neatly presented below. Big fan of their less is more approach.

by Rob Hope via One Page Love

HoldOn.js – jQuery Plugin to Create CSS UI Blocker

HoldOn.js is a jQuery plugin to create CSS UI blocker. It's useful to prevent that your user do something wrong while something in the background is executed.

by via jQuery-Plugins.net RSS Feed