Mr Branding

Monday, June 12, 2017

Headlines

The State of CSS

Ryan Oglesby has put together 5 old-fashioned CSS things that you don’t need to do anymore and what you should do instead. Note, there are some good comments worth reading. (ryanogles.by)

Emotional Intelligence in Design (medium.com)

Get 3 Free Months of Online UX Design Courses!

The Interaction Design Foundation is the largest, and oldest, provider of online UX design courses. All their courses are self-paced, which makes them perfect for both working professionals and students. Here are 7 reasons to join their UX design community. (interaction-design.org)

Articles

Shape Detection API

The Shape Detection API opens up a world of possibilities and allows us to truly tap into the power of the hardware that exists on mobile devices. Dean Hume explains how we can get started today. (deanhume.com)

How the CSS Grid minmax() Function Works

Ire Aderinokun, shares an insight into the the minmax() function that was introduced with CSS Grid. (bitsofco.de)

Making Photos Smaller Without Quality Loss

The Yelp engineering team worked hard to optimize their photos and were able to achieve a 30% average size reduction. Oh, and they did it all without reducing the quality images. Great read. (engineeringblog.yelp.com)

Color Accessibility Workflows

Geri Coady looks into a selection of tools to help make your site WCAG AAA compliant. (alistapart.com)

Fun with Viewport Units (css-tricks.com)

Tools / Resources

JavaScript & The spread operator

Brandon Morelli shares 4 practical examples to help understand the spread operator. (hackernoon.com)

Learn from customers faster with NomNom

Get all your customer feedback and user research in one place (nomnom.it)

A Beginner’s Guide to NPM

The Node Package Manager ecosystem can be pretty daunting to get your head around at first. If you are a bit overwhelmed by it, this post is worth reading. (sitepoint.com)

Intro to Firebase and React

For those that are keen to get into using Firebase with React this tutorial by Simon Bloom is a great starting point. (css-tricks.com)

Storybook 3.0

Under the hood, Storybook 3.0 is a major overhaul of the Storybook project both organisationally and structurally. 3.0 brings long-anticipated webpack2 support, flexible snapshot testing and a host enhancements. (medium.com)

Wiretie

A Higher Order Component for Preact that resolves (async) values from a model and passes them down as props. (github.com)

Building New Tools for Designers and Developers (youtube.com)

Dribbble’s official app for iPhone and iPad. (itunes.apple.com)

Apple UI Design Resources (developer.apple.com)

FlexBox Cheatsheet
(vudav.github.io)

Inspiration

Design Details 201: Thrown Under the Self Driving Bus (spec.fm)

2017 Logo Trends (logolounge.com)

Jobs

Product Designer at Mesosphere

Own the user interface & experience of our datacenter operating system DC/OS. You’ll be driving design projects from inception to production. Working closely with PMs & Developers. Talking to Fortune 1000 customers. Growing our design system. Prototyping & shipping quality products. (mesosphere.com)

Designer at WegoWise

WegoWise is looking for a Designer to create beautiful designs that visually communicate WegoWise’s value to target audiences. This role works closely with our Head of Design and Marketing team and on a variety of platforms, including our web application, landing pages, flyers, email campaigns, etc. (wegowise.com)

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

Last but not least…

The Evolution of Code Deploys at Reddit (redditblog.com)

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

by Jake Bresnehan via Web Design Weekly

How I Designed & Built a Fullstack JavaScript Trello Clone

A few weeks ago, I came across a developer sharing one of his side projects on GitHub: a Trello clone. Built with React, Redux, Express, and MongoDB, the project seemed to have plenty of scope for working on fullstack JS skills.

I asked the developer, Moustapha Diouf, if he'd be interested in writing about his process for choosing, designing, and building the project and happily, he agreed. I hope you'll find it as interesting as I did, and that it inspires you to work on ambitious projects of your own!

Nilson Jacques, Editor

In this article, I'll walk you through the approach I take, combined with a couple of guidelines that I use to build web applications. The beauty of these techniques is that they can be applied to any programming language. I personally use them at work on a Java/JavaScript stack and it has made me very productive.

