Gatsby Serverless Functions And The International Space Station

 Gatsby recently announced the launch of “functions”. In this article, Paul Scanlon explains how to get the current location of the International Space Station (ISS) as it orbits the Earth in realtime using Gatsby Functions and then display it 

a 3D interactive globe using React Three Fibre. 

Gatsby recently announced the launch of Functions which opens up a new dimension of possibilities — and I for one couldn’t be more excited! With Gatsby now providing Serverless Functions on Gatsby Cloud (and Netlify also providing support via @netlify/plugin-gatsby), the framework that was once misunderstood to be “just for blogs” is now more than ever, (in my opinion) the most exciting technology provider in the Jamstack space.

Getting Started #

With Gatsby Functions, you can create more dynamic applications using techniques typically associated with client-side applications by adding an api directory to your project and exporting a function, e.g.

|-- src
  |-- api
     -- some-function.js
  |-- pages

// src/api/some-function.js
export default function handler(req, res) {
  res.status(200).json({ hello: `world` })
}

If you already have a Gatsby project setup, great! but do make sure you’ve upgraded Gatsby to at least version v3.7

npm install gatsby@latest --save

If not, then feel free to clone my absolute bare-bones Gatsby starter repo: mr-minimum.

Before I can start using Gatsby Functions to track the International Space Station, I first need to create a globe for it to orbit.

Step 1: Building The 3D Interactive Globe #

I start by setting up a 3D interactive globe which can be used later to plot the current ISS location.

Install Dependencies #

npm install @react-three/fiber @react-three/drei three three-geojson-geometry axios --save

Create The Scene #

Create a new file in src/components called three-scene.js

// src/components/three-scene.js
import React from 'react';
import { Canvas } from '@react-three/fiber';
import { OrbitControls } from '@react-three/drei';

const ThreeScene = () => {
  return (
    <Canvas
      gl={{ antialias: false, alpha: false }}
      camera={{
        fov: 45,
        position: [0, 0, 300]
      }}
      onCreated={({ gl }) => {
        gl.setClearColor('#ffffff');
      }}
      style={{
        width: '100vw',
        height: '100vh',
        cursor: 'move'
      }}
    >
      <OrbitControls enableRotate={true} enableZoom={false} enablePan={false} />
    </Canvas>
  );
};

export default ThreeScene;

The above sets up a new <Canvas /> element and can be configured using props exposed by React Three Fibre.

Elements that are returned as children of the canvas component will be displayed as part of the 3D scene. You’ll see above that I’ve included <OrbitControls /> which adds touch/mouse interactivity allowing users to rotate the scene in 3D space

Ensure ThreeScene is imported and rendered on a page somewhere in your site. In my example repo I’ve added ThreeScene to index.js:

// src/pages/index.js
import React from 'react';

import ThreeScene from '../components/three-scene';

const IndexPage = () => {
  return (
    <main>
      <ThreeScene />
    </main>
  );
};

export default IndexPage; 

This won’t do much at the moment because there’s nothing to display in the scene. Let’s correct that!

Create The Sphere #

Create a file in src/components called three-sphere.js:

// src/components/three-sphere.js
import React from 'react';

const ThreeSphere = () => {
  return (
    <mesh>
      <sphereGeometry args={[100, 32, 32]} />
      <meshBasicMaterial color="#f7f7f7" transparent={true} opacity={0.6} />
    </mesh>
  );
};

export default ThreeSphere;

If the syntax above looks a little different to that of the Three.js docs it’s because React Three Fibre uses a declarative approach to using Three.js in React.

A good explanation of how constructor arguments work in React Three Fibre can be seen in the docs here: Constructor arguments

Now add ThreeSphere to ThreeScene:

// src/components/three-scene.js import React from 'react'; import { Canvas } from '@react-three/fiber'; import { OrbitControls } from '@react-three/drei'; + import ThreeSphere from './three-sphere'; const ThreeScene = () => { return ( <Canvas gl={{ antialias: false, alpha: false }} camera={{ fov: 45, position: [0, 0, 300] }} onCreated={({ gl }) => { gl.setClearColor('#ffffff'); }} style={{ width: '100vw', height: '100vh', cursor: 'move' }} > <OrbitControls enableRotate={true} enableZoom={false} enablePan={false} /> + <ThreeSphere /> </Canvas> ); }; export default ThreeScene; 

Not very exciting, ay? Let’s do something about that!

Create The Geometry (To Visualize The Countries Of Planet Earth) #

This next step requires the use of three-geojson-geometry and a CDN resource that contains Natural Earth Data. You can take your pick from a full list of suitable geometries here.

I’ll be using admin 0 countries. I chose this option because it provides enough geometry detail to see each country, but not so much that it will add unnecessary strain on your computer’s GPU.

Now, create a file in src/components called three-geo.js:

// src/components/three-geo.js
import React, { Fragment, useState, useEffect } from 'react';
import { GeoJsonGeometry } from 'three-geojson-geometry';
import axios from 'axios';

const ThreeGeo = () => {
const [isLoading, setIsLoading] = useState(true);
  const [geoJson, setGeoJson] = useState(null);
 
  useEffect(() => {
    axios
      .get(
   'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_110m_admin_0_countries.geojson'
      )
      .then((response) => {
        setIsLoading(false);
        setGeoJson(response.data);
      })
      .catch((error) => {
        console.log(error);
        throw new Error();
      });
  }, []);

  return (
    <Fragment>
      {!isLoading ? (
        <Fragment>
          {geoJson.features.map(({ geometry }, index) => {
            return (
              <lineSegments
                key={index}
                geometry={new GeoJsonGeometry(geometry, 100)}
              >
                <lineBasicMaterial color="#e753e7" />
              </lineSegments>
            );
          })}
        </Fragment>
      ) : null}
    </Fragment>
  );
};

