Too many tools and frameworks

The definitive guide to the javascript tooling landscape in 2015.

By Adam Morse

Theodore Sturgeon was a science fiction author, critic, and the basis for Kurt Vonnegut's recurring character Kilgore Trout. He was prolific, authoring over 200 pieces himself and critiquing around 400 others.

In 1958 he published a piece in Venture proclaiming what he called "Sturgeon's Revelation"

I repeat Sturgeon's Revelation, which was wrung out of me after twenty years of wearying defense of science fiction against attacks of people who used the worst examples of the field for ammunition, and whose conclusion was that ninety percent of SF is crud. Using the same standards that categorize 90% of science fiction as trash, crud, or crap, it can be argued that 90% of film, literature, consumer goods, etc. is crap. In other words, the claim (or fact) that 90% of science fiction is crap is ultimately uninformative, because science fiction conforms to the same trends of quality as all other artforms.

You don't have to bounce a tennis ball very far in San Francisco before it will hit two developers complaining about how many js tools/frameworks there are for development in 2015 and how much unneccessary complexity they add. Doing a search on twitter for 'too many js tools' or 'yet another js framework' returns... a lot of people lamenting the current state of affairs.

This is most likely, the wrong conversation for us as a community, to be having. The presence of bad tools - shouldn't discourage us from wanting more tools or frameworks. There are more books published in a single day than I will ever be able to read in my lifetime. But this does not make me sad. Or overwhelm me. Mostly I think about how excited I am to read the best books that are being published. And this is where we should push the conversation. How do we build better tools? What does that look like?

Title Highlight Header Cover

HTML

<article>
  <header class="bg-gold sans-serif">
    <div class="mw9 center pa4 pt5-ns ph7-l">
      <time class="f6 mb2 dib ttu tracked"><small>27 July, 2015</small></time>
      <h3 class="f2 f1-m f-headline-l measure-narrow lh-title mv0">
        <span class="bg-black-90 lh-copy white pa1 tracked-tight">
          Too many tools and frameworks
        </span>
      </h3>
      <h4 class="f3 fw1 georgia i">The definitive guide to the javascript tooling landscape in 2015.</h4>
      <h5 class="f6 ttu tracked black-80">By Adam Morse</h5>
    </div>
  </header>
  <div class="pa4 ph7-l georgia mw9-l center">
      <p class="f5 f3-ns lh-copy measure georgia">
        Theodore Sturgeon was a science fiction author, critic, and the basis for Kurt Vonnegut's recurring character Kilgore Trout. He was prolific, authoring over 200 pieces himself and critiquing around 400 others.
      </p>
      <p class="f5 f3-ns lh-copy measure georgia">
        In 1958 he published a piece in Venture proclaiming what he called "Sturgeon's Revelation"
      </p>
    <p class="f6 f5-ns lh-copy measure i pl4 bl bw1 b--gold mb4">
      I repeat Sturgeon's Revelation, which was wrung out of me after twenty years of wearying defense of science fiction against attacks of people who used the worst examples of the field for ammunition, and whose conclusion was that ninety percent of SF is crud. Using the same standards that categorize 90% of science fiction as trash, crud, or crap, it can be argued that 90% of film, literature, consumer goods, etc. is crap. In other words, the claim (or fact) that 90% of science fiction is crap is ultimately uninformative, because science fiction conforms to the same trends of quality as all other artforms.
    </p>
    <p class="f5 f4-ns lh-copy measure mb4">
    You don't have to bounce a tennis ball very far in San Francisco before it will hit two developers complaining about how many js tools/frameworks there are for development in 2015 and how much unneccessary complexity they add. Doing a search on twitter for 'too many js tools' or 'yet another js framework' returns... a lot of people lamenting the current state of affairs.
  </p>

    <p class="f5 f4-ns lh-copy measure">
    This is most likely, the wrong conversation for us as a community, to be having. The presence of bad tools - shouldn't discourage us from wanting more tools or frameworks. There are more books published in a single day than I will ever be able to read in my lifetime. But this does not make me sad. Or overwhelm me. Mostly I think about how excited I am to read the best books that are being published. And this is where we should push the conversation. How do we build better tools? What does that look like?
  </p>
  </div>
</article>

css

.bl {
    border-left-style: solid;
    border-left-width: 1px;
}

.b--gold {
    border-color: #ffb700;
}

.bw1 {
    border-width: .125rem;
}

.dib {
    display: inline-block;
}

.sans-serif {
    font-family: -apple-system,
                 BlinkMacSystemFont,
                 'avenir next',
                 avenir,
                 'helvetica neue',
                 helvetica,
                 ubuntu,
                 roboto,
                 noto,
                 'segoe ui',
                 arial,
                 sans-serif;
}

.georgia {
    font-family: georgia, serif;
}

.i {
    font-style: italic;
}

.fw1 {
    font-weight: 100;
}

.tracked {
    letter-spacing: .1em;
}

.tracked-tight {
    letter-spacing: -.05em;
}

.lh-title {
    line-height: 1.25;
}

.lh-copy {
    line-height: 1.5;
}

.mw9 {
    max-width: 96rem;
}

.black-80 {
    color: rgba(0, 0, 0, .8);
}

