Prodtyping

The process on turning ideas into reality

March 11th 2019

Optimize Your Site for Google’s RankBrain

What is RankBrain?

RankBrain is Google’s algorithm that is used to sort live search results in order to achieve better results to search queries. It is also used to help Google understand the search queries themselves. Before RankBrain, Google was running into a serious problem that they called a knowledge gap. Everyday about 15% of searches were unrecognizable to the algorithm. This number doesn’t sound like much but actually it is about 500 million searches a day. Google engineers would have to tweak their search algorithms manually to try to achieve more optimal results. Now RankBrain does a lot of that heavy lifting for them and has proven its worth by going head to head with Google engineers. The results? RankBrain outperformed them by 10%.

How does RankBrain work?

How does it work? RankBrain will take a search result and then depending on how the user interacts with it either by staying on the page or leaving to go to a different one it will adjust the algorithm and then see if that achieves a better result. RankBrain works to figure out what you actually mean instead of taking each key word and making a guess at the meaning. This means that it is trying to figure out the context of your search instead of just matching keywords. RankBrain uses several metrics to determine if the search results have been successful.

Increase Dwell Time Decrease Bounce Rate

Dwell time is the time spent by a user after clicking on your site from a Google search. The longer someone spends time on your page the better! RankBrain takes this into account and will adjust results with this parameter in mind. Bounce Rate is the measure of how quickly someone leaves your site after visiting it. A great tactic to help combat people from leaving too quickly is to have the most important information above the fold of your web page. Most people will not scroll down on a page to see if it contains the information they need, so to encourage them to stay relevant information needs to be the first thing that they see. To maximize your above the fold content keep your content in the center of the screen and use a short intro that goes over exactly what will be covered in the article. Typically if someone has searched on google for a subject and has not included the term “introduction or beginner” then you don’t need to go into too much detail with the intro they already have a handle on the basics. Pay attention to your headline as well. A super descriptive headline means that they can see in the least amount of words possible if your page is going to answer their question. After grabbing them with the hook of a great title and descriptive intro consider making your content longer. Longer posts mean that things are covered in more detail and if they do decide to read it all it increases dwell time as well. While longer post are better be sure to format it in a way that makes reading it more enjoyable. Like paragraphs in an essay break up your content into chunks with descriptives sub headers. That way the reader can easily see what topics will be covered and it doesn’t all just look like a giant mass of text.

Decrease Pogo-sticking

Pogo sticking is going back and forth on a search result page to each of the links in order to find the information that you want. If a lot of people go to each page and back but then find one page they spend more time on than the others RankBrain will take that into account. Decrease the likelihood of Pogo-sticking by creating comprehensive content so users feel like they can get everything they need all in one place.

Leverage Keywords to be more RankBrain friendly

Don’t optimize for long tail keywords, RankBrain understands that similar long tail keywords are the same thing. Remember, RankBrain is designed to try to understand the context of a search query. Best Homemade Dog Food Recipes for Healthy Dogs Best Healthy Dog Food Recipes for Dogs

Focus on optimizing medium tail keywords Dog food recipes Dog food list Dog food meals

Improve Organic Click Through Rate (CTR)

An important aspect of getting better CTR is to increase brand awareness. Users are more likely to click on your site if its one that they are familiar with or have seen before and consider to be a trusted source of good information. Some ways to increase this awareness are utilizing ads on social media platforms like Facebook, Instagram and Twitter. Having a great email newsletter is another way as well. Email newsletters should be tailored to your audience and not inundate them with worthless information. Publishing a lot of content over a short period of time is helpful in the beginning as well. It makes your site look like more of an authority figure and encourages back linking as well.

TL;DR

A main part of Google’s algorithm is RankBrain, it uses machine learning to determine the most relevant results from search queries. Knowing now that a main factor in SEO rankings is identifying the searcher’s intent for a search query it is important to put out longer forms of content to increase dwell time which signals RankBrain that you have what users are looking for. Increasing brand awareness is another vital step to get people to click on your site and by keeping the most important information in the center of the screen so users don’t have to scroll to find it you can hopefully increase your rankings and help people find the information that they are looking for.

February 20th 2019

Keyword Research for SEO

What is SEO? (a quick overview)

For a more in-depth look please refer to the previous blog post here.

SEO, short for search engine optimization is a strategy to optimize web pages in order to increase their rankings in google search results. Google uses bots called spiders to crawl web pages online. These spider bots add and categorize pages based off of what content is relevant to particular search queries. They do this in order to give people the best results when they search for something online. Part of SEO involves keywords which is what is article is going to cover.

What are keywords?

Keywords can be described as words or phrases that people search for. Many people utilize the ability to search by voice so often entire phrases can be considered common keywords. They are also used to describe the content found on a web page - such as a phrase to sum up the main idea of that content. Keywords are important because they help you target your audience and can drive more organic traffic to your site. By placing them in high attention areas it also allows for Google crawlers to easily identify the content of the page. Adding keywords should not be about bloating content with unrelated keywords as it is now penalized by Google.

