This is John.

image

John works at Embedly and he seems like a normal guy. He likes ultimate Frisbee, a good joke and time with friends. He has 10 fingers and 10 toes, but John was born with a great affliction. From the second he was put on this earth he had to endure overwhelming odds against him. 

You see when John was delivered the doctor held him up, as Rafiki did to Simba, and proclaimed “April Fools.” Yes, John was born on the 1st of April.

Gasp, I know. Let that sink in for a second.

Like millions of “Foolies”, as they call themselves, he was subjected to a childhood of bad jokes. “Your parents must of thought you were a joke…” “Here little Johnnie, I got you the TMNT action figure you wanted. Nope, Ha, April Fools.” “John, we got you a car for your Birthday. Ha, April Fools, here’s a Frisbee.” “John, you were adopted… April Fools!” The courage that it takes, I can’t imagine.

The Foolies are a fellowship. Once a year, while everyone is out pranking they meet at a bar. They drink raspberry beer and not a single giggle is heard. They sit in peace as the world burns around them.

We at Embedly support the Foolies. We will not be participating in what tech has deemed a day of bad jokes thought up by insensitive marketing people to show their company has a “fun side.” It hurts real people like John and we cannot condone such actions.

There will be no scratch and sniff embeds and you will not be hearing Rick Astley.

Instead we will be silent in solemn solace with those less fortunate than us. John, we will not be pranking anyone today, we love you, stay strong.

- Sean

Posted 1 year ago by screeley
Embed This
Tagged:

Every time I see Ember on Hacker News it’s being trashed, like MongoDB trashed. It sucks for an open source project when the herd mentality kicks in and it becomes cool to hate. Sadly, I’m not one of the cool kids.

Ember is excellent. We use it extensively here at Embedly for our developer dashboard. While none of us here are JavaScript experts, Ember has made us incredibly productive.

We are going to do a series of posts on Ember at Embedly. Mostly tips and tricks that have made us successful. These are not aimed at the pro, but the amateur.

A lot goes in to baking a production-quality website, and Ember adds to that. As a result, there is a lot of boilerplate when it comes to setting up the development environment. Rest assured that once you fight through the boilerplate, you’ll be able to iterate at an impressive rate.

Okay, so you have a new awesome idea of what you are going to build, how do you get started?

Yeoman/Grunt

Grunt is the Javascript Task Runner. It makes the set up of common tools like jshint, compass, uglify and development servers dead simple. We use it in almost every project now and it has made development a whole lot easier.

Yeoman is a thin wrapper around Grunt that really just builds out a directory structure and a few files. One member of your team will use it once and never think about it again.

So, let’s get started.

$ mkdir demo
$ cd demo
$ npm install -g yo grunt-cli bower

At the time of writing, the ember generator for yeoman is hosed, so you can do what you wish with that information. We can just use the default webapp generator.

$ yo webapp
$ npm install & bower install

This will build a pretty simple directory structure.

  app /
    index.html
    scripts/
      main.js
    styles/
      main.css
  Gruntfile.js
  package.json
  test /

Yeoman sets up the project so it can immediately be used. Run grunt’s server to launch your new web app.

$ grunt server

Tada, a browser will open to http://localhost:9000/ and show a nice little Allo message.

Getting Ember

Bower is Twitter’s package management tool for the Web. Let’s get Ember installed using bower.

$ bower install ember

Bower will handle getting all the right dependencies and install them in a components directory. You will then need to add Ember and Handlebars to your index.html file.

$ vim app/index.html

You can put the following lines near the bottom but above main.js:

<script src="components/handlebars/handlebars.js"></script>
<script src="components/ember/ember.js"></script>

Grunt will live reload your browser. You now have all the dependencies for a simple Ember app. You can prove it by opening up the console and running Em.

To recap, that was about 5 commands to get Ember completely ready to go:

$ npm install -g yo grunt-cli bower
$ yo webapp
$ npm install && bower install
$ bower install ember
$ vim app/index.html

