Category Archives: Computers

How to deploy a static page to Heroku, the easy way!

Posted by under Programming, Web Development

I wanted to upload a simple website based on HTML, CSS and JS files, with a few images, and a favicon. So I registered at Heroku, bought a domain name, followed the Heroku instructions on how to set up the “Toolbelt” and GIT.

So I thought I was all set up: I created a folder with an index.html page, with the text “Coming Soon…”. I set up the repository, and tried to commit to Heroku, only to receive a message similar to “This is not a code repository” or something similar. Heroku is primarily aimed at apps running on frameworks, like Ruby on Rails, Django (Python), node.js, or… ahem… PHP.

So it seemed incredibly dumb that it can handle all these frameworks, but it doesn’t let me upload a static site! So I searched about, and found out how to do this by setting a demo (barebones) ruby app, as well as a Sinatra variation. However, this didn’t convince me. First of all I didn’t want to place my code in a “public” folder. No. I was probably being a bit picky, but when I expect things to work a certain way, I get annoyed when barriers are put up in my way.

I finally figured out that Heroku allows you to publish PHP sites as well, with NO configuration needed! That’s right, just create your .php files, and it will figure out that the Heroku app should run PHP for this site, and it will auto-configure the app to run on the latest version of PHP/Apache.

So here is how you do it:

Rename your index.html to home.html or something similar.

Create an index.php file with the following code:

<?php include_once("home.html"); ?>

That’s it!

Now go to your app folder in CMD (or Bash), and commit your code to Heroku using the following:

git add .
git commit -m 'Change this to a meaningful description'
git push heroku master

 And finally, you should get the following:

-----> Heroku receiving push
-----> PHP app detected
-----> Bundling Apache version 2.2.22
-----> Bundling PHP version 5.3.10
-----> Discovering process types
Default types for PHP -> web
-----> Compiled slug size: 9.5MB
-----> Launching... done, v4

Congratulations! You have published a static site to Heroku with one line of PHP code :)

From a screenshot to a CSS ‘image’

Posted by under Programming, Technology

I must say I was pretty impressed when I saw the Mona Lisa rendered using pure CSS. While talking about it with a friend, I told him I thought it had been done using an automated process, where a program would read an image as an array of pixels, and would output an HTML file containing a CSS section with a bunch of box-shadows that “represent” the image.

Why “represent”? Well, the amount of CSS required to represent each pixel in the image would be massive. Therefore, the better approach is to take a pixel from each 5×5 pixel block, which will represent that block, and use a CSS box shadow which will converge (fade) into nearby pixels. Therefore, giving an approximate representation of that the full image looked like.

So I set about doing a Python program that would do this. Shortly after finishing the Python version, my friend pointed me towards this file which does a similar thing using PHP. Oh well, at least I had fun coding it.

So, my program basically allows you to take a screenshot of your desktop and convert it into a CSS version of the image, or you can take a png/jpg file and do the same thing.

The output (example below) is pretty fuzzy, but I’m thinking I can probably improve it a bit by tuning the spaces/pixels, or by getting a better “sample” of the overall colour that predominates in a 5×5 pixel section of the image, instead of just using the first pixel in the section.

Get the code from Github, and if you have any suggestions, feel free to leave a comment below (or on Github).

Screenshot

My thoughts on eBooks VS real books

Posted by under iPad, Literature

(c) PhotoDune, 2011Let’s start by stating a fact: Some people love reading physical books, some people love eBooks, most people hate reading on a computer, quite a few love reading on a tablet.

I remember ten years ago reading a 600 page book on the computer, and it was a pain. But with the current revolution of iPads, Kindles, and Android tablets, more and more people are flocking towards digital book stores instead of real ones.

Some of my best friends are quite disturbed by this tendency. They argue that the smell of opening a new book, the feeling of turning a page, the texture of each sheet of paper, and the ease of grabbing (and tossing) a book, leaves a much nicer feeling than holding a device that you feel more “attached to” (e.g. you can’t just toss an iPad) while reading.

However, whilst I can’t say I’m a bookie, I have read my fair share or physical books. But lately I find it much more enjoyable to read on an iPad (for example) instead of an actual book. Why? Easy: Digital bookmarks, highlighting, notes, having all my books in one place, requiring just one (or two) taps on a screen to start reading where I left off.

I recently finished reading ‘STEVE JOBS’ by Walter Isaacson (great book by the way), and I read it on an iPad. What I really liked about the experience was that I could highlight sections I considered important, and I could share quotes on Twitter and Facebook right from the app. So when I was writing a Powerpoint presentation the other day, I remembered something I read in the book, so I just went straight to “notes”, and copied the text I needed into my presentation.

So, I guess it all comes down to one question: Do you read just for reading? I know I don’t. When I read I like to make notes and highlight interesting things. Somehow highlighting an actual book doesn’t seem right. I remember that I once had a book with over 30 bookmarks. It just seems much easier to use an eBook reader nowadays.

So, in my opinion, the inevitable will come to happen: eBooks will eventually prevail. And as much as I like the smell of opening a new book and flicking through the pages, ease of use always dominates. There are so many books out there, and those books won’t disappear, but eventually, all new books will be released only in eBook formats.

My initial experience with ASP.NET MVC3 and Razor

Posted by under Companies, Computers, Microsoft, Programming, Technology, WebDesign

A couple of weeks ago I was asked to develop a mobile application with data access in ASP.NET.

Naturally, I did a bit of research, tried out a few things, and finally came to the conclusion that .NET framework 4.0 was the best choice.

