tag:beshr.com,2013:/posts Beshr Kayali 2016-06-28T16:14:28Z Beshr Kayali tag:beshr.com,2013:Post/910886 2013-04-05T10:00:00Z 2016-06-28T16:14:28Z Anunnaki: A bookmarking service idea

I've always been interested in working on a project that tries to solve a possible problem. To me, bookmarking is one of the things that has always seemed to be lacking. It's like it got stuck in time and all the big guys are scared of touching it.

For the past couple of months, I've been working on a solution that tries to solve some of the problems that I think exist with currently available bookmarking services: 

  • Asking the user to enter details that -to me- aren't always necessary: Titles, descriptions, and tags are things that a system can (and should) figure out on its own without hassling the user with having to enter them (or even approve them before saving) every time a bookmark is saved.

  • The fact that these services require taking a specific action for bookmarking is particularly frustrating as sometimes users might forget to bookmark certain web pages. Another thing is that users might not know when they need to bookmark something when they first see it.

  • To search bookmarks users have to go to the website of the service they're using and then search, which is a bit excessive I think. I find myself searching Google when I'm trying to find something I have bookmarked before, because it's faster and much easier to access. Changing the default search engine hampers the user's work flow.

These are just some of the things that bothered me with bookmarking over the years, and that led me to start a new project (calling it Anunnaki for now). I'm glad to announce the alpha version in this post.

Below you can find all the information that I have about Anunnaki so far. I'm also looking for testers who are willing to try it for a while. I would love to get your feedback on how it works and if it's useful for you as it's useful for me (and 40 other alpha testers using it now).

Key Features 

  • Passive Bookmarking: Automatic bookmarking based on configurable variables: time-period and/or scroll-position.
  • Search Engine Integration: Search results from bookmarks embedded inside Google's search results page (and later on, Bing).
  • Gmail-like dashboard with keyboard shortcuts, wide-screenshots, automatically generated tags, and filter options allowing users to drill down and browse their bookmarks.

You can find a more detailed list of features here: http://anunnaki.me/features/.

Visit Anunnaki: http://anunnaki.me

Sing up here or just email me at me[at]beshr[dot]com.



Search Engine Integration

Bookmarks Dashboard

Beshr Kayali
tag:beshr.com,2013:Post/910882 2012-12-12T11:00:00Z 2015-09-30T09:24:25Z Getting Django URL Patterns to Play Nicely with Angular's $routePrvider

I'm currently in the process of writing a Django project that relies heavily on AngularJS. I haven't found many tutorials on tips on how to take on such a task, but I haven't had any problems so far, at least until I wanted my URL Patterns in Django to work nicely with Angular's Routes.

The main problem with this task specifically is that both Django and Angular provide their own way of working with URLs. You'll need to satisfy Django's URL/View patterns if you're planning on having any server side logic controlled by your views, even if it's only to provide some data from your db. But you might also want to enjoy the greatness of Angular's routes, and partial HTMLs that are loaded instantly, something like Asynchronous HTML and HTTP but with real permanent links and working back button.

Note: You might want to take a look at django-pjax to get similar features only with jQuery.

So, here's the way I did it.

This is basically the code code I'm using for Angular's $routeProvider.

