At the heart of writing good CSS code is maintainability. As a developer, one of the best practices you should always strive for is writing understandable and maintainable code. To achieve maintainability, a developer must put into consideration the next reader/developer that will make use of the codebase.

A CSS codebase is said to be maintainable when you can make changes to it without causing unintended side-effects elsewhere.

In this post, I will share everything you need to know about writing maintainable css, Here's what I will cover:

1. Introduction to Modules and what they are
2. Semantic class naming
3. Code structuring
4. Commenting

Introduction to Modules

For a code to be maintainable, it has to be created and structured in the form of modules but what are modules?

A module is a distinct independent unit that can be combined with other modules to create a more complex structure. It is a reusable chunk of HTML and CSS that performs a specific function. On a webpage, a sidebar, navbar, a footer can be classified as modules.

Creating your HTML and CSS in this form makes it more "digestible" for a reader or other developers. Although writing your HTML/CSS in chunks is great, naming your classes semantically makes it even better.

Semantic naming

Semantic class naming is a style in which we use class names that describe what an element is, or it’s intended purpose, rather than how it looks.

 <div class="card">
       <span class="card__img"></span>
       <div class="card__content">
           <ul class="card__list">
               <li class="card__item">Sketch</li>
               <li class="card__item">Figma</li>
               <li class="card__item">Invision</li>
           </ul>
       </div>
  </div>

As seen above, the classes are easy to read without needing to be interpreted. It also becomes very glaring where the module begins and ends.

Naming is the most vital part of writing maintainable CSS. It is important that when naming classes we avoid names that describe how an element might be presented rather than what they mean. For example

   <div class="color-red"></div>

Semantic CSS helps to convey what an element represents just by looking at it. This would ensure that the next developer that would come across the codebase can easily understand what a section or module is all about, just by mere staring at the name. It's also important to use naming conventions like BEM or SMACSS.

BEM (Block, Element, Modifier) is a naming convention for classes in HTML and CSS. Its goal is to help developers understand the relationship between the HTML and CSS in a given project.

   <header class=”header”>
       <img class=”header__logo”>
       <div class="header__img"></div>
    </header>

These classes are easy to read without needing to be interpreted. It's clear where the module begins and ends. This is what BEM helps with.

Why use semantic HTML

• It's easier to find on your code editor
• They are easier to debug -you can easily debug a class that is semantically named
• They produce a small HTML.

Structuring

Another thing to address when it comes to maintainability of code is how you structure it. This is one aspect I have fallen prey to. Sometimes it becomes tempting to bring in a class defined in module A to module B. The ideas of entangling classes from different modules could pop up because you are trying to follow the DRY rule, "Don't repeat yourself".

For example I decided to bring in a class called “card__item” from a module I have previously created because the class contains the style I needed. This can alter the way the code is understood and it becomes extremely difficult to maintain.

  
   <header class=”header”>
       <img class=”header__logo”>
       <div class="header__img"></div>
   	 <div class="card__item">Sketch</div>
    </header>

If we try to combine them we will entangle two modules with CSS overrides. This entangling by definition is complex which in turn is hard to maintain.

Commenting

Commenting involves placing human readable descriptions inside of computer programs detailing what the Code is doing. Proper use of commenting can make code maintenance much easier.  

A user should be able to utilise a previously written CSS without ever having to look at the code, simply by reading the comments.

Last year I had a conversation with our Lead Dev with the main aim of hearing his story; no reviews or pull request here, just gist. It was very interesting to hear about his university days, how he managed school and coding, and so on. The proper title for this would have been a "letter to a JUNIOR engineer" lol... well I would just tell you some of the things he said and pass across my own two cents. Most times when you meet someone that has more experience in an industry where you work, some of the questions you always ask is how did you manage? how do I become like you? how do I move from here to there?. For me I knew I had to be more technical, before this meeting I had worked a bit in a codebase that he wrote; it was an API written in PHP without any framework 🤯 . I was marveled by the structure in the code; Design patterns, and Strategies plus how he managed to abstract and implement solutions for the problem at hand.

So when I asked him how he was able to organize and implement solutions in this very readable and efficient way. He replied simply: "read code". Yeah, it is that simple 😶

Watching videos and reading books is not enough. It is true that in videos and mostly in books you see a lot of these patterns and implementations but most times the author does not take care of all the cases or it is just very theoretical that you doubt if this is even usable.

However, reading other peoples code gives you the different views and implementations to solve problems and he also mentioned that frameworks are certified codebases (if there is anything like that), many of them are open-sourced and are written by experienced engineers so it is even easier for instance to read the laravel codebase and see how things were done, there is no better model than these.

In a book I read recently, "Software Developer Life: Career, Learning, Coding, Daily Life, Stories" by David Xiang he talks about having "code sense". He explained that this sixth sense comes with time, and it’s something we as software developers are constantly developing. It is the first impression you get when you look at a file. It’s the ability to spot bottlenecks and pinpoint vulnerabilities early. It’s being able to thoroughly fix a bug once and for all. It’s avoiding nonsensical dependencies, recognizing subtle side effects, and much, much more. This code sense originates from writing and reading a lot of code. The more code you write, the clearer it becomes and the more code sense you accumulate.

All code will always reflect the code writer’s commitment. How do you personally develop a baseline for this? You start by practicing this commitment yourself. We must care about the code we write—it is our craft.
There are two benefits here. First, your baseline as a  developer rises—you will write better code, faster. Second, you will  naturally recognize sloppy code and your code sense will strengthen.  Your attention to detail is what sets you apart - David Xiang

One other important thing we talked about is the controversial decision to stick with one language or to test out a lot of languages; well this depends but I would summarise the most relevant ideas. First, it is encouraged that as an engineer you have a language you are proficient in or in simple terms a language you are very comfortable writing. Furthermore, because no language is perfect, other languages allow you to see things from another perspective and could even be a good way to improve or learn new concepts that would better your technical skills.

This article is basically my findings in building an SPA without a framework or library.

Building web applications as Single Page Applictions (SPAs) is a big trend today with the SPA mode being defacto for most frameworks. Frontend frameworks like React and Vue.js provide you with create-react-app or create-vue-app respectively to easily give a headstart with less time to setup.

The number of people on this bandwagon is huge and unfortunately a lack of understanding of the underlying magic to these tools contribute to poor user experiences in product performance and accessibility of applications built with this approach.

In-depth understanding of how SPAs are coupled can yield better product experiences and a lot of this can be achieved by going in-depth into how configurations, templates, and module bundling work.

