SCSS Media Queries - Responsive Breakpoint Mixins

10 Jan 2018

Here are some utility mixins for SCSS that you can use for quickly mocking up responsive CSS.

// Screen size variables
$screen-xs-min: 425px;  // Tiny phones
$screen-sm-min: 576px;  // Small tablets and large smartphones (landscape view)
$screen-md-min: 768px;  // Small tablets (portrait view)
$screen-lg-min: 992px;  // Tablets and small desktops
$screen-xl-min: 1200px; // Large tablets and desktops

// Mixins
@mixin xs { @media (min-width: #{$screen-xs-min}) {@content;} } // Tiny devices
@mixin sm { @media (min-width: #{$screen-sm-min}) {@content;} } // Small devices
@mixin md { @media (min-width: #{$screen-md-min}) {@content;} } // Medium devices
@mixin lg { @media (min-width: #{$screen-lg-min}) {@content;} } // Large devices
@mixin xl { @media (min-width: #{$screen-xl-min}) {@content;} } // Extra large devices

Use like so:

/* A class that will respond differently in different resolutions */
.sample-padding-class {
  
  padding-bottom: 200%; // Default property, this will be applied to all screen sizes
  color: #FFF;          // Unless overriden below
  
  @include sm {         // 576px window width and more
    padding-bottom: 100%;
    color: #000;
  }
  
  @include md {         // 768px window width and more
    padding-bottom: 50%;
  }
  
  @include lg {         // 992px window width and more
    padding-bottom: 10%;
  }

  @include xl {         // 1200px window width and more
    padding-top: 20%;
    padding-bottom: 0;
    color: #1337;
  }
}

In Defense of Crypto - and Some Baseless Predictions

08 Jan 2018

I was going through my documents and organizing things yesterday when I stumbled across an old Bitcoin cold storage wallet that I’d placed in my files a few years ago. I turned to my girlfriend with a smile and said “Do you think I left anything on here?”

I checked the wallet’s public address for transactions - 9 BTC in! My heart stopped. That’s ~$135,000 USD today.

And unfortunately... 9 BTC out. Probably to buy hardware or getting scammed. Good decision making, 2015-era Davis.

I’ve said since 2012 to anyone who would listen (three people) that Bitcoin was a proof of concept for the next thing. I have always contended that, much like 28k baud connections to a central Unix server, or bulky, room-filling 8MB hard-drives, Bitcoin is showing us a rough sketch of the future.

In digital terms, I found a wallet under my couch, so to speak, and then checked that wallet’s balance out using a globally distributed, generally trustless, peer-driven and verified accounting system. Wow, buzzwords - yeah, sure, whatever. I just casually checked the public balance of this wallet, as anyone could have done. That’s one of the value propositions of this technology.

The ease with which we can maintain, deploy, and tinker with money itself will bring new possibilites to the world.


Ugly Beginnings

No one ever thinks it’ll work.

IBM's RAMDAC 305 - 1956 - Each hard drive held 5MB of data, weighed over a ton, had to be moved around with forklifts, and was delivered via large cargo airplanes.
ARPANET - 1969 - TCP/IP wouldn't be invented for 13 more years. Talk about scaling issues!

Let me ask you a hypothetical question - is it possible that the lay observer in 1960 may have scoffed at the notion of a hard drive? After all, the only reference point they would have is monstrous cabinets like the impractical, burdensome RAMDAC 305. A quote from the RAMDAC Wikipedia page reveals that people of that time, just as now, were unsure of how to use new technology.

"the storage capacity of the drive could have been increased beyond five megabytes, but IBM's marketing department at that time was against a larger capacity drive, because they didn't know how to sell a product with more storage."

It’s interesting to me to watch the general public pick up on Bitcoin. What has been especially interesting is how everyone that I talk to about Bitcoin knows two things - a.) It’s expensive internet funbux and b.) It’s got issues.

Arguments like “I’ve heard it uses too much electricity,” “It’s too slow for global applications,” or “Who will even use this thing?” are reminiscent of questions that have been asked of most of our technological revolutions. From the famed Luddites to people who just don’t like using GPS and insist on giving you street by street directions, new technology has always been questioned on the following principles:

  • Expense - It’s always too expensive, at first.
  • Practicality - Too loud! Too slow! Too big! Impractical!
  • Distributability - Even if this works, no one will want a hard drive in their living room.
  • Doesn’t X Already Do This? - I call this the Hacker News Expert Opinion. (Hacker News, an internet forum full of venture capitalists and those who worship them, famously panned Dropbox’s release. Their reasoning? Anyone could already sync folders across computers with judicious use of rsync and ssh and bash and cronjobs and.. you get the picture)

If you read histories of new technologies, especially computing technologies, everything has to endure these questions. While it may seem obvious that someone’s first product is usually not their best, humans have a strange habit of demanding perfection from newly-formed creations. It’s not enough to be new - it’s got to be new, cheap, small, fast, and most of all, relevant to me.

Well, aren’t the doubters right?

Yes.

Yes, Bitcoin has issues. Yes, Bitcoin is probably not the global revolution that it’s currently being hyped up to be. Yes, Bitcoin is controlled by a few parties, and it used to be linked to drugs, and Yes to all of the other things you have heard.

Yes, it has severe scaling issues. Yes, it is falling devastatingly far behind in pending transactions on the blockchain. Yes, BCH and BTG and all of the other BTC competitors are chomping at it.

Yes, all of that is true. You’re not wrong.

But the technology that matters is the blockchain. Not Bitcoin.

The failings of a Model T are not very relevant to our discourse about cars today. They were expensive, prone to failure, and not very customizable. The roads sucked (if they existed). People were maimed working on the engines. Dangerous bootleggers used cars to evade police and move contraband.

Yet, we don’t talk about cars failing. We don’t care that VW’s last model sucked or that maybe a 2012 Ford Whatever is a good car but overpriced. We don’t talk about how cars are used by terrorists and pedophiles. We simply exist in a world where cars are - they’re not new to you.

In 30 years, the concepts of a blockchain will be just as integral to that generation. I’m not saying that all of them will be blockchain developers - just in the same way not everyone is a mechanic. But the way they bank, transact, and invest will be informed from the lessons learned as a society over the next decade or two while we experiment with blockchain technology at a global level. This generation has been gifted the opportunity to take part in a historical shift in wealth creation and management.

At least in my opinion, ignoring the future integration of cryptocurrency into society is a foolish mistake. These currencies will only become more trusted, easier to use, and their spread will be prolific.

Predictions

Anyways, here are some probably outlandish predictions for the year 2018. It’s totally worth noting that I have never even been close to calling the crypto market, so take this with a Jupiter-sized grain of salt.

I am assuming we see “market-cap” growth close to $2 trillion (cryptocurrency currently occupies around $800B of market-cap potential) - however, I’d really like to protest the use of market-cap to measure these currencies. However, that’s an argument for another article, so suffice it to say - I expect a few of these coins to double or triple.

Want my cynical reasoning? Simple:

  • 24/7 Global Markets
    • Hello gambling addicts, take a seat at the altcoin roulette. You can bet anytime, anywhere, on anything.
  • Availability to Average Joes
    • The floodgates are open as far as price goes, and I attribute a lot of that to places like Coinbase and Gemini - exchanges that have worked hard on becoming legitimate, user-friendly entities.
  • Broad Financial Ignorance
    • Penny stocks are not a new scheme. Selling people on pump and dumps - not a new scheme. All of the dark financial tricks of the world are available right now - barely anyone knows what they’re doing. Dumb money does interesting things.
  • Fear Of Missing Out
    • This is the number one human desire to watch out for. There is no force more powerful than a large group of human beings desperate to have something.

Quick disclaimer - I own all of the below coins and obviously stand to profit from their success. I am extraordinarily biased.

If you asked me at gunpoint which coin I’d most like to own in 2018, it’s Ethereum, by a long shot.

Without further ado:

CurrencyHighLowEOY 2018
Ethereum$3,535$650$3,100
Bitcoin$32,000$9,300[1]$28,300
Litecoin$1,010$189[2]$987
OmiseGO (OMG)$107.00$17.33[4]$62.00
Golem Network Token$3.49$0.69[3]$2.29

I will come back periodically and mark my predictions right or wrong.


So far, here’s how I’m doing.

  1. Bitcoin dropped under $6,900 on 2/6/18
  2. Litecoin dropped under $125 on 2/6/18
  3. GNT dropped under $0.27 on 2/6/18
  4. OMG dropped under $18 on 2/6/18

Updated Word Art with Python and SVG's

02 Jan 2018

I’ve added some basic text parsing and line splitting capabilities to the script. This lets me do interesting things like color segments of the path differenty depending on context clues.

The line always begins at a bright green dot and ends on a dark green dot.

Here's the Bible, with every sentence containing 'Jesus', 'God', 'Lord', etc. highlighted green, and 'Devil', 'Satan', 'Hell', etc. highlighted in red.
Here's the Wizard of Oz, with every sentence containing 'Dorothy' highlighted yellow.

I’ve demonstrated some more uses of the program below. Again, this code is all open source, written by me, and available on my Github.

Lyme Savvy - Split by writer. Yellow = Sharon, Green = Bob, Red = Jeff, Black = Other.
A Brief History of Time by Stephen Hawking - 'Time' is highlighted.
Making a Pearl - 'Pearl' and 'Grit' are highlighted.
Zen and the Art of Motorcycle Maintenance by Robert Pirsig - 'Quality' is highlighted.

Word Art with Python and SVG's

29 Dec 2017

This started with a text from my aunt. She wanted me to replicate an effect found here.

The premise of this art is that each sentence is broken down and saved as the sum of the contained words - e.g. the sentence “This is a wonderful day!” will be saved as 5 for our program. The Path will move in a given direction for that length, and then turn 90 degrees to the left. Any time you see a long unbroken sentence, you can be sure the author has been letting their thoughts (and pens) wander.

Here’s the end result for two of her books.

Lyme Savvy
Making a Pearl

There were a few distinct problems to solve. I have detailed them below. All of the code and example images are here: https://github.com/daviseford/word-art

Parsing Text

Well, what’s a sentence? Luckily, I didn’t need to concern myself too deeply with that idea. I used the Natural Language ToolKit library for Python and went about tokenizing input text. This was easier than I imagined:

import nltk  # http://www.nltk.org/
from nltk.tokenize import TweetTokenizer
import string
import io


def read_file(path):
    try:
        f = io.open(path, mode="r", encoding="utf-8")  # Using io allows us to specify the encoding
        return f.read()
    except Exception as e:
        raise e


def get_sentences(input_text):
    try:
        tokenizer_words = TweetTokenizer()
        tokens_sentences = [tokenizer_words.tokenize(x) for x in nltk.sent_tokenize(input_text)]
        sentence_words = [filter_alpha(x) for x in tokens_sentences]
        return sentence_words
    except Exception as e:
        raise e


def filter_alpha(a_list):
    stripped = [strip_non_alpha(x) for x in a_list]
    return [x.lower() for x in stripped if x.isalpha() and x is not None]


def filter_length(list_of_sentence_lists):
    return [len(x) for x in list_of_sentence_lists]


def strip_non_alpha(word):
    exclusion_list = set(string.punctuation)
    return ''.join(x for x in word if x not in exclusion_list)


def get_sentence_lengths(path_to_src_text):
    input_text = read_file(path_to_src_text)
    sentences = get_sentences(input_text)
    return filter_length(sentences)

# print get_sentence_lengths('./txt/bible.txt')
# [44, 33, 55, 11, 110, 23, 88,  ...]

Now we’ve got a list of sentence lengths. We combine that with a little geometry, the wonderful svgpathtools, and some good old fashioned computing.

The end result is a script that takes in a filepath (a plaintext file), and optionally a color parameter for the generated line.

The script’s argument structure means I get to run commands like:

python svg.py -f ./txt/romance_of_lust.txt --color "red"

python svg.py -f ./txt/wizard_of_oz.txt --color "yellow"

word-art $ python svg.py -f txt/purple_cow.txt -c purple
txt/purple_cow.txt has 282 sentences
Done! Created /word-art/output/purple_cow.svg

Well, that’s a lot of code you don’t care about. How about some pictures?

All of the below images are generated from the text provided by Project Gutenberg. I used a selection of their Top 100 books.

King James Bible
Ulysses (22,851 sentences!)
Romance of Lust
Plato's The Republic
Wizard of Oz
Purple Cow
Frankenstein

I hope this isn’t too much for you - here’s this article.

I'm So Meta Even This Art