What is keyword research?

Keyword research is a strategy to discover which terms people regularly utilize to search for information in their google search engine. Finding out which words that are commonly used can help with SEO rankings, marketing and content strategy. Having a great content strategy enables you to build content around a particular term that you know your audience is searching for. Keyword research should be a way to add value to your high quality content to increase organic traffic to your site.

Types of keywords

Short Tail Keywords

These are short and are typically made of three words or less. These types of keywords are hard to identify intent so they do not typically convert well despite having a high search volume. Many short tail keywords are common and have a high competitive rate so it is harder to achieve a high ranking when using them.

Long Tail Keywords

These are keywords that are longer than three words. They are typically much more descriptive which means they have a specific search intent and leads to a low search volume but a high conversion rate. They tend to be less competitive as well since they are more specific.

Short Term Fresh Keyword

This type of keyword is used to describe something that is trending and popular in the current moment. They tend to have a large search volume while they’re hot but will drop drastically once the hype has passed.

Long Term Evergreen Keyword

Like a tree that has leaves all year round evergreen keywords are always relevant and show very little change in their search volumes. They tend to be more specific and have a high conversion rate. These keywords have a moderate search volume and competitive rate for ranking. Despite their consistency note that content still needs to be updated regularly or eventually google will rank your page lower for not having fresh information.

Product Defining Keyword

Keywords that explain and describe products. They tend to be very specific and have a high conversion rate. Since they are more specific they have a low search volume and a low competitive rate.

Customer Defining Keyword

These are created to target specific groups of searchers. They have a low search volume and low competitive rate but a high conversion rate.

Geotargeting Keywords

Keywords that are used to target specific places such as cities or states. These are typically used by businesses who have brick and mortar establishments in order to describe where they are. Like customer defining keywords they have a low search volume and low competitive rate but a high conversion rate.

LSI Keyword

L.S.I stands for latent semantic keyword. These are keywords that closely relate to the main keyword. They are very specific and have a high conversion rate but a low search volume and competitive rate.

Intent Targeting Keywords

There are four categories for intent targeting keywords.

  • Commercial: A broad category of keywords used to drive customers to sites
  • Navigational: Used to search for a specific site
  • Informational: For information research
  • Transactional: Keywords that may lead to a purchase online

Getting Started

  • Start out by brainstorming
  • Identify your niche
  • Think about what you’d search for
  • Identify key phrases
    • Example: weight loss
    • weight loss calculator
    • weight loss pills
    • weight loss tips
    • weight loss plans
  • Take a look at Google Analytics and Google Search Console
  • Identify what search terms are being used by people already coming to your site
  • For Google Analytics
    • Acquisition >> All Traffic >> Channels & Click on Organic Search
    • Note that encrypted browser searches will no be displayed
  • For Google Search Console
    • Acquisition >> Search Console >> Queries
  • Create a Master List and narrow down options based on
  • Search Volume
    • How often a phrase is searched for
  • Competition
    • High volume keywords are highly competitive and harder to rank.
    • Aim for higher traffic but with low competition
  • Relevance
    • Ask yourself: How relevant is the keyword to your brand?
  • Current Ranking
    • See where current keywords rank, you might have some hidden treasures!
  • Now What?
  • Consider utilizing a keyword research tool. Here are some options.

Where do Keywords go?

Now that you have a list of keywords put them to work. Keywords work best in a few different places.

  • Title of the page
  • This is the clickable link that is viewed in search results
  • Meta Description
  • The description that is below the clickable link. This can sometimes be the first 160 characters of content.
  • Links and Social Media Updates
  • These are hashtags and the part of the title that is being shared
February 1st 2019

Starting out with SEO

What is SEO?

Search engine optimization is the process of improving the position of a website’s organic ranking in a search engine. The goal of SEO is to improve the visibility of your website by getting it above the fold in search results in order to drive more traffic to it. SEO is mostly dependent on the structure of the site, the content of the site, links to the site and a little sometime called RankBrain.

Why is SEO important?

Search engines are a primary source of traffic. Most people will open up google or type a term directly into the browser bar to get directed to google. Having your site be found by others is important if you want to drive traffic to it and search engines provide targeted traffic.

What are some drawback of not having SEO?

Without SEO search engines might not be able to find your site at all! The website would be ignored and that means lots of lost opportunities for getting traffic to your site.

But first, Google

