Simply called WWW, this framework is intended for websites and infosystems and is strongly driven by API principles. Software is developed with Factory and MVC principles in mind and is released as open-source, licensed under GNU Lesser General Public License Version 3.

Please note that this is only a developer-preview at the moment and only meant for developers. I will try to build tutorials, Wiki documentation and a sample bootstrap site within a few months.

It is available on SourfeForge here

I shall be posting updates about WWW in the near future.

Waher-style Theme

If you are using Windows and use Notepad++ as one of your main source-code editors and happen to be a web developer then you might just love this.  I originally developed this for personal use for I was unhappy with other themes or found them a little inconsistent across different web development languages. By now I have used this theme in Notepad++ for more than a year now.

Thanks to this being shared in reddit, Twitter and Facebook, it has been downloaded more than ten thousand times in one day.

It is recommended to use this theme with Consolas font.

You can download the theme archive HERE (*.rar archive) or the theme XML directly HERE (right click and save-as). Preview is available here.

Features:

• Comfortable color scheme with a dark background and eye-friendly colors for working long hours
• The styles used are intended for a web developer and cover most common files associated with web development
• Supports Notepad++ styles for following languages and files: CSS, HTML, *.ini files, JavaScript, PHP, SQL and XML.
• Covered by GNU Free License, you can modify and redistribute it in however way you like.
• Some support for Java and Python files (recently added, might require some testing)

Install:

1. Unpack the *.rar archive into your Notepad++ installation directory under subfolder /themes/
2. Open Notepad++
3. Go to Settings -> Style Configurator
4. Select Waher-style from Select Theme dropdown
5. Click Save & Close

I hope this theme will serve you as well as it has served me!

WebViewApp

I have only recently become curious about developing for Android phones. As a web developer the most important thing for me was to provide a way to bridge the gap between web applications and native applications.

Free and open source WebViewApp application is a simple base setup for developing Android applications that communicate with web services. WebViewApp is released as open source and developers can use this base application to build their own fully functional web applications in Android.

This application is as bare bones as possible and includes commented code and some examples.

Following features are included:

• Cookie management (application stores cookies)
• Cache management (application stores cache based on web service cache lifetime and maintains it when user is not using the app)
• Javascript interface (Web service can execute commands in Java and vice versa, such as for scripting hardware keys or executing alerts from web service, displayed in Android.)
• Contained URL’s (Web service only opens its own URL’s in app, every other URL is launched in browser.)
• Online Checks (App checks if user is online, if not then shows an offline page with an option to continue and reload where user left off once internet is back)
• Sending custom user agent string to web service for testing if web service is used through Android app. Also includes a (possibly) unique device ID and application version for update checks.
• Can load local HTML pages that uses local resources
• Can be installed on SD card.
• Can save settings and preferences
• Can set background services and timed services
• Can start a service at boot time
• Can make HTTP connections to online API’s
• Can use private and public file system, read and write files
• Can use SQLite database

This application shows that it is possible to create very extensive Android applications while relying mostly on HTML and JavaScript user interface, which makes it much easier to port to other systems or create a counterpart to browser version of a website.

Please note that there is no ‘guide’ on how to change the base application into your own new application, but source package does include a short overview of all the necessary modifications. Basic knowledge of Android and web development is recommended.

The bare-bones application can be downloaded from Android Market with its name ‘WebViewApp’ or from Android Market.

Source code can be downloaded from here. This includes source code for both the Android app as well as the web service.

VERSION HISTORY:

v1.12 Database and file system examples, HTTP request examples
v1.11 Starting service at boot time
v1.10 Background services and timed services
v1.09 Notifications, settings and preferences
v1.08 Local image test for local HTML
v1.07 Activity checks and local file support
v1.06 Better examples and descriptions
v1.05 Possibility to keep previous scroll position
v1.04 Back button now works with POST variables
v1.03 Fix for back button in certain conditions
v1.02 Reload page now uses Javascript interface
v1.01 Fix for no-internet reload page
v1.00 Release

Electronic Payments

E-payment systems and bank services are everyday and common in Estonia, but both developers and companies, who implement e-payments to websites, tend to ask large sums of money for solutions that should be relatively simple. Having developed e-payment systems for years, I had not put together a single solution for this very common problem until now, when Estonia has adopted Euro as its main currency. This solution is released open source, under LGPL license.

Please note that while this e-payment system is now considered stable and has not run into major problems ever since it was released, some of the connections have been tested more often than others and it is still recommended to test the implementation and make sure it works accordingly before going live.

E-payment systems and Bank e-services that are supported with this solution:

Swedbank (Estonia)
SEB (Estonia)
Sampo (Estonia & Finland)
Nordea (Estonia & Finland)
Estcard (Estonian credit card web service, Mastercard, Visa, etc)

Requirements:

