protonet

Meet the Team

christopher-blum — Wed, 01 Feb 2012 09:38:00 -0500

As of today the protonet core team consists of six employees. We gratefully received an innovation grant from the State Of Germany.

Now it’s time to give you a quick introduction to “who’s who” of the people behind protonet:

Ali Jelveh, Co-Founder & Chief Revolutionary Officer

Ali has been a developer since back when he dropped out of university and needed the money. He started with building minimal billing solutions and grew to build teams and create ERPs for mid-size companies. With the rise of the web he moved from building first small webstores to designing and creating JavaScript architectures for one of the first big social networks. He joined the XING AG as a RoR developer early on where he had the opportunity to meet and work with truly amazing people. This is also where he finally decided to start working on an idea that was simmering in his head for quite some time. He told Christopher about it and the rest is history. When he isn’t working on protonet he spends his time thinking, planning and simulating (cue manic laughter here).

Contact him via XING, LinkedIn or Twitter.

Christopher Blum, Co-Founder & Intergalactic President

At the age of 16 Christopher founded his own little company, PackYourFiles.com (a one-click share hoster, similar to megaupload, with file compression technology). After finishing school he studied communication design and started working as a freelancer in an online marketing agency. Later he got hired by the largest european social business network, XING.com, where he was mainly responsible for the JavaScript architecture and the integration of a third party app eco system. During that time he met Ali, who also worked at XING. Ali convinced Christopher from the first day on to work with him on protonet. Since then the first prototype was developed after work and on the weekends. Apart from that Christopher is the owner of SpellBoy.com, an online spell checker, that had in its best days more than 100,000 unique visitors per day. In his free time he enjoys playing football or having a cold beer with friends.

Contact him via XING, LinkedIn or Twitter.

Wolfgang Peters, Serious Business Officer

Early during schooldays Wolfgang developed websites for small local businesses for small money, later he finished commercial high school and studied Business Administration at the University of Kiel in Germany and the University of Tromso in Norway. During his studies Wolfgang worked on several consulting and startup projects. After finishing university in 2011 he started working as Business Analyst for the startup incubator Hanse Ventures in Hamburg. He earned major insights in the startup and venture capital industry and got prepared for founding and administrating an own business. During founder workshops at the betahaus Hamburg he met protonet who were looking for a business guy. After getting to know the product and team members the decision to work together was made. Wolfgang now is in charge of the business stuff, looking at numbers and cash, taking care of marketing and sales, doing everything he can to let the developers develop. Serious business so to speak.

Contact him via XING, LinkedIn or Facebook.

Henning Thies, Senior Interactive Developer

On the i486 of his parents Henning made his first foot steps on his programming career with Turbo Pascal. In school he got even more interested in the whole computer science, that he decided to study IT and Design in Lübeck. Next to the studies he worked in a small local agency and learned programming for the web. After he returned from a semester at the Universtitat Politècnica de Valencia he went to Hamburg. He started to use Ruby on Rails at Ubilabs and earned a Google Qualified Developer certificate. To finish his diploma Henning went to Kiel an started to develop various web-projects at empuxa. Once done he moved back to Hamburg and continued to work for empuxa out of the Betahaus. There he met Ali, Christopher and protonet. After being under observation for some time, they decided to ask him to join their team to make it even more awesome. Now he tries to to implement new backend and frontend features. And of course support Ali and Christopher to maintain their growing bug collection. To get rid of all the messy weather-sites he co-founded the website wetterwolke.com.

Contact him via XING, LinkedIn or Twitter.

Johannes von Bargen, Dynamic Research Scientist

Johannes studied Architecture and Urban Development at HfbK and HCU Hamburg and graduated in late 2008. Additionally he’s very interested in information technology of all kind. Especially when making ones life easier and more fun with its help. Since highschool and througout his university studies he provided Web/Email/Backup-hosting services for small companies and did custom software development. He’s really unhappy with the current situation: People give away even their most private information and data unmindfully and put themselves into the hands of big companies that would sell their mothers soul to increase their profit. By putting his power behind protonet he wants to enable even the not so tech-savvy people to use the power of open source to get in charge of their own data and disburden them from the dependency on third party services.

Contact him via XING.

David Burkhardt, Senior Craft Meister

David had a knack for designing early on: with 17 he won the “Landeswettbewerb Jugend Forscht” with his passively cooled mini-computer. He then went on to design and build his own line of speciality cooling solution for custom PC hardware. While doing that, he started his design studies at the HfbK in Hamburg where he studied under Prof. Löw who incidentally connected him with the protonet project. Since then he turned the mere idea of an enclosure for our unique hard- and software combination into an actual physical thing, designed, built and assembled here in Hamburg. He spends the rest of his time either on his house boat thinking about artsy things, or at the university crafting even more artsy things. Oh and, he’s not only good at design, he’s also a great engineer, perfect combination if you ask us.

And that’s it! Six people to change the world, and now that we’ve finally solved the tough problem of naming our positions, it’s time to get some work done! Expect great things!

You're kick-ass business dude? Join us!

dudemeister — Tue, 27 Dec 2011 10:46:00 -0500

After three years of hard work and our first shipments behind us - the time has come for us to walk out of the dark and change the world.

Changing the world however is not an easy feat and we can’t do it alone. We need you to help us. This is a life changing opportunity and we’d love you to take this journey with us but before you say yes, here are some things you should know.

What we believe in:

We believe in freedom, we believe that computer can change the world, and we believe in using this power to catalyze true social change and to make businesses and communities less dependent on the big players for they’re most important tools.

We also believe that true fundamental changes happen through the power of your local communities (whether it is a business or private community) and we want to enable these communities with tools that make them strong and independent.

As far as user-computing is concerned we believe the web to be the operation system of the future and we’re preparing our company to be ready and on the (surf-)board when this spectacular wave hits the shores.

What we do:

We’re building the next generation of social infrastructure, a mashup of a mini server - an accesspoint and a distributed social network. With our protonet nodes small and medium enterprises are enabled to create a secure and - most importantly - social infrastructure with the push of a button.

In the long run we’re in fact creating a new kind of operation system meant to one day provide the IT and eSocial needs of SME’s and Communities in general.

Check out some images: http://twitter.com/#!/protonet/media/grid

Some videos on our current splash-page: http://protonet.info/

What you’ll be doing:

Production and supply chain management

It’s a different kind of business, we do hardware, we do software, we do it locally, we do it distributed. you’ll be in charge in creating a supply chain that can handle our needs, and make sure we get our nodes produced in time, in perfect quality and for a good price, we’re going at the hardware problem as we go at the software problem, small iterations, small changes, short cycles. You’ll be helping us build stuff that is meant to last.

Marketing and sales

You should love to sell and since the market we’re catering to does not yet exist you’ll have to build that one too. You’ll be in charge of creating and managing a sales team (in- or outsourced), handling whatever marketing needs to be done to get the company off the ground.

Controlling and funding

As a company we’ll need numbers, we need to always know exactly where we stand, you’ll be creating the framework for us to know the company numbers at any given time. At some point we might take on external investment so you should know how to get that funding. if you don’t know it yet, don’t worry you’ll be able to learn this kind of stuff on the job.

Yes, we know this sounds like a job for a whole team (or several), and that’s what you’ll probably end up building and leading, but right now, our budget allows for just one position and that is yours. Currently all these task are handled internally within our team so you will not be alone on these issues.

How we work:

You’ll get the opportunity to work with some great coders (including 2 ex-XING Architects) an amazing industrial designer and you’ll be meeting a lot of great people in all kinds of fields helping us make this a reality. You’ll be able to tap some massive brainpower whenever you need help on something. Our company culture is a work in progress, as of now we just have one rule: create the most awesome thing you can within the given constraints.

Just as our products are made to last we see this as a beginning to decades long journey, that is why we want to provide a healthy work life balance - we work 9-5 (rather 10-6) and leave enough breathing room for your creativity and skill set to grow. We understand that there is only a certain amount of work that can be achieved in a day, so be smart, keep problem solutions as simple as possible and start on iterating from there.