To understand SEO it is really important to have a basic understanding of how Google works. Google has a web crawling bot (which is sometimes called a spider ). The bot crawls the web in order to discover new and updated pages so that they can be added to the Google index. Sites are considered spider friendly when the crawlers can use the sitemaps provided to discover links to other pages. Spiders pay extra attention to new sites, changes to existing sites and dead links. These spiders give Google the ability to index over 100 million gigabyte of information (or if you’re living in the past that's the equivalent of 953,200,000,000 floppy disks).

Google also writes programs to give their users the best results. This includes features like spell correction, auto complete, synonyms finder, and search methods. In about an eighth of a second Google decides what to show you by asking over 200 questions. The results you end being shown are based on a database of filled with real world people, places, and things. Your results also will be displayed in a specific way in order to give you a small preview of the information like the title and a short description of each site.

Black and White Hat

Before getting started with SEO it’s also helpful to know that there are two types of strategies to it: Black hat and White hat SEO. Some Black hat strategies include: duplicating content, stuffed keywords, invisible text, redirecting users to another site or page and lines from sites with non relevant content. Warning, the people at Google are pretty smart. There are lots of things in place to discourage Black hat strategies so don’t use them it’ll hurt your rankings in the long run. White Hat (the strategies we want to focus on) include: relevant, content, well labeled images, standards compliant HTML, unique/relevant page titles, relevant links/references and complete sentences with correct spelling and grammar.

Keywords are key

The first rule about SEO is that it is a game of keywords. When users look up information the exact words they use are called keywords in order to utilize SEO to its fullest potential you must be well aware of keywords related to your niche or topic. There keywords also carry different weights depending on their search volume and other factors. Finding and using the right keywords through keyword research is a way to target your audience more effectively.

On-Page SEO

Next we need to have on-page SEO. This is a way to optimize each web page in order to receive a higher rank and gain more relevant traffic inside the search engine. Remember that content is always king and plays a huge factor in this. Content should be unique and updated on a relevant basis. Titles should be catchy and pages need to be filled with relevant keywords and links.

Website layout is also taken into consideration. Any categories on your site should relate to each other and needs to be user friendly. Load time is extremely important since it can be the deciding factor of someone browsing your site or leaving to go check out the next search result. Google takes dwell time into consideration which is the time a user spends browsing around on your site.

Finally don’t forget about your sitemap! A sitemap is a simple directory that has information about the web pages that are contained on a website. When a search engine crawls a site they will look at the sitemap to identify which information can be applied to a specific search query.

Off-Page SEO

Off-Page SEO is just as important as On Page SEO. Off-Page SEO involves activities that occur offsite which improve the position of your site in the search engine results page. These activities include things like: link building, social media marketing, guest blogging and influencer marketing. Link building is one of the most popular and effective strategies. Essentially by building external links to your site your rank will increase. The best strategy to link building is to have create quality content and have other reputable sites to mention your content! Encourage others to link to your site on social media platforms, try to work with someone else and do a guest blog or find an influencer who is willing to promote your site to their audience.

TL;DR

SEO Checklist

  • Find your niche
  • Content is king
  • Do keyword research
  • Set up website properly
  • Test website load speed
  • Don’t forget a sitemap
  • Revisit with deeper keyword research
  • Encourage link building
  • Share content on social media
  • Periodically analyze performance
January 27th 2019

Cost of Doing Wordpress

Wordpress is an open source content management system originally used to build blogs. The first version of Wordpress was made available in 2003 as a platform built on top of b2/cafelog. Since then it has expanded and is utilized by millions worldwide. While Wordpress the software is free there is more that goes into launching a Wordpress site that is not. For a real life example check out this article done by Codeable.

Some hidden costs of Wordpress include:

  • Domain registration
  • Hosting
  • Premium themes
  • Premium plugins
  • Developer fees
  • Security services

Pricing Breakdown of a Typical Wordpress Site

  • Domain: $12/yr
  • Hosting $10/mo-$30/mo
  • Premium theme $50-$300+
  • Premium plugins $15-$200+ (either one time fees, monthly or annual purchases)
  • Developer to setup $30-$100/hr
  • Security plugins $99-$500/yr

Pricing Breakdown of a Custom Wordpress Sites

  • Custom themes $3000-$6000 +
  • Custom site $6000-$15000 +
  • Custom ecommerce site $6000-$20000 +
  • Custom web app $1500-$60000 +

Pricing Breakdown for Hiring a Developer or Service for Setup and/or Maintenance

  • Hourly $30-$100/hr
  • Flat rate $500-$1000+
  • Maintenance $30-50/monthly + initial hourly / flat rate fees for setup
  • Small individual jobs $100+

TL:DR;

Wordpress might be free but there are a lot of hidden costs involved with launching and maintaining a site. Costs can be kept down by having a generic site but comes at the sacrifice of having a custom site built out to address unique requirements of the company.

January 19th 2019

Give your keyboard superpowers with a Hyperkey and Hammerspoon

space-cadet keyboard

The concept of a hyperkey originated from the space-cadet keyboard. This keyboard was designed by Tom Knight, was used on MIT LISP machines, and was equipped with seven modifier keys. A modifier key is a special key (or a combination of keys) on a keyboard that temporarily changes the action of another key when pressed together. By themselves, modifier keys generally do not trigger an action from the computer. 

Some common modifier keys

Hyperkey is a special key reserved for global shortcuts

This means that these shortcuts should (almost) always work no matter what application is being used. The functionality of a hyperkey can be mimicked on a modern keyboard. A popular key to use is the Caps Lock since the same result can be achieved by holding down the shift + the letter key of your choice. 

To create a hyperkey we are going to remap our Caps Lock to CMD + CTRL + OPTION + SHIFT. This combination is very awkward to do on a keyboard so its safe to say that most applications will not utilize it. 

In order to do this, we are going to use a keyboard customizer called Karabiner and an automation tool called Hammerspoon. Karabiner will do the custom mapping that we want and Hammerspoon will allow us to write some code in Lua to make custom shortcuts for applications.

Some examples of what I use are: 

  • Hyper + C to open Chrome 
  • Hyper + A to open Atom 
  • Hyper + I to open iTerm2 

Instructions 

  • Make sure you have Homebrew installed if you don't check out my tutorial

  • Open up your terminal and type 

brew cask install karabiner-elements hammerspoon

  • Open up Hammerspoon and enable accessibility. 

  • Open up the file ~/.config/karabiner/karabiner.json in your text editor. My personal favorite is Atom. 

  • Paste the following code inside this file. This config file only includes Hyperkey functionality. JSON files are a bit picky so make sure there are not any tabs it will cause Karabiner to fail. 
{
  "global": {
    "check_for_updates_on_startup": true,
    "show_in_menu_bar": true,
    "show_profile_name_in_menu_bar": false
  },
  "profiles": [{
    "complex_modifications": {
      "rules": [{
        "manipulators": [{
          "description": "Change caps_lock to command+control+option+shift. Escape if no other key used.",
          "from": {
            "key_code": "caps_lock",
            "modifiers": {
              "optional": [
                "any"
              ]
            }
          },
          "to": [{
            "key_code": "left_shift",
            "modifiers": [
              "left_command",
              "left_control",
              "left_option"
            ]
          }],
          "to_if_alone": [{
            "key_code": "escape",
            "modifiers": {
              "optional": [
                "any"
              ]
            }
          }],
          "type": "basic"
        }]
      }]
    }
  }]
}

Next, we're going to add Hammerspoon configuration. Save the last file and open up ~/.hammerspoon/init.lua in your text editor 

Paste the following code inside this file and then save it. 

-- global
local hyper = {"cmd", "alt", "ctrl","shift"}
local log = hs.logger.new('hammerspoon','debug')

-- open hide app
function openApp(name)
  local app = hs.application.get(name)

  log.i("open App")
  log.i(name)
  log.i(app)

  if app then
    if app:isFrontmost() then
      log.i("app hiding")
      app:hide()
    else
      log.i("app focusing ")
      app:mainWindow():focus()
    end
  else
    log.i("app launch ")
    hs.application.launchOrFocus(name)
  end
end

-- ATOM
function atom()
  openApp("Atom")
end
hs.hotkey.bind(hyper, 'a', atom)
  • To create other hotkeys follow this format: 

-- function () openApp("") end hs.hotkey.bind(hyper, '', )

  • Important: The name of the application inside the parentheses is case sensitive so make sure it is capitalized correctly if applicable. I typically keep the case on the function name and reference (the bolded text) in all lowercase but make sure those match as well.

  • Also, note that the is referring to choosing a single character to use in conjunction with the hyper key. 

  • Click on the Reload config to update Hammerspoon to your changes and that's it!

January 16th 2019

Getting Started with iTerm2

When starting out on your programming journey it might not be immediately obvious that you need to be familiar with the Terminal. This incredibly useful (and sometimes intimidating) tool allows you to have much more power than utilizing GUI's alone. 

In this tutorial, I will cover what a terminal is, how to set up iTerm and then list some recommendations for getting familiar with the command line. Note that there are many different terminals and the most commonly used ones based off of their operating systems are these:

  • Mac OSX: Terminal, iTerm2
  • Windows: PuTTY
  • Linux: Terminal, KDE Konsole, XTERM

I'll be focusing on the Mac Terminal which is an application that allows you to enter commands in the command line. You can find it inside the Utilities folder. Another quick way to pull it up is to press Command + Space and type in "Terminal" inside the search bar. 

Now for some definitions: 

  • The console is the physical terminal
  • A terminal is the text input/output environment 
  • Shell is the command line interface. There are several shells such as Bourne shell (sh), Bourne-Again shell (bash), and Z shell (zsh). 
  • Command Line is the actual line in the console where you type commands 
  • Prompt is the beginning of the command line which is typically denoted with a $ to indicate that the command should be executed as a regular user and a # is typically used to indicate it should be executed by root.

Confused? It's okay! There are different types of users on your machine. Think of the root user as the super-powered user that can change ANYTHING on the system. A regular user doesn't have the same type of superpowers. The main takeaway? Be VERY cautious if you are in root. 

Setting up iTerm 2 

When I started my programming journey part of the process of setting up my machine was to use iTerm 2. Another terminal emulator its comes packed full of extra features such as split panes, search, autocomplete, mouseless copy, paste history, instant replay, configurability, a plethora of beautiful colors and so much more! Check out a full list of features and their descriptions here

To get started open up your terminal and type in 

brew cask install iterm2

And that's it! Or if you want to download it from their site go here and click on the big download button.

January 14th 2019

Getting started with Homebrew

When I first attempted to learn how to program I was very lucky to have an extremely smart and experienced developer set up my machine to get me started. Our first step was installing Homebrew. 

No, not that kind of homebrew 😅(Photo by Lance Anderson on Unsplash)

Homebrew is a package manager for OSX designed to make life easier. Package managers handle all the installation and dependency stuff for you. As a beginner, this was a vital lesson to be learned. Learning to program can sometimes look more like 70% configuration and about 30% coding. Especially in the beginning. So when I found out that there are tools out there to make the configuration easier I held on and praised the smarter people who came before me. 

So before we dive into our little tutorial for Homebrew, let's talk about packages. 

Not those kind of packages.. (Photo by chuttersnap on Unsplash)

A package is a bundle of installable source code. If you wanted to download a package manually it can get a little tricky because sometimes there are dependencies (software that relies on other software to operate) that are needed for a successful installation. After the package has been successfully installed keeping it up to date manually can be difficult as well. 

There are many different package managers some handle packages in binary form and some are source code based. There are system and language package managers as well. 

So what is Homebrew? 

Homebrew is "the missing package manager for macOS" since there is no built-in package manager for macOS. It's a free and open-source software package management system and was created by Max Howell. Homebrew makes it easy to install command line software and tools on a Mac.

To get started all you need is to copy and paste this script into your terminal

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Then make sure that brew is running properly

brew doctor

For more information visit https://docs.brew.sh/ or use 

brew man


Homebrew relies on a git repository that stores the formulaes to install various packages. In our examples Replace with the name of the package you want to install.


Install open-source packages

Search 

brew search <name>

Download and install that package

brew install <name>

Remove that package from your system later

brew remove <name>

Install graphical apps

Search for a graphical app

brew cask search <name>

Install an app use (This will automatically download, extract the app, and install it to your Applications folder)

brew cask install <name>

Uninstall an app with Homebrew Cask

brew cask uninstall <name>

Update my local packages

First, update the formulae and Homebrew itself

brew update

See what is outdated

brew outdated

Upgrade everything 

brew upgrade

Upgrade a specific formula

brew upgrade <name>

Stop a formula from being updated

Stop something from being updated/upgraded:

brew pin <name>

Allow that formula to update again:

brew unpin <name>

Uninstall old versions of a formula

By default, Homebrew does not uninstall old versions of a formula.

brew cleanup <name>

Clean up everything at once

brew cleanup

See what would be cleaned up:

brew cleanup -n

Uninstall a formula

Remove a formula entirely (be careful with this one!)

brew uninstall --force <name>

Where does stuff get downloaded?

brew --cache Which is usually: ~/Library/Caches/Homebrew

Uninstall Homebrew

To uninstall Homebrew, paste the command below in a terminal prompt.

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/uninstall)" 