In every SPA, there is usually an entry point where every other dependency  is added in their order of need. This controller sometimes acts as a router to different components needed, or in some cases it just starts the train of events of transitioning between the different components. But there is a little of problem what will manage the bundling of these components in their order?

Welcome to the Webpack Show. Webpack is an open source JavaScript module bundler. Below is an image from the webpack website that explains how it works.

I get ideas of what is essential when packing my suitcase
Diane von Fürstenberg

From the image above it can be seen that webpack does not just bundle scripts. Since the app is controlled by javascript, webpack takes care of any imported module including images, stylesheets, etc. The remarkable thing about webpack is the quote above, webpack when configured with the proper plugins and loaders optimizes the codebase to the best; removing unused code, code splitting and compression of all other assets including CSS.

We have managed to solve our problem with webpack, now we can comfortably build a proper static app with all the optimization stated above. But it is obvious that most of the components we will work with will be dynamic components. This poses a new problem; while it might be possible to do this with the appending and prepending of HTML elements and playing with HTML strings, this approach would not make for clean code.

The most efficient way to handle a component approach in a clean way would be to utilise TEMPLATING

TEMPLATING is a document or file having a preset format, used as a starting point for a particular application so that the format does not have to be recreated each time it is used. There are many client side templating engines but for this project I used the nunjucks template engine because it more sophisticated than the rest of the competition.

Nunjucks templating is well documented and can easily be followed. For instance the example code for looping through contents can be found below

var items = [{ title: "foo", id: 1 }, { title: "bar", id: 2}];

<h1>Posts</h1>
<ul>
{% for item in items %}
  <li>{{ item.title }}</li>
{% else %}
  <li>This would display if the 'item' collection were empty</li>
{% endfor %}
</ul>

Webpack also has a loader for nunjucks files, it takes care of the importing of the template and prepares it for rendering. with this the app can easily be broken into components and easily imported when needed.

In summary, webpack and the use of templates for componentizing an app can summarized in an anonymous quote I came across recently

Cleaning out the past, Packing the present, and Preparing for a much Better future

In the second part of this article we'll utilize our in-depth understanding of webpack and nunjucks to build a small, componentized, and much more performant SPA than you'll get with a cookie-cutter approach typically recommend with off-the-shelf frameworks.

Base64 encoding is a group of binary-to-text encoding schemes that represent binary data in an ASCII string format by translating it into a radix-64 representation.

Common to all binary-to-text encoding schemes, Base64 is designed to carry data stored in binary formats across channels that only reliably support text content such as the hypertext transfer protocol (http).

Base64 is particularly prevalent on the web where its use include the ability to transfer  and embed image files or other binary assets inside textual assets such as HTML and CSS files.

Below is an example of a text converted to base64 encoding

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Base64 encoding of the above text

TG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQsIGNvbnNlY3RldHVyIGFkaXBpc2NpbmcgZWxpdCwgc2VkIGRvIGVpdXNtb2QgdGVtcG9yIGluY2lkaWR1bnQgdXQgbGFib3JlIGV0IGRvbG9yZSBtYWduYSBhbGlxdWEuIFV0IGVuaW0gYWQgbWluaW0gdmVuaWFtLCBxdWlzIG5vc3RydWQgZXhlcmNpdGF0aW9uIHVsbGFtY28gbGFib3JpcyBuaXNpIHV0IGFsaXF1aXAgZXggZWEgY29tbW9kbyBjb25zZXF1YXQuIER1aXMgYXV0ZSBpcnVyZSBkb2xvciBpbiByZXByZWhlbmRlcml0IGluIHZvbHVwdGF0ZSB2ZWxpdCBlc3NlIGNpbGx1bSBkb2xvcmUgZXUgZnVnaWF0IG51bGxhIHBhcmlhdHVyLg==

You can find the design of the Base64 scheme on this page, for now let's get into some its applications.

Applications of Base64 Encoding

Base64 encoding schemes are commonly used when there is a need to encode  binary data that needs to be stored and transferred over media that are designed to deal with ASCII. This is to ensure that the data remain  intact without modification during transport. Base64 is commonly used in  a number of applications including email via MIME, and storing complex data in XML.

Convert images and media files to Base64 for web transport

The javascript construct readAsDataURL is able to convert a specified Blob or File into a data: URL representing the file's data as a base64 encoded string.
To see a live example visit

Example:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABUoAAAPaCAIAAADOa/W6AAAACXBIWXMAAAsTAAALEwEAmpwYAAAgAElEQVR42uydh18Td+OAf3 .....

Source Maps

According to Source map Proposal, mappings in a source map is the information that allows us to connect a generated file, e.g. script-transpiled.js, to the original source, e.g. script.js. Source map mappings have the following properties:

• each group representing a line in the generated file is separated by a ”;”
• each segment is separated by a “,”
• each segment is made up of 1,4, or 5 variable length fields.

The secret is that if we consider every character of each segment as a Base64 variable length quantity (VLQ ) encoded character, we will end up by having some interesting  mapping information between positions in generated file and original file. Taking the first character from the above source map we have;

Caveats in using Base64

Each Base64 digit represents exactly 6 bits of data. So, three 8-bits bytes of the input string/binary file (3×8 bits = 24 bits) can be represented by four 6-bit Base64 digits (4×6 = 24 bits).

This means that the Base64 version of a string or file will be at most 133% the size of its source (a ~33% increase). The increase may be larger if the encoded data is small. For example, the string "a" with length === 1 gets encoded to "YQ==" with length === 4 — a 300% increase.

In summary, it is always advised that inline processing of base64 like in html and css where it can be passed as src attribute should be avoided for large files

As defined by MDN, Cascading Style Sheets (CSS) are a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects like SVG or XHTML). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media...

One of the problems faced by starters in web development is how to arrange content using css on the web to fit the screen sizes of any device. With css floats you can achieve layout and positioning easily. As a starter to front-end web development taking your time to understand how to use CSS floats to achieve a grid system is super helpful for a strong CSS foundation.

Basics

Normal Flow

CSS postioning allows us re-organise these HTML elements regardless of their position in the normal flow.

CSS Positioning

• static
• relative
• absolute

Read more about CSS positioning here

The Box Model

The box model also determines the spacing of elements in relation
to other elements.

When you specify the width and height properties of an element with CSS, you are just setting the width and height of the content area. To know the full dimension of the element, you must also add the padding, border and margin. That is:

• Total element width = defined width + left padding + right padding + left border + right border + left margin + right margin.


• Total element height = defined height + top padding + bottom padding + top border + bottom border + top margin + bottom margin.

Grids

These sectioning helps ensure visual consistency between elements.