Solution is built with PHP and requires PHP support. The website or service that implements this solution should be modern and utilize UTF-8 for data encoding. This e-payment system assumes that it gets its data as UTF-8 and acts accordingly. This system may not work properly if website is not encoded in UTF-8. OpenSSL support is also required from the web server for some epayment profiles. Multibyte String extension support is required for certain UTF-8 calculations.

Files descriptions:

config.epay.php – Configuration file for each profile. This also includes testing environment access informatin, if that profile has it (read the comments). Whenever setting up a e-payment link, this file should be configured accordingly.

class.epay.php – Main class, this file also calls the configuration file and expects the file to be in the same directory as the class.epayments.php file. This file should not be edited, unless necessary for some reason.

gate.epay.php – This is gateway file that is used to submit data to the bank service or parse the result from the service.

example-submit.php – This is example file, which generates the form that submits order data to gateway and gateway then submits it to the bank.

example-return.php – This is example return page, which receives returned information from bank.

Example:

This package has a working example that is easy and quick to set-up. Package includes SEB bank e-service testing environment. The only thing you have to do, to get the example up and running, is download the package below and upload it to your website under root or subfolder. For example, if you upload the files to:

http://www.example.com/epayment/

Then you have to change only two configuration settings in example-submit.php file, related to order information and return URL. Using the previous example, the lines should be changed accordingly:

line 22. $config['gateway-url']=’http://www.example.com/epayment/gate.epay.php’;
line 23. $config['return-url']=’http://www.example.com/epayment/example-return.php’;

Don’t forget to change the example.com website address to your own website address. Nothing else needs to be changed to test if the class works.

From example to Live implementation:

The example runs on ‘seb-est’ (SEB Estonia) profile. To use another bank, such as Swedbank, you need to assign correct payment-type before generating the form (like in example-submit.php file). Then you also need to assign proper values to config.epay.php to the profile. The settings in configuration file are commented and self-explanatory. It is important to note though that some e-payment services offer no testing environments and other epayment services cannot even be tested without the testing environment being set up by the other side first (such as the case with Estcard solutions).

Download:

waher.net e-payments solution 1.4 stable

Other notes:

As BETA, this solution does not check for errors in every location and there may be quirks as a result. These will be ironed out in future versions. Please report any bugs or problems you find either here in comments or personally to my e-mail kristo@waher.net

Version history:

1.4 stable
20.04.2011
Minor change for Nordea, switching the language keyword (estonian and english were switched)

1.3 beta
04.03.2011
VK_AUTO requests did not work with some banks, gateway now attempts a cURL request to remedy that, if cURL is enabled.

1.2 beta
31.01.2011
VK_AUTO assigned for ipizza profiles (Sampo, SEB and Swedbank) for automatic pings on success URL

1.1 beta
13.01.2011
Sampo profile now works properly, taking into account UTF-8 characters

1.0 beta
11.01.2011
First release

The Social Network

Please note that this is not review of the movie, but an opinion piece about its topics. For a review, I recommend a review from one of my most trusted reviewers, Roger Ebert of Chicago Sun-Times.

David Fincher’s ‘The Social Network’ really is more of a movie about making enemies, than making those 500 million friends. But what the trailer depicts is not what the movie is really about. After seeing the trailer, I expected something entirely different. I expected what I guess Mark Zuckerberg  – one of the creators of The Facebook – expected, a movie that paints him as a monster. Instead it was a movie about our dreams, hopes and aspirations and how, at times, we exploit, manipulate and so completely cause self-conflict because of those things we like and want to achieve. The older generation will never understand and we can only hope that our experiences will be able to serve our children better. No one was holding our hand when the internet took over the world.

The movie focuses primarily on relationships and on the business side of things, it is intertwined with internet and development of applications for the internet. I loved the subtle nuances about the role that software developers play in this world and how it so strongly conflicts with the way your traditional business used to work. By creating these castles in the air, from air, a developer is in a unique position that no other job has shared in the history of the world. There are no rules to follow, you simply need a good idea and an even better execution. A symbiosis of art and science. What the movie displays very well is that web business does not even require huge investments and resources to become a success: merely couple of thousand of dollars and a passionate codewriter were needed to push things off to a running start. Even some of the smarter business strategies were covered, which explain why Facebook did not run into problems that Friendster did (which was the first very popular Facebook-style social network).

These years media still wonders if Zuckerberg stole the idea for Facebook or not. David Fincher, being a smart director that he is, never lets that take over the role of characters in the movie. In fact, it does not even answer the question for the viewer. But in all honesty, this was not what the movie was about, it simply tied everything and everyone neatly together.

It helps that the movie takes the perspective of the most known flawed hero of this generation to carry what otherwise might end up being a cluttered movie. Zuckerberg found his creative stride during the years this so-called Web 2.0 (or simply Social Web) was catching on. Smart – but not popular. Ambitious – but not charming. He was not driven by clichèd motivations of common biographical movies, such as father issues or chase for perfection or becoming better than your competition. He wanted to become accepted and he wanted to prove to people that hurt him – and tragically himself – that making something great and popular can become something he can excuse his shortcomings with. Instead of fixing his problems, he was looking for ways to mask and excuse them.