An illustrated guide on that other kind of homebrew 🍻

This tutorial leaves out how to make your own formulas but it should be enough to get a basic understanding of why Homebrew is useful and how to get started. Cheers!

January 7th 2019

What is a push notification?

A push notification is the delivery of information to a device from an application without a specific request from the device itself. Push notifications can be sent from both mobile and web applications. Introduced in 2009, the Apple Push Notification Service (APNs) was first available on iOS devices. The following year Google introduced its own service for Android called Google Cloud to Device Messenger (C2DM). In 2013 Google rolled out richer notification and action buttons which enabled developers to integrate enhanced features for Android devices. The following year Apple followed suit with its own introduction to enhanced notification features for iOS.

Key Points for Push Notifications

  • The user must opt-in to receive notifications on initial install.
  • A user must always have the power to grant/revoke consent for notifications.
  • Push notifications don't require the application to be opened on a device for the message to be seen.
  • They can be seen when the device is locked or when the app is not running.

Push notifications can be great a great marketing tool to help companies stay in contact with their users. However…

When users are inundated with multiple push notifications they may opt out of them entirely or delete the application altogether.

What are good ways to use push notifications?

Reminders Breaking news Personalized offers Abandoned cart alerts Specials/deals/sales Location-specific notifications

What kind of metrics can push notifications provide?

  • Delivery receipts
  • Open rates
  • Open times
  • Engagement
  • Interaction times
  • Click through rate

