Chris Hager
Programming, Technology & More

Interesting facts from the Snapchat IPO filing

Snapchat is going public! And there is lots of interesting data in todays IPO filing.

  • Snap Inc. is a camera company.
  • Users: 158m daily active users, grew 7% last quarter (Instagram has about 400m DAU).
    • Users older than 25 visit Snapchat approximately 12 times per day, on average about 20 minutes each day. Users younger than 25 visited Snapchat over 20 times and spent over 30 minutes on Snapchat every day.
  • Computing Costs: Currently spending $400m per year on storage, computing and bandwith ($0.21 at 158 million daily users).
  • Expected valuation of about $25B.
  • Security for Evan Spiegel (co-founder of the company) cost $890,339 in 2016.
  • Revenue jumped from $58.6m in 2015 to $404.5m in 2016. Net loss has risen from $373m to $514.6m.
  • First company to trade only non-voring stock on an initial public offering.
  • The two Co-founders still have 21.8% stock in the company each.
  • Grew by 3.4 employees per day last year.
  • Competition: lots and everywhere

    We face significant competition in almost every aspect of our business both domestically and internationally. This includes larger, more established companies such as Apple, Facebook (including Instagram and WhatsApp), Google (including YouTube), Twitter, Kakao, LINE, Naver (including Snow), and Tencent, which provide their users with a variety of products, services, content, and online advertising offerings, and smaller companies that offer products and services that may compete with specific Snapchat features.

Google Mode

  • Planning to spend $2 billion with Google Cloud over the next five years!

    “We have committed to spend $2 billion with Google Cloud over the next five years and have built our software and computer systems to use computing, storage capabilities, bandwidth, and other services provided by Google, some of which do not have an alternative in the market.”

  • This move also arguably gives Google a stake in Snapchat’s growth and success.
  • Snapchat is likely integrating Google’s state of the art Vision/Speech API and other advanced Google Cloud services.

There is a good discussion over at Hacker News.

Let me know if you have feedback or other interesting facts! @metachris


Vue.js Syntax Highlighting with highlight.js

Everyone loves a good syntax highlighting. This post explains how to use highlight.js for syntax highlighting in a Vue.js application. The method shown here allows syntax highlighting both on original creation of an element as well as on updates to the source-code, using a simple v-highlightjs directive such as this:

<pre v-highlightjs><code class="javascript"></code></pre>

You can see a live example here: jsfiddle.net/metachris/1vz9oobc.

To achieve this, we just need to install the highlight.js dependency and create a custom highlightjs directive. Let’s dive straight in!

Note: The code from this post is now also published as npm package vue-highlightjs, which you can easily use in your project.


Install the highlight.js dependency

The first step is to install highlight.js as a dependency with the npm node package manager:

$ npm install --save highlight.js

Include the highlight.js CSS file in your HTML

To reference the highlight.js CSS style sheet from the HTML, just include a <link rel="stylesheet" tag which points to either a downloaded highlight.css file or to their CDN URL:

<!-- Downloaded and saved in /static/css/highlight.css -->
<link rel="stylesheet" href="/static/css/highlight.css">

<!-- Or if you want to use the stylesheet from the CDN -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/default.min.css">

highlight.js comes with a number of different styles, which are defined by using a specific stylesheet for each style (we are using the default style here). For other available styles look into the highlight.js styles directory (and don’t forget to add “.min” before “.css”).


A custom Vue.js directive: v-highlightjs

To use highlight.js from within Vue.js components, we are going to create a custom Vue.js directive called highlightjs. You can declare this directive directly in your main.js file:

import Vue from 'vue'
import hljs from 'highlight.js'

...

Vue.directive('highlightjs', {
  deep: true,
  bind: function (el, binding) {
    // on first bind, highlight all targets
    let targets = el.querySelectorAll('code')
    targets.forEach((target) => {
      // if a value is directly assigned to the directive, use this
      // instead of the element content.
      if (binding.value) {
        target.innerHTML = binding.value
      }
      hljs.highlightBlock(target)
    })
  },
  componentUpdated: function (el, binding) {
    // after an update, re-fill the content and then highlight
    let targets = el.querySelectorAll('code')
    targets.forEach((target) => {
      if (binding.value) {
        target.innerHTML = binding.value
        hljs.highlightBlock(target)
      }
    })
  }
})

(You can also use the npm package vue-highlightjs instead of declaring the directive manually.)


Using v-highlightjs

To highlight code (for example JavaScript) which is either hardcoded in a template or stored in a variable (or getter) called sourcecode, we can use the v-highlightjs directive like this:

<pre v-highlightjs><code class="javascript">{{ sourcecode }}</code></pre>

Reacting to code updates

highlight.js replaces the content of the <code> block. If using the directive as shown above, updating the source-code after the initial highlighting does not work anymore. To be able to update the code and highlight it again after an update, pass the variable directly into the v-highlightjs directive like this:

<pre v-highlightjs="sourcecode"><code class="javascript"></code></pre>

Live Example


References


You can reach out to me via @metachris. Please let me know if you have any feedback or suggestions!


How to install NodeJS 7.x on Ubuntu/Debian and CentOS

NodeJS 7.x is the current stable release of the NodeJS, which is actively maintained in parallel to NodeJS 6.x Long-Term Support (LTS). At the moment, the latest version is NodeJS v7.4.0, and you can find the NodeJS v7.x Changelog here on Github.

This guide shows a quick and reliable way to install the current NodeJS 7.x version (including npm) on Ubuntu/Debian and CentOS, using the system package manager, in order to continually receive security updates without risking a major version jump with possibly breaking changes.


Installing NodeJS 7.x on Ubuntu and Debian

This is the official way to install NodeJS 7.x on Ubuntu, Debian, Linux Mint, Linux Mint Debian Edition (LMDE) and elementaryOS:

# Install NodeJS 7.x repository
curl -sL https://deb.nodesource.com/setup_7.x | bash -

# Install NodeJS and npm
apt-get install -y nodejs

The setup_7.x bash script basically just checks whether your operating system version is suppored and adds the corresponding repository (eg. https://deb.nodesource.com/node_7.x xenial InRelease).


Installing NodeJS 7.x on CentOS 7

NodeJS provides a script for CentOS/Fedora/RHEL based distributions, which checks your operating system and adds the corresponding RPM repository for yum, the standard package manager:

# Install NodeJS 7.x repository
curl -sL https://rpm.nodesource.com/setup_7.x | bash -

# Install NodeJS and npm
yum install nodejs

The content of the script can be found here: https://rpm.nodesource.com/setup_7.x.


For feedback, ideas and recommendations, contact me on Twitter.

See also:

Blog Archive
swirl