My name is Peter Bengtsson and I'm a web developer. This is by personal blog.
WebSockets are promising because the connection is kept open so that sending new data has lower overheads than a regular XHR request. This app is a demo/playground to really test this in a production-grade setting. You can run your own test from your location and it will effectively give you an insight into the latency vs. overheads balance.
This is the full blog post about the experiment. The code github.com/peterbe/sockshootout2019 is a mix of React, Tornado, and Django.
minimalcss-server and then displays the results with some graphs.
Everybody has to make a todo list app. This is my take. I wanted to build something exactly like I want/need it.
The data is stored in
IndexedDB using kinto.js and for remote storage I run a Kinto server on my personal server. The authentication is done with auth0js and the front end is React and MobX.
A fun little Node script that uses puppeteer to open https://fast.com in a headless browser, extracts your current broadband speed and then draws an ASCII graph of the measurements plus a rolling average.
This is a real project, solving a real problem, but the code is a hack built in a day (plus some paperwork to clean it up and put it on npmjs.com)
This started as me trying to figure out how much contentmy preferred podcasts require me to listen to to keep up and not fall behind. Later I structured it with a real database and a web app to display it. Then in early 2017 I re-wrote the front-end entirely in React and added Elasticsearch on the back-end for better search.
The front-end code is here and the back-end code is here. Blogged about how it was built too.
A mobile web game app where you play battleships against friends. With the silly name, iconography and sounds. The first prototype of this is simply a website but styled specifically for mobile use using Bulma.
You can either play against the computer, against a friend asynchronously or against a friend in real-time.
The front-end is written in ReactJS and the real-time traffic is handled partly in Django with Fanout.io to handle the WebSockets.
Next step is to try to submit this to the Apple App Store and see if they appreciate the name of the app.
A GitHub Webhook receiver app that sends an email to certain people when a git commit comes in that contains the trigger word
headsup:. More extended blog post here and code on GitHub.
The back end is written in Django, the front-end written in React and it uses GitHub as an OAuth provider.
You enter the GitHub URL to a project and for each deployment target (e.g. "dev", "stage", "production") you enter a URL that points to a file that contains the git sha that is deployed there. Then you get an overview of what git commits been and not been deployed across those deployments. For example. Written in Flask.
It started when I was optimizing a website whose HTML files were massive. Clearly the HTML contained too many DOM nodes. But where are these big clusters of nodes?! HTML Tree takes a URL, converts it to a tree in JSON which when combined with a D3 collapsible tree becomes easier to navigate. Code on GitHub.
Using your network panel in your browser Web Console you can track how incredibly many requests many sites depend on. But, to find out how many different domains that spans you have to manually count each unique domain. Or use this tool.
What this proves is that DNS is still incredibly important for web performance. Blogged about it here and the relevant Node code is here.
This is a mashup using the GitHub API to make a dashboard over all open Pull Requests on a GitHub project. It's a Flask backend for doing proxy caching of requests and an AngularJS front end. I blogged about it in more detail and the code is available on GitHub.
This app combined Leaflet with Filepicker.io with Amazon S3 to let you upload massive pictures and draw annotations on them to be able to zoom in, pan and share specific regions without having to download the whole image. And it works great on mobile too!
It's for spotting out-of-state license plates in the US and tick them off on your smartphone.
This is also my first ever project that actually uses Facebook's API to facilitate wall posts from the app.
The source code is here and it's a bit of a mess because it's after all just an ongoing experiment.
It started as a Bookmarklet so that when you're visiting twitter.com it appends, for each user you follow, whether they also follow you. Later, the most useful feature was the /everybody page where everyone you follow is split half between those who follow you and those that are too cool for you.
blogged about it here and source code is here.
This is a supporting site for the Tornado Web Server project. It uses the GitHub API for authentication and for pulling down gists automatically.
The hosting of this project is actually done by a fellow Tornado contributor called Felinx Lee.
Blogged about it here and source code is here.
My first real-time web game. The game is that you get paired up with another random player and you have to answer quiz questions as fast and accurate as possible. My first web app that let's Facebook, Twitter, Google, Persona all take care of the authentication.
I first blogged about it here when it was launched and here are the slides which I later presented at PyCon UK 2011.
Crosstips first started as an experiment to do localization in Django. This was also my first ever non-English project.
Not long after, I prepared the English (American and British) version and a friend helped me translate the French version too.
Source code available here and I've blogged about various aspects of it here.
Using the recently published API from Transport from London I put together a Google Maps mashup that plots all the central London traffic cameras so you can easily see if your particular road is congested. This was my first project using client-side Geolocation.
Blogged about it here and the source code is here.
This was my first pure mobile web site. It's for my Fujian White Crane Kung Fu Club that I trained with when I lived in London. This site uses a remote database connection and is heavily cached. It's built taylor made for mobile as it goes straight to the basic details you need.
I originally built it because I kept forgetting when various classes started and looking it up on a slow 3G connection was a pain.
The code is here and I blogged about when this was my first site to get 100 points on YSlow!.
Note: This list does not include any of the fun projects I'm working on at work. These are all side-projects.
Also, many of these projects I'm not actively working on but they're all projects that are alive and hosted somewhere.