.white {
    color: #fff;
}

.bg-black-90 {
    background-color: rgba(0, 0, 0, .9);
}

.bg-gold {
    background-color: #ffb700;
}

.pa1 {
    padding: .25rem;
}

.pa4 {
    padding: 2rem;
}

.pl4 {
    padding-left: 2rem;
}

.mb2 {
    margin-bottom: .5rem;
}

.mb4 {
    margin-bottom: 2rem;
}

.mv0 {
    margin-top: 0;
    margin-bottom: 0;
}

.ttu {
    text-transform: uppercase;
}

.f2 {
    font-size: 2.25rem;
}

.f3 {
    font-size: 1.5rem;
}

.f5 {
    font-size: 1rem;
}

.f6 {
    font-size: .875rem;
}

.measure {
    max-width: 30em;
}

.measure-narrow {
    max-width: 20em;
}

.center {
    margin-right: auto;
    margin-left: auto;
}

@media screen and (min-width: 30em) {
    .pt5-ns {
        padding-top: 4rem;
    }

    .f3-ns {
        font-size: 1.5rem;
    }

    .f4-ns {
        font-size: 1.25rem;
    }

    .f5-ns {
        font-size: 1rem;
    }
}

@media screen and (min-width: 30em) and (max-width: 60em) {
    .f1-m {
        font-size: 3rem;
    }
}

@media screen and (min-width: 60em) {
    .mw9-l {
        max-width: 96rem;
    }

    .ph7-l {
        padding-left: 16rem;
        padding-right: 16rem;
    }

    .f-headline-l {
        font-size: 6rem;
    }
}

Install via npm Only installs the needed tachyons-modules for this component

npm i --save tachyons-borders tachyons-border-colors tachyons-border-widths tachyons-display tachyons-font-family tachyons-font-style tachyons-font-weight tachyons-letter-spacing tachyons-line-height tachyons-max-widths tachyons-skins tachyons-spacing tachyons-text-transform tachyons-type-scale tachyons-typography tachyons-utilities

Other Components

Article Lists

Title Preview Author Media Flipped Title Preview Author Media

Articles

Feature Full Bleed Background Headline Title Text Large Title Text Left Title Top Border Left Title Photo Essay Single Column Large Title Title Highlight Header Cover Title Text Image Title Text

Avatars

Circle Border Circle Double Ring Rounded Large Rounded Medium Rounded Small Square

Banners

Basic Info Single Cta

Buttons

Basic Previous Next Basic Rounded Extra Small Basic Rounded Small Basic Rounded Basic Centered Icons Pill Grow Pill

Cards

Album Centered Album Left Basic Text Card News Card Product Card Profile Card Title Subtitle Profile Card Suggested Profile Text Card

Collections

Albums Movies Posters Dim Posters Square Title Subtitle Vinyl

Definition Lists

Inline Simple

Error Pages

404

Footers

Centered Icons Hover Glow Inline Text Simple Large Type Small Print Social Circles Social Simple Text Social Simple Social Text Social Studios

Forms

Checkbox List Input Text Label Newsletter Subscription Password Sign In Sign Up Textarea Label

Headers

Circle Avatar Title Subtitle Rounded Avatar Title Subtitle Startup Hero

Layout

Aspect Ratio 16x9 Aspect Ratio 1x1 Aspect Ratio 3x4 Aspect Ratio 4x3 Aspect Ratio 4x6 Aspect Ratio 5x7 Aspect Ratio 5x8 Aspect Ratio 6x4 Aspect Ratio 7x5 Aspect Ratio 8x5 Aspect Ratio 9x16 Centered Container Five Column Collapse Alternate Five Column Collapse Asymmetrical Five Column Collapse Mixed Five Column Collapse One Five Column Fixed Table Layout Grid Mixed Rows Fixed Table Layout Grid Flag Object Bottom Flag Object Collapse Flag Object Top Flag Object Four Column Collapse Two Collapse One Four Column Collapse Two Four Column Full Bleed 16x9 Full Bleed 4x6 Full Bleed 5x7 Full Bleed 5x8 Full Bleed 6x4 Full Bleed 7x5 Full Bleed 8x5 Full Bleed 9x16 Full Bleed Square Full Screen Centered Title Horizontal Aspect Ratios Three Column Collapse One Three Column Two Column Collapse One Two Column

Links

Animate Background Color Animate Color Dim No Underline Underline On Hover

Lists

Block Item Dotted Border Border Spaced Border Tight Contact Phone Follower Notifications Rounded Square Avatar Follower Notifications Hashtags Items Image Title Price Large Links Inline Links Animate Color Links Inline Links With Borders Inline Slab Stat Large Slab Stat Small Slab Stat Title Text

Marketing

Iphone App

Nav

Fixed Semi Transparent Large Title Link List List Overflow Logo Links Inline Collapse Logo Links Inline Logo Titles Links Centered Minimal Sign Up Title Link List

Pages

4x4 Mixed Grid Double Portfolio Project Swiss Cover Five Columns

Quotes

Left Border Pull Quote

Tables

Basic Striped Dark

Text

Large Paragraph Narrow Paragraph Paragraph Small Narrow Paragraph Small Paragraph Title Subtitle Centered Wide Paragraph