It’s a fight to see who can get the best product out. Sketch is doing well, but Adobe keep upping their game. The newest feature seems pretty exciting!
By creating forms, you build an interface where dialogue happens. So, the goal here is to make sure that the form asks the right questions at the right time.
This web app looks like it is going to be a life changer for me. The full code editor, in the cloud. Starting with 3GB free, before any money is needed.
Too many people get precious about those documents—I know I’ve been guilty of it. Somewhere along the way, detailed wireframes, high-fidelity comps, and motion prototypes all got enshrined as critical deliverables. Those design artifacts are unimportant. Only one deliverable matters: the product itself.
I am continually trying to speedy up and improve my WordPress workflow process. Unlike a lot of JS framework communities, WordPress seems to be a little behind in creating a fast and efficient roll out process. The whole thing seems a little “work it out yourself”.
That being said, there are hundreds of tools littered around the interwebs once you start looking. I have been aware of Roots, and the resources they have created for a while, but never had the time to properly look into them. Today I decided to look into Trellis and Bedrock.
What the Hell is Trellis? Bedrock who?
Trellis is labelled as “WordPress development and production servers done right”. Basically a complete WordPress server on your local machine, with the ability to deploy and update with a single command. This also means that if someone else on your team needs to spin up the theme to take a look, it is as easy as a few commands. No more sending a zip file across email.
Bedrock is a WordPress boilerplate that completely overhauls the standard environment setup. It means that the project is organised, and just easier to work with.
I will only go as far as setting up a local development environment in this article. I will come back and write an article on remote servers once I have my head around the process.
Installing the Requirements
To begin with Trellis runs on Vagrant – a tool for building and distributing development environments. And Vagrant runs on VirtualBox. So before we can do anything, these two need to be installed.
Firstly, to install VirtualBox, go to https://www.virtualbox.org/wiki/Downloads and find the package for your machine. As I am running Windows I have a feeling this process is going to be harder for me, than someone on Mac on Linux. We shall see…
Vagrant takes care a dependency called Ansible for us. This is a automation system that handles application deployment and task execution. In essence removes the need to run repetitive tasks ourselves. Vagrant only installs Ansible within the project, so if you are going to consistently roll out new project, to save time it would be worth installing locally from https://github.com/ansible/ansible. This is not essential thought.
Create a Project
Now to get into the fun bit. Roots recommend a directory structure that is not the WordPress standard. This is handled by Bedrock, so no problems here.
It looks like this:
Firstly we need a project folder to put everything in.
mkdir example.com && cd example.com
Now we need to introduce Trellis.
At this point you are working with GitHub and SSH. Make sure that you have a SSH key set up on your computer, and also on your GitHub account. If you have not, you will need to do this now.
git clone --depth=1 [email protected]:roots/bedrock.git site && rm -rf site/.git
So far so good!
Configure Your Site
Trellis is built around the concept of “sites”. Each Trellis managed server (local or remote) can support a single, or multiple WordPress sites. Trellis handles the configuration everything required to host a site. This includes the databases, folder directories and Nginx vhosts. This means that this process only needs to be carried out once. After this everything can be run from here.
Trellis uses YAML files for each environment. There are two files that you need to be aware of.
Normal settings file: group_vars/development/wordpress_sites.yml
Passwords and secrets: group_vars/development/vault.yml
Normal Settings
This file manages the top level settings that is used to define all your sites. This is the bare minimum example that is given in the Trellis documentation.
Each site starts with the website name as the key. This is used by Trellis internally to name the site and as a default variable throughout the build. It is recommended that sites are named after the domain, so that it is easy to understand which is which.
To access the development site on your localhost, set the canonical link to the URL of your choice. Trellis will set your system to show your WordPress site when you visit this domain. In the example above, visiting www.example.test will take you to the site.
Under this site name are the settings for that particular site. There is no need to redefine these variables, but if you do, be aware you will also have to edit the corresponding entry in the Password file.
Passwords and Secrets
This file is used by Ansible. It is used as we do not want to include passwords in our Git repository. This is an example of the vault.yml file given in the documentation. As you can see the site names match in both files.
Spinning Up
To get the server up and running, three things need to happen. Firstly move into the Trellis folder, inside your project root. Secondly, run the following command:
Vagrant up
Vagrant will go away and get certain dependencies it needs to run. Once these are installed you will need to re-run the command.
At this point I found on my work machine Vagrant got an error when trying to download a build essential: build-essential_12.1ubuntu2_amd64.deb
The console returned the following error message:
The following SSH command responded with a non-zero exit status.
Vagrant assumes that this means the command failed!
apt-get install -y -qq build-essential curl git libssl-dev libffi-dev python-dev
Stdout from the command:
Stderr from the command:
E: Failed to fetch http://archive.ubuntu.com/ubuntu/pool/main/b/build-essential/build-essential_12.1ubuntu2_amd64.deb 400 Bad Request [IP: 91.189.88.152 80]
E: Unable to fetch some archives, maybe run apt-get update or try with --fix-missing?
I was able to fix the issue. Once these packages had properly installed, I ran
vagrant reload --provision
To kick off the machine again.
Once running, this will take around 5 – 10 minutes to complete. As soon as this is finished, your WordPress site is accessible. In your browser following the canonical URL set in settings earlier to see the site.
When you need to shut down the machine, you can roll it down without deleting the whole machine by running:
Vagrant halt
This is essentially shutting the computer down. To start it back up just run:
Vagrant up
Once this has been run once and you have the hang of it, your workflow speed is dramatically increased. By including Gulp into your theme development will turn the whole process of developing WordPress themes so much more enjoyable. Rather than messing about with the setting up of environments you can just be creative!
Just as much for the web designer as the developer this week. Some brilliant UX inspiration and how to get users hooked on your interface. On top of that two new beautiful web frameworks to bootstrap your newest project, and a life changing chart library. This and more in this weeks web design and development inspiration rundown.
Website Inspiration
Big Little City
This is not your standard website. I usually post more commercial / business based websites, but this really caught my eye. It takes a section of the world (using real world maps) and creates a 3D rendered globe, with roads and all!
The conventional interpretation of human-centered design wildly oversimplifies the relationship between people and technology. It’s time for a more nuanced approach, writes argodesign’s Mark Rolston.
A details menu with boxes that slide out in an irregular grid. The grid items get revealed individually with delays from the top right corner of the page.
I love a good chart. I have featured other great ones on the first blog of the series, and the 20th. This one is the cream of the crop. This is not a one size fits all solution, but rather charts for the modern web. Easier zooming and panning, event triggering, truly responsive, and speedy!
If a picture is worth a thousand words, it’s hard for me to imagine there’ll be much value in the text of an article illustrated by a generic stock image.
A great article on how the internet has turned into a place of uselessness, and how that can easily be changed. Loading numerous tracking scripts, images and adverts, that may or may not be of use.
How Dropbox was redesigned for mobile, AirBNB has a top quality landing page, and how to hack user perceptions. This weeks design development inspiration covers this, as well as lots more. I also got a bit over excited about using WordPress with React, and making WordPress that little bit faster. Also, AirBNB changed their business strategy. Well worth the read!
Website Inspiration
This week I tried to focus on high quality landing pages. Not just from a design perspective, but from a “do the job” perspective as well. It turns out that “pretty” landing pages, aren’t necessarily the best…
WebProfits
Simple. To the point. Easy to understand. It doesn’t shout “pretty”, but it does do the thing it says it does. Gets you SEO analysis. An immediate call to action, and a visual showing an increase in users.
We all know this company. AirBNB are known for their constant data analysis, always pushing to improve user experience. The page for signing up to host your home does it well. A simple form showing how much you could make from your home. Thats why you’re there, right?
A well broken down approach from user data to design of making an app. It covers the lessons learnt, and how each element needs thinking about as its own thing!
The designer behind the new Dropbox mobile interface breaks down how they changed the design of the app. A great insight into the business decisions and internal workings of Dropbox, and how it is a constant process.
A Conditional Asset Resource Loader in about 500 bytes of JavaScript. A lazy but efficient way of managing your resources. I covered Critters on Design and Dev Inspiration 33, if you require a more built in Webpack approach.
Hacking user perception to make your websites and apps feel faster
When planes at Houston Airport landed close to the terminal, passengers complained about baggage delays. So they moved the planes away so passengers had to walk further. No more complaints. How can this be applied to apps and websites?
Bringing ReactJS to WordPress. Using Next.js and WordPress this starter-kit is a fast way to get off the ground running. Definitly worth a look for clients used to using WordPress.
A progressive WordPress theme rig. Built with fast development and lightening speed websites in mind, this starter theme is definetly worth a look. Modern processes bundled into one package.
This ReactJS based charting library has all the graphs you could possibly need, as well as all the options. Some great examples, use cases and with almost 4000 stars on Github, who can miss out on it?
I am surprised I hadn’t come across Zeplin before. A brilliant website to help teams work together to build products. For both designer, developer and the whole business site of the team. Think Basecamp, but tailored for design. Includes XD and Sketch integration to save time messing about with exports.
Design Thinking and Storyboarding Changed AirBNBs Entire Business Strategy
An incredibility insightful interview by Forbes, with the Rebecca Sinclair, founder of Honest Design. She helped AirBNB disrupt itself, and change the business strategy by changing how the business saw itself.
Website Inspiration, pure CSS animations, know your ARIA, and the time for container queries. This weeks Creative and Website Development Inspiration covers some incredible example of the direction web is going. We also touch on some brilliant ReactJS packages, as well as show what exactly is needed in a web style guide.
Website Inspiration
Five by Five
A startup consultant agency that have gone the whole way with their website. Built on WordPress, it loads quickly, and is very very well designed.
Although not as fast to load, this website can maybe be let off. It is not a sales site, but more of a creative/art piece. The way the user can control the perceptive is very clever and navigating around the site is quite unique.
Creating websites is getting more and more complex and is usually not a one person job. It is important to ensure that design is consistent and optimised to meet business objectives and create enjoyable experiences for users.
One of the ways to ensure that team is on the same page when designing separate parts of the website or saving designs from developers is to create design documentation or a web design style guide.
What to consider when choosing colours for data visualisation
Data Visualisation can be defined as representing numbers with shapes – and no matter what these shapes look like (areas, lines, dots), they need to have a color. Sometimes colors just make the shapes visible, sometimes they encode data or categories themselves
I have found more articles than usual this week, and that is not meant in a negative way. There is serious potential for all of the below links, maybe they will help inspire you.
Pure CSS Watch Animation
Starting this section of with a really really nice example of what can be done with CSS.
A primer on appropriately using aria-hidden=’true’ and role=’none/presentation’. They each do very different things to elements, but their purposes are sometimes confused by developers.
ProppyJS is a tiny 1.5kB JavaScript library for composing props (object that components receive to render themselves).
The primary purpose of this library is to lift the state one level above your UI components. So that your components are always stateless themselves, while you compose your props separately.
Although container queries are not yet built into browsers. eqio allows you to attain the holy grail of responsive web development/design systems: components that can adapt their styling based on their width, not the browser‘s.
I have recently started learning ReactJS. Something that I should have done a long time ago. In doing so I have come across loads of great resources (heres a list of learning resources – my Beginners Guide to ReactJS). I recently found Grommet.
A beautiful React UI component which focus on essential experience. At over 3k stars, these components take pride in their simple yet beautiful design.
A Beginner’s Guide to Webpack 4 and Module Bundling
This article is aimed at those who are new to Webpack, and will cover initial setup and configuration, modules, loaders, plugins, code splitting and hot module replacement. This is something I am yet to get into, but once I have finished my current project will be jumping all over.
How to build own React clone in a matter of minutes. In this tutorial you will be shown how to write a fully functional React clone, including Component API and own Virtual DOM implementation.
I have mentioned a Toast library before on Thoughts and Stuff. The Toast UI Chart. This time they have created a fully customisation calendar! Experience various view types, default popups, dragging or resizing schedules and customizable theme which is easy to use.
Choosing cameras in JavaScript with the mediaDevices API
The project I am currently involved in has me looking into implementing device cameras across different browsers and devices, if the project had been built on Node I would have most certainly needed this article. Most smart phones come with a front and back camera, when you’re building a video application for mobile you may want to choose or switch between them. This simple tutorial walks you through the steps.
The new Gutenberg editing interface is a major change coming to WordPress 5 this year, and it will affect WordPress plugin developers, theme designers, and website creators. In this video you will be shown you how to set up Gutenberg as a plugin on your existing site and how to get started using the Gutenberg editor to create content.
As a site admin, or a user of the admin area of WordPress you will see a lot of the login page. It does the job for a personal blog, but if the site you are developing is for a client it probably shouldn’t be covered with the WordPress logo and links. These few snippets will help you customise the WordPress login page, and redirect it to a prettier URL. The final code can either be dropped into your functions.php file and work right off the bat, or be put into a plugin for installation in any theme.
WordPress provides several hooks and functions that can be used to completely overhaul the login page, allowing us to change the logo, background, font and colours of the whole page. I will only cover the basics, but with a few adjustments you could make changes such as linking it to the customizer (I will discuss that in another post).
Pretty Login Url
The standard login page for WordPress is www.yourdomain.com/wp-login.php, which for a developer is completely fine. However, explaining to someone who is not tech savvy what to type every time they forget how to get to the login page can be a nuisance.
A solution to this is to add a htaccess rewrite for “wp-login.php” redirecting it to “login”.
<?php // Add rewrite rule and flush on plugin activation
register_activation_hook( __FILE__, 'htaccess_activate' );
function htaccess_activate() {
htaccess_rewrite();
flush_rewrite_rules();
}
// Flush on plugin deactivation
register_deactivation_hook( __FILE__, 'htaccess_deactivate' );
function htaccess_deactivate() {
flush_rewrite_rules();
}
// Create new rewrite rule
add_action( 'init', 'htaccess_rewrite' );
function htaccess_rewrite() {
add_rewrite_rule( 'login/?$', 'wp-login.php', 'top' );
}
?>
To break down the rewrite snippet, the following occurs:
On Activation
Line 2 – When the plugin / theme is activated the htaccess_activate() function is run Line 4 – It accesses the htaccess_rewrite() function Line 16 – The WordPress function add_rewrite_rule is called
The add_rewrite_rule() function is used add information to the websites .htaccess file. In this instance ‘login/?$’ is the requested URL, the one we want the user to be directed too. .htaccess expressions can be confusing but to make sense of this line I will briefly touch on it.
“login/” – This is the URL ending you wish to use
“?” – This term means that the character directly before it (the “/” ) does not have to be there, it will work either way.
The second argument in add_rewrite_rule() is the redirect. In this case it is “wp-login.php”, and finally “top” which means we want to put the htaccess code at the top of the htaccess file.
Line 5 – It accesses the built in WordPress function flush_rewrite_rules()
flush_rewrite_rules() is used to remove all the htaccess code, and re-write it with the new code. This can be used for adding or removing, as shown in this example. It should only be used when activating or deactivating and plugin or theme. It is very server heavy and should never be used on the init hook.
Line 11 – When the plugin / theme is de-activated the htaccess_deactivate() function is run Line 14 – It accesses the built in WordPress function flush_rewrite_rules()
Custom Logo and Link
Changing the logo
<?php //Remove login wordpress link
add_filter('login_headerurl', 'remove_wordpress_login_link');
function remove_wordpress_login_link(){
return ""; // your URL here
}
?>
The login_headerurl is used to filter the URL of the logo on the login page. The default links to wordpress.org but we can alter it as shown above. Just add a new URL on line 6.
The following code adds a link below the login section using the login_footer action. This could be used to link to extra documentation, or your own site to ensure your clients are always reminded of you.
The login_footer action adds code immediately below the default login screen.
<?php
function login_footer_link() { ?>
<p style="text-align: center; margin-top: 1em;">
<a style="color: #999; text-decoration: none;" href="http://yourdomain.com">Click here for more information
</a>
</p>
<?php }
add_action('login_footer','login_footer_link');
?>
Making it pretty
Heres were you can get your design face on, The CSS below is fairly self-explanatory, I used Google Chromes Inspect console (ctrl + shft + i) to target the specific elements on the page and style them as needed.
The function login_enqueue_scripts() was used to target the scripts specifically on the login page. This should be used rather than including your CSS in the main CSS file, as that file is not loaded on the login page.
<?php
// add a new logo to the login page
function login_logo_fix() {
?>
<style type="text/css">
html, body {
background: #fff;
}
.login #login h1 {
padding: 0;
}
.login #login h1 a {
background-image: url( '<?php get_template_directory_uri();?>/login/logo.png') !important; );
background-size: contain;
width: 70%;
margin: 0 15%;
height: 60px;
}
.login #nav a,
.login #backtoblog a {
color: #fff;
}
.login #nav a:hover,
.login #backtoblog a:hover {
color: #0075c9;
}
</style>
<?php
}
add_action( 'login_enqueue_scripts', 'login_logo_fix' );
?>
I hope this has helped you understand the basics of a few functions, as well as giving you a start on customising your login page. Let me know in the comments below if you have any queries.
