Skip to main content
React Vis Banner

Creative / Development Inspiration 39

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.

https://www.webprofits.com.au/lp/seo-analysis/

 

AirBNB

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?

https://www.airbnb.co.uk/host/homes

 

Designer Resources, Examples and Inspiration

 

A Step by Step Guide to Designing a Pet Diet App

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!

https://uxdesign.cc/ui-ux-case-study-a-step-by-step-guide-to-the-process-of-designing-a-pet-diet-app-d635b911b648

 

How Dropbox was redesigned for Mobile

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.

https://medium.com/dropbox-design/fostering-focus-for-small-screens-34a9f338668c

 

Development Snippets, Samples, and Articles

 

Carl.JS

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.

https://github.com/Paul-Browne/carl.js

 

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?

https://medium.com/dev-channel/hacking-user-perception-to-make-your-websites-and-apps-feel-faster-922636b620e3

 

ReactPress – WordPress Starter-Kit

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.

https://github.com/nyl-auster/reactpress

 

WP-Rig

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.

https://wprig.io

 

React-Vis – Charting Library

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?

https://uber.github.io/react-vis/

 

A bit of everything

 

Zeplin IO

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.

https://zeplin.io/

 

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.

https://www.forbes.com/sites/emilyjoffrion/2018/07/09/the-designer-who-changed-airbnbs-entire-strategy

 

Atom IDE Logo

My Atom Package and Theme setup

I have recently moved over to Atom from Brackets. I didn’t want to change IDEs but Brackets doesn’t play well with ReactJS (I talk about that a little more in my Beginners Guide to React).

 

When I was using Brackets I had it set up the way I thought was perfect. A number of plugins to allow me to add a section of HTML with the press of a key, or auto-correct on a function when I typed in incorrectly in my sleepy stupor. Upon finding myself in a new program, I wanted to replicate that set up. Turns out that was possible!

 

Here is my current (and probably about to grow) setup in Atom.

 

Theme:

Base16 Torromow Dark

Although this is installed as standard with Atom, god I love it. Slightly darker than the theme I was using with Brackets, and a lot nicer on the eyes.

https://github.com/atom/base16-tomorrow-dark-theme

 

 

Packages

Emmet

This goes without saying. It allows dynamic snippets, speedy coding and is customizable.

https://atom.io/packages/emmet

 

File Icons

Rather than having boring grey default icons, this packaged added a bit of colour, and made it easy to see what I was working on. A worthy addition.

https://atom.io/packages/file-icons

 

WordPress AutoComplete

Autocomplete support for WordPress actions and filters in the Atom editor. A massive help when in the zone.

https://atom.io/packages/wordpress-autocomplete

 

Docblockr Package

Designed to make writing documentation faster and easier. Use standard documentation formatting, this just helps you along.

https://atom.io/packages/docblockr

 

Autocomplete+ Paths Suggestions

Adds path autocompletion to autocomplete+ depending on scope and prefix. Supports custom scopes defined by the user.

https://atom.io/packages/autocomplete-paths

 

I am always looking to make my workflow faster, and easier so if you can suggest any other great Atom packages, stick it in the comments!

Good Designer - Bad Designer

Creative / Development Inspiration 26

Good Designer, Bad Designer

Tarus Kohli breaks down the different between good designers and bad designers with some great sketches.

https://uxplanet.org/good-designer-bad-designer-eff79d356a75

 

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.

https://www.sitepoint.com/beginners-guide-webpack-module-bundling/

 

Gooact: React in 160 lines of JavaScript

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.

https://medium.com/@sweetpalma/gooact-react-in-160-lines-of-javascript-44e0742ad60f

 

Toast UI Calendar

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.

https://github.com/nhnent/tui.calendar

 

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.

https://www.twilio.com/blog/2018/04/choosing-cameras-javascript-mediadevices-api.html

 

First Look at WordPress Gutenberg

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.

https://code.tutsplus.com/tutorials/first-look-at-wordpress-gutenberg–cms-31036

 

Simple WordPress Login Page Tutorial

Simple WordPress Custom Login Page

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.

“$” – This signals the end of the string

 

For more htaccess expressions see: https://httpd.apache.org/docs/2.4/rewrite/intro.html

 

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.

For more info on flush_rewrite_rules() go to https://codex.wordpress.org/Function_Reference/flush_rewrite_rules

 

On De-Activation

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.

 

For more info on login_headerurl go to: https://codex.wordpress.org/Plugin_API/Filter_Reference/login_headerurl

 

Add Custom Link

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' );
?>

For more information on login_enqueue_scripts() go to: https://codex.wordpress.org/Plugin_API/Action_Reference/login_enqueue_scripts

 

To download the full code as a plugin (the CSS will need editing, but its a start):

https://github.com/justlikethisdesign/wp-customlogin.git

 

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.

WordPress Code Snippets

WordPress Code Snippets

When I first started building themes with WordPress, I spent a lot of time looking at other programmer’s code. I would find a snippet, pull it apart and learn from it. Rinse and repeat. I learnt a lot from this process, and still do. Other people will always be finding solutions to problems you have, or problems similar.

 

I have decided to start posting specific snippets of code that I use time and time again for other people to get some use out of them, and learn as I did.

 

All these snippets will be fully documented, so as to provide as much understanding as possible. I will also try to explain how they can be used, give ideas on how to adapt them, and link to other websites that I use myself.

Screenshot of Spoon plugin google

Turbo VM Extension injecting code

For those of you who have found the same thing. Enter Turbo VM Extension.

 

I was in the latter stages of developing a WordPress theme when I found a strange section of code inserted at the bottom of the page. I originally thought it was a mistake in my code as there was a large white space at the bottom of the page until I used the console log on Google Chrome and noticed the following:

 

<div id=”spoon-plugin-kncgbdglledmjmpnikebkagnchfdehbm-2″ style=”display:none”></div>

 

Upon Googling this issue I found the snippet turned up in a few places. At the bottom of a piece of code on Github, bottom of forum signatures, and inside the code of other WordPress themes. Always at the bottom.

 

That day I had downloaded Turbo.net Launcher, a browser emulator. To create a login for the launcher I used spoon.net (seeing the connection now?). Turbo VM Extension is a Google Chrome Extension. When it is switched on, for some reason it injects itself into specific websites.

 

For now I have disabled the extension whilst I research it a little more…