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.

C.O.N.V.E.R.T.S

• Clear call to action
• Offer
• Narrow focus
• Very important attributes
• Effective headline
• Resolutions layout
• Tidy visuals
• Social Proof

A breakdown of essential elements for landers

Clear call to action

What you want visitors to do At least one visually distinct, centralized, and obvious looking button Use visual cues Repeat CTA below the fold

Offer

Anything you can offer visitors Free trial Discounts Whitepaper Early Access Try to pair with deadline to create urgency

Narrow Focus

K.I.S.S Minimize appearance Get rid of nav bar Move company philosophy to about Minimal form fields Keep copy brief

Very Important Attributes

Identity 2-5 things about product/service features A list of things about the product/service Benefits How will features help? Pain points How will features help avoid misery? Use icons/pictures to make list more visual

Effective headline

Use plain language to describe what the site is about Be clear and concise Under ten words

Resolution Layout

Keep essential parts of lander in center/top of screen Logo Headline CTA Supporting visual (Hero Shot) Ensure all essential parts can be seen across all devices

Tidy Visuals

Clear, simple design with plenty of whitespace Big font Bullet points Video? Studies show it can increase conversions by 80% Make sure load time for page is SNAPPY

Social Proof

Customer list Press mentions Case Study Testimonials Usage Statistics

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

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!

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.

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.

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

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.

A Service Worker is a script file that runs in the background. It acts as a proxy between a web page and the network and provides the ability to intercept, cache and modify networks requests. This ability gives developers the ability to create an offline-first experience for this web applications! Note that the use of a service worker is only available with HTTPS for security purposes. A service worker is considered a special kind of web worker written in JavaScript. It runs separately from the main thread so that computations can be done without affecting UI responsiveness. They can receive messages when they're not active because they run independently of the application. This means that they can work when the application is in the background or closed. Typically they are used as a caching layer to handle network requests, to cache content for use offline, and for push notifications. Service workers are a key part to powering progressive web applications because they provide a way to cache resources and do push notifications allowing for web applications to now have a native-like feel.

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”.

Break out of the chicken and the egg design loop and start with meaningful content

An author wouldn’t start a novel with the number of pages predetermined and then write the words to fit. So why do so many applications begin with placeholders and lorem ipsum instead of real content?

This does little to inform about the relationship between an application’s layout and context. There runs the risk of focusing only on design elements which can be problematic. Elements might not flow, features might get tossed and time is wasted. This slippery slope of wasted time also leads to missed deadlines and unhappy clients.

A content first approach illuminates what is important. The content used does not need to be a final draft but it should provide at least some context and that can help better define elements.

This also means that a minimum viable product can also be quickly rolled out and be available for relevant feedback. Decisions about the flow and narrative of the application can be made with purpose without incurring too much technical debt or wasting valuable time because there is an understanding of what the application is trying to communicate.

Multi-page applications make a full page request on each user action. Eventually, this led to the inclusion of AJAX to enable a partial page load. This approach requires JavaScript which adds an additional layer of complexity that can get out of hand in ambitious applications. A full front-end approach provides users with a richer experience and is typically written in JavaScript. Interactions are dynamically made without reloading the entire application giving the application a smooth native-like experience. By running Node.js on the server, client-side applications can pre-render allowing for optimization of load times. Development is also simplified with the decoupling of the front and back-end. We leverage Ember.js for our front-end development along with FastBoot to render our applications on the server-side. In another post we will explore FastBoot in more depth in order to illustrate its benefits.