By tracking actionable metrics the data can be used to launch more well-informed campaigns to connect with consumers better! 🥳

Tips for creating effective push notifications

Length Matters 10 or fewer words will on average have a higher click-through rate. Once a notification hits around 11–21 words that rate drops down by about half.

Personalization is key Understand the users, who they are, and what they want in order to send them meaningful notifications.

Add personal touches by:

  • Using names in notifications
  • Reference their location
  • Note purchase/content history

Emojis increase engagement

Images are easier for the human brain to process and they help to convey meaning over text. According to some smart folks at MIT, "An image can be extracted … at 13 milliseconds per image - a rate of about 75 frames a second". This means that we're more likely to remember images than text!

Use power words Power words are words that make either an emotional or psychological impact to create more effective communication.

They can be categorized into five different categories:

  • Urgency
  • Value
  • Exclusivity
  • Emotions
  • Personalization

Some example power words include: important, instantly, reminder, today, fast, immediately, offer, buy, free, deal, discount, member, limited, exclusively, reward, gift, dream, improve, imagine, indulge, happy, you, me, our, us, I.


A push notification is a message from an application that the user has opted in to receive. When used correctly can add a lot of value to businesses. Being able to connect with consumers on a more personalized level can lead to better retention rates for application use and provide creative ways to market to consumers.