The pay is decent and there is equity but if you’re looking to earn big from the get go we’re not your startup.

Our office is currently embedded within the great betahaus Hamburg.

If you’re interested and not afraid to challenge the status quo, drop us a line at: team [ät] protonet [döt] info .

blogpost on his internship at protonet by our own @danopia - do check it out!

dudemeister — Thu, 15 Dec 2011 04:19:00 -0500

blogpost on his internship at protonet by our own @danopia - do check it out!

Hostapd: Beacon set failed

christopher-blum — Mon, 12 Dec 2011 11:33:00 -0500

Right now you’re probably thinking ”Mhhhmm, Bacon” (but no this is about “beacons”).

For our current revision of high-end nodes, we use a motherboard named Asus E35M1-I Deluxe.

This board includes an Atheros AR9280 WLAN chipset which is usually well supported by the default linux compat wireless drivers.

Our software setup (Ubuntu 10.04 LTS3) contains the latest stable version of the HostAP Daemon (v0.7.3) which is compiled with the following build options:

CONFIG_DRIVER_NL80211=y
CONFIG_IEEE80211N=y

Our hostapd config looks a little bit like this:

ctrl_interface=/var/run/hostapd
driver=nl80211
hw_mode=g
wme_enabled=1
ieee80211n=1
ht_capab=[HT40-][SHORT-GI-40][DSSS_CCK-40]
channel=6
ssid=protonet-private
interface=wlan0
macaddr_acl=0
auth_algs=1
ignore_broadcast_ssid=0
wpa=2
wpa_psk=abcdefghijklmnopqrstuvwxyz
wpa_key_mgmt=WPA-PSK
wpa_pairwise=TKIP
rsn_pairwise=CCMP

And here comes the main reason why I’m writing this blog post:
Whenever we try to start hostapd in verbose mode it shows the following error:

nl80211: Set beacon (beacon_set=0)
nl80211: Beacon set failed: -22 (Invalid argument)
Failed to set beacon head/tail or DTIM period

It seemed like we were the only ones having that issue. Google Search didn’t offer any help. Writing to the linux wireless mailing list didn’t help much either.

So we went with the trial and error approach and therefore compiled hostapd over and over again based on different build configurations.

After 10 days of debugging (seriously!) we finally managed to find a fix.
It turns out that including this build option magically heals hostapd:

CONFIG_IEEE80211R=y

Don’t ask us why enabling Fast BSS Transition (802.11r) solves it. We’ve no idea. If you’re a hostapd developer reading this please enlighten us.

How to save plenty of Cash on HDDs these Days

christopher-blum — Mon, 07 Nov 2011 04:51:00 -0500

As you probably already have heard the price of hard drives has increased significantly due to the horrible flooding in Thailand.

Western Digital, the world leader in HDD production, was heavily affected by the natural disaster
Seagate, an American company that outsourced its HDD production to factories in Thailand, lowered it shipments estimate
Altogether it seems that every HDD manufacturer has (or is dependent on) production facilities in Thailand
Some news sources say the flooding could impact global HDD production until spring 2012 while at the same time the global demand for HDDs is continuously growing

Now if you look at this graph that compares consumer prices of a Seagate 2TB HDD over the last 90 days, you’ll see an increase by more than 100%.

We at protonet are suffering big time from the price drama since we are preparing our first delivery of nodes to our customers.

But, lucky us, we managed to find a way to bypass the increasing of prices (temporarily): It turns out that the prices for external HDD are pretty much not affected yet.

We think this is because those vendors still have big stock reserves. Look at a price comparison of a LaCie 2TB Hard Disk (which contains exactly the above mentioned Seagate hardware):

We even spotted local shops that have plenty of supplies and offer it even cheaper than shown in the graph above.

Yes, you understood correctly: Right now if you need a Seagate 2TB HDD (or any other HDD) it is much cheaper to buy it with an external case than without.

Here’s a list of external cases and their respective HDDs (no guarantees + if you have infos on any other cases please write their spec in our comments we’ll update our list):

“LACIE hard disk” EAN 3660619318711: Seagate Barracuda Green 2TB (ST2000DL001)
“TOSHIBA STOR.E ALU 2S”, Seagate Barracuda Green 2TB (ST2000DL003)
“SEAGATE GoFlex Desk 2TB”, Seagate Baraccuda LP (ST2000DL003)

Launch date is coming closer

onlinehelp24 — Mon, 19 Sep 2011 10:54:37 -0400

About Onlinehelp24: We are about to setup an IT support infrastructure for protonet and have already deployed a handful nodes for early adopter customers.

The last two weeks were totally exciting and absolutely productive. We started to drum up business and focussed on how protonet can be used in the wild :)

Besides of revolutionizing the way people socialize we came up with 2 scenarios where we think that protonet might also bring a big change and benefit for its users.

Moving the world from data-stockpiling corporate social networks with almost no local impact to decentralized infrastructures where everybody can be a social network hoster and have a real effect in his everyday life.

Check out protonet as a office server for small and medium-sized enterprises:
http://protonet.info/docs/protonet_use_cases_smes.pdf

Check out the scenario for travelers at a hostel:
http://protonet.info/docs/protonet_use_cases_hostels.pdf

What do you think? What would be another convenient scenario for protonet?

If you need help setting up your own protonet node at home or at your office, feel free to contact us at protonet@onlinehelp24.net. We’ll deal with all your questions getting it up and running in no time.

Video

christopher-blum — Thu, 15 Sep 2011 11:39:20 -0400

Introducing Hum + Melody - Simple Music Streaming and (Web-)Client

ivercore — Mon, 05 Sep 2011 08:32:24 -0400

When you have your own protonet-node and start putting all your stuff on there, there naturally comes a time when you decide that just storing your music on it is not enough, you also want to listen to that music, preferably from anywhere and with any device. Now since we haven’t got a third party app management (yet) you’ll have to do some package installing by hand.

There are a couple of great solution for being your own music hoster and with the hardware power that the node brings it’s not hard to just use one of the existing solutions:

Subsonic http://www.subsonic.org is a full fledged server and web client + there are quite a few smartphone clients out there, this is what I tried out.
Ampache http://ampache.org/ similar to Subsonic but the reviews weren’t as good as what people wrote on Subsonic, so I passed.
ORB http://www.orb.com/ this one looked nice on paper (or web) but didn’t seem to be Linux compatible (a deal breaker since the nodes run a ubuntu server version).

I am sure there are much more, feel free to post your feedback on anything you used and liked or disliked in the comments

After using Subsonic for a while I was mostly happy, there was however a main issue I had with it and that was that it wouldn’t allow me a jukebox style play of my entire collection. and while I was pondering that issue I was wondering why these players had to be this big and clunky. I thought that there certainly should be an easier player/client setup. A very simple server that just serves music and a simple client that allows you a simple way to play back that stuff.

I wanted …

a music server that just serves music
a music client that connect to any music server that follows a certain specification and plays/streams from the server
to have my whole music collection available to me wherever I am.
to be able to play random tracks from my entire collection without having to configure anything.
to be able to search my entire collection
to be able to queue tracks
to be able to view the tracks that have been previously played

Now apart from some other minor niceties I didn’t really expect much from a music player. Unfortunately I haven’t found anything like that, so What is a developer to do in such a situation. A developer develops!.

Welcome Melody & Hum

Melody

Melody is a music server that (at the moment) does three things

Announces that it is the melody sever
Publishes a list of all the music that it has in its catalogue
Serves a track requested

Besides this it also allows you to do a couple of other things in the background

Configure multiple music source locations
Index all the music from these configured locations

That is all it does, and maybe that is all it may ever do. But with just these three things it does about all it needs to do more or less, because less is more.

Hum

