Arpith Siromoney

[arpith]

Building Feedreader.co

The primary way I keep up with news around the internet is by keeping track of a bunch of blogs (the whole list is at https://feedreader.co/arpith). I do this with an RSS/Atom feed reader that I built, https://feedreader.co. This is the story of how it works.

Storing Feeds

At its core, a feed reader has a list of feeds that it fetches and stores. Typically, a feed will have ten or twenty articles, so you’re going to have to store a list of articles (for when you want to infinite scroll all the way back). This is done using Dan MacTough’s excellent Feedparser module. The articles are stored on S3 using the AWS SDK and the article ids are added to a sorted set in Redis (in ElastiCache).

Organizing Feeds

There are three things that Feedreader supports:

Unread articles

Labeling articles

Grouping feeds into folders

Folders are stored as sets of feed ids (the feed url). Creating a feed for a folder is easy — once you’ve got the feed ids, Redis’s zunionstore will give you a union of the sorted sets (of article ids).

Labels are similar to feeds — they are sorted sets of article ids. When articles are read, they are added to the label “read”. This makes it easy to fetch a list of articles that are unread:

First zunionstore is used to combine the feeds as well as the “read” label (which is assigned a negative weight). zrangebyscore is then used to filter out the read articles.

Working with feeds

What’s the bigger picture? I’m glad you asked!

Feedreader API

I’ve built a REST based API that lets you fetch, add and organize your feeds.This is an Express app running on EC2 behind a load balancer (which lets me use AWS Certificate Manager). As mentioned earlier, it uses Redis (in ElastiCache) as a backend and stores articles as static files on S3.

Bookmarklet

You can subscribe to feeds by using the bookmarklet when you’re on a website you like. The bookmarklet looks through the webpage you’re on to find the RSS/Atom feed url, and takes you to the Feedreader page for that feed.

Feedreader.co

This brings us to the actual website. It’s a tiny Express app that runs on Heroku behind CloudFlare. All it does is serve a HTML file that fetches and presents data from the API. You can do fun things like adding feeds to different folders (yupp, a feed can be in more than one folder!) or add labels to articles. And there’s infinite scroll :)

Sign up if this sounds interesting!

[arpith]

Handling Markdown in React

I’m building an app to share notes called Constellational (sign up here!) and one thing I’ve wanted is to support Markdown. Markdown is a way to write text that looks sane, for example:

#This is a headline

That can be converted to the HTML for a headline:

<h1>This is a headline</h1>

No one should have to write that by hand.

I’m using an NPM package called marked to do this conversion. Marked returns an HTML string — which will unfortunately be escaped by React if you include in your JSX.

To work around this we can Dangerously Set InnerHTML. Basically, we’rerelying on Marked to be secure and escape any HTML it finds within the Markdown string that needs to be converted.

Our component now looks like:

import React from 'react'; import marked from 'marked';

class Post extends React.Component {  constructor(props, context) {    super(props, context);    this.rawMarkup = this.rawMarkup.bind(this);  }

 rawMarkup() {    let rawMarkup = marked(this.props.data.data, {sanitize: true});    return { __html: rawMarkup };  }

 render() {    var post = this.props.data;    return <div className="post">     <span dangerouslySetInnerHTML={this.rawMarkup()} />;    </div>;  } }

This fixes #14

[arpith]

Obi-Wan meets Java

Today’s Topcoder Single Round Match was Star Wars themed. Here are two problems that Obi-Wan featured in.

Obi-Wan and the Droids

The first problem was that Obi-Wan is in a building guarded by droids and wishes to choose the safest exit. All the doors are along the same wall, and you are given the coordinates of the doors (distances from the corner) and of the droids along the wall outside (these coordinates are also distances from the corner). The safety of an exit is the distance between the door and the nearest droid.

This is the solution I came up with:

import java.util.Arrays; public class ThePhantomMenace {  public int find(int[] doors, int[] droids) {    Arrays.sort(doors);    Arrays.sort(droids);    int maxSafety = 0;    for (int door : doors) {      int safety = 0;      for (int i = 0; i < droids.length; i++) {        if (droids[i] >= door) {          if (i == 0) safety = droids[i] — door;          else safety = Math.min(droids[i] — door, door — droids[i-1]);          if (safety > maxSafety) maxSafety = safety;          break;        }      }    }    return maxSafety;  } }