December 31st 2018

Tree Data Structures

A data structure can be defined as a specialized format for accessing, organizing, and modifying data. There are lots of different data structures but the ones most commonly encountered in programming can be broken down into two camps.

Linear: a data structure where the elements form a sequence

  • Array
  • Stacks
  • Queues
  • Linked Lists
  • Hash Tables

Non-Linear: data structures which are stored in a hierarchical relationship.

  • Trees
  • Graphs

We're going to look more specifically at trees. What are some real-life examples of trees?

File systems

(This is of the Linux File System Structure)

Document Object Model (DOM)

Morse Code 

We can use trees for:

  • Manipulating hierarchical data
  • Manipulating sorted lists
  • Making information easier to search for (tree transversal)
  • Routing algorithms
  • And so much more! 

Terminology

  • Root is the first node of a tree
  • Edge is the link between two nodes
  • Parent is a node that has an edge to a child
  • Child is a node which has a parent
  • Leaf is a node which does not have a child
  • Height is the length of the longest path to a leaf
  • Depth is the length of the path to its root
  • Subtree are descendants of a node
  • Transversing is passing through nodes in a specific order
  • Levels are generations of a node
  • Keys are the value of a node based on a search operation

Other things about trees: 

  • A tree is set up hierarchically with data being arranged from more general to specific. 
  • Trees are made up of nodes which contain data or value and are connected by edges. 
  • Nodes can have child nodes but if they do not have any children they are called a leaf.
  •  Each leaf node will be unique.
  • Children nodes are independent of one another. 
  • The first node of the tree is the root. 
  • If the root is connected to another node then the root is also called a parent node and the connection is a child node. 
  • There can be multiple parent nodes on a tree but only one root.  If a tree has n-nodes then it will always have (n-1) edges.

Binary Trees

A binary tree is a tree data structure in which each node has at most two children, which are referred to as the left child and the right child. Binary trees can be very useful for searching when they are balanced. Any node in the data structure can be reached by starting at the root node and repeatedly following references to either the left or right child. In a binary tree, a degree of every node is at most two. Depending on how nodes are arranged in a binary tree, it can be full, complete and perfect:

  • Full binary tree: each node has exactly 0 or 2 children (but never 1)and all leaf nodes are on the same level.
  • Complete binary tree: when all levels except the last one are full with nodes.
  • Perfect binary tree: when all the levels (including the last one) are full of nodes.

Binary Search Tree

Binary Search Trees or BST for short are a particular application of binary trees. BST has at most two nodes (like all binary trees). However, the values are in such a way that the left children value must be less than the parent and the right children is must be higher.

Transversal

Traversal describes the process that visits all the nodes in the tree. Since a tree is a nonlinear data structure, there is no unique traversal. There are different ways of traversing a Binary Tree depending on the order that the nodes are visited: in-order, pre-order and post-order.

  • In-Order Traversal: visit nodes on this order: left, parent, right.
  • Post-Order Traversal: visit nodes on this order: left, right, parent.
  • Pre-Order Traversal and DFS (Depth First Search): visit nodes on this order: parent, left, right

Conclusion

There are lots of different basic data structures that can be used in programming. Some data structures are linear and are useful for accessing data in a sequential manner. Linear structures have the drawback of taking a lot of time to search through for a data set. A tree is a data structure where a node has zero or more children. Trees with 2 children or less are called binary trees. If a binary tree is sorted where the left value is less than the parent and the right child is higher then it is considered a binary search tree. There is also a variety of ways to transverse a binary tree depending on the order in which nodes are visited.

December 31st 2018

How to Create User Profiles on Google Chrome

Creating multiple profiles on Chrome allows you to separate work and personal accounts. Information including bookmarks, history, passwords, and settings can be kept separate. Keep in mind that if anyone has your device they can change to your profile and see information like visited websites.

Create a new profile

Open up the Chrome browser and on the top right of the browser bar click on the person icon.

(The icon will change to reflect which person you are on)

Click on Manage People

Click on Add Person

Type in a name and choose an icon

Click on Add. A new window will then open and then you’re done!

Optional: Turn on sync and sign into your Google Account. The option to sync which means that your any bookmarks, history, passwords, and other settings will be the same across multiple devices. Choose to sync if you use different computers or want to access your profile via a mobile device.