Before moving on to the approach, I'll take some time to discuss how:

I defined my goals before starting the project.
I decided on the tech stack to use.
I setup the app.

Keep in mind that since the entire project is on GitHub (madClones), I'll focus on design and architecture rather than actual code. You can check out a live demo of the current code: you can log in with the credentials Test/Test.

Screenshot of fullstack Trello clone

If you're interested in taking your JavaScript skills to the next level, sign up for SitePoint Premium and check out our latest book, Modern JavaScript

Defining the Goals

I started by taking a couple of hours a day to think about my goals and what I wanted to achieve by building an app. A to-do list was out of the question, because it was not complex enough. I wanted to dedicate myself to at least 4 months of serious work (it's been 8 months now). After a week of thinking, I came up with the idea to clone applications that I like to use on a daily basis. That is how the Trello clone became a side project.

In summary, I wanted to:

Build a full stack JavaScript application. Come out of my comfort zone and use a different server technology.
Increase my ability to architect, design, develop, deploy and maintain an application from scratch.
Practice TDD (test driven development) and BDD (behavior driven development). TDD is a software practice that requires the developer to write test, watch them fail, then write the minimum code to make the test pass and refactor (red, green, refactor). BDD, on the other hand, puts an emphasis on developing with features and scenario. Its main goal is to be closer to the business and write a language they can easily understand.
Learn the latest and the hottest frameworks. At my job, I use angular 1.4 and node 0.10.32 (which is very sad I know) so I needed to be close to the hot stuff.
Write code that follows the principle of the 3R's: readability, refactorability, and reusability.
Have fun. This is the most important one. I wanted to have fun and experiment a lot since I was (and still am) the one in charge of the project.

Choosing the Stack

I wanted to build a Node.js server with Express and use a Mongo database. Every view needed to be represented by a document so that one request could get all the necessary data. The main battle was for the front-end tech choice because I was hesitating a lot between Angular and React.

I am very picky when it comes to choosing a framework because only testability, debuggability and scalability really matter to me. Unfortunately, discovering if a framework is scalable only comes with practice and experience.

I started with two proof-of-concepts (POCs): one in Angular 2 and another one in React. Whether you consider one as a library and the other one as a framework doesn't matter, the end goal is the same: build an app. It's not a matter of what they are, but what they do. I had a huge preference for React, so I decided to move forward with it.

Getting Started

I start by creating a main folder for the app named TrelloClone. Then I create a server folder that will contain my Express app. For the React app, I bootstrap it with Create React App.

I use the structure below on the client and on the server so that I do not get lost between apps. Having folders with the same responsibility helps me get what I am looking for faster:

src: code to make the app work
src/config: everything related to configuration (database, URLs, application)
src/utils: utility modules that help me do specific tasks. A middleware for example
test: configuration that I only want when testing
src/static: contains images for example
index.js: entry point of the app

Setting up the Client

I use create-react-app since it automates a lot of configuration out of the box. "Everything is preconfigured and hidden so that you can focus on code", says the repo.

Here is how I structure the app:

A view/component is represented by a folder.
Components used to build that view live inside the component folder.
Routes define the different route options the user has when he/she is on the view.
Modules (ducks structure) are functionalities of my view and/or components.

Setting up the Server

Here is how I structure the app with a folder per domain represented by:

Routes based on the HTTP request
A validation middleware that tests request params
A controller that receives a request and returns a result at the end

If I have a lot of business logic, I will add a service file. I do not try to predict anything, I just adapt to my app's evolution.

Choosing Dependencies

When choosing dependencies I am only concerned by what I will gain by adding them: if it doesn't add much value, then I skip. Starting with a POC is usually safe because it helps you "fail fast".

If you work in an agile development you might know the process and you might also dislike it. The point here is that the faster you fail, the faster you iterate and the faster you produce something that works in a predictable way. It is a loop between feedback and failure until success.

Client

Here is a list of dependencies that I always install on any React app:

Continue reading %How I Designed & Built a Fullstack JavaScript Trello Clone%

by Moustapha Diouf via SitePoint