If you complain about how hard Ember is to set up you are using the wrong tools.

Templates

Here on out is optional, but will probably save you some headaches later down the road. We will set up grunt-ember-templates, an Application and the Router.

The grunt-ember-templates module pre-compiles all your templates on the fly and adds them to Em.Templates, which is where Ember keeps your templates so it can match them to your views, based on naming convention. More on this later.

$ npm install grunt-ember-templates --save-dev
# Create the templates directory.
$ mkdir app/templates
$ touch app/templates/index.handlebars

We are going to have to update the Gruntfile to run ember_templates

Grunt is configured by a Gruntfile.js, which uses JSON to define a bunch of different actions that Grunt can perform for you. This is where we’ll hook up grunt-ember-templates to Grunt.

$ vim Gruntfile.js

In the Gruntfile, you are going to load the task before, I generally put it before the grunt.initConfig

grunt.loadNpmTasks('grunt-ember-templates');

Inside the grunt.initConfig you will need to set up the compile task to point at all the templates.

ember_templates: {
  compile: {
    options: {
      templateName: function(sourceFile) {
        return sourceFile.replace(/app\/templates\//, '');
      }
    },
    files: {
      "<%= yeoman.app %>/scripts/templates.js": ["<%= yeoman.app %>/templates/**/*.handlebars"]
    }
  }
},

Next tell the watch command to look for changes in the templates directory to make the live reload work correctly:

watch {
  ...
  ember_templates: {
      files: '<%= yeoman.app %>/templates/**/*.handlebars',
      tasks: ['ember_templates']
  },
  ...
}

Lastly, add ember_templates to the server task, you are looking for this line:

grunt.registerTask('server', function (target) {
    ...
    grunt.task.run([
        ...
        'compass:server',
        'ember_templates', // Add this line.
        'livereload-start',
        ...
    ]);
});

Once you restart grunt server, you can take a gander at the app/scripts/templates.js file in scripts. It should look something like this:

Ember.TEMPLATES["index"] = Ember.Handlebars.template
...

Add that script to the index.html file to make sure the browser loads it.

<script src="scripts/templates.js"></script>

That was kind of a detour, you don’t really need to set up ember_templates, you can use inline script tags or Em.Handlebars.compile, but this method offers a nice separation of HTML and javascript. For a quick reference you can see the completed Gruntfile here.

Application

The last step here will be to set up a simple App and Router to take advantage of our setup.

You can add the main.js to the end of index.html and delete whatever is in that file.

<script src="scripts/main.js"></script>

Next set up a rootElement for Ember to use, this will make sure that Ember puts the html where you want it to. Replace the div with the class container with:

<div id="app"></div>

Next add a simple Application to main.js:

App = Em.Application.create({
  rootElement: $('#app'),
});

You can then edit index.handlebars with a simple h1

$ echo "<h1>My App</h1>" > app/templates/index.handlebars

When grunt reloads the server, your browser will have My App as the header. There is a little magic going on here. Ember is creating a Router for you and by default creates and Application Route and an Index Route. This is why just adding an index.handlebars works.

The Router is dead simple to set up as well. In main.js add

App.Router.map(function(){
  this.route('about');
});

And then create the about template

$ echo "<h1>About</h1>" > app/templates/about.handlebars

If you navigate to /#/about, boom, you are now in the About route. You can also link to the about page from index by adding:

{{#linkTo "about"}}About{{/linkTo}}

This all works based on naming conventions. You can create an AboutController, AboutRoute and AboutView, but Ember will take care of that for these simple routes. More on that later.

Recap

Setting up Ember is a lot of boiler plate code, and there are some really good tools out there that do it for you. Nothing I have described above is earth shattering, but it should get you set up for your next Ember project.

I put the complete demo on Github for reference you can find it at github.com/screeley/ember-demo-environment.

For our next post in the Ember series, we will go into Ember basics; Views, Routing and Outlets. Stay tuned.

- Sean

Discuss on Hacker News

Posted 1 year ago by screeley
Embed This

We launched a redesign of our website and developer dashboard yesterday to showcase the three new products that we’ve been working on: Embed, Extract, and Display.

image

After countless bug fixes and beta testing for ages, we created the three products with your feedback in mind. Today Embedly graduates from embedding content on the web to providing you with tools to build a better user experience. Developers have made us the largest embedding platform on the web. We’re serving half a billion API requests per month to over 15,000 developers who have signed up for our service.

The classic embedding you all know and love is Embed. Digging deeper into articles to reveal the important information is Extract. And Display helps make your images appear beautifully within your website. A short blurb on what each product is made of that doesn’t do them justice, but we’ll do it anyway:

  • Embed: Get the world’s most powerful tool for embedding videos, photos, and rich media into websites.
  • Extract: Use the elements-colors, text, keywords, and entities-that you want from articles. Discard the rest automatically.
  • Display Make the images you use look great-and display quickly-on any screen, every time.

These products are only the beginning of a new chapter for Embedly. We want to provide the tools that developers need to build richer, more engaging sites. The products are separated because we think it makes sense for you to pay for what you use, not what you don’t. Moving forward, we’ll continue looking out to see what is possible, and hearing what our customers need. We’ll build what you’re looking for and what developers are scouring the web for in frontend development. We won’t stop until it’s all here, for you to use.

Posted 1 year ago by ninerr
Embed This

As an intern, I tend to get extremely excited about the little things, those things that others in the office are pretty used to after some time. This on the other hand, is no little thing. We’re pretty pumped about the kinds of things you can build with machine learning and text analysis. So much so that we’re sponsoring the Boston NLP/ML Hackday in a couple of weeks.

Boston NLP/ML Hackday is a single day hackathon centered around NLP/ML and Elasticsearch with free food and exceptionally interesting folks in attendance. The event will be hosted by Elasticsearch, co-sponsored by Traackr and space will be provided to us thanks to Hack/Reduce. If you’re into it, that’s great, because we are too. Join us on March 16 from 9AM to 9PM in Cambridge. Registrations are limited so mosey your way on over to the eventbrite page before that other hacker does.

Eventbrite: http://elasticsearchbostonnlphackday-es2004.eventbrite.com/?rank=1

But wait…there’s more.

Over the last several months we’ve written a classifier to determine if a URL is an article or not, and a related articles engine based on LSI Topic Modeling. We’ve also included entity and keyword extraction, and language detection in the API. Along the way we wrote a parser for articles, easily allowing one to pull the content from any article - an essential step when performing any sort of text analysis on a corpus of web articles.

All of these features will be available to use at the Hackday, and we’ll be helping out, giving tips and advice using the tools. Hope to see you there!

Posted 1 year ago by embedly-team
Embed This

Colors!

Happy Valentine’s Day! Whether you’re living it up with your significant other, making out in public, or planning which pint of Ben & Jerry’s ice cream you’re going to be shoveling down while watching the Notebook tonight, alone, we can all agree that this day has one awesome mood booster for all, which is the fabulous color of red. 

Red, commonly associated with passion, fire, beauty and sometimes communism (but we won’t talk about that), has earned it’s highly coveted title as the color of love. Now what’s all this jibber jabber about love and caring, we’re an API company with better things to do than canoodle around with colors that exude feelings? Wrong! We are huge fans of color and that’s why we’re going to show you what you can do with it, using one of our nifty features, conveniently named, Colors.

The feature itself provides our users with the ability to extract up to 5 dominant colors in any given image. Such a simple outcome but the necessity of it is key. Colors play an extremely important role in user satisfaction and retention on a web page. Colors relay emotion and can very easily make something a lot more interesting. If you’re not using colors then you’re probably doing something wrong. Furthermore, understanding which one’s to use when creating something, so as to match your given color options, can be tricky and that’s where our feature comes into play.

Now for the fun part, John, our genius color man, located all the trending images under the color red and we decided to go with the cliche Valentine’s Day images so as to encourage you to be a little bit more cheesy today. Happy Vday, enjoy!

Image Credits: Instagram, Designbolts.com, Flickr, Ow.ly

Check out the feature here and email support@embed.ly for some Beta access.

Posted 1 year ago by embedly-team
Embed This

We came, we saw, we hacked…along with an office full of excited hackers at  DowncityJS in Providence, RI this past weekend. Huge thanks to Betaspring for hosting, Chris Meiklejohn of Basho and all the other sponsors.

A great crowd came out on a chilly weekend to see what hackers from as far as DC could conjure up in a mere 24-hour JavaScript Hackathon. One of the standout projects, David Trejo put together a simple and easy to use color identifier with some surprisingly useful features called Colorslice. Our own Art Gibson created, Grillin Mah Bus, a real time feed which tracks social media interactions of people on a public transit bus.

We provided our API for the event and some prizes for best use of our API as a solo participant and as a group, we were pleased with the outcome!

The winners?

Best use of our API: Cheer Me Üp, a service which allows you to send a friendly and uplifting message to someone having a tough time. They’ll receive it with cat gifs and all, embedded from sites like Tumblr and Reddit using the Embedly API.

Best Solo: Thom Nichols for Xirq.us, they used Embedly to embed photos and media within curated tweets by the location they’re near to let you know in one convenient spot what exactly is going on in an area.

Best Design: Aaron and Aaron created Meet, a dating app that won’t allow you to talk to your match before meeting up with them, it cuts to the chase by only providing the option to meet your match.

Best Team: Ryan Laughlin, Liz Neu, and Kyle Nichols for Thumbwar, which allows users to sync up with a friend over mobile, tablet or laptop connection to play a bundle of mini games with each other to pass the time or to unleash that competitive side if only for a few seconds.


The bottom line is, we had a blast! The four of us, Art, Andy, Kawan and myself enjoyed an engaging and often silly weekend with some new friends and replenished our creativity tanks.Shout out to Gabe, Giles, Samuel, Graham and Vinh 
of Cheer Me Üp and Aaron and Aaron for Meet. We’re looking forward to seeing the real thing and will definitely be sending some pleasant messages to some unsuspecting mopes.

 

Posted 1 year ago by embedly-team
Embed This

Hackers, makers, and designers in Providence, we’re pumped about DowncityJS this weekend.  DowncityJS is a 24-hour hackathon in Providence starting on Saturday and going into Sunday. 

We love using javascript in our applications. In particular, we use NodeEmberjs, and D3, and build it all with Yeoman.  What else do we love about JS? Everything is async.  Also, you can close the gap in the creative process- you change something and immediately see the results. 

Andy, Art, Nina, and I will be coming from the Embedly team.  We’re happy to help out if you want to play with the API, from throwing around ideas to pro-tips.  

Embedly does all the parsing for you, pulling relevant information for embeds given any url.  You can get started by taking a look at some of our endpoints, in particular the power that is objectify. One of my favorite features is the Article Extractor, which parses an article or blog post given a url.   This is great for getting tons of articles ready for some heavy NLP.  Play with the article and media links in your Twitter stream. The best part is that everything supports JSONP, so you can easily build beautiful JS client heavy apps. 

Oh yeah, one more thing.  There will be several special features you can use that we will talk about at the hackathon, so swing by and get a sneak peek.

Update: I’m bringing a Kinect and Andy will be bringing a helicopter. 

Posted 1 year ago by embedly-team
Embed This

I had the best conversation this morning while getting off the train. During off-peak hours, the Embedly customer service number goes directly to my cell phone. Any time I don’t recognize a number, I put on my nice voice and answer.

This time it was a nice elderly man from PA, that we will call Gerald. After a rather awkward start, Gerald says he’s having problems with his computer. He says he’s getting annoying popups asking him to allow a video to play and Gerald doesn’t want that. He just wants to watch the video, no questions asked.

Side note: I actually thought someone was messing with me at this point. “Uncle Bill, is that you? You got me good you wanker”

Gerald, obviously frustrated, wants someone to fix this, but I have absolutely no idea what he’s talking about. Apparently this happens every time he goes to his favorite website and clicks on an embedded video. He then admits, he’s “not all that great with computers”. 

Ok, so is this favorite website using Embedly? Has he figured out how to install the Twitter plugin? Are some of the embeds we are serving showing nasty error messages to users? How did Gerald get this number? Why are we doing this to Gerald? WHY WOULD WE DO THAT TO A NICE OLD MAN WITH 8 GRANDCHILDREN THAT LOVE HIM DEARLY AND CALL HIM POP POP?

Making a guess I ask if he’s running Windows and Internet Explorer. He knows he’s running Windows 7, but he’s not quite sure about this Internet Explorer thing. Well Gerald, it’s probably in your Internet Explorer privacy settings to always allow these types of videos to run, but I have no working knowledge on the matter. I still don’t know if that’s the right answer by the way.

Gerald: “Am I even calling the right person?”

Sean: “No, I’m just general tech support at this point.”

Gerald apologizes, thanks me for my time, we say our goodbyes and the conversation ends.

Why did Gerald and I have a five minute conversation this morning? 

Gerald, so fed up with his problem, starts Binging around and finds Embedly. He then spends time digging through the site to find a phone number, which is not an easy feat because ours is buried. A man “not so good with computers”, but so determined to fix his pain proves he isn’t exactly bad either. 

Gerald, you are a good man.

When you are so close to a problem one can sometimes forget people like Gerald exist. Just a man trying to watch a video on his favorite site. Gerald, I hear you buddy and I want to make your life better.

Sean

Posted 1 year ago by embedly-team
Embed This
Tagged:

Low and behold Twitter has officially joined the world of video and we’re happy to say we’re right behind them as we add Vine to our list of providers. The video service allows users to create and share a short looping video (no longer than 6 seconds) on their twitter feed. Pretty nifty huh?

Vine co-founder and general manager Dom Hofmann explains on USA Today

"Posts on Vine are about abbreviation — the shortened form of something larger. They’re little windows into the people, settings, ideas and objects that make up your life. They’re quirky, and we think that’s part of what makes them so special.

Now go enjoy this Peanuts Vine embed!

Posted 1 year ago by embedly-team
Embed This

We’re about a month into the new year and changes are already rolling out of the Embedly office. Embedly jQuery got a much needed refresh over the holiday season. Long story short, we had a bunch of legacy code in there and it was a pain to deal with all the query params, so we tweaked it.

With the new version we dropped support for everything below jQuery 1.5 to take advantage of jQuery’s deffered objects. I’ll give two quick examples here and and you can check it out for yourself on the fancy new docs at: http://embedly.github.com/embedly-jquery/

The selectors work much the same, but we have modified the input to take in a query hash. This allows the library to be more future proof as we add query arguments.

// Key
$.embedly.defaults.key = 'Your Embedly Key'
// Replace a tags with embeds.
$('#content a').embedly({query: {maxwidth:500, autoplay:true}});

You can also use the API directly and this is where the Deffered object comes in.

// Key
$.embedly.defaults.key = 'Your Embedly Key'

$.embedly.preview(['http://embed.ly', 'http://twilio.com/'])
  .progress(function(obj){
    // Called once per URL after Emebdly has returned data.
    console.log(obj.title);
  })
  .done(function(results){
    // Called once with a list of all the data returned.
    $.each(results, function(i, obj){console.log(obj.title)})
  });

That’s our quick little update to Embedly services, now go checkout the code and demo. Let us know what you think:

Code: https://github.com/embedly/embedly-jquery

Demo: http://embedly.github.com/embedly-jquery/inline.html

Sean

Posted 1 year ago by embedly-team
Embed This