This fails (as I found out the hard way) if there is only one door, at coordinate 100, and one droid, at coordinate 0. Basically, what do you do if there is no droid to the right of the door?

Obi-Wan’s laundry

The second problem was that Obi-Wan is on a mission and is carrying N shirts. After he wears a shirt, it takes N-2 days to wash and dry it before he can wear it again.

If you’re given the order in which he wore his shirts on the first week of the mission (the week here has N days) and the order on the last week, can you figure out how short (in weeks) the mission could have been?

My solution was:

public class AttackOfTheClones {  public int count(int[] firstWeek, int[] lastWeek) {    int totalTime = 0;    for (int x = 0; x < firstWeek.length; x++) {      for (int y = 0; y < lastWeek.length; y++) {        if (firstWeek[x] == lastWeek[y]) {          int time = 0;          if (x > y) {            time = x — y + 1;          } else if (x < y) {            time = 1;          } else {            time = 0;          }          if (time > totalTime) totalTime = time;          break;        }      }    }    if (totalTime == 0) return 1;    else return totalTime;  } }

Why does this work? It basically takes a week to move a shirt from day X to day X-1, or x-y weeks to move a shirt from day x to day y (if y is smaller than x). You have to count the first week too, so the mission would have taken x-y+1 weeks.

It will take one week to move a shirt from day X to a later day in the week (say X+n). The question that remains is — why don’t these weeks add up?

Let me know your thoughts!

[arpith]

Copying an S3 Bucket

This is how you copy the contents of an S3 bucket to a bucket in another AWS account.

Install the AWS CLI

If you’re on OS X like me, installing the AWS CLI is straightforward:

$ curl "https://s3.amazonaws.com/aws-cli/awscli-bundle.zip" -o "awscli-bundle.zip" $ unzip awscli-bundle.zip $ sudo ./awscli-bundle/install -i /usr/local/aws -b /usr/local/bin/aws

Open a new Terminal window or tab, and you can now use it.

Store credentials

Create a file called credentials in ~/.aws that looks like:

[default] aws_access_key_id=YOUR_ACCESS_KEY_ID aws_secret_access_key=YOUR_SECRET_ACCESS_KEY

Grant Permissions

The account that owns the destination S3 bucket needs List and View permissions for the source S3 bucket. If your case is like mine, and your bucket only contains public content anyway, you can just add these permissions for everyone. Otherwise follow these instructions!

Copy Recursively

Now all that’s left is to use the AWS CLI to recursively copy the objects in the source bucket.

aws s3 cp s3://sourceBucketName/ s3://destinationBucketName/ --recursive

That’s about it! Doing something interesting on AWS? Let’s talk!

[arpith]

Liking a Post in Constellational

The app I’m building to share notes, Constellational, lets you keep track of what you’ve read recently. I’ve now added a way to keep track of your favourite posts by adding a star to them. This is how I did it in React Native.

Adding a Star to a Post

So you’ve read a post you liked, and want to add it to your favourites. When you tap ‘Star’ a new post is created containing the username and url of this post:

if (selectedOption === 'Star') {  let post = {    type: 'star',    data: {      url: this.props.post.url,      username: this.props.post.username    }  };  PostActions.create(post); }

This makes removing the post from your list of favourites easy, it’s just a delete:

if (selectedOption === 'Remove Star') {  PostActions.del(this.props.post); }

Displaying a Starred Post

When it comes to displaying a post that you’ve added a star to, the post details are first fetched with the username/url that you stored earlier, before rendering as usual:

render() {  let noteText = '';  let post = this.props.post;  if (post.isDraft) noteText = 'Draft';  if (post.hasUnpublishedEdits) noteText = 'Editing';  if (post.type === 'star') {    noteText = 'Starred';    post = PostStore.getPost(post.data.username, post.data.url);  }

 return (    <TouchableOpacity onPress={this.showOptions}>      <View style={styles.post}>        <Text style={styles.note}>{noteText}</Text>        <Text style={styles.text}>{post.data}</Text>        <Text style={styles.time}>          {moment(post.updated).format('LLLL')}        </Text>      </View>    </TouchableOpacity>  );  } }

Displaying the option to Star / Remove Star

For now I’m using an action sheet that opens up when you tap the post to display actions you can take. Depending on whether the post is created by the user (or is someone else’s post that is being viewed) a different set of options are displayed:

showOptions() {  let params = {};    if (this.props.post.username === SettingStore.getUsername()) {    params = {      options: ['Share', 'Edit', 'Delete', 'Cancel'],      destructiveButtonIndex: 2,      cancelButtonIndex: 3    };  } else {    let options = ['Star', 'Share', 'Cancel'];    if (this.props.post.type === 'star') options[0] = 'Remove Star';    params = {      options: options,      cancelButtonIndex: 2    }  }

 let handleOptions = (buttonIndex) => {      this.handleOptions(params.options[buttonIndex]);  };

 ActionSheetIOS.showActionSheetWithOptions(params, handleOptions); }

That’s about it! This fixes #80.

Still to come: displaying the number of times your post has been liked.

Sounds interesting? Sign up here!

[arpith]

Sliding React Components

Yesterday I talked about animating page changes using React Router and ReactCSSTransitionGroup. Today’s post is about how you can slide the new component in (and the old one out).

The Components

ReactCSSTransitionGroup uses the component key to determine which child components have entered, left or stayed:

import React from 'react'; import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; import BackgroundImage from './BackgroundImage';   class App extends React.Component {  render() {

   let page = this.props.location.pathname.substr(1);    if (!page) page = 'home';

   return (      <div>       <ReactCSSTransitionGroup          transitionName="background"          transitionEnterTimeout={1000}          transitionLeaveTimeout={1000}        >          <BackgroundImage page={page} key={page} />        </ReactCSSTransitionGroup>      </div>    );  } }

export default App;

this.props.location.pathname gives you the url (‘/about’ or ‘/’) and substr(1) lets you drop the ‘/’ in the beginning. If the string is empty you know it’s the home page you’re on. You can then pass the page as a prop to the BackgroundImage component.

So what does BackgroundImage look like? I’m glad you asked!

import React from 'react';

class BackgroundImage extends React.Component {  render() {    const urls = {      home: 'http://i.imgur.com/kJXRAZH.jpg',      about: 'http://i.imgur.com/TaA1gj9.png'    };

   const style = {      position: 'fixed',      top: 0,      zIndex: -1000,      backgroundColor: '#FFFEF4',      width: '100%'    };

  let src = urls[this.props.page];     return <img src={src} style={style} />;  } }

export default BackgroundImage;

The component chooses an image url based on the page (passed as a prop) and renders an img element with the url as the source.

CSS Transitions

The following CSS classes let you slide the components in and out of the page — once again, we’re sticking to things we can animate cheaply.

.background-enter {  transform: translate(100%); }

.background-enter.background-enter-active {  transform: translate(0%);  transition: transform 1000ms ease-in-out; }

.background-leave {  transform: translate(0%); }

.background-leave.background-leave-active {  transform: translate(-100%);  transition: transform 1000ms ease-in-out; }

The component starts out beyond the right side of the page (since the width was set to 100%) and slides into the page just as the previous component slides out.

That’s about it! If you found this interesting, you might like to read more about using React Router, or about server rendering with React Router.

Doing something fun with React? Let me know!

[arpith]

Animating React Components

A few days ago I talked about server rendering with React Router, and yesterday I talked about using it on the client side to render components based on url path, for example, rendering the home page when the url is ‘/’ and the about page when the url is ‘/about’.

Today’s post is about how you can animate these changes.

Use ReactCSSTransitionGroup

Wrap the components you want to animate in ReactCSSTransitionGroup. Yesterday’s app component now looks like:

import React from 'react'; import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; import Header from './Header';   class App extends React.Component {  render() {    return (      <div>        <Header />        <ReactCSSTransitionGroup          transitionName="example"          transitionEnterTimeout={500}          transitionLeaveTimeout={300}        >          {React.cloneElement(this.props.children, {key: page})}        </ReactCSSTransitionGroup>      </div>    );  } }

export default App;

React’s cloneElement() lets you add a key to the child component passed by React Router — this is how React determines which children have entered, left or stayed.

Add CSS Classes

There are a bunch of things you can animate with CSS, these classes use opacity to produce a fade-in effect:

.example-enter {  opacity: 0.01; }

.example-enter.example-enter-active {  opacity: 1;  transition: opacity 500ms ease-in; }

.example-leave {  opacity: 1; }

.example-leave.example-leave-active {  opacity: 0.01;  transition: opacity 300ms ease-in; }

That’s about it!