Hum is the client that talks to the melody server. So what can Hum do today? It might not be the prettiest looking player but it does do everything you would need in a player. Its features include:

Track Navigation (including smart skipping functions)
Random play from your entire music collection
Search for tracks, click on the track and play it
Queuing. Queue tracks from which you have searched
Previous list. Show a list of all your tracks to which you have listened, play them again or queue them to play later
Volume. Independent volume control so you can control how loud your music is.
Continuous play. Choose whether you want a next track to be loaded when the current track finishes or if it should just stop.
Duration. Shows how much of the current track has been played, as well as the total length of the track
ID3 information, if the track has it, it will be displayed
Configurable server location. Choose to which Melody server you want to connect. Or any other music server that behaves like Melody.
Fetch a new catalogue from the sever
Re-index the tracks on the local client.

Code and Tech

The code for melody is located at https://github.com/protonet/melody .

It is a super simple Sinatra app. The main work happens in three files, and I think it is pretty easy to read, so I don’t think I need to expand on it here.

Hum lives here: https://github.com/protonet/hum .Unlike Melody, Hum is a full Rails 3 application, as it needs to do a bit more than what Melody does. Apart from just Rails the other main component to Hum, is Soundmanager2 (http://www.schillmania.com/projects/soundmanager2/), without which, Hum as it is now would not be a possibility. Its API is great and extensive, and allows you to do just about anything with it. And the two main things that it does that is needed in Hum are

Hit a URL and play whatever that URL returns if it can
Fire a JavaScript callback event when it has finished playing a track.

What this means is that we can pass something like this to SoundManager 2 and it will just play, as long as it returns a playable file.

http://melodyserver_url/3y83ekkusahdua3e313

Other things we used to get Hum working the way it does

jQuery - What can I say about this. Just the best of the best.
Head.js Allows you to put JavaScript back in the head tag where it belongs, and downloads the js files in parallel
facebox - A light-box for programmers
Memcached - in memory cache to speeds everything up a lot and is actually required for some of the parts of Hum to work.

Finally

What this means is that you can have your entire music collection available to you wherever you go, as long the server is accessible to you where you are. That could be on the internet, or on a LAN if you don’t need it accessible to the outside world or wherever. It is up to you.

If you would like Melody or Hum to do more, let us know, or fork them, modify them, and make a pull request.

What does this mean for Protonet? It means that not only will you be able to have your Protonet node with all the goodies that it provides, but now you will be able to have it configured to be a music client/server as well. Melody and Hum are likely to be the first of the third party apps integrated into Protonet. We will give you a simple interface to install and configure both Melody and Server. With Hum/Melody, what was great in Protonet is about to get better.

Go ahead, Hum a Melody ;-)

How To Setup A Cheap Exception Notifier For JavaScript

christopher-blum — Wed, 31 Aug 2011 04:14:54 -0400

It’s very common for back-end developers to implement a mechanism in production mode that tracks and aggregates exceptions.

But what about your front-end code? How do you know when something on your website is seriously broken and you don’t see it since it only happens in a certain browser version, that you (or your QA department) isn’t testing on?

JavaScript has defacto become one of the most popular programming languages on the web. Nowadays websites like Facebook, Twitter or GMail have a significant part of their application logic in their front-end.

I think it’s statistically more likely that exceptions happen on the client side than on the server side:
An important difference between your client side JavaScript and your server side language is, that your JavaScript is executed on thousands of different machines under different circumstances (different user agents, different OS, plugins, firewall, different internet connections, …) while your server side language runs in a stable environment that is under your control.

With this blog post I’d like to show you a couple of ways how to implement a simple JavaScript exception notifier:

Option #1 - Let Google Analytics track your JavaScript errors

This is probably the easiest way especially if you are already using Google Analytics in your app.


window.onerror = function(message, file, lineNumber) {
  _gaq.push([
   '_trackEvent',
   'error',
   file + ':' + lineNumber,
   message + ''
  ]);
};

This option makes only sense if you are running a small to medium sized website. Keep in mind that Google Analytics wasn’t designed to handle exceptions. Also if you are running a rather large website, don’t piss off your marketing department by pushing your nerdy exceptions into their tool.

Instead consider implementing option #2 or #3.

Option #2 - Push it to your Apache error.log

This option is also rather tailored for low-traffic websites. Additionally you need some experience in inspecting Apache log files.


window.onerror = function(message, file, lineNumber) {
  new Image().src = "/this_url_doesnt_exist?message="
    + encodeURIComponent(message)
    + "&file=" + encodeURIComponent(file)
    + "&lineNumber=" + encodeURIComponent(lineNumber);
};

Now each JavaScript error will generate a new log entry in your Apache’s error.log including all relevant error information (date, user agent, error message, file, …).

Option #3 - Use Airbrake

This is what we use at protonet for collecting exceptions on the server side as well as on the client side.

Airbrake (formerly known as ‘Hoptoad’) is an app that takes your exceptions (regardless which programming language) and aggregates them for you.

It’s very handy for teams since you can mark exceptions as resolved and if you register a paid account you can integrate it with GitHub or lighthouseapp.

If you want to send your JavaScript exceptions to Airbrake do the following:

Register an Airbrake account (free or paid) and create a project
Search for your api key (among other places you can find it when you click the “Edit this project” link)
Include an Airbrake JavaScript notifier lib of your choice in your web app:
We at protonet decided not to use the one that airbrake offers since it is way too big in terms of file size and logic for our needs (~8 KB or 3 KB gzipped). Instead we wrote our own lightweight lib. You can find it here (including further instructions)
Deploy, lean back, grab a cold beer and enjoy the incoming exceptions

Video

christopher-blum — Sat, 20 Aug 2011 08:49:01 -0400

Filtercake: Protonet to go, or: Now what?! Pt. I

christopher-blum — Sun, 16 Jan 2011 10:32:59 -0500

Filtercake: Protonet to go, or: Now what?! Pt. I:

filtercake:

Okay, I visited Protonet at the Betahaus Hamburg last thursday and took home a node installed on my old MacBook sporting an untouched fresh install of Ubuntu 10.04. The node is running at home, right now.

“What is the Protonet?”, you might ask.

Here’s the answer from their blog:

If I got it right so far, Protonet is a distributed (“decentralized”) Network, where everybody will be able set up their own node with the push of a button.

So here are five bullets, also from the blog, that should be enough to get your undevided attention for a moment. Because it is already built. It’s a matter of months, until you can start using it. Free and for free, anywhere, for any purpose:

we want citizens to have an infrastructure they own themselves

we want citizens to be the ones responsible for it, to maintain and to cultivate it

we believe in responsibility, and we believe that only with taking responsibility freedom is possible

we believe that building such an infrastructure needs to be as simple as pushing a button

and most important of all: we believe that, for it to work, it needs to be awesomely fun to do it

“Most important of all.” Not the features. Not the speed, or the low price (“free”). It has to be fun to use it. “Press one button and it’s up and running.”

And that’s exactly what they built. I copied two lines of shell code and pasted them in the terminal. Script was running for about an hour, downloading tons of stuff and compiling on the fly. And then it was up and running. I created a user, uploaded the avatar, typed “hello world” and voila.

At home I logged in with a MacBook, a Windows XP netbook and an iPhone. It’s there. It is up and running.

If you’re interested in some background-thoughts on what this all means, have a look at the so-called “Protonet Primer” online on SlideShare, or download the PDF (1.7 MB).

So, now what?

Just let it sink in a little and spend some time daydreaming on what you could possibly use your own private network for - one that is connected to all other private networks. Don’t worry about any technical stuff - it will probably run with the push of a button. Just go wild.

We will explore some use cases here in the next post, where you will be welcome to share your own ideas in the comments (as you are here, of course). Or write your own post and link it here or on the Protonet-blog.

There are also lots of social (as in “society”) and even political implications to think about, too: this is pure, digital, global Anarchy. And the “Nazis-and-paedophiles”-police is probably waiting already.

