Web Design Weekly #206

Headlines

The Ownership Problem

Cap Watkins puts forward the point that if you want to produce great products, we as developers and designers shouldn’t hang onto the ownership of certain sections of a project, we should co-own everything. (blog.capwatkins.com)

The U.S. Web Design Standards (gsa.gov)

Sponsor Web Design Weekly and reach 23,756 developers

Articles

PostCSS Deep Dive

The first post in a new series by Kezz Bracey that aims to explore all the amazing things you can do with PostCSS. (tutsplus.com)

Easy content organisation with HTML5

Steve Faulkner reminds us that with HTML5 it is extremely easy to express the main content regions (aside, footer, header, main and nav) semantically in our code. (paciellogroup.com)

Managing features in Bootstrap

Mark Otto, the creator of Bootstrap shares how the core team manage and develop features for Bootstrap. (markdotto.com)

Making Your Website Design Accessible

An interview with Bartek Lenarth, who shares some great advice from the point of view of a blind user. (blogs.adobe.com)

Why Performance Matters – The Perception Of Time

In this article Denys Mishunov tackles some core questions in relation to performance, like: Why do time and performance matter? Why don’t users like to wait? And why does faster not always mean better in the online world? (smashingmagazine.com)

How to undo (almost) anything with Git (github.com)

Interoperable CSS (youtube.com)

Tools / Resources

Greenkeeper – Your software, up to date, all the time

Tired of keeping all your dependencies up to date? Greenkeeper is here to help. It knows when your dependencies have been updated and simply sends you a pull request with the new package.json. (greenkeeper.io)

How To Build An Awesome Form

A quick guide on how to cope with most common design problems when creating a form. (medium.com)

Clipboard.js – A modern approach to copy text to clipboard (github.io)

Checklist for your new Open Source JavaScript Project (github.io)

Supercharged – Web Performance Video Series (youtube.com)

Gatsby — React.js static site generator (github.com)

Inspiration

Ambition, Persistence and Self-Motivation (heropress.com)

Design Disruptors (designdisruptors.com)

Elastic Progress (tympanus.net)

Jobs

Web Engineer at Vine

Vine is building the world’s most influential mobile video platform. We’re a small team, headquartered in NYC, that ships products affecting hundreds of millions of people around the world. We genuinely love what we do and are looking for others who share this passion. If this sounds like fun to you, please get in touch. (vine.co)

UI Designer at SmugMug

We’ve got an open spot for a UI Designer to stitch a seamless backdrop and make the user experience flow. Our customers trust us to safeguard their memories, their businesses and their dreams. The last thing they need is for the site to interfere. Millions of eyes scour SmugMug each day, so if you’re ready to go full-frontal we’ll make you a star. (smugmug.com)

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

Last but not least…

JSCity

Visualising JavaScript source code as navigable 3D cities. (github.com)

Pretty Git Diff View (github.com)

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

by Jake Bresnehan via Web Design Weekly

How to deploy an Online Vorlon.js Server with Authentication

When our team of engineers and tech evangelists at Microsoft set out to create Vorlon.js — an open source, extensible, platform-agnostic tool for remotely debugging and testing your JavaScript—we wanted to keep it as simple as possible. It is our main concern, our mojo. That is why you only have to run npm install –g vorlon to get a Vorlon server and that you only have to add ONE line of code in your client to connect it to the Vorlon dashboard. This is why in the early version we did not implement any kind of authentication.

[author_more]

In this article I will explain to you why we added authentication and how to activate it.

If you never used Vorlon.js, please read this article to learn why we made Vorlon.js and how to use it.

Why we implemented authentication

When we did our first demos in public we published our own Vorlon server instance in a Microsoft Azure website. At this time we didn’t have a way to specify a login and password for the dashboard.

This once led to a huge fail :)

Someone in the public copied the url displayed on my screen and accessed the dashboard from his computer. This messed up with the one displayed on my computer and totally screwed our demo. YAY! \o/

From this fail we made the decision to implement a simple authentication. This is obviously helping us for our demos, but it also helps you in the case you want to publish a publicly accessible version of the dashboard.

How to deploy Vorlon.js online easily?

Vorlon is really easy to install. All you need to do is have Node.js Package Manager (npm) on your box and run the correct command line. Everything is available to you from the npm platform and you can start your instance by typing vorlon in your command line.

From there you need to make your server accessible through the internet and open the correct TCP port, etc. This can be a bit complicated. If you do not want to manage that yourself, you can use a feature we added for you in our Github repository.

At the bottom of the repo, in the readme section, you will find a Deploy to Azure button.

By clicking on this, we automatically get you through a 3-step process which will:

• Create an Azure website on your Azure subscription*
• Deploy the latest version of Vorlon on it

*if you do not have an Azure subscription, and want to get one (with free options), see the More Information section at the end of this article.

All of this is automated. You can see a quick video of this here:

[embed src="https://www.youtube.com/embed/vkAeBU-YdNo" width="600" height="400"]

How to activate authentication