Doing something cool with React? Let me know!

[arpith]

Using React Router

React Router is fun! Here’s how you use it.

Routes

Routes are used to render components based on url path — these routes will render the App component with the HomePage or AboutPage as children depending on whether the path is ‘/’ or ‘/about’:

import React from 'react'; import { Route, IndexRoute } from 'react-router'; import App from './components/App'; import HomePage from './components/home/HomePage'; import AboutPage from './components/about/AboutPage';

const routes = (  <Route path='/' component={App}>    <IndexRoute component={HomePage} />    <Route path='about' component={AboutPage} />  </Route> );

export default routes;

When the path is ‘/about’, the App component will be rendered (because of the ‘/’ in ‘/about’) with the AboutPage passed as a child component (because of the ‘about’ in ‘/about’).

IndexRoute will let you pass the HomePage as a child component if your path is just ‘/’.

this.props.children

The child component (either HomePage or AboutPage) is passed to the App component in this.props.children. This will render a Header followed by the child component:

import React from 'react'; import Header from './Header';   class App extends React.Component {  render() {    return (      <div>        <Header />        {this.props.children}      </div>    );  } }

export default App;

Rendering

Now you can use Router to render your components based on your routes.

import React from 'react'; import { render } from 'react-dom'; import createBrowserHistory from 'history/lib/createBrowserHistory'; import { Router } from 'react-router'; import routes from './routes';

let mountNode = document.getElementById("react-mount");

let router = (  <Router    history={createBrowserHistory()}    routes={routes}  /> );

render(router, mountNode);

Bundling

You can use webpack to bundle these files into a single file (that you can then add as a script source in your HTML).

var path = require('path'); var webpack = require('webpack');

module.exports = {  entry: [ './main.js' ],  output: {    path: path.join(__dirname, 'public'),    filename: 'main.js'  },  module: {    loaders: [{      exclude: /node_modules/,      loader: 'babel-loader'     }]  } };

Note that this webpack config uses Babel to handle the React/ES6 features we’ve used.

That’s about it!

If this sounds interesting, get in touch! I build websites and apps, and am always happy to chat.

[arpith]

Supporting Google App Indexing

I’m building an app to share notes called Constellational, and recently I’ve added support for universal links. This makes supporting Google App Indexing straightforward. Here’s how you do it.

Installing with CocoaPods

$ sudo gem install cocoapods

Then, in a new terminal window/tab:

$ pod init

This creates a Podfile — add the following to it:

pod 'GoogleAppIndexing'

And then install the pod:

$ pod install

If you got a warning about target overriding the ‘OTHER_LDFLAGS’ build setting, open the xcodeworkspace and add $(inherited) as a new line in Build Settings’ Other Linker Flags.

You’re also going to have to remember to use the xcodeworkspace instead of the .xcodeproj from now on :)

Adding it to your app

Add the header to the top of your AppDelegate.m

#import <GoogleAppIndexing/GoogleAppIndexing.h>

And call the register method in your application:didFinishLaunchingWithOptions: method:

[[GSDAppIndexing sharedInstance] registerApp:your iTunes ID];

To generate your iTunes ID you need to add your app to iTunes Connect.

That’s about it! This fixes #70

Want to share your notes? Sign up here!

[arpith]

Server Rendering with React Router

I build apps and websites, and lately I’ve been building isomorphic/universal websites with React. This is how you can use React Router to render on the server with Koa.

The basics are straightforward:

Your Koa app uses React Router’s match()

match() takes your routes and the url, and a callback

The callback will either receive an error or a redirect location or render props

If you’ve got an error or a redirect you can use Koa’s this.throw and this.redirect, and if you’ve got nothing you can throw a 404. On the other hand, if you’ve got renderProps you can then pass React Router’s <RouterContext {…renderProps} /> to react-dom/server’s renderToStringfunction.

require('babel-core/register'); var ReactDOMServer = require('react-dom/server'); var ReactRouter = require('react-router'); var koa = require('koa'); var render = require('koa-ejs'); var path = require('path'); var RouterContext = require('./RouterContext'); var App = require('./components/App');

var app = koa(); render(app, {root: path.join(__dirname, 'view')});