The Container

As the name implies, the container houses the grid. Think of it like a warehouse filled with stacks of boxes. In css, the container takes the entire width of the page (i.e. 100%). Maximum width is then set to accommodate Lager displays.

The css box-sizing property ensures that columns remain in the container after padding and floating.




The Row

Rows contain columns. On the webpage, the row keeps the columns within it from overflowing to other rows especially after floating it. This is achieved with the clear-fix hack or by setting overflow to auto. The overflow property makes ensures that the row-container has a height after floating.


Column Positioning

The column is the most important part of the grid. There are several different ways of positioning columns in CSS. While trying to position the columns take into consideration, the various widths and factors like responsiveness. There are all different ways of positioning columns in CSS. They include: inline-blocks, display-table, display-flex and most popular and least error prone **floats**. If our columns are empty however, floated columns will stack on top of each other. To prevent this, a minimum height is given. For the remainder of this write-up, we would be using a 6-column grid system. meaning 3 columns is 50% of the total 100% 6 columns, 1 column is 16.66% and so on.

if you fail to plan you plan to fail — Benjamin Franklin

The Benjamin Franklin saying, if you fail to plan you plan to fail, is true in life experiences and software engineering is no different.

Software engineering differs from other kinds of engineering and since it mostly deals with intangibles, it can easily change and seem very malleable. For instance, customers can ask for late minute feature additions or last minute changes that may even involve switching hardware platforms.

Therefore to manage these contingencies and have a great ribbon cutting ceremony, there is a need for software engineers to make a plan and follow it judiciously.

The first task of software product design is the requirement gathering. One can be tempted to say it is the most important stage of a project but keep in mind that a software project can also fail at other stages.

Requirements do set the stage for everything that follows, so it is definitely an important step. This is why John F. kennedy said that efforts and courage are not enough without purpose and direction.

Requirements are the features that your application must provide and one very effective way to gather these requirements is using the five W’s questions ( Who, What, Where, When, Why) and one H (how).

These requirements helps one to figure out what is needed to be built. Throughout development, the requirements are used to guide development and ensure it is headed in the right direction. At the end of the project, one uses the requirements to verify that the finished application actually does what it’s supposed to do. Some features of a good requirement include : clarity, unambiguity, consistency, priority etc.

Design is not just what it looks like and feels like. Design is how it works —Steve Jobs.

Design is a way to show the implementation of the project requirement. There are two types of design namely; high level design and low level design

High Level Design

High‐level design provides a view of the system at an abstract level. It shows how the major pieces of the finished application will fit together and interact with each other.

High‐level design sets the stage for later software development. It deals with the grand decisions such as:

• What hardware platform will you use?
• What type of database will you use?
• What other systems will interact with this one?

The high level design is meant to specify - Security, Hardware, user interfaces, Architecture ( monolithic, client/server, component-based, service-oriented, data-centric), Databases, Structure diagram(class diagram, object diagram, component diagram, package diagram), etc.

Low Level Design

Low‐level design fills in some of the gaps by providing extra detail and definitions for the actual logic for every system component that’s necessary before developers can start writing code. It gives more specific guidance for how the parts of the system will work and how they will work together. It refines the definitions of the database,the major classes, and the internal and external interfaces.It is based on High Level design but digs deeper, going into the separate modules and features for every program in order to document their specifications.

Simply said, High‐level design focuses on what while Low‐level design begins to focus on how. Low level design focuses mostly on object oriented design and database design (Normalizing the database to get the best design).

It is important to note that the line between the low level design and high level design can be a bit blurred since low level designs are high level designs but with greater detail.

As the whole idea of software products is to solve problems, it is necessary to keep in mind that a problem well stated is a problem half solved - Charles Kettering

So, recently I was given a task at the office, for some reason, it was thought best I do it in Javascript.

I decided to go the normal way, as I would in PHP, modular approach. This is where the problem began. I discovered that the browser could not load the imported modules. A bit of search online pointed me to module bundlers, webpack and browserify, amid others. Well, I had a chat with an inhouse senior developer suggested I use Webpack. Hence, my encounter with Webpack.

Intro to webpack.

Webpack is an open-source JavaScript module bundler.. Apart from its main purpose which is to bundle JavaScript files for usage in a browser. It also brings along other features, such as: - code splitting, optimizing modern code, stripping out unused code, dependency graph of your project.

Project set up [optional]

Project layout:

project-root     
 |- /src
    |- index.js
    |- name.js
 |- index.html
 |- package.json