‘I wish I was special,’ say the lyrics of the song in the trailer. So did Mark Zuckerberg and so do all of us.

For those of you looking for the files directly, they can grab them here. Individual source code can be viewed here: index.htm, javascript.js, ajax.php. Note that jquery.js file is also required (1.4.2), should you copy-paste from the source code instead of downloading the archive.

The code is licensed under LGPL, so you can use it for personal as well as commercial purposes. All files are commented and a working example is provided within. You do not need a firm grasp of jQuery in order to understand this example and you do not need experience with JSON data format. PHP and jQuery handle the conversions for you. I will not explain everything step by step – for that refer to the files and the example provided – but I will give a general overview of what is happening here.

Front-end user-interface has the various actions built through a uiAction() javascript function. This is a general-use function that takes two variables, an ‘action’ that acts as an action identifier, and ‘data’ variable. Data variable can be whatever you want, it can be a string, integer, array or an object, depending on your needs. Since you will control how the ‘data’ variable will be used, it is entirely up to you. In the example files I am calling the uiAction() on a <button> element like this:

uiAction(‘alertLowercaseString’,$(‘#example’).val());

For those of you who know jQuery, know that I am sending the value of an input field with an id of ‘example’ to the function. Action’s name itself is ‘alertLowercaseString’ in that case. Then, within uiAction() function in the ‘action’-switch I am executing the function that sends data to AJAX, like this:

input['string']=data;
executeAjaxAction(action,input);

Action is, by default, the same as action identifier used to call uiAction(). executeAjaxAction() is a function that submits data to PHP backend (but you can customize it, such as have different uiAction() calls execute same function in back-end). ‘input’ is an uiAction() specific javascript object. This is defined at the start of the uiAction() function and is used for convenience in order to send specific data to AJAX. ‘executeAjaxAction()’ expects ‘input’ to be an object or an array, since this is what will be sent to PHP backend. After submitting data to executeAjaxAction() the front-end will connect PHP back-end with AJAX. In this case I am sending an ‘action’ of alertLowercaseString. PHP backend will solve the ‘input’ into a variable named $inputVariables and again – as it was in front-end, within a switch you can define what you want to take place in the back-end and what will be returned. In this example it is:

$return['action']=’alert’;
$return['message']=’Your string lowercased: ‘.strtolower($inputVariables['string']);

‘$return’ is an array that is used to create a JSON object from. ‘action’ for ‘$return’ needs to be always defined, but every other variable can be whatever you want, since – as before – you get to decide what data you need to use later on in front end. Basically everything you want to return to front-end should be placed in ‘$return’ array. PHP then creates a JSON string of the ‘$return’ array and returns it to the browser. executeAjaxAction() function will then call a javascript function parseAjaxReturn(), which will check what action PHP defined for callback (if any) and then – in this example of ‘alert’ as the action – does the following:

alert(json['message']);

And this alerts to the user the lowercased string.

This quick explanation may be difficult to understand at first, but I strongly suggest that you take a look at the fully working examples provided within. Files are fully commented and examples provided within are minimal, so you can take this into production use right away should you want.

Download fully working example files here

If you have any questions, go ahead and contact me directly or comment this article. I will get back to you as soon as possible.

All the best!

This example has a few limits, that is you can easily confuse it by clicking on two tile locations in a row. But in general it works and what I will be using this for will be something a bit different, so this limitation was of no concern to me. However the entire pathfinding calculation takes place on PHP backend. Each map is essentially a square (currently a limitation of pathfinder, but can easily be tweaked) and stored as an associative array, every tile in that array like this:

$map['1x1']['weight']=1.0;

The first key is the coordinate of the single map tile and the weight key is used to store weight of this map tile for calculations. Nothing else is needed (and an example is provided in the files below). For actual game purposes or whatnot you can store additional information on that very map as long as the coordinate and weight are assigned as shown in the example. For example, in my own tech-demo I also store the graphic tile used in the map array.

Finding the actual path is just as simple:

$map=getMap();
require(‘class.pathfinder.php’);
$path=new PathFinder(); //Create new pathfinder object
$path->setOrigin(1,1); //Set the start location
$path->setDestination(20,20); //Set the destination
$path->setMap($map); //Assign the map to use for calculations
$result=$path->returnPath(); //Returns an array of all the walked steps

Working example, as well as commented pathfinder class is available below:

Download the class and example file here

Please note that this is not a definitive pathfinder. It only takes into account one square ahead and on very large maps I am sure there are more ideal solutions. But for your basic browser based game this is a good starting point and I learned a lot by creating it. This is also easy to expand based on your needs.

If you have any other questions, let me know.

The code is shared entirely free for personal or commercial use.

Cheers!