app.use(function *() {  const routes = {    path: '/',    component: App  };  ReactRouter.match({    routes: routes,    location: this.url  }, (error, redirectLocation, renderProps) => {    if (error) {      this.throw(error.message, 500);    } else if (redirectLocation) {      this.redirect(redirectLocation.pathname + redirectLocation.search);    } else if (renderProps) {      var reactString = ReactDOMServer.renderToString(RouterContext(renderProps));      this.render('layout', {react: reactString});    } else {      this.throw('Not Found', 404);    }  }); });

var port = process.env.PORT || 3000;  app.listen(port); });

A couple of things thrown in there:

I’m using Babel’s require hook to support the jsx in my React component

This doesn’t transpile the file it’s in, so I’m using plain routes

This is also why I’ve placed <RouterContext /> in a separate file

Finally, I’m using koa-ejs to provide the HTML around the react string.

My RouterContext.jsx looks like:

var React = require('react'); var RoutingContext = require('react-router').RoutingContext; module.exports = (renderProps) => <RoutingContext {…renderProps} />;

This is because the current version of React Router provides RoutingContext which has since been renamed to RouterContext (which is what the docs talk about).

That’s about it! Let me know your thoughts and suggestions!

[arpith]

Universal Links in React Native

I’m building an app to share notes called Constellational, and one thing I’ve wanted is support for universal links — this lets you use regular links for sharing that will be opened in your app instead of your website.

  React Native’s latest release (0.7-rc) supports this! Here’s how you you do it:

$ npm install react-native@latest --save

As I explained earlier, you need to add an entitlement to your XCode project, and upload a JSON file to your website. You also need to add this to your app’s AppDelegate.m:

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation {  return [RCTLinkingManager application:application openURL:url sourceApplication:sourceApplication annotation:annotation]; }