[Do not add package.json, it will be created automatically by the command: npm init.

Set up

Ensure you have npm installed first, if not head over to npm.
To set up package.json, run the following in your project root and fill in the details:

npm init ##or npm init -y to skip questions

Install webpack and it's cli:

npm i -D webpack webpack-cli

An example:

{
 "name": "imageboard",
  "version": "1.0.0",
  "description": "A platform to share images without creating any account",
  "main": "index.js",
  "scripts": {
  "build": "webpack --mode development", ##For those using below NodeJs v8.2/npm v5.2.0
  "test": "echo \"Error: no test specified\" && exit 1"
 },
  "author": "eche",
  "license": "ISC",
  "devDependencies": {
  "webpack": "^4.35.0",
  "webpack-cli": "^3.3.5"
  }
}

As from v4, Webpack can work without any configuration file. Although, without any configuration, it can only bundle JavaScript resources. An illustration without the config file, webpack.config.js, will show us why we need a config file for production.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>webpack</title>
</head>
<body>
    <div>
	    <form id="myForm">
                <label for="username">Enter your name</label>
		    <input type="text" id="username">
    		<button id="submit" type="button">submit</button>	
	    </form>
    </div>
</body>
</html>

name.js

function displayName(myName) {
    document.write("Welcome" + myName + "!");
}

function getName(inputID) {
    return document.getElementById(inputID).value;
}

function treeShaking() {
    document.write("Dormant function!");
}

export {displayName, getName}

index.js

import {displayName, getName} from './name.js';

let submitBtn = document.getElementById("submit");

submitBtn.addEventListener("click", () => {
    let myName = getName("username");
    displayName(myName);
});

Run webpack:

npx webpack

If there is no error, you will notice that Webpack has added a new folder in our project root, dist/. Without any config file, Webpack will automatically store the bundled js file in this folder. It will also take the entry point as src/index.js

Move index.html into the newly created distributable folder, dist/ and add a script tag to our HTML file:

<script src="./main.js"></script>

Open index.html in a browser; fill the form and click submit. If everything works well, you will see:

Your name is <your_name>!

Thanks to Webpack

• All JavaScript files were bundled into a main.Js file.
• main.Js file is minified, which is an optimization.
• The browser understands some ES6 standards like; arrow functions, import and export statements.
• function treeShaking appears in name.Js but not in main.js. This is because Webpack removes unused code (tree-shaking effect).

But notice that index.html was not minified. Likewise, if we had other non-JavaScript resources they will not be optimised. This will affect the size and rendering speed of our project. Hence, the need to use Webpack config file for production.

We will delve into webpack configuration in another article.

In the previous part of this series, we talked about choosing a base color.

Well, while that was important, I'm sure some of us were starting to wonder where the core stuff of actually creating a color guide comes in. In your defense, Part 1 was a month ago.

That's where Part 2 comes in. Here I will be talking about creating your own cohesive color palette. I'll cover choosing a good base color, picking neutrals, choosing an accent to the base color, creating balanced grays and finally applying our color scheme. By the end of this article, we should have learned how to create a simple color guide we can use in our next project.

A Quick Review

In part 1, we talked about choosing a base color and tips on choosing a base color, where we mentioned what we should consider when choosing a base color. Part of what we discussed is how we should be aware of our target audience and the inherent meaning of our base color to them, choosing complementary colors, and if possible avoid using our competitors' colors. Remember that the colors you choose can work for or against the project you're trying to create.

Choosing a Good Base Color

With our tips from part 1 in mind, we want to choose a base color. So let's say we choose purple 😀.

What's next is to find a nice shade or tint or tone of blue 😥. Cheer up, so instead of opening up a color-picker to find this shade or tint or tone of blue, we will use other people's choices to aid us. Do you mean we will grab colors from people's designs? No, we will use inspiration websites like Dribbble and Designspiration to help us out.

Go to Dribbble and Designspiration and click on the 'colors' link in both.

You should have these:

Inspiration websites to find the right base color. Dribble (up) and Designspiration (bottom)

Choose a shade from each website to see that color in use.

Apart from seeing different versions of your base color. You will also see colors that match.

Pick one that best suits your project.

Creating a Matching Color Scheme

Default Color Scheme Types

Below with examples for each are some of the predefined color scheme standards that make creating new schemes easier, especially for newbies.

MONOCHROMATIC

These color schemes are made up of different shades, tones and tints within a specific hue. They are more often than not the simplest schemes to create. But they can be boring when done poorly.

ANALOGOUS

These color schemes are created by using three colors that are next to each other on the color wheel. They all have the same chroma level, but by using tones, shades, and tints we can spice it up.

COMPLEMENTARY

These color schemes are created by combining colors from opposite side of the color wheel. Basically, they consist of only two colors, but can be expanded using tones, tints, and shades.

Monochromatic, complementary and analogous color schemes. (Image credit: Cameron Chapman for Smashing magazine)

Other predefined color schemes standard include:

• Split complementary
• Triadic
• Double-complementary (Tetradic)

Creating Your Own Color Palette

Finally !!! Time to create your custom color palette 🎉🎉🎉🎉

Creating your own color palette can be a bit intimidating and I know you might be thinking - Olamide, why do I need to create my custom color palette since there are already predefined ones 😒🙄

First of, creating your custom color palette is not as complicated as many people think. Also, the problem with those kinds of color schemes above is that applying it to a real design isn't very practical, and that's why we are here to know the few tricks you can use to create great color palettes.

So, for the purpose of our project here, we'll create a color palette for the onboarding of a mobile app. Our client is a Fintech mobile app.

All right, you should have a HEX value for your base color. Mine is #B070BF. We will be creating our palette from this color. So, our palette will have the following colors:

• Base color
• Neutrals: White, dark gray, and light gray
• Accent color.

GETTING YOUR ACCENT COLOR

Our accent color is the color that we use when we want things to stand out in the design. It should be used in small amounts and it is usually used on Call to actions.

To get your accent color, go to Paletton. Type in your color code into the color box

Enter your base color code in the box

To generate a accent color, you can click around the icons at the top to find a suitable color scheme. The color scheme the icons generate are based off the predefined color scheme we talked about above.

Click through to get a color scheme you like

For this project, I like the pink (topmost right color) that comes up under the adjacent (also known as analogous) icon, so that's what I'm using as the accent for our scheme.

Our color palette so far - nice base color and a shot of an accent

As our color palette is shaping up, the next phase is to add our neutrals.

ADDING THE NEUTRALS

Neutrals are an important part of creating a color scheme. Gray, black, white, brown, off-white and tan are considered as neutral colors.

Gray, black and white will take on either a warm or cool impression depending on surrounding colors.

Browns, tans, and off-whites tend to make color schemes warmer.

More often than not we need an average of three neutral colors to every scheme:

• White
• Dark gray: is usually used for text #424242
• Light gray: I use this as a background for subtle differentiation against white backgrounds #fafafa

You can choose your grays with the following:

• Use Dribbble and Designspiration again 😉 to find a nice gray from your previous result that matches your base color.
• You could use Erica Schoonmaker’s technique if you have Photoshop to harmonize your grays with the base color.
• You could use Olamide Jegede's (that's me 😁) method for balancing your grays.
  Shameless plug- Since this is my lesson, I'll be using my method and I urge you to do the same please 🤗

BALANCING YOUR GRAYS

To create our balanced grays using Olamide's method:

• We'll start with going to Paletton and type in our color code into the color box like we did earlier when trying to pick our accent.
• Revert back to Monochromatic and click on Presets
  

Select the icon to choose monochrome, then click on Presets to show a list of preset schemes.

• Select greyish dark and hover on the darkest color in the scheme and write the HEX code. In this case, it's #1F1720
  

Select the greyish dark Preset and pick the color

• Click on UNDO at the top of the page. This takes us back to our original color scheme. Click on Presets again.
• Then select greyish lightest and hover on the lightest color in the scheme and write the HEX code. In this case, it's #DAD4DC
  
  Select the greyish lightest Preset and pick the color

So yeah that's Olamide Jegede's method for balancing your grays. Nice right 👌

Picking grays that balance with the base color might seem like a small detail but it makes a nice difference.

Yes!!! We did it!!! 🎉🎉🎉

Ladies and Gentlemen, our color scheme is complete. I feel ecstatic and I hope you do too.

Presenting our color scheme:

Our glorious color scheme.

Your Color Scheme in Action

Ok, so we have finally made our color scheme, not it's time to put it to use. Here's a little tip on how to apply the colors in your color scheme to a project.