So I got down straight to development, using Jquery Mobile Framework, ASP.NET with .NET 4.0,  MVC3, ADO.NET Entity Framework 4.1, and ASPX (web forms).

It was easy enough to set up, but when it came down to implementing user controls, I found it a nightmare. Passing parameters to the user control whilst using a MultiView was giving me a headache.

The issue here is that web forms are not naturally set up to work via AJAX calls, and Jquery Mobile Framework relies entirely on AJAX calls. So I decided to try out the Razor layout engine instead of web forms.

I had no experience using the Razor layout engine, but after a couple of hours, I found it delicious to use. I could code up pages much faster than in web forms. And the integration with controllers and models in the MVC3 framework was just, natural, it all fit into place beautifully.

Naturally, I found a few issues learning the basics of the MVC3 framework, forms authentication, the Razor layout engine, and accessing data from a database. Tutorials seemed to be all over the place, but I came across a few good ones which I will share with you.

If you are getting started with MVC3 + Razor + Data access (using DBContext in MVC3), follow these tutorials, and you’ll be a ‘pro’ in a couple of days (providing you have enough experience).

Razor Layout Engine:

Learn the basics of the Razor layout syntax:

http://msdn.microsoft.com/en-us/gg618477

Learn how “sections” work in Razor:

http://weblogs.asp.net/scottgu/archive/2010/12/30/asp-net-mvc-3-layouts-and-sections-with-razor.aspx

Learn how to implement partial views in Razor (which can be used as ‘user controls’):

http://rachelappel.com/razor/partial-views-in-asp-net-mvc-3-w-the-razor-view-engine/

MVC3:

Learn how a basic MVC3 application works in .NET:

http://www.asp.net/mvc/tutorials/creating-a-mvc-3-application-with-razor-and-unobtrusive-javascript

Learn how to integrate data access (database first) using MVC3 and EF 4.1:

http://msdn.microsoft.com/en-us/data/gg685489

(If you want to create models, but use a MSSQL database that is not on your machine, and you don’t want to have it in the App_Data folder, just follow the steps, then delete the database from the app_data folder, and change the data source in the web.config to point to the correct location).

Writing your own queries to access the database instead of relying solely on those from the model:

http://blogs.msdn.com/b/adonet/archive/2011/02/04/using-dbcontext-in-ef-feature-ctp5-part-10-raw-sql-queries.aspx

So that’s it for now, I thought it would be good to have a central location for these tutorials as they served me well whilst I learned the basics of MVC3 + EF4.1 + Razor, so I hope they are useful to you as well.

If you have any queries, please let me know in the comment section below.

How Police could effectively pre-empt riots

Posted by under A.I., Computers, Life, News, Politics, Society, Technology

Over the past few days we have seen violence escalate dramatically in different cities across England, with London being the primary location. Acts of violence, rioting, looting, and arson have taken place at night for several days.

I have been attached to the BBC News coverage through their website and I saw an interesting tweet posted there:

Tweeted by Hannah Robertson in GloucesterAt first I thought. Pre-empt where the next bout would take place? How on earth would they manage that?

But it actually isn’t that hard. They have a mountain of CCTV data, they have a good amount of servers, all they lack is a bit of artificial intelligence.

The best way I can think of to determine where possible bouts of violence could sprout in what seems like an apparent random non-deterministic method of choice is as follows:

The IT team of the police should annotate the direction of each CCTV camera, including which streets are in view and the coordinates.

Afterwards, the CCTV cameras should be plotted on a 2D map, as vectors (pointing in the direction they are facing, with the length of the vector being the distance the camera covers).

Map Plot of LondonAdditionally, all points of interest should be mapped, such as shopping centres, residential areas, commercial areas, shops with high-value items, and shops with low-value items. Most of this data can be readily obtained from Google Maps, amongst other online maps. This data can be extracted and annotated with the values we require (such as the value of the goods sold per area, etc.)

If you think this is a very hard task, it is not. A very simple way of doing this would be to go to the website (or ask by phone) of each major retailer and chain for a list of addresses of their shops. Google Maps can plot them on a map using a spreadsheet as input. There you go, simple as that!

A Machine Learning program could be developed using WEKA (for instance), in which an SVN is programmed to take data from the map-plot, where priority spots include places where high-value items are sold. Additionally, it would take data from each CCTV camera.

Now, how do we represent the data from CCTV cameras? One way would be to take a selection of pixels from each camera, measure the amount of change for a second, and wherever there is a large enough change in different areas of the same camera, we might have a lot of movement going on. So we automatically annotate the data per CCTV camera as having “movement” or “no movement”. Additionally, a range from 0-1 would produce better results (hopefully).

So now we run an SVN machine on the data and hopefully come up with some interesting results.

What could essentially be obtained from this is a vector describing the movement of as mass of people from camera to camera, this vector would be projected on the 2d map. Multiple vectors could be plotted at the same time if there were multiple riots taking place at the same time in the city. A confidence level can be given to each vector (assuming we have built in a few mechanisms to differentiate people from cars, etc). The places of interest could be mapped as hotspots, and furthermore we can predict paths to possible places of interest, derived from the speed and direction of each vector.

So there you go. If you belong to the MET, please share this blog post with your boss (or the IT team) and get working on a system to perform such actions, it would certainly help prevent further stupidity in the future. 6,000 police officers should be able to deal with outbreaks of crime provided they knew where the rioters would be gathering and where they are heading.