If you have any questions, direct them to the guys at Protonet. It says “Ask us anything!” in bold, so go and do so. Subscribe to their blog and stay on track on twitter.

You know, just do something.

See you soon.

The jQuery 'inview' Plugin

christopher-blum — Wed, 29 Dec 2010 16:06:00 -0500

A couple of months ago, we needed a way to detect whether an element is visible to the user.
The use case behind this was that we wanted to implement an endless scrolling mechanism for the protonet dashboard timeline:
If the user reaches the last message in the timeline more messages had to be loaded without the user clicking anywhere.
You might have seen such thing in the new twitter web site.

Thanks to Google, we stumbled upon this blog post written by Remy Sharp.
There he shows off something that was exactly what we were searching for: A bindable event for jQuery which gets triggered as soon as the element appears in the browser’s viewport.

The plugin was very suitable in the beginning. Then, when we broaden it’s usage, we noticed that a few essential things were missing:

The plugin only honored vertical not horizontal coordinates: It was even triggered when the observed element was on the outer right or left of the viewport
The plugin used the browser’s window.onscroll event to check whether an element is visible.
The problem here is that elements also can come into view without the user performing a scroll. For instance an element could appear in the user’s view through an effect or by manipulating the dom (by removing or hiding elements before the observed element).
Also, elements within overflow: scroll; containers weren’t respected, since scrolling in such doesn’t fire the window.onscroll event.
The event wasn’t working at all when using with jQuery’s mighty live/delegate methods

Also we discovered a few bugs: One for example was that the event was triggered on elements that weren’t in the dom tree. Another issue was that it didn’t seem to work correctly in Mobile Safari on iOS (iPad, iPhone) versions.

Luckily someone already brought the code to GitHub. Starting a “hardcore forking action” and implementing/fixing the above mentioned issues was the obvious thing to do.

And now here we are, introducing a rebrushed, still lightweight, jQuery ‘inview’ plugin, with *drumroll* full test coverage.

Browser Support

The plugin is compatible with the following browsers we tested:

Firefox 3+
Safari 3+
Chrome 7+
Opera 10+
IE 6+
Mobile Safari on iPad 4.2.2
Fennec 4b on Android 2.2
Opera Mobile 10.1b on Android 2.2
Mobile WebKit on Android 2.2

Usage

#1 Simple example

$("#foobar").bind("inview", function(isVisible) {
  // Event is triggered once the element becomes visible in the browser's viewport, and once when it becomes invisible
  if (isVisible) {
    console.log("element #foobar became visible in the browser's viewport");
  } else {
    console.log("element #foobar became invisible in the browser's viewport");
  }
});

#2 Only load images when they appear in the viewport for performance reasons (reduce amount of http requests, yslow, yada yada …)

$('img[data-src]').live('inview', function(event, isVisible) {
  if (!isVisible) { return; }
  
  var img = $(this);
  img
    .css('opacity', 0)
    // Show a smooth animation when the image is loaded
    .load(function() { img.animate({ opacity: 1 }, 500); })
    // Change src
    .attr('src', img.attr('data-src'))
    // Remove it from matching set of elements of live event selector
    .removeAttr('data-src');
});

See this example, showing an overload of lolcats, here.

Visualizing the protonet using Raphaël.js

tkirchner — Tue, 31 Aug 2010 03:59:00 -0400

For protonet we needed a way to show the structure of the protonet to the user in a compact and visually pleasing way.

1. Interactive graphics on the Net.

There are a number of possibilities when it comes to dynamic graphics on the net, just to name a few:

plain JavaScript (maybe with some DIV-tags flying around)
HTML5 Canvas Tag
Flash
Java
SVG

We chose SVG and on top of that there is the beautifully simple yet powerful Raphaël.js framework.

Let me summarize the advantages of SVG over the other options mentioned:

can attach DOM events on any visual element
anti-aliased rendering for free (see http://en.wikipedia.org/wiki/Aliasing)
scaling of visuals has no effect on the quality (see http://en.wikipedia.org/wiki/Vector_graphics)

Sure, there are some disadvantages, but we will ignore them for now, because that is not exactly the topic of this post.

2. What kind of graph is a protonet?

A network is just a graph, but there are certain kinds of graphs. A protonet network structure can be very chaotic and random, so its most likely a general kind of graph. But when it comes to the part of the network where clients connect to their local protonet node, its a simple tree graph. This distinction is important, because the layout algorithms you choose directly depend on the type of graph you want to visualize.

3. What is a beautiful layout?

Suppose you have a group of nodes that are connected in a way that they form a kind of ring. The most structured way to display them would be to create a layout where the ring they form is clearly visible. So we have Simplicity (= make the structure visible) as the number one criterion for the beauty of a graph.

Simplicity comes from a number of more specific characteristics:

edges should not cross each other
edge lengths should all be approx. the same
distances between nodes should all be approx. the same

The topic of graph layout is a wide one and cannot be covered in an appropriate way in this blog post, so if you are interested in graph visualization, go ahead to http://en.wikipedia.org/wiki/Information_visualization and also http://en.wikipedia.org/wiki/Graph_drawing

What does this mean for protonet?

For protonet we essentially need two distinct graph drawing algorithms because we have two different types of (sub)graphs:

random graph = the connected protonet nodes
and tree subgraph(s) = the clients connected to their protonet node

4. Force based approach.

What automaticly springs into mind when it comes to general graphs, is a physics/force-based layout. In such a modell the nodes are charged particles of the same charge, which means they move away from each other, and the edges are springs that create an opposite force which brings the connected nodes closer together. Here is a piece of pseudocode that draws such graph using physical forces:

- place the nodes at random positions
- iterate for about 50-100 times:
- calculate the attractive and repulsive forces
- apply the forces to each node
- draw the graph

The forces (as described here: http://en.wikipedia.org/wiki/Force based_algorithms_%28graph_drawing%29) are calculated using the equation of Coulomb for the charged particles and Hooke’s Law for the spring forces.

After a number of iterations (50-100) the graph should be displayed in a visually simple and ordered way.

This is, of course, a rather simplified version of the algorithm. To give you an idea of what is going on in reality, here is the actual code from the protonet network layout code base:

Graph.prototype.layout = function() {

  // determine amount of nodes (not clients!)
  var normal_nodes = new Array();
  for (var n = 0; n < this.nodes.length; n++) {
    var node = this.nodes[n];
    if (node.info.type != 'client')
      normal_nodes.push(node);
  }

  // special case: one node
  if (normal_nodes.length == 1) {
    var node = normal_nodes[0];
    node.position.x = this.w / 2;
    node.position.y = this.h / 2;
    this.layout_clients();
    return true;
  }

  var delta_t = 1000.0 / 50.0; // starts 50 times within 1000 ms

  if (this.temperature > 0.0)
  {
    this.paper.clear();

    // calculate repulsive forces
    for (var n = 0; n < this.nodes.length; n++) {
      var node = this.nodes[n];
      node.disp = new Vertex(0, 0);
      node.adjusted = false;
      for (var m = 0; m < this.nodes.length; m++) {
        var otherNode = this.nodes[m];
        if (node.number != otherNode.number) {

          var delta = node.position.diff( otherNode.position );
          if (Math.floor(delta.len()) == 0) delta = new Vertex(1,1);
          var d = delta.len();

          node.disp = 
            node.disp.sum(
              delta.quot(d).prod( 
                this.force_repulse(d * node.mass)
              )
            );
        }
      }
    }

    // calculate attractive forces
    for (var e = 0; e < this.edges.length; e++) {
      var edge = this.edges[e];
      var u = edge.fromNode;
      var v = edge.toNode;

      var delta = v.position.diff(u.position);
      if (Math.floor(delta.len()) == 0) delta = new Vertex(1,1);
      var d = delta.len();

      v.disp =
        v.disp.diff(
          delta.quot(d).prod(
            this.force_attract(d)
          )
        );

      u.disp = 
        u.disp.sum(
          delta.quot(d).prod(
            this.force_attract(d)
          )
        );  
    }

    for (var n = 0; n < this.nodes.length; n++) {
      var node = this.nodes[n];
      if (node.info.type != 'client') {
        node.position = 
          node.position.sum(
            node.disp.quot(node.disp.len()).prod(
              this.min(node.disp)
            )
          );

        // don't let them escape the canvas
        if (node.position.x < 0)      node.position.x = 0;
        if (node.position.x > this.w) node.position.x = this.w;
        if (node.position.y < 0)      node.position.y = 0;
        if (node.position.y > this.h) node.position.y = this.h;
      }
    }

    this.layout_clients();
    this.cool();
  }

  return true; 
};

Among other things, there is a also a cooling function that slows down the motion in the graph and also ways of avoiding nodes beeing at the same position. If you have any questions about the code, feel free to ask here!

But what about the clients connected to the protonet node, that form tree subgraphs?

5. Circular approach.

Tree graphs can easily be layouted by placing them on a circle around the central protonet node and drawing the edges between them inside the circle. Thus no edges will overlap, since the clients are only connected to the node not to each other.

Simple, straight forward and faster as a force-based calculation.

If you want to experiment with layout techniques yourself, you can have a look into the complete code of the protonet graphkit package:

Graph.prototype.layout_clients = function() {
  // layout client nodes circular around each node
  for (var n = 0; n < this.nodes.length; n++) {
    var node = this.nodes[n];
    if (node.info.type != 'client') {
      // find client node connected to this one
      var clients = new Array();
      for (var e = 0; e < this.edges.length; e++) {
        var edge = this.edges[e];
        var u = edge.fromNode;
        var v = edge.toNode;
        if ((u.number == node.number && v.info.type == 'client') ||
            (v.number == node.number && u.info.type == 'client')) {

          if (u.number == node.number)
            clients.push(v);
          else
            clients.push(u);
        }
      }

      // position clients circular around node
      if (clients.length > 0) {
        var radius = (this.small ? 5.0 : 10.0) + (clients.length * 5.0);
        var angle  = 360.0 / clients.length;
        //console.log(angle);
        for (var c = 0; c < clients.length; c++) {
          var client = clients[c];
          client.info.angle = (c > Math.floor(clients.length / 2) ? 270 : 90) - angle * c;
          client.position.x = node.position.x + Math.sin(deg_to_rad(angle * c)) * radius;
          client.position.y = node.position.y + Math.cos(deg_to_rad(angle * c)) * radius;
          client.info.nodepos = node.position;
        }
      }
    }
  }  
};

6. Experiment with Graphkit.js

To draw a graph using the graphkit package, you have to include jQuery, raphael.js and graphkit.js (http://github.com/protonet/graphkit/blob/master/graphkit.js) into your webpage. Then you clone the Graph prototype and add nodes and edges to it.

Finally call the render() method once or install a JavaScript interval and watch the network adjust itself.

var NetworkGraph;
var ourInterval;

// make graph
NetworkGraph = new Graph("network", 50, false);

// create some nodes
var sn = new Node(1, {name: "super", type: "supernode"});

var n1 = new Node(2, {name: "n#1",   type: "node"});
var n2 = new Node(3, {name: "node#2",   type: "node"});
var n3 = new Node(4, {name: "node#3",   type: "node"});
var n4 = new Node(5, {name: "node#4",   type: "node"});
var n5 = new Node(6, {name: "node#5",   type: "node"});
var n6 = new Node(7, {name: "node#6",   type: "node"});

var c1 = new Node(8,  {name: "client#1", type: "client"});
var c2 = new Node(9,  {name: "client#2", type: "client"});
var c3 = new Node(10, {name: "client#3", type: "client"});
var c4 = new Node(11, {name: "client#4", type: "client"});
var c5 = new Node(12, {name: "client#5", type: "client"});

NetworkGraph.addNode(sn);
NetworkGraph.addNode(n1);
NetworkGraph.addNode(n2);
NetworkGraph.addNode(n3);
NetworkGraph.addNode(c1);
NetworkGraph.addNode(c2);
NetworkGraph.addNode(c3);
NetworkGraph.addNode(c4);
NetworkGraph.addNode(c5);

// create some edges
NetworkGraph.addEdge(new Edge(sn, n1));
NetworkGraph.addEdge(new Edge(sn, n2));
NetworkGraph.addEdge(new Edge(sn, n3));

NetworkGraph.addEdge(new Edge(n1, n2));
NetworkGraph.addEdge(new Edge(n2, n3));

NetworkGraph.addEdge(new Edge(n1, c1));
NetworkGraph.addEdge(new Edge(n1, c2));
NetworkGraph.addEdge(new Edge(n1, c3));
NetworkGraph.addEdge(new Edge(n1, c4));
NetworkGraph.addEdge(new Edge(n1, c5));

ourInterval = setInterval("NetworkGraph.render()", 100);

The parameters of the Graph constructor are:

The id of the HTML container to use for drawing.
The maximum number of iterations (If the graph is considered “beautiful” the algorithm may stop before that).
If a short or the normal version of the graph node should be drawn. In the short version clients are drawn without a label.

The algorithm is not perfect - You can download the source here and have fun with it ;) - http://github.com/protonet/graphkit

Protonet App for webOS: Creating a webos socket

flyingfishman — Sun, 29 Aug 2010 13:32:00 -0400

So we’re building this thing we call protonet we all use it and we have fun using it. But when my brother isn’t sitting at his laptop, he’s virtually unreachable. After building a rudimentary iPhone client, I figured that if I can chat in the train on my iPhone, then why couldn’t my brother, Ali, on his Palm Pre? So, I set out to make a client for his phone.

To understand why it’s necessary to do the things described in this blog post you need to understand how the palm SDK works. When Palm called the thing webOS they didn’t call it that way because thought it might sound cool, they called it that way because essentially every application that ran on the pre in the beginning is actually a web application. Subsequently as with most web applications initially you could only write your palm pre applications in HTML/Js/css. In webOS terms this is called the MOJO toolkit. The result is that while it makes it very simple to write applications for the Pre it’s not possible to open sockets and do other things.

The first step to overcome this was to allow creating SDL applications for games and similar applications. That still doesn’t solve our socket issue for normal applications though. So the second step is the so called Hybrid application. Think of it as a web application that has a daemon process loaded on start which is written in C or C++.

The thing about these daemons is that they actually run in the SDL event loop. The first question would be why didn’t you just use SDL_net? SDL_net doesn’t support asynchronous operation and it doesn’t exactly have the most stable history in the world. You would have to use net2, which wraps SDL_net into its own thread. I also did not want to use libevent, partly because it adds a big library as dependency and partly because it actually IS an event loop.

Here’s a quick overview of what how it works:

You create the web application
You create a c plugin
You tell the web application to load the c plugin as an object, that will allow you to access the registered functions in javascript using $(‘myPlugin’).whateverFunction
You communicate between plugin and webapp using callbacks you register on each side

So, let’s get started! I’m going to start with the Javascript/HTML side and then explain the C side and I’ll show you how to glue them together along the way. The source-code for this project is available on http://github.com/protonet/webos-socket

If you already have some webOS experience, you might probably want to skip section 1.

Section 1: The basics

When you launch your application you are pretty much in the app-assistant.js that’s where we’re going to tell it to load our socket scene. Scenes are the viewports in webOS terms.

this.stageController.pushScene("socket", new socket());

The HTML for this view is in “mojo/app/views/socket/socket-scene.html”. In there we create a Textfield for the server ip address, a button to connect and a place to output some data to:

We then need to instantiate the mojo elements in the views controller, which is the “app/controllers/socket-assistant.js” as defined in the sources.json file.

this.controller.setupWidget('ConnectBtn',
  this.attributes = {
  },
  this.model = {
    label: 'Connect',
    disabled: false
  }
);
this.controller.setupWidget("ipField",
  this.attributes = {
    hintText: $L("ip address"),
    multiline: false,
    enterSubmits: true,
    focus: true
  },
  this.model = {
    value: "192.168.1.136",
    disabled: false
});

That should be pretty self explanatory. Here’s a link to the textfield reference and the button reference.

We then tell the application to listen for taps on the connect button:

Mojo.Event.listen(this.controller.get("ConnectBtn"),Mojo.Event.tap, this.handleConnect);

Section 2: The hybrid glue

First of all you will need to add

"plug-ins": true

to your appinfo.json. If you do not do this, the plugin application/daemon will not start no matter what. And it won’t throw any exceptions either. It will just silently fail.

Once you’ve done that you tell your scene to load the plugin and you create a remote control that is usable from your javascript code.

Again pretty self explanatory. socket_plugin is the name of the executable you package with your application. socketPlugin will become your remote control. So if you use $(‘socketPlugin’) you can access methods that were declared within the plugin.

So how do you use this? You put the above code in the top of the socket-scene.html. We already have a callback for a tap on the connect button defined in previous section. Let’s fill it with life:

  handleConnect: function(event)
  {
    $('socketPlugin').openSocket($('ipField').mojo.getValue(), 2000);
  }

The above code will actually execute a function that is registered inside your C plugin and pass it the value of our ip address text field and the port number 2000.

We also create a callback function for the plugin to use whenever it has data available:

$('socketPlugin').didReceiveData = this.didReceiveData.bind(this);

And we bind it to the following function:

  didReceiveData: function(a)
  {
    $('status').innerHTML = String(a);
  },

Section 3: The actual plugin

The plugin will have it’s own appinfo in which you will specify how much memory consumption is allowed and what kind it is. In this case the file is called socket_plugin_appinfo.json

{
    "type": "hybrid",
    "requiredMemory": 5
}

The basic structure is going to look like this:

initialize_SDL();
initialize_PDL();

RegisterYourJSFunctions();

do {
    ProcessSDLEventLoop();
} while (Event.type != SDL_QUIT);

cleanupBeforeQuit();

Functions that should be callable from your mojo/JS code will always be declared in the following way:

PDL_bool openSocket(PDL_JSParameters *params)

Then you need to actually register these to make them available:

PDL_RegisterJSHandler("openSocket", openSocket);

Here’s what we do:

JS calls our openSocket function
We process the parameters, since this isn’t strictly typed. Keep in mind that the whole example is very basic and there’s virtually no exception handling. I’m basically considering a best case scenario.

PDL has it’s own helper functions to handle parameter parsing.

if (PDL_GetNumJSParams(params) < 2 )
{
    PDL_JSException(params, "You must provide the ip address and port");
    return PDL_TRUE;
}
const char *ip_address = PDL_GetJSParamString(params, 0);
int port               = PDL_GetJSParamInt(params, 1);

PDL_JSException will actually throw an exception that you will not see in the application itself but may very well see using the palm-log application.

Let’s take a look at how we call the javascript callback for receiving data works:

const char *params[1];
params[0] = theData;
PDL_Err mjErr = PDL_CallJS("didReceiveData", params, 1);
if ( mjErr != PDL_NOERROR )
{
    printf("error: %s\n", PDL_GetError());
}

We will just call the callback defined in the socket-assistant.js with one parameter which is a string. Again this is self explanatory if you’ve seen it once.

Section 4: Building a basic asynchronous socket

The problem to solve was the following:

How do you create a non blocking socket that works with the SDL event loop without too much effort?

My solution was using SIGIO. Basic explanation:

You create a socket
You register a signal handler for SIGIO
You make the socket asynchronous and let the signal handler do the rest

What happens is this:

You connect to the server and you don’t need to worry about the SDL_event loop
Once data is available for reading the signal handler kicks in. We proccess the data and may send it to our didReceiveData JS callback.

So what do you do when you want to handle multiple socket connections at once? Well you use sa_sigaction and set a proper context. Either that or you wrap your socket connections into threads and instead of registering your signal handler to the current pid with getpid, you register them to the threads gettid. I haven’t tried the latter though.

The result looks as follows:

if ((sock = socket(AF_INET, SOCK_STREAM, 0)) < 0){
    printf("socket() failed");
    return -1;
}

/* Set up the server address structure */
memset(&sockaddr, 0, sizeof(sockaddr));       /* Zero out structure */
sockaddr.sin_family = AF_INET;                /* Internet family */
sockaddr.sin_addr.s_addr = inet_addr(ip_address); /* Any incoming interface */
sockaddr.sin_port = htons(port);              /* Port */

/* Bind to the local address */
if (connect(sock, (struct sockaddr *) &sockaddr, sizeof(sockaddr)) < 0){
    printf("connect() failed");
    return -1;
}

/* Set signal handler for SIGIO */
handler.sa_sigaction = SIGIOHandler;
/* Create mask that mask all signals */
if (sigfillset(&handler.sa_mask) < 0){
    printf("sigfillset() failed");
    return -1;
}
/* No flags */
handler.sa_flags = 0;

if (sigaction(SIGIO|SIGHUP, &handler, 0) < 0){
    printf("sigaction() failed for SIGIO");
    return -1;
}

/* We must own the socket to receive the SIGIO message */
if (fcntl(sock, F_SETOWN, getpid()) < 0){
    printf("Unable to set process owner to us");
    return -1;
}

/* Arrange for nonblocking I/O and SIGIO delivery */
if (fcntl(sock, F_SETFL, O_NONBLOCK | FASYNC) < 0){
    printf("Unable to put client sock into non-blocking/async mode");
    return -1;
}

Section 5: Debugging/Running etc.

You can build and run the example using:

mac/package-it.sh
palm-install com.protonet.sockettest_1.0.0_all.ipk
palm-launch com.protonet.sockettest

To see the Javascript exceptions you can then do:

palm-log -f com.protonet.sockettest

However since I couldn’t figure out how to see the printf log messages. I wrote my log messages to the syslog You might just want to ssh to the palm pre once it’s hooked up your USB and then tail the syslog.

ssh -l 10022 root@localhost

HTH Reza Jelveh

FAQ

Q. Why isn’t the plugin launching?

A. Make sure you have

echo "filemode.755=socket_plugin" > $STAGING_DIR/package.properties

somewhere in your packaging script.

also make sure you have

"plug-ins": true

in your appinfo.json

Q. How would I package my socket in a thread?

A. You need to replace getpid with gettid

Q. The application doesn’t work in the emulator

A. You cannot test hybrid applications in the emulator, yet. The emulator is i386 but the libraries provided by the Palm toolchain are arm. That might change in the future but for now your stuck with getting a real webOS device.

Hey, how far have you gone. Where can i try the router - or buy it or download the soft?

Regards
Georg - Spameater@muckefuck.org

dudemeister — Thu, 26 Aug 2010 08:24:00 -0400

Hi Georg! We’re currently working on our release preparations and running tests with the hardware we’ll be shipping. We had a batch of ten units produced and those are currently being deployed on customer sites. As soon as we get through that we’ll be putting a version of the interface online (within the next weeks) plus pics, videos and more details on the hardware. You’ll then be able to buy one on our page. :)

The Art Of Turning URLs Into A User Readable Preview

christopher-blum — Tue, 24 Aug 2010 18:58:00 -0400

If you’re of the impatient kind click here for the demo - otherwise enjoy the great finale ;).

In this blog post I’d like to introduce you to a technology that we here at protonet call “Text Extensions”.
Text extensions are small embeddable representations of urls mentioned in real time chat messages. Every time a user wants to share an url with the community we generate a preview including the most important information (title, short description, thumbnail, …) representing the website.

This approach gives our users a series of benefits:

The sender doesn’t need to explain what’s behind the url
The Recipient gets more much more information than a link and can then decide whether it makes sense for him to leave protonet - for the moment - and give another (external) page his attention. Sometimes the preview is so good that the user doesn’t need to leave our chat in order to get that content. This is specially the case where we’re able to reflect the main information and interaction in the text extension: Twitter status updates, Slideshare presentations, YouTube videos, Flickr images, Google Maps, …
Text Extensions generate more valuable data for our search index since we get all information associated with an url. Users don’t necessarily need to ask google for interesting pages related to a specific topic. At protonet they get search results that are locally and socially relevant. The users themselves are web crawlers delivering highly relevant external content.
Text Extensions replace the need to use a social bookmarking tool (delicious, google bookmarks, …). Protonet users just have to share their urls with the community and are still able to find them in the future by searching for related keywords.

Ok, so how do we fetch external data?

First let’s have a look at the tool that helps us scraping external web content:

YQL

Amongst other APIs we take advantage of a great service provided by Yahoo. It’s called Yahoo Query Language (YQL). YQL allows us to query the web by using simple SQL statements. In the “where” clause of those statements we can specify the url to fetch content for and also optionally an xpath selector. Using xpath selectors we ensure that YQL only gives back HTML segments that are of interest to us (such as meta tags).
From my personal point of view xpath is not the best way for filtering/selecting html, but that’s just the opinion of a frontend developer who is used to CSS selectors. :-)