(You can also find the option to sync by clicking on the profile icon)

Having multiple profiles can come in handy especially when it comes to online banking. Chrome extensions have the ability to read and change any data from websites visited so a separate banking profile without any is ideal. Another great use case for multiple profiles is for development so that day to day browsing isn’t disturbed by any new changes in Canary.

Switch to another profile

Switch to another profile by clicking on the profile icon

Then choose another profile from the drop down

Delete a profile

Delete a profile by first clicking on the profile icon

Click on Manage People

Click on the three dots located to the right-hand side of the profile you want to delete

Finally, click on the Remove this Person

December 31st 2018

Service Workers with Ember.js

Adding service workers to an Ember application is easy thanks to addons. To get started have an Ember app ready to go. For this tutorial, I followed the quickstart guides to get an Ember app up and running.

Checkout the quick start guides to get an app up and running (https://guides.emberjs.com/release/getting-started/quick-start/).

First, we need to serve up our application:

$ ember serve

and then go to http://localhost:4200/ in the browser

You'll know everything is working fine if you see the friendly tomster welcome page:

Now let's implement service worker support for offline caching by using the ember-service-worker addons:

ember-service-worker

is the base addon that registers a service worker with the browser.

ember-service-worker-index

caches the Ember app’s index.htmlfile.

ember-service-worker-asset-cache

caches an Ember app’s asset files. By default, it will cache anything in the /assets/ folder, but can be configured to cache additional assets.

ember-service-worker-cache-fallback

resorts to a cached fallback version of a network response when a network request fails.

Run these addons and then rebuild the Ember app.
$ ember install ember-service-worker
$ ember install ember-service-worker-index
$ ember install ember-service-worker-asset-cache
$ ember install ember-service-worker-cache-fallback

These plugins will take care of caching the index.html page and any static assets. Now if you turn off your internet and try to refresh the page the app will still load!

December 31st 2018

What is React Native?

A native mobile application is an application written in a specific language developed for use on a particular platform or device. Native applications have a lot of advantages since they are built to work with the operating system and have access to a wide range of built-in features. They also come at a high cost since each native application must be maintained separately. Many companies cannot afford to provide these types of applications across all devices.

Enter React Native, an open source framework developed by Facebook is an interesting solution to this problem. It uses the same UI building blocks as iOS and Android but does it all in JavaScript. Allowing app developers to create react native app for mobiles by using JSX (extension to Javascript ), ES6 based syntax. Its fundamental process is to put the UI building blocks together with the help of JavaScript and React to create react native app for mobiles. The process is similar to the process that creates iOS and Android apps and the result is a feature-rich mobile UI.

JavaScript is everywhere in web programming and React Native allows for any front-end developer to be able to build mobile applications. Prior to its release companies had to develop two different applications for iOS and Android from scratch since they require the use of different languages. React Native allows for writing in just JavaScript and then provides a way to port that code to each of the different platforms to provide a native app experience for a fraction of the cost. React Native does not use WebView components instead it uses native components that compile down to the language required by the device it is on. It provides efficiency and portability by leveraging Facebook’s React Javascript library for user interfaces. This means the benefits of using React for high performance and virtual DOM are carried over into React Native as well.

Main Points:

Productive

  • Most of the codebase is shared between iOS and Android
  • Code reusability between platforms

Time to Market

  • Control over release dates
  • Release both platforms same day
  • Can host and do over the air updates instead of waiting for app store approval

Performance

  • Nearly identical to native applications

React Native is a perfect choice for companies who want to give their customers a native experience but still save time and money by being able to share a code base and not have multiple teams of developers working on different platforms.

December 20th 2018

What is a Progressive Web App?

A Progressive Web App (PWA) acts, looks, and feels like a native app but is a website that has been optimized for the mobile experience. Despite it feeling native, there is no need to download anything from the app store. A PWA will run right in the browser and is able to load instantly on subsequent loads. Alex Russell can be attributed to hammering out the details of this new technology and discusses it more depth here.

What does a Good PWA look like?

It should be reliable and load fast on mobile hardware over 3G and offline. It should be engaging and provide features like offline caching, background syncing and push notifications with the use of a service worker.

What are the technical elements of a PWA?

Service Worker

A PWA should use a service worker which are components in javascript that allows for a proxy between the network and browser. On the first load, the service worker will store the required resources in the browser cache. Thus subsequent visits can pull from the cache and load faster. This allows users to interact offline even if there isn’t a network available.

Manifest File

A manifest file is a config JSON file which includes the information of the application like the type of icon that will be saved on the home screen when installed, the theme and the short name of the application.

HTTPS

The use of service worker enforces https for security purposes. Since the service worker has the ability to intercept network requests and modify responses on the client side all communications between the browser and website need to be encrypted.

Last Thoughts

Once implemented a great tool to consider is Lighthouse as a way to measure and improve the quality of your web page. It is an open-source automated tool that runs a series of audits against a web page and then generates a report with suggestions on improvement about that page. Progressive Web Apps provide the ability for web applications to look and feel like a native experience to the user. In order to be considered a progressive web app, a website should implement a service worker, have a manifest file and use https. PWA’s are just “websites that took all the right vitamins”.

November 27th 2018

Reputation Over Information

Say goodbye to the information age: it’s all about reputation now

Gloria Origgi an Italian philosopher and tenured senior researcher at CNRS discusses the paradigm shift in our relationship to knowledge.

  • From the ‘information age’, we are moving towards the ‘reputation age’.

  • Information will have value only if it is already filtered, evaluated and commented upon by others.

  • We are reliant on what are the inevitably biased judgments of other people, most of whom we do not know.

  • Be competent at reconstructing the reputational path of the piece of information in question.

  • Evaluate the intentions of those who circulated it.

  • Figure out the agendas of those authorities that leant it credibility.

Question to ask when accepting or rejecting new information

  • Where does it come from?
  • Does the source have a good reputation?
  • Who are the authorities who believe it?
  • What are my reasons for deferring to these authorities?
November 22nd 2018

Contrast and Meaning

Contrast and Meaning

Andy Rutledge briefly examines the fundamentals for conveying meaning.

Artistic Vocabulary:

These elements form the content of our communication.

  • line
  • form
  • color
  • texture

Artistic Grammar:

The building blocks of composition, and they help convey context and manipulate relationships among content elements.

  • contrast
  • balance
  • harmony
  • distribution

Contrasts

  • Design is largely an exercise in creating or suggesting contrasts, which are used to define hierarchy, manipulate certain widely understood relationships, and exploit context to enhance or redefine those relationships” all in an effort to convey meaning.

  • The primary forms of contrast include size, position, color, texture, shape, and orientation.

  • Humans habitually scan our surroundings. In doing this, we unconsciously look for elements of contrast, things that stand out from the forest of mundane elements, as part of our instinctive threat-detection process.

November 20th 2018

Boost Engagement with Push Notifications

How 7 Companies are Using Push Notifications to Boost Engagement

Benefits

  • Directing users to your social media channels
  • Promoting products and services (especially special offers)
  • Building trust and brand reputation by delivering valuable content
  • Engaging users who aren’t currently on your site
  • Restoring abandoned carts for ecommerce applications

Case Studies

  • JetBlue offers high value, practical content that helps to improve the flying experience.
  • Push notifications work best when you’re messaging someone about something they really care about.
  • Push notifications can be an excellent tool for reviving abandoned carts. By personalizing your messages and sending vibrant images of the items that your customers missed out on (for whatever reason), you can dramatically improve your conversion rate.
  • Segmentation is necessary if you have a large audience and want to maximize the impact of your push messages.
  • When crafted correctly, push messages can be a more intimate form of communication. This re-engages previous customers, builds brand loyalty and improves your long-term profits.
  • The more data you have on the ways in which people interact with your brand (particularly their purchasing history), the more you can tailor your push messages to resonate with them.
  • Use your customer data to determine what types of items your audience likes, then send them special deals based on their interests.
November 18th 2018

Blockchain Technology Explained

Blockchain Technology Explained

Mayank Pratap, a cofounder of EngineerBabu.com gives an approachable in-depth look at blockchain technology.

Main Points:

  • There’s a common misconception among people that Bitcoin and Blockchain are one and the same, however, that is not the case.

  • Blockchain can be described as a data structure that holds transactional records and while ensuring security, transparency, and decentralization.

  • Once an information is stored on a blockchain, it is extremely difficult to change or alter it.

  • Blockchains are decentralized in nature meaning that no single person or group holds the authority of the overall network

  • Interaction between two parties through a peer-to-peer model is easily accomplished without the requirement of any third party.

  • Blockchains are considered tamper-proof as any change in even one single block can be detected and addressed

November 15th 2018

How To Think Like a Brand Strategist

How To Think Like a Brand Strategist

Jasmine Bina, a brand Strategist and CEO of Concept Bureau reflects on what makes a great strategist.

Great strategists:

  • Don't hold anything sacred. They doesn’t assign ‘good’ or ‘bad’ qualities to a shifting landscape.

  • Don’t ask who will win. They ask what the world will look like when the truths of today are false tomorrow.

  • Look for the emergence of common ‘truths’ which come in increments and over time.

  • Solve five problems with one solution.

  • Recognize that where people spend their time and attention is perhaps even more important than where they spend their money, because time and attention can never be earned the way another dollar can.

  • Never forget that everything changes. Everything we believe and do is fluid.

November 15th 2018

Enable WkWebView with Expo SDK v31.0.0

Expo SDK v31.0.0 is now available

This release includes React Native 0.57 which means ios WebView can now use WKWebView internally if you pass useWebKit={true}

Features

  • Support for Babel 7
  • JavaScriptCore upgraded on Android
  • Build your own standalone apps with Turtle CLI
  • Smaller standalone app builds