• Base color: Used for logos, call to actions.
• Dark gray: Used for headings, and body text
• Light gray: Used for backgrounds (sometimes for body text if Dark gray was used as background
• White: Used for backgrounds.
• Accent: like the name implies used as accents, in graphics (like icons, illustrations), button hover effect

Like I said earlier, the project example we will use for the purpose of this lesson is the onboarding in a FinTech payment mobile app 🤑

For an insight on the transformation that will occur, here's a mockup of the screens in grayscale and with our color scheme put to use.

Laying it out in grayscale helps us to focus on hierarchy and layout

GLOW UP: courtesy of our color scheme

As you can see, purple is the base color here. It’s used on the logo and on button

Our accent, pink / pinkish - purple 😜, stands out beautifully against the base color. This is used in very small areas, for the and in the icons. The less you use this color, the more it will stand out. Less is more

The dark gray is used for the text, slider indicator outlines.

The light gray is used for the form text, the slider controls and the form-field outlines.

The white forms the background.

Keep in mind that when using color and text you need to ensure that there is sufficient contrast between the background and the text.

Why? This is because of people with color blindness or low vision read the text.

Good design is not only aesthetically pleasing, but functional and accesible - Olamide Jegede

The WebAim Color Contrast Checker is a tool to help you ensure that your colors comply with WCAG Guidelines.

Using Photos For Color Schemes

Recently, I discovered a tool you can use to automatically generate color schemes from a photo; the Adobe Capture CC mobile app.

With Adobe Capture, you can upload an image or use your camera. This is awesome for times when you might be inspired by a physical object. You can also pick an image from your Creative Cloud account or Adobe Stock.

Adobe Capture CC mobile app (Image credit: Cameron Chapman for Smashing magazine)

Conclusion

You're not restricted to using 5 colors in your scheme, as long as you follow the process above it's fine to find more colors that work with your scheme.

There are sites that allow you upload your color schemes and store them for later reference, take advantage of them.

Remember the best way to be good at creating color schemes of your own is to practice. If possible, create a scheme on a daily basis or rather weekly basis.

Play around and have fun. I would like to see what you create, mention me on twitter @hola_mide and Instagram @hola.mide

This post turned out to be longer than planned. Thank you for bearing with me 👍

I recently had opportunity to speak with Dr Nadu Denloye, who I have a lot of respect for with her achievements as a pioneer of the digital industry in Nigeria and the experience she garnered in building a successful technology business, Telnet, in a nascent era.

Dr Denloye suggested that I read Clayton Christensen's recent article Cracking Frontier Markets. Having studied Christensen's jobs to be done framework, and used it as lens across product development, business, and life; I expected Christensen to live up to his reputation, but truth be told - I was not ready for what he brought this time around.

In Cracking Frontier Markets, Christensen, Dillon, and Ejomo embrace the unembraceable in their almost praise for the lack of enabling environments in frontier markets like Nigeria. They suggest embracing the lack of the most fundamental requirements to build businesses in frontier markets as a competitive advantage rather than a disadvantage.

You might think, this was akin to not crying over split milk but this is far from it, in this case not only is the milk split but the jug to hold said milk is either broken or non-existent.

very real barriers exist. Corruption, the lack of functioning institutions—what Harvard Business School’s Tarun Khanna and Krishna Palepu call institutional voids—and dilapidated or nonexistent infrastructure constitute formidable challenges. How should companies think about and address them? - Cracking Frontier Markets

This seemingly mad proposition is supposed to be the only path to unleashing market creating innovations in the frontier markets and somehow my entrepreneurial sub-conscious was nodding in agreement as the author laid out examples from Nollywood in Nigeria (which innovated its way to second largest movie industry in the world on per-capita basis) to Galanz in China (now the world's largest microwave oven maker)

In practice, the opposite is true. Market-creating innovations don’t wait for such obstacles to be removed by resources that are pushed in. They essentially pull in the necessary resources—creating workarounds or funding the infrastructure and institutions needed to deliver their products—even if those efforts are not initially supported by the local government.- Cracking Frontier Markets

The principle of subsidiarity could say this makes for a red-herring moment where governments allow themselves comfort in not having to listen to entrepreneurs rant about the government's role in creating enabling environments.

The authors caught themselves a bit on this or so I think, and I suspect it must have been a point of conversation or even debate as they carried out their research. The allusion is drawn in the article;

It may seem we are suggesting that governments in frontier economies transfer responsibility for infrastructure development to the private sector. We’re not. We are highlighting the importance of sequencing and the catalytic role of innovation in infrastructure’s development and improvement. - Cracking Frontier Markets

There is some truth here but not the full story. Whilst it may be surmised by our witnesses of market creating innovations pulling infrastructure forward in this decade however, as Ory Okolloh emphatically pointed out in 2014 - *It’s not possible to innovate people out of poverty*;

Ory Okolloh
: “I’m concerned about what I see is the fetishization around entrepreneurship in Africa. It’s almost like it’s the next new liberal thing. Like, don’t worry that there’s no power because hey, you’re going to do solar and innovate around that. Your schools suck, but hey there’s this new model of schooling. Your roads are terrible, but hey, Uber works in Nairobi and that’s innovation.
… We can’t entrepreneur our way around bad leadership. We can’t entrepreneur our way around bad policies. Those of us who have managed to entrepreneur ourselves out of it are living in a very false security in Africa. There is growth in Africa, but Africans are not growing. And we have to questions why is there this big push for us to innovate ourselves around problems that our leaders, our taxes, our policymakers, ourselves, to be quite frankly, should be grappling with.

… I think sometimes we are running away from dealing with the really hard things. And the same people who are pushing this entrepreneurship and innovation thing are coming from places where your roads work, your electricity works, your teachers are well paid. I didn’t see anyone entrepreneuring around public schooling in the US. You all went to public schools, you know, and then made it to Harvard or whatever. You turned on your light and it came on. No one is trying to innovate around your electricity power company. So why are we being made to do that? Our systems need to work and we need to figure our shit out.” - Ory Okolloh

From fintech where players like Paga, Paystack, and Flutterwave, are championing financial inclusion for the unbanked and helping enable a new breed of entrepreneurs; to health-care where startups like Lifebank are literally providing a new lease of life via their blood and oxygen service to resuscitate the people of a health care system that has been grossly neglected by Government. And even garbage collection where WeCyclers is closing the gap left by an overwhelmed recycling infrastructure in Lagos Nigeria.

Some of these startups and initiatives would appear as a mad quest for someone in the developed world, but precisely that mad label has always been cast on great adventurers in history seeking to open new frontiers and markets.

Whilst embracing non-enabling environments could take getting used to, innovation might flourish and new markets emerge however, frontier nations still need enabling environments that take care of fundamental problems if entrepreneurs are to succeed and the mass of their people grow out of poverty.

Kola Aina on Twitter: "Man, anyone that's venturing, creative & pushing the envelope here in Nigeria gets all my respect. The unnecessary battles, red-tape and obstructions to progress are draining and will easily swallow the unprepared. One day we will write, for now we soldier on. What a day! 👊🏿" /

“All colors are the friends of their neighbors and the lovers of their opposites” – Marc Chagall.

Now to pick any color from the over 10 million colors we can see at any given time can be either easy or quite difficult. But what we need to have in mind, is that this color will be the primary color for the project; that is, everything will revolve around this color.

No pressure: You can’t fail here, as I’m here to help you.

Choosing a Base (primary) color

This is one of the most important decisions when deciding on the visual interface of an app or website.

For any project involving clients, one thing that is good to keep in mind is that you’ll have to defend most if not all your choices, so you should try to have to have solid reasons that justify your choices.
Else, it will be a case of their favorite color versus your favorite color, and this is a battle you can not win as they the ones paying for the project.

All in all, what I’m trying to say is that you make sure you have some valid reasoning behind not only your color choices but all your choices.

Tips on Choosing a Base color

1. Use what you have

More often than not, if the client has a logo with an established color, that will usually be your base color.
However, note that if you decide to use the color from the logo, you can use different variants (shade or tint) of the same hue.

2. Do not use your competitors’ colors

Sometimes, there might be an urge to copy if one of your main competitors has a strong brand color, don’t do it if you can help it. Instead, find their colors and remove them from your color schemes.

3. Consider your target audience

The colors of a website for a fashion store would likely not be the same as the colors for a primary school or a kid’s toys website.

Think about how your use of color might be perceived in other countries and cultures – Make sure the colors in your app send the appropriate message.

Think about who will be using the website and how you want them to feel (serious, relaxed etc.).

4. Use complementary colors

Colors in your app should work well together, not conflict or distract. Use complementary colors throughout your app or website.

5. Use sufficient color contrast ratios

Lack of sufficient contrast in your app or website makes content hard to read for everyone.

Consider using an online color contrast calculator to help you accurately analyze the color contrast in your project to ensure it meets optimal standards.

7:1 is the preferred ratio because it meets more accessibility standards. Try to achieve a minimum contrast ratio of 4:5:1.

This is the first article in the series: A Simple Color Guide for Web Projects

Advert blocking in browsers has become the new norm as concerns around invasive adverts and privacy reaches mainstream, with most people discovering that blocking web advertisements can substantially improve their browsing speed and experience.

Popular browsers like Google Chrome, Firefox or Safari had in the past enabled privacy configurations via plugins and advanced settings but the sheer complexity of how to enable this proved elusive to most people.

Today, there is increasing adoption of newer privacy focused browsers on mobile and desktop like Brave, Vivaldi, Epic, and Firefox Focus that offer privacy features like HTTPS-everywhere and Ad-blocking already enabled out of the box.

Tracking users on the web for the purpose of serving ads has been one of the greatest culprits in the violation of online privacy. Every genuine effort today to improve privacy is now expected to block ads or ad-tracking.

Most ad-blocking services utilize a blacklist and behavior approach to block adverts. The first line of defense in blacklist filtering is usually server based. Such that ad-blocking services maintains a list of domains and ip addresses that serve ads and try to proactively block assets from these sources from reaching your browser.

Blocking ads via the server blacklists is necessary but difficult to scale as new servers are spawn every now and then. As this can become redundant very quickly another line of defense is introduced.

The second line of defense is executed in the website content. The ad-blocking service scans a website content for any expressions or terms that match a list of common advert keywords, in assets such as images or videos. This also extends to asset containers via their CSS classes or identifiers.

This process could lead to false positives where adverts are flagged correctly and blocked but they are needed to complete a website's experience. For instance, an advert that links to a new album on a musician's website. In cases like this, adverts are created as part of the experience and guide the user on their website journey rather than to third-party related/unrelated offerings that are annoying.

Knowledge of this blacklist of DOM element names usually could lead to better experience for your users and prevent false positives where assets are flagged for blocking even though they should not be.

For instance, AdBlockPlus will block images with common advert terms in their path or file name. For example naming images or saving them in folders with: banners, adv, ad, or myimage_300x250 will cause the image to be blocked. DOM elements with classes or ids corresponding to such terms will also be blocked.

Luckily this is not arbitrary, AdBlockPlus maintains a publicly accessible blacklist that is updated every few days. Getting familiar with the list and the patterns in there could save you a lot of frustration.

Having examined markets, recurring revenue and customer acquisition models, we’ll now explore a few persuasion tools that make it easy for businesses to charge more money.

1. Decoy Effect

This can be leveraged when there are two price considerations (say $66 per month & $21 per month). To make customers opt for the $66 p/m plan, create a third option (say $50 per month) close to your target price and leave a gulf in benefits between it and the $66 p/m option.

In this situation, the customer usually opts for the most expensive option ($66 p/m) to enjoy the full benefits of the product for only a few dollars more. The persuasion comes from perceiving the comparative advantage of this option against the $50 plan as much higher than the comparative advantage of the $50 plan over the $21 plan.

Alternatively, we can create a third price option (say $80) that is higher than our target price of $66 p/m. This new plan will have benefits similar to the $66 p/m option. In this case, also the customer opts for the cheaper option, settling on $66 per month.

Phew! If you spotted the decoy, don’t forget to leave a comment.

2. Center-Stage Effect

It is experimentally verified that humans have a knack for choosing the middle options when confronted with the responsibility of choice.

Not too much, not too little – just moderate.

This phenomenon is called the center-stage effect and it can help businesses using three (3) price tiers with the preferred option in the middle.

3. Framing Effect

It is a fact that people are most likely to support a cause if it is presented in positive terms.

As a result, using the framing effect means you’ll have to project the value of the customer’s choice not just their potential benefits.

As a rule, show the customer how much they can save by opting for the more expensive options e.g. Save $50 with an annual subscription, save $25 with a quarterly subscription.

4. Bandwagon Effect

If most people are opting for it, it must be the best option, right? For some dysfunctional reason, most of us answer in the affirmative. This is because of group-think – a psychological phenomenon that occurs within a group of people in which the desire for harmony or conformity in the group results in an irrational or dysfunctional decision-making outcome.

The trick is to design your price tiers and tag your preferred option as the “MOST POPULAR”

Incredible thoughts?

5. Base Rate Neglect

Often people judge that an outcome will occur without considering prior knowledge of the probability that it will occur i.e. most of us will only consider the price for an item only within the context of an immediate and applicable call to action on those prices at a given time.

Base rate flaw is noticed in the human tendency to make buying decisions based on prices in front of them rather than run comparisons with other similar products.

For example, a product that normally costs $3 is listed for $9 on a particular website, and the user goes ahead to pay without running a comparison.

6. Other hacks to charge more money easily.

• i. Unique offerings: unique offerings with distinguishable from competition allows you charge more.

• ii. Niche Promos: An approach that can be used is to create a niche discount and present this to some users that have crossed a determined milestone as an exclusive deal just for them.

• iii. Money back guarantees over free trials: Instead of offering a 30 – day free trial, adopt a model like a 60 – day money back guarantee. If your product is great, you can expect comments like “ that 60-days didn’t seem like enough time”

• iv. Discount Offers: Say we have a price option of $49 per month
  An approach that was used at WP Engine to good effect was to write $79 (cross it out) and then write $49.

NB: Most businesses develop a pricing strategy using a suitable combination of the effects above

Remember, “Price reduction is not a competitive strategy, always seek options that make it easy to charge a lot of money”.

And this concludes our three parts series about unlocking predictable acquisition of recurring revenue with annual repay in a good market.

The first post in this series identified good and bad markets for building a cash machine.

When building out our revenue models and customer acquisition approach in a good market there are a few rules of thumbs that you need to keep in focus for a well-oiled cash machine.

always seek options to make it easy to charge a lot of money

This may seem obvious but you find a lot of startups take the contrary approach of continually lowering prices as a customer acquisition strategy. This strategy quickly locks you into a long race to the bottom that ruins a lot of companies.

Thus building a solid product always puts you in poll position with options to charge a lot of money. Your product pricing should reflect the value your product provides.

A recurring revenue model, especially for SaaS (Software as a Service) and subscription-based products offers the predictability of income stream which is a highly value asset for any business.

6 years ago, Adobe’s Creative Cloud launched Adobe Systems into the recurring revenue–based subscription model space. Subsequently, Adobe’s stock price in 2016 appreciated nearly 300% of its 2012 value.

Adoption of recurring revenue models by Adobe and software behemoths (Google, Amazon etc.) is compelling evidence that any start-up with cash machine ambitions must anchor on a recurring revenue model.

Some questions you have to answer as you implement the recurring revenue for you cash machine includes:

• What is the best frequency for recurring charges; charge per month, per quarter, or per year?
• How much each customer should pay per month?
• How many customers do we need to achieve a monthly revenue target?

Suppose that our startup has a monthly recurring revenue (MRR) target of $10,000. A new rule of thumb suggests that the fewer customers that can help us meet this target then the easier it would be for us to achieve and grow the target sustainably.

Kevin Kelly's hypothesis stated that creators need only a thousand true fans (customers) giving them $100 a year to make a living. However, Jason Cohen of WP Engine cautions that an even smaller number of true fans i.e. 150 customers is more practical.

In this context, your start-up needs only 150 loyal customers to reach $10,000 in revenue per month i.e. each customer pays an average of $66 per month.

Customer Acquisition Strategies

Now, from Kevin DeWalt to Jason Cohen, there's an absolute wealth of options on customer acquisition and customer development approach. Our focus will be on three (3) pragmatic acquisition methods.

1. Scratching and clawing: which is done by reaching out to your immediate professional network. Given that you're creating value in a big market, this approach can help you capture the first 50 Customers.

2. Leverage guest blog posts and Social media by offering coupons to niche blogs and social media influencers. Less effective than paid advertising, but can pull in another 25 customers.

3. Use basic marketing – tools like Adwords and sponsored posts on relevant websites are the most effective and can pull in a set of 75 paying customers.

An example of scratching and clawing at WP Engine

During the customer development phase at WP Engine, Jason achieved a 100% positive response from WordPress consultants on Linkedin using the email format below:

Hi, I’m a founder of this new WordPress hosting company. It’s supposed to be designed for folks like you so I’d love to talk to you about your pains and your needs.

Now I know your time is valuable, you’re a consultant and so I absolutely do not want you to feel like I’m just trying to grab time from you.

I am very happy to pay whatever you think is fair for an hour of your time even if that’s more than your normal hourly rate cause I appreciate this is a weird one-off thing.

NB: The secret to great customer development is respect; People are most likely to pay you their attention when you place a premium on their time.

In some other not-so-unique instance of scratching and clawing, customers give money to businesses that address their pain even before they'd built anything tangible.

Perhaps, if you talk to enough people about how your idea can ease or erase their pain completely, You'll meet someone who is willing to pay you for the products even before it is built. Certainly, there's no better way to start than to have a market hungry for your products or services.

This is the second article in the series: Unlocking the Cash Machine for your Startup.

Stay tuned for the next article - Unlocking the Cash machine: Pricing Higher

The key to turning your product into a cash machine lies in unlocking recurring revenue in a good market.

While there are several pragmatic revenue models and steps to recurring revenue in a chosen market, attaining this goal in a predictable fashion can be daunting.

At any rate, there are restrictions to the kinds of the market where startups can develop predictable recurring revenue with annual repay from customers.

For instance, cash machines are relatively easy to build in a good market rather than in a bad market.

Finding a good market to build a cash machine is important for startup survival.

Good Market

The choice of market space is mostly either one of two classes:

• business to business (B2B) or
• business to consumer (B2C).

Consequently, drawing from industry experience, the better category to build a self-funded startup is the B2B market.

In B2C it is almost impossible to establish a revenue model that involves direct payment from your users. Regardless of your products' awesomeness, you'll have a good chunk of customers complaining if you decide to charge them.

For a product as awesome as Google Maps, Google experienced a massive backlash when they tried to charge for it. Today GoogleMaps is practically free and the direct revenue points have been pushed so far out that most users will never pay for it.

By Nature, most business operations accrue in financial cycles, and this presents B2B startups with great opportunities to create value and build a cash machine. Like rain, activities such as tax, invoices, project management, content development, report processing, analytics, and human resource needs are inevitable. Similarly, after-markets for already successful products are great spaces for building a business with predictable recurring revenue.

Next, it is important to compete in a big market space where you can carve a niche with an intricate product because it is easier find customers in these spaces and there’s plenty of room to pivot if your product does not fly at first. This is what Stewart Butterfield did at GameNeverending that became Flickr and later with Glitch that became Slack

Bad Market

A marketplace is an example of a bad market to build a cash machine because you have to attract both buyers and sellers. The marketplace startup is basically a combination of business–to–business and business–to–consumer companies. This is rather complex and is difficult to realize a cash machine from this setup.

Picking the right market is an important step to attain the reality of building a predictable acquisition of recurring revenue with annual repay.

This is the first article in the series: Unlocking the Cash Machine for your Startup.
Read the next article - Unlocking the Cash machine: Revenue Models Here

We believe that the road to building a sustainable company is paved with learning. We often ply this road, and last week in Mobnia, we had cause to study an interesting tech company founded by a brilliant African woman - AppsTech. Our sprint ended with the reward of nine (9) lessons shared in this post.

Right after this brief introduction...

In 1982, Rebecca Enonchong was only 15 years old when she moved to Uncle Sam’s land of opportunities to pursue the American dream. And being a passionate young woman with interest in democracy, peace and human rights, 17-year-old Rebecca would participate in a “Free South Africa” demonstration in Washington D.C., only 45 minutes away from Maryland where she would found her company, AppsTech.

After earning a Bachelor of Science and Master of science degree from the Catholic University of America, a prolific career in financial systems followed. It was during this spell that Rebecca was exposed to something that fascinated her very much - software technology.

Reflecting on how quickly Rebecca’s appreciation of technology translated into mastery of enterprise software applications, it can be argued that years before Cal Newport advocated for Deep Work (which we practice at Mobnia) - and the skill to master hard things quickly; Rebecca made a seamless career switch by devouring software application manuals from cover to cover, to attain expertise in installation and handling of enterprise applications. Deservedly, she gained recognition as a domain expert in Oracle products (becoming an early Oracle Financials certified instructor).

Lesson 1: Ask questions

When Alleygius - a consulting firm subcontracted a staffing operation for Global One to Rebecca and other subcontractors in '99. She would speak to her friend about the opportunity and be rewarded with the suggestion to sign the contract as if with a company and not a person - AppsTech was incorporated soon after.

"No one loses their way by asking the right questions with an open heart"

Lesson 2: Build around what you know best

AppsTech was unquestionably built around what Rebecca knew best, helping organizations set up and run financial and enterprise resource planning. And as expected, AppsTech took on new consulting projects. However, these earlier jobs were staffed with subcontractors, some of whom later joined AppsTech as full-time employees.

Lesson 3: Build and nurture relationships

Interestingly, Rebecca would go on to recruit some of the earliest employees from her network of ‘good students’ from her training years.

AppsTech revenue flowed from two main streams - implementation of financial systems (Oracle products) and application management services (database maintenance contracts). And about 2 years after AppsTech started, Apprio inc. was acquired for its Application Service Provider (ASP) expertise. 90% of AppsTech's customers used its application management services which offered low margins compared to systems implementation. In fact, 30% of their customers had long-term contracts with AppsTech - this provided a cushion through the economic hard times of early 2000’s.

Lesson 4: Have the full picture in mind, start work, then fake it till you make it

AppsTech was cradled in an extraordinary cocktail of resourcefulness, global vision, hard work, focused strategy, leadership, internal financing, and employees.

For instance, during the early days when it was just Rebecca and the subcontractors. The global vision impressed a client who came in from France to see a “call center” filled with some computers (and staff). With the help of these borrowed staff and computers from neighboring offices, AppsTech won the contract!

Secondly, Rebecca lived by a conviction to build a sustainable global business, with globally-minded employees. AppsTech wasn’t going to reach for the low-hanging fruit so she set out from the outset to compete based on merit and competence. AppsTech was built to be better than everyone else in their space and this was only going to be possible through hard work and perseverance. Often times, Rebecca would concern herself with nothing else but her business, sleeping with her computer and responding to emails across time zones - she’d once said... ‘a global business never slept’.

Lesson 5: Watch the Competition… like Rebecca Enonchong

Rebecca believed that success with AppsTech rested on a keen sense of the competitors next moves. So, she watched them like a hawk, spending 1-3 hours daily on competitive analysis. And frequently, checking domain names registered by AppsTech’s competitors. Fortunately, she’d been in political circle and picked up the uncanny ability to watch the opposition. A skill which proved useful in business.

Lesson 6: Have a Focused Strategy

“Where there is no vision, the people cast off restraint” - Proverbs 29:18

In firms with a robust technical skill set, the temptation to be opportunistic is greater when there is no driving vision. Rebecca resolved that AppsTech couldn't afford to be opportunistic despite the many profit possibilities made available by the firms' robust technical skill set. During lulls in business, AppsTech did not explore non-expert job opportunities even when similar firms appeared to be full-service, one-stop shops; AppsTech stuck to doing one thing and getting it right.

Lesson 7: Decide on how much pressure you can take, and how fast you wish to make decisions

Again, Rebecca’s ability to understand her business environment informed the decision not to take on the pressure of external debt nor dilute her equity control of the firm by accepting venture capital funding. Thus, the firm grew organically with reinvested profits. As a matter of fact, the 2001 acquisition of Apprio was paid for with cash. And thanks to AppsTech financial controller at the time - Patricia Gbeti, expenditures were scrutinized and strict processes were in place to force employees to make efficient decisions.

Lesson 8: Lead by example

Rebecca would often put employees on the spot, testing them about their software knowledge in the hallway. So high were her expectations of a high level of discipline, excellence, and work ethic. Being the daughter of a Cameroonian chief, she most likely adopted these attitudes and behaviours from her father.

==“In any situation, the realm of possibilities far exceed what is apparent” - Rebecca Enonchong

Like their leader, AppsTech employees had a triumvirate power of business knowledge, product knowledge, and global knowledge. Also key is open-mindedness and ability to disagree without animosity. AppsTech workforce treated each other as a second family and to prevent layoffs during the recessions of early 2000’s, they unanimously decided to cut individual benefits packages instead of AppsTech funding for philanthropic endeavours in Africa.

Lesson 9: Work matters because it gives you the power to leave the world better than you found it

Remember, the “Free South Africa” demonstration mentioned at the beginning of this article? It earned Rebecca an arrest at 17. Till date, Rebecca is an active member of African and Cameroonian communities in the USA. Duly noted by international media and Cameroonian media, Rebecca remains a strong supporter of democracy, peace and human rights.

==“The power of technology excites me almost as much as a good meal. The desire for all to have a good meal drives me harder” - Rebecca Enonchong

REFERENCE
Columbia Business School. (2002). Information Technology from the United States to Cameroon: Rebecca Enonchong and AppsTech [PDF file]. Retrieved from https://www0.gsb.columbia.edu/mygsb/faculty/research/pubfiles/91/Cameroon_AppsTech.pdf