// Example query to fetch meta tags and title
SELECT * FROM html WHERE url = ‘http://www.amazon.de’ AND xpath=’descendant-or-self::title | descendant-or-self::meta’

Getting structured machine readable data

In order to get the most relevant information for an url we rely on a bunch of (more or less) web standards that have evolved over the last years.

#1 Open Graph Protocol

By specifying certain meta tags, your website becomes a so called “graph object”. For instance, this is used on Facebook to enable any web page to have the same functionality as a Facebook Page.

Example taken from the source code of this article on mashable.com

  og:title” content=”Explore the Titanic Wreck Site via Social Media [EXCLUSIVE]” />
  og:description” content=”A team of archaeologists, scientists and oceanographers will soon be revisiting the wreck of the Titanic for further scientific discovery and documentation.” />
  og:image” content=”http://cdn.mashable.com/wp-content/uploads/2010/08/titanic-1.jpg” />

The resulting text extension:

For more info see http://opengraphprotocol.org/

#2 Facebook/Digg/Yahoo Share Standard

This standard is also based on meta tags and was invented by facebook for their way of converting urls in status updates into previews and later on was adapted by several other major web services such as Digg and Yahoo Search.

Example taken from the source code of this epic flickr photo:

  title” content=”Henley Beach Reflections”>
  description” content=”Enjoy - Canon 5D Mark2. - ISO 100, f16, 17mm. - Canon 17-40 f/4 L. - Tripod. View On Black to see more :) Standard 3 exposure (+2,0,-2 EV) Processing Photomatix - Tonemapped generated HDR using detail enhancer option Photoshop - Adjustment of hue/saturation - Adjustment of curves to increase the overall contrast (Linear) - Adjustment of levels - USM on Background Layer - Reduced noise with Noiseware Pro - Sig/Borders Added Thanks for all the comments, faves, views, notes and invites!”>
  image_src” href=”http://farm3.static.flickr.com/2555/3888623982_fdc013b4d9_m.jpg”>