— (BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity restorationHandler:(void (^)(NSArray * _Nullable))restorationHandler {  return [RCTLinkingManager application:application continueUserActivity:userActivity restorationHandler:restorationHandler]; }

And finally, listen to the events on LinkingIOS in your React component. My app’s handleOpenURL function looks like:

handleOpenURL(event) {  var urlPath = event.url.split('constellational.com/')[1];  var splitPath = urlPath.split('/');  var username = splitPath.shift();  var postID = splitPath.shift();  this.props.navigator.immediatelyResetRouteStack([    {id: 'navigation'},    {id: 'posts', username: username, postID: postID, url: urlPath}  ]); }

I’m using immediatelyResetRouteStack() instead of just navigator.push() because it fixes a weird bug I had where my PostsPage loaded twice.

Note that this finally fixes #28

[arpith]

Remembering what you read last

The app I’m building to share notes, Constellational, helps you keep track of what you’ve read recently. To let you re-read these posts or user pages, the navigation page displays your history as a list. It makes sense to show the last visit alone (this also keeps the list as brief as possible).

This is how I did it in React Native.

When a user or a particular post is viewed in the posts page, the url (username/postID, or just username) is added to the HistoryStore:

constructor(props, context) {  super(props, context);  if (this.props.username) {    HistoryActions.add({      username: this.props.username,      postURL: this.props.postURL,      url: this.props.url    });  } }

The HistoryStore keeps track of visits that look like {url: url, timestamps: [secondVisit, firstVisit]}

var HistoryStore = assign({}, EventEmitter.prototype, {  get: function() {    if (!_history) {      loadAsyncStore();      return [];    } else {      var history = Object.keys(_history).map(url => _history[url]);      var sorted = history.sort((a, b) => {        if (a.timestamps[0] > b.timestamps[0]) return -1;        else if (a.timestamps[0] < b.timestamps[0]) return 1;        else return 0;      });      return sorted;    }  } });

Note that the get() method sorts the visits based on the most recent timestamp (the first one in the timestamps list for each visit).

This lets the NavPage display a list of the users and posts you’ve read, sorted by when you read them (without duplicates).

renderRow(row) {  let route = {    id: 'posts',    username: row.username,    postURL: row.url,    url: row.username   };   if (row.id) route.url = row.username + '/' + row.id;   let onPress = () => this.props.navigator.push(route);   let text = row.username;   if (row.data) text = row.data.split('\n')[0];   return <View style={styles.option}>     <Text onPress={onPress} style={styles.text}>{text}</Text   </View>; }

This fixes #68.

Do you want a pleasant way to share notes? Sign up here!

[arpith]

Disabling Buttons in React Native

I’m building an app to share notes called Constellational (sign up here!) andI’ve wanted to prevent blank posts and “updates” that don’t really have changes. To do this, I’ve disabled the Post and Update buttons unless there is a change from the initial state (this will be a blank string if we’re creating a new post).

This is how I did it in React Native. In the constructor for my EditPage component:

this.state.shouldDisablePostButton = true; if (this.state.post.isDraft) {  this.state.shouldDisablePostButton = false; }

Note that if it’s a draft we’re editing, we’re never going to want to disable the Post button.

In the EditPage component’s render method:

var postButton = <PostButton  edit={this.isEditing}  isDraft={this.state.post.isDraft}  onPress={this.savePost}  disabled={this.state.shouldDisablePostButton} />;

The onChangeText method for the TextInput also needed to be changed:

onChangeText={(text) => {  this.state.post.data = text;  this.setState({    shouldDisablePostButton: !this.state.post.isDraft && (this.state.post.data === this.initialData)  }); }}

The PostButton component uses the React Native Buttons package:

var Button = require('react-native-button'); class PostButton extends React.Component {  render() {    var text = 'Post';    if (!this.props.isDraft && this.props.edit) text = 'Update';    return <Button      onPress={this.props.onPress}      style={styles.postButton}      styleDisabled={styles.disabled}      disabled={this.props.disabled}    >      {text}    </Button>;  } }

And that’s it! This fixes #66.

[arpith]

San Francisco in CSS

I’m building an app to share notes, Constellational, and the font it uses is the Apple system font — which is San Francisco in iOS9. I want the website to reflect the experience of using the app as far as possible, so here’s how I used San Francisco on the web:

body {  font-family: '-apple-system', 'Helvetica Neue', helvetica , sans!important;  text-rendering: optimizeLegibility!important; }

That’s it! This is thanks to this StackOverflow answer and this blog post.

Sound interesting? Sign up here!

[arpith]

Using flex to center content

I’m building an app to share notes called Constellational, and a big part of it is creating a pleasant environment to read and write in. I’ve found that keeping track of the post length helps me write better, so when you swipe the keyboard down to read your post a word count shows up in the navigation bar.

The navigation bar has a button on the left (to go back), a title in the middle (the word count) and also says Post (or Update) on the right. Since the left and right buttons are of unequal sizes, this meant the word count wasn’t centered. Fixing this using flex is straightforward:

var styles = StyleSheet.create({ navBar: { flexDirection: ‘row’ }, left: {    flex: 1  },  right: {    flex: 1,    alignItems: 'flex-end'  },  title: {    textAlign: 'center'  } });

This sets the sizes of the left and right buttons to be equal, which in turn makes the word count stay centered (with a little help from textAlign). Note that this fixes #53.

[arpith]

From Website to App

Opening your web content in your app

You’ve built a website, and want to take a user to your app if they’ve installed it. Basically, you want universal links but want to support iOS 7 and 8 as well. 

This is how I did it in Constellational, the app I’m building to share notes.

<script type='text/javascript'>  var url = window.location.href;  if (url.substring(0,7) === 'http://') {    url = url.substring(7);  } else if (url.substring(0,8) === 'https://') {    url = url.substring(8);  }  window.location.href = 'constellational://' + url; </script>

That code checks if the url of the page that the user is on looks like http://constellational.com/someuser or https://constellational.com/someuser, and replaces the protocol with my custom url scheme, constellational://

Have a better way to do this? Let me know!

Want to share notes? Sign up here!

[arpith]

Email subjects — why bother?

A few days ago I explained how Constellational, the app I’m building to sharing notes, lets you share your posts via email if it’s a draft or an edit you’re working on. Today I found out that React Native now supports subject lines when sharing through email.

This is something I’ve wanted for a while, because an email without a subject is an email that’s not going to get read. You know how many emails are lying unopened in your inbox.

The change I had to make to my app’s code was tiny:

var username = SettingStore.getUsername(); var post = this.props.post; var url = URL + '/' + username + '/' + post.id; var options = {subject: post.data.split('\n')[0]}; if (post.isDraft || post.hasUnpublishedEdits) {  options.message = post.data; } else {  options.url = url; } ActionSheetIOS.showShareActionSheetWithOptions(options, this.shareFailure, this.shareSuccess);

Note that I’m taking the first line of the post as the email’s subject, perhaps this should be trimmed. This fixes #39.

Want to share your notes? Sign up here!