PLEASE NOTE: For now, the authentication is only available in the development-0.0.16 branch on the GitHub repo. To get it, you need to deploy the code from this branch (manually somewhere you want or using Azure deploy). It will be available on the npm package in the 0.0.16 version we should release by the end of September.

We implemented authentication using passport.js. We chose to activate a simple mode which lets you specify a login and password. For now ,you can only specify one account. We may implement a more sophisticated version of this later (including Twitter and Facebook auth and multiple accounts management).

Continue reading %How to deploy an Online Vorlon.js Server with Authentication%

by Etienne Margraff via SitePoint

Design and Collaborate More Effectively with Adobe Creative Cloud for Teams

This article was sponsored by Adobe. Thank you for supporting the sponsors who make SitePoint possible.

Adobe has all the tools for a professional graphic design, web design or photo-editing studio to create amazing work. Their products have been the flagship products for each of these fields for decades. As a solo designer, I've used them time and time again for creating graphics, editing images, and building websites. Many companies use Adobe products across departments and teams, because they are easy to use, and they increase interaction and productivity between team members.

Now Adobe has released a suite of tools and services built specifically to improve design teams' collaboration and productivity, giving us all more time to focus on the creative process itself, rather than file administration and sharing.

Here are the main reasons I consider Adobe Creative Cloud for teams to be a game-changer for creative teams and working with clients.

File Sharing

One of the best features of Creative Cloud for teams is the ability to share files, folders and libraries with colleagues inside or outside of their organization. 

A problem I've often faced when working with clients and my own teammates is the added work of sharing our projects. Whether you work with a remote team, or you want to send a preview file to your client, there has always seemed to be a barrier, or added steps in the viewing and feedback process.

A team member can drop a file into their Adobe Creative Cloud Library. A Creative Cloud Library acts as a container where you store a given collection of assets. That Library can be share with other folks on your team so that the assets are used consistently. Even better, they are linked so that if one person modifies something in the Library (changing a logo from blue to red, for example), it’s automatically updated for everyone else who has access to that library. If team members are working together on a project, they can share those files. This keeps from having to use third-party software or large file transfer sites.

Continue reading %Design and Collaborate More Effectively with Adobe Creative Cloud for Teams%

by James George via SitePoint

3 JavaScript ORMs You Might Not Know

When I wrote my first JavaScript lines, I never thought it would go beyond browser scripting and making interactive websites. I was wrong, since Javascript can be used literally everywhere:

• You can use it in the browser and you don’t have to be restricted to ECMAscript with DOM API. Languages like CoffeeScript and Dart, transpilable to plain old JavaScript, can help you develop faster and better.
• You can use it in the server. Node.js and plenty of its frameworks are increasing in number and helping JS developers become full-stack developers.
• You can use it for mobile apps. Using Cordova and frameworks like Ionic or NativeScript, you can build mobile apps faster without the need to know native development in Java or Swift/Objective-C. You can even share the source code between mobile platforms.
• You can build IoT. SitePoint has published some articles by Patrick Catanzariti which can be very helpful for this purpose.

With an increased complexity of the application you're developing, you would need something to help you deal with all the data you're storing in the database, whether in a DB server (like PostgreSQL), in the embedded SQLite of mobile devices, or in the browser. Here comes the need for ORMs. The Java community has Hibernate, the PHP developers can use Doctrine ORM, and the JavaScript community has its own.

Continue reading %3 JavaScript ORMs You Might Not Know%

by Aldo Ziflaj via SitePoint

Containerized WordPress Development with Dockunit.io

Writing WordPress themes and plugins to be publicly distributed requires meeting minimum system requirements, specifically PHP 5.2.4. Since WordPress supports PHP 5.2.4 so must your public plugins and themes. PHP has changed immensely between PHP 5.2 and now PHP 7 RC.

To ensure your software is compatible with all of the WordPress community it's important to test your software in a few major PHP versions, i.e. 5.2.4, 5.6, and 7.0 RC. We could of course test more versions, but picking three major ones is a safe bet.

How do we test our plugin or theme in three major versions of PHP? Generally, our system can only run one version of PHP at a time. We could spin up different virtual machines with different PHP versions, however this is pretty difficult. The answer is containers with Docker.

Dockunit is a utility for running containerized software tests. Let's setup Dockunit to be used with a plugin or theme (this guide assumes you are working on some sort of Unix system such as OS X or Ubuntu):

Continue reading %Containerized WordPress Development with Dockunit.io%

by Taylor Lovett via SitePoint

Gourmet Natural Restaurant

Gourmet Natural is located in the heart the Golden Triangle, near the popular resorts of Vale de Lobo and Quinta do Lago. Gourmet Natural is full of charm, charisma and elegance. site with animations like opening a sheet of paper

by csreladm via CSSREEL | CSS Website Awards | World best websites | website design awards | CSS Gallery

DMCS – WordPress Fashion Theme

DMCS is the Minimal Fashion WordPress WooCommerce Theme. The theme is designed for eCommerce websites yet focusing on stunning product image and lookbook.

by csreladm via CSSREEL | CSS Website Awards | World best websites | website design awards | CSS Gallery