This snippet gives us all information we need for a basic text extension. Title and description are taken from the elements and the image preview from the element.

Besides offering an image preview, webmasters can also specify other media types such as video or audio.

Let’s have a look at the source code of this lovely music video on vimeo.com

  title” content=”Colbie Caillat & Jason Reeves ‘Droplets’” />
  description” content=”Shot on a Bluff in Malibu where the Song was written” />
  video_type” content=”application/x-shockwave-flash” />
  image_src” href=”http://ats.vimeo.com/210/195/21019554_200.jpg” type=”image/jpeg” />
  video_src” href=”http://vimeo.com/moogaloop.swf?clip_id=1828755” type=”application/x-shockwave-flash” />

Hackers! This is by far the best we could get by an external site. The source code gives us the title, a short description, a preview image and the most important thing, the url to the flash video in a simple machine readable format.
Users can therefore embed videos in their messages allowing others to watch them directly within the timeline.

You would be amazed if you knew how many popular video services out there support this. Just to name a few: Break.com, DailyMotion.com, CollegeHumor.com, Discovery.com, …

For more info regarding this standard see http://about.digg.com/thumbnails or http://forum.developers.facebook.com/viewtopic.php?id=32464

#3 Microformats (hCard)

Microformats are a set of simple machine readable open data formats.”hCard” (also known as vCard) is one of those data formats and is adopted by many websites for representing people, companies, organizations, and places. Webmasters highlight particular information by using semantic (X)HTML properties and values.

Example taken from a social profile on XING.com

vcard“>
  work

   given-name“>Christopher
   family-name“>Blum

  title“>Frontend Engineer
  org“>XING AG
  photo” width=”140” height=”185” alt=”Christopher Blum”>

#4 OEmbed

OEmbed is probably the best tool for turning an url into an embedded representation. It doesn’t require us to parse the external page by ourselves by using complex xpath selectors. Instead we just have to take the url and ask the provider to give us structured json data back. Even though it’s pretty easy to use we haven’t implemented it (yet) in our text extensions code: at the moment the amount of websites supporting this is just too small (oembed.com lists only 10 providers). Also we figured out that most of those who support this have also adopted one of the other mentioned standards.

See http://oembed.com/ for detailed documentation.

#5 Special cases

Many websites don’t support one of the listed standards above. Some of them simply can’t because their content is too complex or specific to fit into a couple of structured html elements.

To name two cases:

GitHub

Protonet has currently a test instance running in an environment full of web developers whose daily need is to share code snippets and repository commits. To fullfill that need we decided to implement a GitHub text extensions that embeds code snippets and commit diffs into messages. Of course GitHub doesn’t support one of the standards explained above. So we had to came up with a dedicated solution. Luckily GitHub provides a JSON API which offers all related data to a specific commit (including the diff itself, message, author and many more). Thanks to the api we were able to easily satisfy our dearest Nerds. =)

Google Maps/Street View

Google maps is probably one of the most used and shared services. As it is the same for GitHub we couldn’t generate a proper text extension for google maps based on the source code.
So we had a closer look at typical google maps urls and how it is possible to embed a google map in your own web page. We were quite surprised when we found out that by adding “&output=embed” to the url generates an embeddable map preview suitable for iframes.Every time a user enters a maps url, we attach an iframe with that url.

http://maps.google.com/maps?q=new+york

becomes

http://maps.google.com/maps?q=new+york&output=embed

Btw: The way the same applies for google street view. Just that the parameter to add is “&output=svembed”.

#6 Fallback: Page Title, Meta Tags & Screenshot