export default ThreeGeo;

There’s quite a lot going on in this file so I’ll walk you through it.

1. Create an isLoading state instance using React hooks and set it to true. This prevents React from attempting to return data I don’t yet have.
2. Using a useEffect I request the geojson from the CloudFront CDN.
3. Upon successful retrieval I set the response in React state using setGeoJson(...) and set isLoading to false
4. Using an Array.prototype.map I iterate over the “features” contained within the geojson response and return lineSegments with lineBasicMaterial for each geometry
5. I set the lineSegments geometry to the return value provided by GeoJsonGeomtry which is passed the “features” geometry along with a radius of 100.

(You may have noticed I’ve used the same radius of 100 here as I’ve used in the sphereGeometry args in three-sphere.js. You don’t have to set the radius to the same value but it makes sense to use the same radii for ThreeSphere and ThreeGeo.

If you’re interested to know more about how GeoJsonGeometry works, here’s the open-source repository for reference: https://github.com/vasturiano/three-geojson-geometry. The repository has an example directory however, the syntax is slightly different from what you see here because the examples are written in vanilla JavaScript not React.

Combine The Sphere And Geometry #

Now it’s time to overlay the geometry on top of the blank sphere: Add ThreeGeo to ThreeScene

// src/components/three-scene.js
import React from 'react';
import { Canvas } from '@react-three/fiber';
import { OrbitControls } from '@react-three/drei';

import ThreeSphere from './three-sphere';
+ import ThreeGeo from './three-geo';


const ThreeScene = () => {
  return (
    <Canvas
      gl={{ antialias: false, alpha: false }}
      camera={{
        fov: 45,
        position: [0, 0, 300]
      }}
      onCreated={({ gl }) => {
        gl.setClearColor('#ffffff');
      }}
      style={{
        width: '100vw',
        height: '100vh',
        cursor: 'move'
      }}
    >
      <OrbitControls enableRotate={true} enableZoom={false} enablePan={false} />
      <ThreeSphere />
+      <ThreeGeo />
    </Canvas>
  );
};

You should now be looking at something similar to the image below.

Exciting Three.js sphere displaying the countries of the world (Large preview)

Now that’s slightly more exciting!

Step 2: Building A Serverless Function #

Create A Function #

This next step is where I use a Gatsby Function to request data from Where is ISS at, which returns the current location of the International Space Station.

Create a file in src/api called get-iss-location.js:

// src/api/get-iss-location.js
const axios = require('axios');

export default async function handler(req, res) {
  try {
    const { data } = await axios.get(
      'https://api.wheretheiss.at/v1/satellites/25544'
    );

    res.status(200).json({ iss_now: data });
  } catch (error) {
    res.status(500).json({ error });
  }
}

This function is responsible for fetching data from api.whereistheiss.at and upon success will return the data and a 200 status code back to the browser.

The Gatsby engineers have done such an amazing job at simplifying serverless functions that the above is all you really need to get going, but here’s a little more detail about what’s going on.

• The function is a default export from a file named get-iss-location.js;
• With Gatsby Functions the filename becomes the file path used in a client-side get request prefixed with api, e.g. /api/get-iss-location;
• If the request to “Where is ISS at” is successful I return an iss_now object containing data from the Where is ISS at API and a status code of 200 back to the client;
• If the request errors I send the error back to the client.

Step 3: Build The International Space Station #

Creating The ISS Sphere #

In this next step, I use Gatsby Functions to position a sphere that represents the International Space Station as it orbits the globe. I do this by repeatedly calling an axios.get request from a poll function and setting the response in React state.

Create a file in src/components called three-iss.js

// src/components/three-iss.js
import React, { Fragment, useEffect, useState } from 'react';
import * as THREE from 'three';
import axios from 'axios';

export const getVertex = (latitude, longitude, radius) => {
  const vector = new THREE.Vector3().setFromSpherical(
    new THREE.Spherical(
      radius,
      THREE.MathUtils.degToRad(90 - latitude),
      THREE.MathUtils.degToRad(longitude)
    )
  );
  return vector;
};

const ThreeIss = () => {
  const [issNow, setIssNow] = useState(null);

  const poll = () => {
    axios
      .get('/api/get-iss-location')
      .then((response) => {
        setIssNow(response.data.iss_now);
      })
      .catch((error) => {
        console.log(error);
        throw new Error();
      });
  };

  useEffect(() => {
    const pollInterval = setInterval(() => {
      poll();
    }, 5000);

    poll();
    return () => clearInterval(pollInterval);
  }, []);

  return (
    <Fragment>
      {issNow ? (
        <mesh
          position={getVertex(
            issNow.latitude,
            issNow.longitude,
            120
          )}
        >
          <sphereGeometry args={[2]} />
          <meshBasicMaterial color="#000000" />
        </mesh>
      ) : null}
    </Fragment>
  );
};

export default ThreeIss;

There’s quite a lot going on in this file so I’ll walk you through it.

1. Create an issNow state instance using React hooks and set it to null. This prevents React from attempting to return data I don’t yet have;
2. Using a useEffect I create a JavaScript interval that calls the poll function every 5 seconds;
3. The poll function is where I request the ISS location from the Gatsby Function endpoint (/api/get-iss-location);
4. Upon successful retrieval, I set the response in React state using setIssNow(...);
5. I pass the latitude and longitude onto a custom function called getVertex, along with a radius.

You may have noticed that here I’m using a radius of 120. This does differ from the 100 radius value used in ThreeSphere and ThreeGeo. The effect of the larger radius is to position the ISS higher up in the 3D scene, rather than at ground level — because that’s logically where the ISS would be, right?
100 has the effect of the sphere and geometry overlapping to represent Earth, and 120 for the ISS has the effect of the space station “orbiting” the globe I’ve created.

One thing that took a bit of figuring out, at least for me, was how to use spherical two dimensional coordinates (latitude and longitude) in three dimensions, e.g. x,y,z. The concept has been explained rather well in this post by Mike Bostock.

The key to plotting lat / lng in 3D space lies within this formula… which makes absolutely no sense to me!

x=rcos(ϕ)cos(λ)
y=rsin(ϕ)
z=−rcos(ϕ)sin(λ)

Luckily, Three.js has a set of MathUtils which I’ve used like this:

• Pass the latitude, longitude and radius into the getVertex(...) function
• Create a new THREE.Spherical object from the above named parameters
• Set the THREE.Vector3 object using the Spherical values returned by the setFromSpherical helper function.

These numbers can now be used to position elements in 3D space on their respective x, y, z axis — phew! Thanks, Three.js!

Now add ThreeIss to ThreeScene:

import React from 'react';
import { Canvas } from '@react-three/fiber';
import { OrbitControls } from '@react-three/drei';

import ThreeSphere from './three-sphere';
import ThreeGeo from './three-geo';
+ import ThreeIss from './three-iss';

const ThreeScene = () => {
  return (
    <Canvas
      gl={{ antialias: false, alpha: false }}
      camera={{
        fov: 45,
        position: [0, 0, 300]
      }}
      onCreated={({ gl }) => {
        gl.setClearColor('#ffffff');
      }}
      style={{
        width: '100vw',
        height: '100vh',
        cursor: 'move'
      }}
    >
      <OrbitControls enableRotate={true} enableZoom={false} enablePan={false} />
      <ThreeSphere />
      <ThreeGeo />
+     <ThreeIss />
    </Canvas>
  );
};

export default ThreeScene; 

The poll function will repeatedly call the Gatsby Function, which in turn requests the current location of the ISS and re-renders the React component each time a response is successful. You’ll have to watch carefully but the ISS will change position ever so slightly every 5 seconds.

The ISS is traveling at roughly 28,000 km/h and polling the Gatsby Function less often would reveal larger jumps in position. I’ve used 5 seconds here because that’s the most frequent request time as allowed by the Where is ISS at API

You might have also noticed that there’s no authentication required to request data from the Where is ISS at API. Meaning that yes, technically, I could have called the API straight from the browser, however, I’ve decided to make this API call server side using Gatsby Functions for two reasons:

1. It wouldn’t have made a very good blog post about Gatsby Functions if i didn’t use them.
2. Who knows what the future holds for Where is ISS at, it might at some point require authentication and adding API keys to server side API requests is pretty straightforward, moreover this change wouldn’t require any updates to the client side code.

Step 4: Make It Fancier! (Optional) #

I’ve used the above approach to create this slightly more snazzy implementation: https://whereisiss.gatsbyjs.io,

In this site I’ve visualized the time delay from the poll function by implementing an Svg <circle /> countdown animation and added an extra <circle /> with a stroke-dashoffset to create the dashed lines surrounding it.

Step 5: Apply Your New Geo Rendering Skills In Other Fun Ways! #

I recently used this approach for plotting geographical locations for the competition winners of 500 Bottles: https://500bottles.gatsbyjs.io. A limited edition FREE swag giveaway I worked on with Gatsby’s marketing team.

You can read all about how this site was made on the Gatsby blog: How We Made the Gatsby 500 Bottles Giveaway

In the 500 Bottles site I plot the geographical locations of each of the competition winners using the same method as described in ThreeIss, which allows anyone visiting the site to see where in the world the winners are.

Closing Thoughts

Gatsby Functions really open up a lot of possibilities for Jamstack developers and never having to worry about spinning up or scaling a server removes so many problems leaving us free to think about new ways they can be used.

 

 

Further Reading #

• If you’re interested in learning more about Gatsby Functions, I highly recommend Summer Functions, a five week course run by my good chum Benedicte Raae.
• In a recent FREE Friday night Summer Functions webinar we created an emoji slot machine which was super fun:
• Build an emoji slot machine with a #GatsbyJS Serverless Function · #GatsbySummerFunctions
• You might also be interested in the following episode from our pokey internet show Gatsby Deep Dives where Kyle Mathews (creator of Gatsby) talks us through how Gatsby Functions work:
  
• Gatsby Serverless Functions 💝 — Are we live? with Kyle Mathews

How to install Magento SUPEE 9652 with or without SSH

 

Magento is widely accepted E-commerce platform. Security is a must for E-commerce and so Magento keeps coming up with Security Patches which ensures security from potential hacks.

SUPEE 9652 was released by Magento on February 07, 2017 to provide protection against attacks abusing Zend library vulnerability.

With nearing of Magento 1 end of life, it is strongly recommended to migrate to the latest Magento 2.4.8  rather than installing Magento SUPEE-9652.

Methods to Install Magento SUPEE 9652

There are two methods, i.e., with and without SSH, available for the installation, as discussed below:

Method 1: Install Magento SUPEE 9652 using SSH

Contact your hosting provider if you don’t know how to set up SSH. Download Magento SUPEE 9652 Patches files for your Magento Version from here.

Upload the patch into your Magento root directory and run the appropriate SSH command:
For .sh file extension:

sh patch_file_name.sh

Example:

sh PATCH_SUPEE-9652_CE_v1.9.3.2-1.9.3.7_v1-2018-02-23-06-01-40.sh

For .patch file extension:

patch —p0 < patch_file_name.patch

Note: Once execute the command, refresh the cache in the Admin under “System > Cache Management” so that the changes can be reflected. We strongly recommend that you test all patches in a test environment before taking them live.

Method 2: Install Magento SUPEE 9652 with PrePatched Files

Download the zip file for your Magento Version for the patch installation. You can also download these Pre Patched files from GitHub. After downloading the files, just upload it to your Magento root folder.

Magento Version	SUPEE 9652
Magento 1.9.3	CE-1.9.2.3
Magento 1.9.1.1	CE-1.9.1.1
Magento 1.9.0.1	CE-1.9.0.1
Magento 1.7.0.2	CE-1.7.0.2

Follow any of the above methods to get Magento SUPEE 9652 installed in your Magento store easily.

How to check if Magento SUPEE 9652 has been installed correctly?

magereport.com can be used to check if Magento SUPEE 9652 has been installed correctly or not.

If you have any doubt or questions regarding applying Magento SUPEE 9652, feel free to ask through comments. If you are unsure and uncomfortable to patch yourself, you can hire us through our Magento Security Patches Installation Service.

Even if patching ensures security, it is highly recommended that you upgrade Magento to the latest version 1.9.3.2 which includes all the Magento Security Patches including SUPEE 9652.

10 UI Design Patterns You Should Be Paying Attention To

 

Design patterns were first described in the 1960s by Christopher Alexander, an architect who noticed that many things in our lives happen according to patterns. He adapted his observations to his work and published many findings on the topic. Since then, design patterns have found their place in many areas of our lives, and can be found in the design and development of user interfaces as well.

In short, design patterns are solutions to recurring problems. By extension, UI design patterns are solutions to common user interface problems. This article goes over 10 interesting UI design patterns that you can use in your own projects. In fact, you may already be using them now without knowing it.

1. Lazy Registration 

To fully appreciate the problem of registration, we should consider an annoyance that has led to the opinion that sign-up forms must die. This certainly doesn’t mean they should be completely omitted but rather that they should be only one part in the process of introducing users to a system, and should come late in the process. Such an approach is called “lazy registration” and relates to the account registration pattern.

When would you actually use lazy registration? Although it may seem like lazy registration could be used all the time, some circumstances are ideal:

• When users are allowed to try out your website product or service before making a decision (which not every website permits, though).
• When it is important to familiarize users with your system before they sign up, which can be a crucial step in their process of deciding whether to register.

Amazon lets you browse and add products to your shopping cart before signing up.

This pattern is meant to allow users to use your system and take action before registering. If satisfied with your service so far, users will regard this quick act of registration as just another small step in the entire process and not an obligation. The shopping cart is a good example of this pattern: users can browse and choose products and only have to register when they proceed to check out.

Picnik is was another good example of lazy registration. Users can use all of the service’s functions to edit their photos online. They are asked to register only before saving their work.

Recommended reading 

• Sign-up forms must die: here’s how we killed ours! An interesting article on how 90percentofeverything implemented lazy registration.
• Web Form Design Patterns: Sign-Up Forms, Part 1 and Part 2 Interesting and useful research that Smashing Magazine conducted last year

2. Progressive Disclosure 

This pattern is used to show only the information or features relevant to the user’s current activity and to delay other information until it is requested. By hiding more complex or infrequently used features, you de-clutter the user interface; by revealing them only as they are needed, you help users perform a complex, multi-step process on a single page.

The goal is to show only essential information in the first step and then invite users to take the next step. When the user completes a step, you reveal the information in the next step, keeping all previous steps visible. By keeping previous steps visible, you allow users to change what they have entered. And the data they input in the current step can affect the behavior of the next step.

Digg uses progressive disclosure in its comments section. Users can read a comment and, by clicking on the “Replies” link, see all of the replies to that comment. The link also tells you how many replies will be shown.

Once the replies are revealed, users can not only read them but also reply to and rate them. Comments below the viewing threshold are collapsed by default and are revealed by clicking “Show.”

Examples of progressive disclosure are everywhere. A simple “Show more” link that reveals more information is one of the simplest forms of progressive disclosure. But it can be used for more complex cases, such as filling out Web forms. Try to open an account on Picnik (which we mentioned in the lazy registration pattern) to see how progressive disclosure can be used at a more complex level.

YouTube uses progressive disclosure when users customize the look of the video player. When a user clicks the icon, customization features open up below.

Recommended reading #

• Progressive disclosure Excellent insight from Jakob Nielsen.
• Read more… about progressive disclosure Good explanation of progressive disclosure, with several examples.

3. Forgiving Format 

Search functions can offer users various options and sometimes be complex. When searching weather and street maps, for example, users can use such criteria as city name, street name and zip code. To indicate to users that they can use several criteria, interfaces tend to show multiple options and become overly complex. Instead of adding clutter to the interface, use the forgiving format pattern, which lets users enter data in various formats and leaves it to the system to parse the data.

Yahoo weather search allows users to search by city or zip code.

To convey which formats are supported, give users hints on how to search, whether by listing all available formats, as in the example above, or by providing a link to a help page, as in the example below.

Google Maps allows users to search by city, street, zip code and even latitudinal and longitudinal values.

The forgiving format pattern significantly simplifies user interfaces. However, it may require a lot of work from back-end developers. The more options users have, the more difficult parsing becomes.

4. Clear Primary Actions 

Simple Web forms often allow just one action (“Submit,” “Save” or “Send”). The user knows exactly what their final action in filling out the form will be, because they have only one option. However, users may sometimes be faced with several options and have to distinguish between primary and secondary actions.

Clearleft makes a distinction between primary and secondary actions with color.

What are primary and secondary actions? Primary actions lead to the completion of a form; for example, clicking “Save” or “Send.” Secondary actions usually do not lead to a form’s completion; these include clicking “Cancel.” There are exceptions, though. Which are the primary and secondary actions when you see “Save,” “Save and continue” and “Publish” buttons all in a row? When users have several options, highlighting primary actions and de-emphasizing secondary actions are good practice.

This can be done in two ways:

• By giving primary and secondary actions different colors; for example, giving primary actions a vibrant color and secondary actions a shade of gray.
• By styling primary actions as buttons and secondary actions as links.

Flickr highlights the primary action by putting the secondary action in a small label below.

Both ways clearly distinguish between primary and secondary actions, relieving the user from having to think about which option to choose in order to complete their task.

Recommended reading #

• Web Form Design: Filling in the Blanks Probably one of the best resources for designing Web forms.

5. Breadcrumbs 

Breadcrumbs show the path from the front page of the site to the current location of th users in the website’s page hierarchy. They are a form of secondary navigation that helps users understand the hierarchy and structure of the website. Breadcrumbs start with the home page and end with the page currently being viewed. Each label in a breadcrumb trail is linked to its respective page or section in the hierarchy, the exception being the one for the current page, which should just be an unlinked label.

Apple’s breadcrumbs are graphic elements that fit the overall design of the website well.

Breadcrumbs take up minimal space and are usually positioned at the top of the page, below the header and above the content. They would serve no purpose on the home page and so should not appear there. Breadcrumbs can appear simply as text links separated by the “>” sign, or they can be graphic elements, like the breadcrumbs on Apple’s website:

Recommended reading 

• Breadcrumb Navigation Increasingly Useful Jakob Nielsen explains breadcrumbs in depth.
• Simple scalable CSS-based breadcrumbs A very good simple tutorial on how to create breadcrumbs.

6. Account Registration 

The definition of this pattern varies from place to place, but we can say that it solves three somewhat related problems:

• Certain content is accessible only to registered users,
• Users need to re-enter their personal data often,
• Users need to be able to access personalized content on a system.

The solution to allowing users to access protected content is to have them register for an account on the system and store their personal data, to be reused later. The benefits are numerous. For instance, users can be shown personalized offers, as seen on Amazon. Users could also perform tasks more efficiently if the system reused the information submitted during registration. Storing shipping details is just one example. Because filling out forms is not a favorite task of users, requiring only necessary information is important. Another important thing is to clearly highlight all of the benefits users will receive, so that they become more willing to register.

Vimeo has a simple but attractive sign-up form.

Tumblr requires only minimal information of the user to sign up.

Recommended reading 

• Web Form Design: Filling in the Blanks A must-read book on creating usable Web forms in general.
• User Membership With PHP A simple implementation of sign-up and log-in forms.
• Accessible HTML/XHTML Forms: Beginner Level How to create an accessible Web form.

7. Required Field Marker 

Making the user interface obvious is essential. This applies just as much to Web forms. One of the best ways to make the interface of Web forms obvious is by marking required fields. The purpose of these markers is to alert the user to information they will need to provide. This way, users won’t feel they have to fill out the entire form to avoid seeing an error message.

Ideally, you should remove all optional fields and let the user type only the information that is necessary for the interaction. A rule of thumbs: the simpler and shorter a web form is, the better is the user experience. Another interesting idea is to make it possible for users to remove all optional fields – you can find more about how to implement it in practice (as well as a ready-to-be-used-script) in Andy Clarke’s article Trimming Form Fields.

Haveamint.com puts “Required” markers next to field labels on its contact form.

You can position required field markers in one of two places:

• Next to labels, allowing users to scan the form quickly,
• Next to or inside input fields; if the fields are the same width, users will be able to scan the form quickly.

When deciding on which fields to require, take into account the total number of fields in the form. If the form is complex and most of its fields are required, the user will likely see it as unnecessary clutter.

8. Steps Left 

This pattern is widely implemented when users have to fill in data in multiple steps. The purpose of this pattern is to:

• Guide users,
• Explain the scope of the process by clearly stating how many steps are needed to complete it,
• Show the user’s current position in the process by visually highlighting the current step.

StatementStacker clearly shows the number of steps and highlights the current step.

Steps are usually displayed horizontally and connected by arrows, showing the order in which the steps will be performed. Also, each step is usually marked with a large number and very concise description of what users should do in that step. The important thing here is consistency: a progress indicator should always appear in the same position across the pages and show users where they are at.

This pattern is usually combined with the well-known “wizard” pattern to create a multi-step process, such as for registration or a shopping cart.

Delicious has a good-looking progress indicator that clearly defines the purpose of each step. It also highlights the current step by displaying it in a different color.

9. Subscription plans 

This pattern is suitable if the website offers one product or service that comes in different plans and requires regular payments, usually monthly payments. Each plan should be descriptive and provide the following information:

• Name of the plan, such as “Basic” or “Professional,”
• Price of the subscription plan and how long it is valid for,
• List of features (the cheapest plan usually has the fewest features),
• Sign-up button.

Wufoo clearly shows its subscription plans, the prices and the differences between them.

Always show your plans in order. Plans are usually ordered from most to least expensive. You can highlight the plan you want users to buy by using a different color or size.

Crazyegg’s subscription table draws attention to the “Basic” plan.

10. Hover Controls 

When a user interface has many elements in which the user can perform actions, the page can become cluttered and hard to scan. This is especially common in the administration section of Web applications, where users can change table data. A good way to handle this is to hide each element and reveal it when the user hovers over that area.

An “Edit” link is revealed as the user hovers over each section of their Facebook profile page.

Hiding controls and revealing them on hover significantly de-clutters the user interface without taking away functionality.

Twitter reveals “Reply” and “Favorite” links when the user hovers over each tweet.

How To Design A Brand Logo (With Ease)

Great logo design can do incredible things for the company behind it. Set the tone for the brand. Improve memorability. Help users emotionally connect to the brand. Create consistency between all marketing channels. Set it apart from the competition. But as a web designer, do you know how to tackle the lofty request of logo design when a client brings it to you?


As a web designer, you may find yourself in a position where a client wants you to design their brand logo. If you’re feeling up to the task, there are some things you need to know first.
For instance:

• How do you translate the value of a brand into a logo?
• Where can you go for logo design inspiration?
• Which tools should you use to create a logo (like Wix Logo Maker)?
• How do you piece together a logo from a bunch of ideas?

Make no mistake: designing a logo is just as complex a task as building a website. Not only do you need to understand what goes into making a great logo, but you need the right tools to create it.
If you’re thinking about doing this, the following guide will answer the four above questions for you.

Tips For Defining Your Brand With Great Logo Design

Let’s say I invited you over to my apartment and you got a gander at my workspace.

Even if you’re not an Apple user, you’d instantly know that I was working from one of their laptops. While Apple’s distinctive product design might be the clue you pick up on first, the apple icon would certainly seal the deal.
The Apple logo design is memorable and leaves a lasting impression — even without having to spell out the company name.
This is what you want to accomplish when designing a brand logo for your client. And here is how you should go about piecing it together:

Make no mistake: designing a logo is just as complex a task as building a website.

“

Tip #1: Ask The Right Questions

Your client might come to you with logo designs that they like the look of and tell you to run with it. Or they might simply suggest you take the company name and make it look “cool”.
But that’s not how great logos are built.
Just as you dive deep into a client’s business, its mission, and what kind of value they bring to their target user before building a website, you’ll have to do similar research for a logo.

Which Questions Do You Need To Ask?

What’s nice about logo design and web design is there’s a lot of overlap in what you need to ask clients to get started. So, consider building a questionnaire that tackles both pieces if you’re building both the branding and site for your clients.
For now, let’s look at the logo questions:

Why did you start your company?	If you can get to the heart of why they went into business, you’ll be able to create a logo that feels more genuine to that original mission.
What does your company do?	Identifying this is important as you don’t want to design something that looks great, but is all wrong for the market they’re working in.
Who do you serve?	While the client’s opinion of the logo matters, you need to focus on building something that looks good from the eyes of their audience.
Why do customers choose your company over others?	Their unique selling proposition will help you differentiate their logo from the competitors’ designs.
Who are your top 3 competitors? How do you feel about their logos?	This is a great question to ask if you want to get a raw, emotional response as opposed to the more buttoned-up responses the other questions may elicit.
What are your company’s values?	A good way to identify a unique edge for a brand is by looking at what they prioritize. Integrity? Customer commitment? Green initiatives?
How would you describe the company’s personality in 3 words?	You’ll be able to get a sense for the company’s “voice” when you talk to the business owner. But it’s always good to see how they describe it, too.
Do you have a slogan?	You won’t necessarily build the words into the logo (especially since there’s no room for it on mobile). But a slogan can help inform the design.
Where do you see your company in 5 years?	Rather than design something that looks good for the company on Day 1, you should create a logo that captures who they plan to be in the near future.
Who are your heroes and why?	Take a gander at the companies they look up to. Even if they don’t have a clear vision for their company yet, who their heroes are will give you a clue as to where they’re heading.

One last thing to ask is whether or not they’ve selected brand colors or fonts yet. The likelihood of this is slim if they’re asking you to design a logo, but it’s better to ask now than to find out later and have to rework it.

How Do You Get The Answers You Seek?

There are a couple of ways to do this. You could always schedule a call with your client and run through the questions with them. The only problem with that is it could either end up feeling like storytime or like pulling teeth.
In my opinion, the better option is to automate this with an online questionnaire. (This also allows you to scale your logo design efforts). Google Forms is always a great option as it’s easy to use and it’s free.

But if you’re already using something like Content Snare to collect files and information from web design clients, you might as well use it for this as well.

Tip #2: Get Inspired By Other Logos

Once you have a clear idea of who your client is and the message they want to convey, it’s time to start designing. But it won’t be as easy as writing out the name of the company and then adding graphical elements to it.
Take some time to do research on the competitive landscape and to gather outside inspiration for your client’s logo.
For the purposes of this post, let’s pretend that your new logo client is opening a dog grooming business in New York City.

Note the following:

• Seal-shaped logo would work well across all channels (especially social).
• Simple and clear graphics can easily be repurposed for favicon or standalone pictorial mark.
• Additional info and strong design choices lend credibility to the brand.

Note the following:

• Cute design uniquely plays on the NYC skyline.
• Color palette is striking enough where it’ll stand out no matter how big or small it appears (like in the favicon).
• The geometric design and strong sans serif font suggest stability within the brand.

Iffy color choice aside, note the following:

• The negative space design is unique and works well with the designer’s use of the recognizable Scottish Terrier dog breed.
• The star is a good choice as it can be used on any channel and would be instantly recognizable.
• The star symbol is a nice way to give this salon an air of luxury (like a VIP club).

Based on the information provided by your client, it might also be beneficial to look outside their industry for inspiration — especially if they’re looking up to titans of other industries. By starting with the competition though, you’ll get a good idea of what the logos and brands all have in common (if anything).
For example, in this particular space, we see a lot of pictorial logos with animal-related images. But in terms of colors, fonts and even shapes, the personality of the business and the unique selling proposition have led to wildly different designs.
As you survey existing logo designs, consider how closely you want your logo design to align with or how far it should deviate from them. At this point, you know your client fairly well, so when you see something that’s more in the vein of what you’re trying to do (or not do), you’ll immediately know it.

Tip #3: Find The Right Tool To Create Your Logo

When it comes to designing a logo for your client, you should be using a tool that makes your job easier. But that “job” really depends on what your client is paying and what their expectations are.

For Pre-made Logo Design

Are you going to compile a batch of premade logos — personalized with their info, of course — and let them choose the one they like best?
In that case, a free logo maker tool would work fine. So long as there’s a variety of logo styles to choose from in your client’s niche, you should be able to find plenty of designs to share with them.
Best for:

• Very small budgets;
• Really short timelines (i.e. a day or two);
• Temporary logos.

For Custom Logo Design

Are you planning to create 10 custom logos and run through series after series of “Which do you like?” questions until you whittle it down to one winning design?
In that case, you’ll want to design it with your Adobe Illustrator or Sketch software. The process will take a while, but if your client has the money to spend and wants something truly unique, this is the best way to do it.
Best for:

• Price is no object,
• Client envisions something very specific,
• Enterprise clients in very high-profile positions who can’t afford to have their logo look like anyone else’s.

The Best Of Both Worlds (Custom Design Without The Hassle)

Would you prefer something between the two options above, where you could wield your creative influence to create something custom without all of the hassle?
In that case, the Logo Maker that Wix offers is your best bet. You can use this tool for a wide range of clients — those that want something done quickly and cheaply all the way up to clients who want a personalized logo.
Best for:

• Any budget;
• Any timeline;
• Logos you don’t want to spend too much time designing graphics for, but still want to be able to customize the key elements (like colors and layout).

Why Is the Wix Logo Maker The Right Tool For You?

Similar to the Wix site builder platform, Wix Logo Maker aims to make light work of what would otherwise be time-consuming and tedious work.
It’s an easy, intuitive way to design the perfect logo for your client and spares you the trouble of having to start from scratch while still creating something custom (if that’s what you need).
Let’s take a closer look.

The Logo Questionnaire

Similar to the client questionnaire I recommended you create above, Wix takes you through a series of questions as well.


Here are some things to think about as you work on your logo:

Colors

There’s more to color selection than how good it looks. Color comes with a lot of meaning and it can have an effect on customers’ emotional responses as well. It also can impact the readability and accessibility of your site. So, before you jump to using any particular set of colors, brush up on color theory and make sure you have the right ones picked out.
Although this is something you’re probably thinking about from the beginning, it might be a good idea to save it to the end after you’ve dealt with the structure of the logo.

Typography

If the company name and/or slogan is to appear in the logo, typography is something you’ll need to spend a lot of time considering. Again, this isn’t just an aesthetic choice. It can have a serious impact on memorability, emotionality, and accessibility.

Iconography

Icons can do a lot of good for logos. They can add balance. They can provide insight into what the business is about if the name is obscure. They can bring more personality to the design. They can also serve as a stand-in in smaller spots, like the browser favicon or as a social media profile image.
What’s nice about this Logo Maker is that you don’t just get to personalize the icon, but also the shapes within or behind the logo. So, you can play with depth, geometry and layout when designing your logo as well.

You have two options:

• Download (or print) all logo PNG files, resizable SVGs, and 40+ social media logos.
• Get the standard logo PNG files in a range of colors.

As you can see, everything’s been thought of. So, it’s less time you have to worry about exporting your logos in the right file formats, sizes, and colors. You just need to focus on creating something your client will love.

The Value Of A Well-Designed Logo

A lot of a brand’s success hinges on how great their logo design is. So, of course, you want to design a professional and modern logo that will serve your clients well. By taking the time to learn about your client’s business, creating a design around their vision, and then using the right tool to bring it all together, you’ll be able to do just that.

How to Install Magento SUPEE 10570 V2 With or Without SSH

 

March 28, 2018: Magento was recently informed about an issue with both patch SUPEE-10570 and Magento versions 1.9.3.8/1.14.3.8 that could result in the inability of customers to complete checkout when trying to register during checkout. Magento is now providing an updated patch (SUPEE-10570 v2) that no longer causes this issue. Note, however, that this new patch no longer protects against two low risk session handling-related security issues that patch SUPEE-10570 protected against.

If you have not yet applied SUPEE-10570v1, do not apply it, but instead patch your store with SUPEE-10570v2. If you have already applied SUPEE-10570v1, please first uninstall SUPEE-10570v1, then install SUPEE-10570v2. All stores should be patched with SUPEE-10570v2 as Magento will use this patch as a base for future patch versions. (Source)

Magento released SUPEE-10570 which contains multiple security enhancements that help close remote code execution (RCE), cross-site scripting(XSS), and other issues. Immediately install SUPEE-10570 in your Magento store to safeguard it from potential vulnerabilities.

With nearing of Magento 1 end of life, it is strongly recommended to migrate to the latest Magento 2.4.8  rather than installing Magento SUPEE-10570.

Installation process for SUPEE 10570:

Normally, there are 2 ways to install Magento Supee patches: with SSH or without SSH. , Here I’ve come up with both the methods to ease your knowledge.

1. Install SUPEE 10570 using SSH:

If you don’t know how to set up SSH, contact your hosting provider. Download SUPEE 10570 Patches files for your Magento Version from here.

Upload the patch into your Magento root directory and run the appropriate SSH command:
For .sh file extension:

sh patch_file_name.sh

Example:

sh PATCH_SUPEE-10570_CE_v1.9.3.2-1.9.3.7_v1-2018-02-23-06-01-40.sh

For .patch file extension:

patch —p0 < patch_file_name.patch

For Linux OS or Ubuntu derived machines:

On Linux OS or Ubuntu derived machines, using sh will throw an error as sh is supposed to be used only with purely POSIX compliant scripts and Magento scripts are not 100% POSIX compliant. Instead, on Ubuntu and derived OSes such as Linux Mint, you should use

bash patch.sh

Note: Once execute the command, refresh the cache in the Admin under “System > Cache Management” so that the changes can be reflected. We strongly recommend that you test all patches in a test environment before taking them live.

2. Install SUPEE 10570 with PrePatched Files [without SSH method]:

Download the zip file for your Magento Version for the patch installation. You can also download these Pre Patched files from GitHub. After downloading the files, just upload it to your Magento root folder.

Magento version	SUPEE-10570 v2
Magento 1.9.3.8	SUPEE-10570v2-1.9.3.8
Magento 1.9.3.7	SUPEE-10570v2-1.9.3.7
Magento 1.9.3.1	SUPEE-10570v2-1.9.3.1
Magento 1.9.2.4	SUPEE-10570v2-1.9.2.4
Magento 1.9.2.3	SUPEE-10570v2-1.9.2.3
Magento 1.9.2.2	SUPEE-10570v2-1.9.2.2
Magento 1.9.1.1	SUPEE-10570v2-1.9.1.1
Magento 1.9.0.1	SUPEE-10570v2-1.9.0.1
Magento 1.8.0.0	SUPEE-10570v2-1.8.0.0
Magento 1.7.0.2	SUPEE-10570v2-1.7.0.2
Magento 1.7.0.0	SUPEE-10570v2-1.7.0.0
Magento 1.6.2.0	SUPEE-10570v2-1.6.2.0
Magento 1.6.0.0	SUPEE-10570v2-1.6.0.0
Magento 1.5.1.0	SUPEE-10570v2-1.5.1.0
Magento 1.5.0.1	SUPEE-10570v2-1.5.0.1

Possible Issues You might face while Installing Magento SUPEE-10570:

If the patch fails to apply while patching lib/Zend/Mail/Transport/Sendmail.php, it might mean your Magento installation was previously patched with SUPEE-9652v1 instead of SUPEE-9652v2. The recommended solution is to revert patch SUPEE-9652v1 and apply SUPEE-9652v2 before applying SUPEE-10570. (source: SUPEE 10570 | Magento)

How to check if Magento SUPEE-10570 has been installed correctly?

The easiest method to check for the patches installed is using magereport.com. However, SUPEE 10570 can’t be detected from front-end so using magereport.com won’t be much useful in this case.

Another way to check for the patches installed is, using SSH. Every installed patch can be found in your store content specifically logged in to app/etc/applied.patches.list.

So you can use the ‘grep’ command to access the list:

grep ‘|' app/etc/applied.patches.list

You’ll get output like this:

2018-03-05 09:05:20 UTC | SUPEE-10570_CE_v1.9.3.7 | CE_1.9.3.7 | v1 | 8529a92f3507cedd5bdc645c853c348fd3a107a6 | Wed Feb 7 18:53:10 2018 +0200 | ce-1.9.3.7-dev

How to revert a patch if you are facing any issue?

Run the following SSH Command to revert your patch.

sh patch-file-name.sh -R

Do let us know via Comments if you are facing any other error while installing SUPEE-10570. We will help you out fixing them. Mention the Magento Version you are using while installing the SUPEE 10570 so that we can help you better and faster.

We recommend upgrading to Magento version 1.9.3.8 which includes all the security patches including SUPEE 10570. If you need any help regarding Magento version Upgrade