squawker

Features

Squawks

All posts are automatically upcased by a before_action in the Squawk model. Case-sensitive hyperlinks are left unmodified.

Follow model

Track the squawks of people you find interesting (enraging?)

Activity Feed

Fetches squawks for a given user, as well as those from the user's 'followees' (users the given user is following)

Forgotten Password

Uses ActionMailer and SendGrid to send the user a password-reset link

"Remember me" option

On sign-in, elect to install a permanent cookie rather than a temporary one

Character countdown

Shows remaining number of available characters (maximum: 160 --- 20 more than Twitter! Get at me, VCs.)

Test suite

Test suite written in RSpec.

(Warning: In an extremely RSpec-y way that I've come to loathe.)

Search

Full-text search implemented using ElasticSearch

Infinite Scrolling

Implemented using vanilla ES6

// app/views/static_pages/home.haml L17-L25 (180c2747)

  let scrollManager = new ScrollManager({ window: window })
  let feedFetcher = new FeedFetcher({ endpoint: "/activity-feed" })

  feedFetcher.fetchInitialPages({ scrollManager: scrollManager })

  window.document.addEventListener("scroll", () => {
    if (!scrollManager.isAtBottom()) { return }
    feedFetcher.fetchNextPage()
  })

^{app/views/static_pages/home.haml#L17-L25 (180c2747)}

At-mention completion

Inspired by GitHub's at-mention suggestions, start typing @<identifier> (where identifier is a handle or any portion of a full name), and a dropdown with fuzzy-searchable suggested completions (see the PR for a demo) will appear:

/* app/assets/javascripts/components/squawkbox.jsx L45-L68 (180c2747) */

  // Render text area with Suggestions child component
  render() {
    return (
      <field style={{position: "relative", display: "block"}}>
        <textarea cols="30"
                  className="squawk-form-content"
                  name="squawk[content]"
                  placeholder="sing the song of yourself"
                  onBlur={this.handleBlur}
                  onFocus={this.handleFocus}
                  onKeyDown={this.handleKeyDown}
                  onKeyUp={this.handleKeyUp}>
        </textarea>

        <div className="squawk-form-countdown"
             style={{color: this.state.color}}>
          {this.state.remainingChars}
        </div>

        <Suggestions list={this.state.candidates}
                     numLines={this.state.numLines}/>
      </field>
    )
  }

^{app/assets/javascripts/components/squawkbox.jsx#L45-L68 (180c2747)}

Content Recommendations

Proof-of-concept. Generated by Warbler, a service written in Python. See the PR for a demo.

# app/controllers/recommendations_controller.rb L6-L12 (180c2747)

  def index
    squawk_ids = Warbler.recommendations(squawk_params)
    squawks = Squawk.where(id: squawk_ids)
    render "activity_feed/index", locals: { squawks: squawks }
  rescue ActionController::ParameterMissing
    head :unprocessable_entity
  end

^{app/controllers/recommendations_controller.rb#L6-L12 (180c2747)}

jmromer / squawker