Luckily almost every website has a element and a <meta name=”description”> element which allows us to still render basic information related to an url.<br/>In order to generate a thumbnail preview we capture a screenshot of the page. This is easily done by using one of the free/non-free services out there. The guys from sitepoint collected a list of screenshot providers: <a target="_blank" href="http://www.sitepoint.com/blogs/2008/07/10/9-ways-to-put-site-screenshots-in-your-web-app/"><a href="http://www.sitepoint.com/blogs/2008/07/10/9-ways-to-put-site-screenshots-in-your-web-app/" target="_blank">http://www.sitepoint.com/blogs/2008/07/10/9-ways-to-put-site-screenshots-in-your-web-app/</a><br/></a>Nevertheless we at protonet don’t want to rely on a third party provider, since it often takes minutes or even hours until the provider has generated a screenshot for an url. We therefore decided to setup our own screenhot service by using a free open source command line utility named “<a target="_blank" href="http://cutycapt.sourceforge.net/">CutyCapt</a>”.</p> <p></p> <p><br/><br/></p> <h2>Demo!</h2> <p>Since we can’t give you access to our entire chat right now, we encapsulated the text extension code and <a target="_blank" href="http://protonet.tifftiff.de/text_extensions/">set up a demo</a> . Happy playing!</p> </article> <article> <h1>What is the protonet?</h1> <p>dudemeister — Mon, 23 Aug 2010 16:20:56 -0400</p> <p style="text-align:left;">I really hope you’ve read the title as it was intended to be read:</p> <p>Obviously this conversation goes further than that, but we’ll leave those two alone (for now) and I’ll tell you a little more about what the protonet is. In our last blogpost I talked about the phase change moment - from idea to action - this time we’ll fast forward and see what the protonet is supposed to be - and what it is now. Let’s recap the fundamental ideas of protonet:</p> <ul><li>we want citizens to have an infrastructure they own themselves</li> <li>we want citizens to be the ones responsible for it, to maintain and to cultivate it</li> <li>we believe in responsibility, and we believe that only with taking responsibility freedom is possible</li> <li>we believe that building such an infrastructure needs to be as simple as pushing a button</li> <li><strong>and most important of all:</strong> we believe that, for it to work, it needs to be awesomely fun to do it</li> </ul><p>Our last point bears repeating: if our vision of a people owned infrastructure has any chance of becoming a reality (and it will), it needs to be fun. It needs to be easy, and it needs to be instantly gratifying, even - especially - if this new network consists of just your node. Now that we got the fundamentals, let’s do a deep dive:</p> <em><h3>protonet, a vision of a different (web) future</h3></em> <p>To us, the protonet is not just an idea, it is our absolute belief that a different future is possible - for the web, and communications in general - and that this is a future worth creating for. It is a future in which we own our data, and not just the data, but the infrastructure too. A future in which we’re not bound by an endless amount of recurring fees (whether paid in money units or by matters of handing over our privacy - completely or piece by piece). A future full of the awesome stuff we now see popping up all over the net, only slightly different. Instead of having to rent a dropbox, you’ll own your copy. Instead of renting your googlemail account (by allowing google to read your mails and provide you with custom ads), you’ll own your own email account and you’ll be able to read your mails with your very own copy of a gorgeous webmail client. Instead of having to use facebook to connect to your friends from near or far you’ll be the owner of your social graph and decide - and own - the client that allows you to browse and interact with it. We’re not here to invent all of those things, but we’ll do whatever is needed so you can ‘feel’ it, and be instantly gratified.</p> <em><h3>protonet, the holistic approach</h3></em> <p>We see protonet as a holistic approach to communication and exchange. We recognize the right to communicate as a fundamental human right and as such we believe that it should not be left to politics and governments to ensure. We believe that each and every single one of us holds the potential to be the guardian of such a right, to be the creator and owner of a piece of infrastructure, and that in joining these pieces we can create a more powerful, more diverse, more secure and ultimately free internet. An infrastructure truly owned and operated by we, the people.</p> <em><h3>protonet, relearning ownership</h3></em> <p>We have no illusions, such an undertaking is profoundly complex and pinned with challenges, and seen in it’s totality, practically impossible. But that’s what makes it so fun. And isn’t our worlds history filled with impossibilities that have been, by passion and perseverance, pulled, dragged into reality? What can be more challenging (and rewarding) than for us - who have been taught to be the perfect consumers - to relearn ownership and responsibility, to understand creativity as our heritage and join hands in creating something maybe no population has ever created before in this magnitude: our own communications network?</p> <br/><br/><br/><p><em>stay tuned (subscribe to this blog or our <a href="http://twitter.com/protonet" target="_blank">twitter account</a>) and see us show off our hardware and software in our coming blogposts</em><br/><br/><em>ps. for those already using a protonet node, you’re right, we’ve reversed the messaging order for blogpost readability ;)</em></p> </article> <article> <h1>How about we build a new one, eh?</h1> <p>dudemeister — Tue, 03 Aug 2010 11:00:52 -0400</p> <p>Approximately two years ago (actually, it was around 10pm on a tuesday night in august 2008 ;)) I had one of those discussions: sitting at a big round table in our flat-share we talked about religion, science, internet and of course: freedom. I can’t exactly remember the content of those - quite heated - discussions, but I remember that at some point, I started talking about how the infrastructure should belong to the people and that:</p> <blockquote>as long as we’re dependent on big corporations, governments and those friendly NGOs to provide us with the ability to communicate with each other, we’re at their mercy.</blockquote> <p>With communication and information-exchange becoming such an important part of our daily lives I felt we had to do something. For a couple of years now a set of ideas were brewing in my head, and that day I finally couldn’t take it anymore. I had repeated these lines so often, in so many conversations, at so many dinner parties that I felt like a broken record: all talk and no action. The time had come to choose: I would either put up or shut up. I stopped talking and started thinking while my roomies continued their discussions, I remember that I suddenly proclaimed: <em>“that’s it! I can’t take it anymore! I’m gonna build this f*cking thing and get it over with - f*ck!”</em> and disappeared into my room.</p><br/><p>A couple of hours later I came back with this: </p><div style="width:477px" id="__ss_4894479"><param name="movie" value="http://static.slidesharecdn.com/swf/doc_player.swf?doc=protonetprimer-100803093600-phpapp01&stripped_title=protonet-primer"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"></object></div> <div style="text-align:center;"><a href="http://www.slideshare.net/jelveh/protonet-primer" title="protonet primer" target="_blank">the “protonet project primer”</a></div><br/><br/><p>The importance wasn’t so much the act of writing down an eloquent primer on the idea (maybe you will notice the non-eloquence) but that this was the actual first step in turning this idea into a reality. And as they (Goethe/Murray) say: </p><br/><blockquote>Whatever you can do, or dream you can do, begin it.<br/> Boldness has genius, power, and magic in it! </blockquote><br/><p>That night, for protonet and all of us working our asses off making this dream real, the magic had just started.</p> </article> </main></body></html>

protonet

Meet the Team

You're kick-ass business dude? Join us!

What we believe in:

What we do:

What you’ll be doing:

Production and supply chain management

Marketing and sales

Controlling and funding

How we work:

blogpost on his internship at protonet by our own @danopia - do check it out!

Hostapd: Beacon set failed

How to save plenty of Cash on HDDs these Days

Launch date is coming closer

Video

Introducing Hum + Melody - Simple Music Streaming and (Web-)Client

Welcome Melody & Hum

Melody

Hum

Code and Tech

Finally

How To Setup A Cheap Exception Notifier For JavaScript

Option #1 - Let Google Analytics track your JavaScript errors

Option #2 - Push it to your Apache error.log

Option #3 - Use Airbrake

Video

Filtercake: Protonet to go, or: Now what?! Pt. I

The jQuery 'inview' Plugin

Browser Support

Usage

#1 Simple example

#2 Only load images when they appear in the viewport for performance reasons (reduce amount of http requests, yslow, yada yada …)

Links

Visualizing the protonet using Raphaël.js

1. Interactive graphics on the Net.

2. What kind of graph is a protonet?

3. What is a beautiful layout?

4. Force based approach.

5. Circular approach.

6. Experiment with Graphkit.js

Protonet App for webOS: Creating a webos socket

Section 1: The basics

Section 2: The hybrid glue

Section 3: The actual plugin

Section 4: Building a basic asynchronous socket

Section 5: Debugging/Running etc.

FAQ

Hey, how far have you gone. Where can i try the router - or buy it or download the soft? Regards Georg - Spameater@muckefuck.org

The Art Of Turning URLs Into A User Readable Preview

Ok, so how do we fetch external data?

Getting structured machine readable data

#1 Open Graph Protocol

#2 Facebook/Digg/Yahoo Share Standard

#3 Microformats (hCard)

#4 OEmbed

#5 Special cases

#6 Fallback: Page Title, Meta Tags & Screenshot

Hey, how far have you gone. Where can i try the router - or buy it or download the soft?

Regards
Georg - Spameater@muckefuck.org