app.config(['$routeProvider',  function($routeProvider) {
    .when('/', {
      templateUrl: 'views/main.html',
      controller: 'MainCtrl'
    .when('/about', {
      templateUrl: 'views/about.html',
    .when('/help', {
      templateUrl: 'views/help.html',
    .when('/post/:id', {
      templateUrl: 'views/postRouter.html',
      controller: 'PostCtrl'
      redirectTo: '/'

Before I go through each one of these routes individually, take a look at the code I'm using in django's URLs.py for the urlpatterns.

urlpatterns = patterns('',
    url(r'^$', 'myproject.views.home', name='home'),
    url(r'^views/main.html/$', 'myproject.views.main_view'),
    url(r'^views/post.html', 'myproject.views.post_view'),
    url(r'^views/(?P[-\w]+.html)/$', 'myproject.views.angular_views'),
    url(r'^(?P.*)/$', 'myproject.views.angular_redirector'),

As you can notice, I'm using quite a few tricks to make this happen.

  • The 2nd and 3rd URL Patterns are also templates that Angular is using to satisfy the 1st and the 4th routes, but each one has got it's own view function because each one needs some data from database and some backend processing. The idea of the first one (views/main.html) for example is that it's loading latest posts from the db, figuring out some info about the user logged in, comments, etc..
  • But things are a bit different for the 3rd URL Pattern because this one is supposed to load data dynamically from the DB according to the post the user is loading. To share variables between Angular's routes and Django's views I bundled the values I need with the request URL of the * post * route as GET variables, this way I could load them in the view and pull the request data accordingly. The trick to do this is to route the url of "/post/:id" to a temporary html (postRouter) which has a very simple line of code:

The value of templateUrl in this template is going to be assigned in the controller PostCtrl with something like this:

app.controller('PostCtrl', ['$scope', '$routeParams', function($scope, $routeParams) {
    $scope.templateUrl = 'views/post.html?id='+$routeParams.id;

What this is essentially doing is that it's loading "views/post.html?id=postid" and passing it through Django behind the scenes, thus allowing the view function postview to do what ever it wants with the content and pass it to the actual post.html template rendering all of its django template language and loading the content according, then pass it again to Angular to view it in the assigned ng-view block.

I've tested this and worked pretty much exactly the way I wanted it to. If you've spotted anything wrong, or if you're doing it differently, please do share in the comments!

  • If you're curious about the 5th urlpattern and the angularredirector view are doing, it's just a very basic way to route coming requests to go through Angular first by adding the #/ before the url path._
Beshr Kayali
tag:beshr.com,2013:Post/910879 2012-09-29T11:27:42Z 2015-09-29T11:28:42Z B, for Hyde

There's nothing much to say here really. I extracted the Hyde theme I created for my site (was using it before switching to Ghost) and published it on github.

My intention was to design a clean, readable and responsive theme to replace my tumblr. I really liked Hyde because of its simplicity and cleanliness.


Grab the source from Github (Licensed under a Creative Commons Attribution 3.0 Unported License.)

Beshr Kayali
tag:beshr.com,2013:Post/910877 2012-09-29T11:26:43Z 2015-09-29T11:27:02Z Save the Pixels

I've always been a big fan of indie games and the indie game making culture, this increased tremendously after watching Inde Game the Movie. Simple, yet challenging gameplay was the goal, so I came up with the concept of Save the Pixels. You can read a review about it on the Indie Games Weblog or watch the game play demo on YouTube.


You can download the game from http://beshr.com/stp.


Grab the source from Github (MIT Licensed)

Beshr Kayali
tag:beshr.com,2013:Post/910874 2012-09-29T11:24:35Z 2015-09-29T11:24:54Z SCAmp, SoundCloud Playlist Manager

This is my first one-night dabble with AngularJS. SCAmp is a full client-side based SoundCloud Playlist Manager (As you may have figured, the name is inspired from SoundCloud + WinAmp).



Grab the source from Github

Beshr Kayali
tag:beshr.com,2013:Post/910873 2011-09-29T11:22:44Z 2015-09-29T11:22:48Z Presentation Timetable

PresentationTimetable.js is a jQuery plugin that syncs SpeakerDeck presentations with YouTube videos using a time/slide table.

Usage and Demo

More information on how to use PTT available on Github Repo


PresentationTimetable is released under the MIT License.

Beshr Kayali
tag:beshr.com,2013:Post/910845 2011-09-29T10:16:41Z 2015-09-29T11:19:30Z Announcing Sawt, a tiny app for discovering the best of Arabic Indie Music

Sawt is a tiny discovery tool for Arabic indie music. You can visit Sawt here: [http://sawt.io](http://sawt.io)

  • Works only on Google Chrome and Safari
  • No way to keep track of what you listened to (history)
  • No way to specify what genre of music to listen to

I didn't really put much work into this (it's weekend hack) so it’s not completely ready yet.

One of the feature I wanted to have in this release is iOS support. Sawt is fully compatible with iOS Safari (iPhone, iPod Touch and iPad), so you can listen to and discover Arabic indie music where ever you are.

More features are coming in the next release: Personalized stations, listening history, and more...

Follow updates on [Twitter](http://twitter.com/sawt_music).

Beshr Kayali