Vocabulary Exercise App: A Name, SEO and another React App


My domain got a new name: vocabup.com. Why vocabup? It is way better than phpapp-olivers.rhcloud.com It has only three syllables and since I will be going to rely heavily on search engines it has two keywords in it, vocab and up. Vocab is another word for Vocabulary. Up in this context means to pick up new words or to lift or increase or enhance your vocabulary. The name does not sound very good for me as a german. But since it is an international app to get to know the world language english better there will always be visitors who will find the name sounding strange. And I already researched for the perfect name for one and a half day. So, pragmatically, it is a good name.

Praising the architecture

Now my app can be used. It has a comprehensive thesaurus to be browsed and a limited but working vocabulary exercise. You can compare my website with a new building that has a basement floor. Many things can be build on top of it. And I can react quickly! Thanks to React! I like the architecture very much, which enables me to write complex JavaScript code that is not only a behavior layer but also renders content. Without serverside JavaScript generating the page structure and content via JavaScript would cleary violate the Progressive Enhancement concept. But thanks to Node.js I can do the page rendering with the same code as on the client on the server too and go the Progressive Enhancement way with success. Look at the exercise page or at my new page to browse the thesaurus by domain. Although the whole view is written in Javascript, there is still a fully functional app if you disable JavaScript in your browser. Thats because the Javascript is executed on the server. I made a Node.js REST service that takes Json and returns a webpage from React consisting of good old HTML and CSS and enhancing JavaScript. Thanks to Node.js and React Progressive Enhancement is no pain since no code has to be repeated. I do not have to write an additional view Layer in PHP to do the serverside rendering.


If I have the ground floor now and a good architecture to be able to react to requests quickly it would be nice to integrate the users into the development. Do you know these iterative software development processes like Scrum or Kanban, where customers are presented with a result each end of an iteration and give valuable feedback to the developers. Some people think, their plan is fixed and will not change but they are wrong. The feedback of users and customers makes you think of a better way to satisfy real users need. Do you really know your customer so well like yourself to fully understand what he wants/wanted? So communicate with them so often as you can! The first step to engage users into interaction in my case is to have users, that means having a large population of them. The last time I got involved into SEO was 10 years ago. What has changed? It is really interesting! In that time the offpage optimization was to get links from anywhere. But it was also discussed to gather links from context relevant web sites. Google always spoke against unnatural activities to get links. Natural means for Google to let others link to your website. That seems unrealistic. How can anybody link to my site voluntarily??? Links were bought for much money. Nowadays they pay money that their links get removed! Since Google more and more penalizes unnatural links SEO means today the opposite than it meant in the past, namely to link to other sites in order to recognize the authorities in your domain and deliver quality content that communicates your niche and your product very cleary. Onpage SEO has not changed. It is more important than ever to use all instruments HTML provides.

When I looked upon my website in the Google index and by this way realizing how Google sees I saw alphabetically sorted chaos. Instead of sorting my thesaurus by letters which has no semantic meaning I decided to show Google the definitions that WordNet provides semantically ordered by domain. And I write meaningful titles and HTML header tags with relevant keywords. Next I will have to write a detailed text about my website with many links to the other authorities in my field in order to let Google know what my website offers and what is does not offer and what the other websites are offering. Maybe a blog?

Vocabulary Exercise App – Progressive Enhancement by serverside Rendering with Node.js and React

In the last iteration I suppressed my desire to develop the complex app part of the Vocabulary Exercise Web App and master the technical challenge first. Instead I made the app visualize the data I have in order to give search engines to eat and get visitors and have some substance to show until the whole app is finished. This part still has to be worked on to improve usability and appearance.
In this iteration I solve the technical problems to actually make the app which is more than presenting static data. Until now I am still thinking about how to do justice to the progressive enhancement thing. I still feel that it is the best way to develop web sites for the internet. If you develop a business web site progressive enhancement might be less important. Then, you agree with your users on using a special browser and to have Javascript activated. In this case, there are no search engines which you depend upon to have a successful product and the content does not have to be found. Performance is also no big problem then. You arrange with the users about using Wifi to connect to the server for getting all the big Javascript files for frameworks and libraries. The website is not showing anything until all needed Javascript files are downloaded and the GUI is generated. Since everything is created by Javascript, there is a chance, that something will break and the app does not even show anything. But sure, the Javascript code runs without errors, so that the GUI is not only visible but also usable. But when developing an internet web site there is a much stronger demand for accessibility and usability. There is no one you can dictate your terms to. The site has to be as friendly as possible. Customers, that don’t know you, have to be won over anonymously. Visitors turn away immediately if Javascript loads too long to render something or render faultily. People can not find you if search engines can only see empty pages. It is not only about the few people that have Javascript disabled.
Especially the offline feature requires to do intensive client side rendering since this will not be rendered on the server. But this alone is not enhancement! Enhancement means that content and the layers of structure and appearance are rendered on the server and on the client there is a bevavior layer written in Javascript on top of it. So I need both, rendering on server and client whereas the client is enhanced by the fancy stuff like the ability to run offline or event handling. Since the offline part requires the app to fully run clientside the whole functionality must be generated via Javascript. So I need a framework! Now I know something about Javascript but programming the whole app by myself does not feel productive. The first idea is AngularJs by Google, a framework which is known for building single page apps. But single page apps implement a total different concept than progressive enhancement. They are not designed for playing together with serverside generated content. How to solve this problems? As a software developer it feels very bad to duplicate code for rendering the same content on server and on client. It clearly violates the DRY (don’t repeat yourself) principle and is not efficient. Progressive enhancement is no religion and if it is too expensive to realize there must be made compromises.

But there is a way to render the GUI on both server and client with the same code! What if the Javascript that runs on the client is used on the server too? It is called isomorphic Javascript and can be realized in a different kind of ways. There is the Javascript V8 engine by Google which is famous for its speed and can be compiled on any platform. V8 is also used in Chrome. And there is React, a Javascript library for building user interfaces by Facebook. React was developed by Facebook to build large websites with data that changes. DOM rendering is very slow. So in React there is a virtual DOM, holding the view model and representing the real DOM. When new data is passed to the virtual DOM only the corresponding parts of the real DOM are updated. Therefore it is suggested to modularize the GUI into reusable components which can contain other components like in the DOM elements contains other elements. In SPA (single page application), like AngularJs enable it, serverside rendering is no issue. The SPA architecture lets the whole bunch of Javascript files load and execute on the client. But React works on the server too. For PHP there is V8Js which is a wrapper from PHP to the V8 library. I did not manage to make this running on openshift. I failed at compiling an installing V8 on openshift. The specific build tools from Google are not easy to install if you do not have an own server. Running an own server … great challenge, but I want to stay focussed on programming. Finding shared hosting is also a great problem. In the end you do not want to depend on one sigle webhosting company. Node.js is the solution. On openshift I start another cartridge with node.js on it. I set up a REST service using express that takes a JSON view model and returns HTML and CSS and Javascript rendered by React and bundled by Gulp. Whenever I change the Javascript code the whole React app and its dependencies is bundled into one file. This file is included into the serverside rendered web page. If the Javascript file is executed on the client side it adds event handling to enhance the app. The Javascript that is being executed on the server is the same as the code which is executed on the client. If the offline behavior takes over the JSON view model will be composed from IndexedDB and given to the client side code to rerender certain parts of the GUI.

I added a prototype page to let the user find the missing word. Here is where the exercise begins. The first level is to find missing words which are easy to find. But while searching for the missing word, you have to read definitions of the word that you probably don’t know. That’s the learning part where you expand your word pool.

Offline runnable Thesaurus Training Web App – SEO and online

Until now I paid much attention to develop the offline part of the offline runnable thesaurus training web app. But for a web app this is the fancy part and since I want to progressively enhance my web app I should care for the traditional online stuff first. I do not only see accessibility benefit in progressive enhancement but also in software development I learned that the easiest part is the most crucial one. You get the most stuff done in the least time. We as software developers have a strong interest in complexity and want to avoid the simple parts but in terms of productivity the simplest parts are economically the best. So why not develop the online and even non Ajax part first and then decide how to enhance the app by fancy stuff afterwards? Anyway I expanded my data model since I found that the thesaurus wordnet database from the princeton university has more to give and I want to fully visualize the data. This is the first step. It is the next step to determine which of the data has to be offline to offer a nice thesaurus training game experience.
Non fancy server side page rendering also enables search engine optimization immediately, even though search engines, especially Google, might be able to parse JavaScript. But parsing JavaScript is again special stuff and only fancy Google might be able to do that.
So the result of this iteration is an accessible online thesaurus website. The home link, which is the most used one, is working and the user and also the search engines can see each of the 147.500 words from the wordnet database via a CSS styled menu which shows the alphabet and provides a hover effect showing the combinations with the next 26 letters. In this way the menu devides all words into sections of words which begin with two letters and lets the user show them on the page. To minimize the length of the words page further the words list is presented in columns. For this layout I used the new CSS3 column properties. Unfortunately the Internet Explorer supports them from Version 10 on only. The best way to provide an alternate column function for the new CSS3 columns which will be less good for sure for < IE 10 users is to test for it by Modernizer, a JavaScript feature testing framework, and write another CSS for the case that the new feature does not exist. There are only two ways: Use the new CSS3 feature that not every browser supports and dynamically apply an alternate style sheet for old browsers or don't use new CSS3 at all. I prefer the former way. If it is really about a combination of disabled JavaScript and an old browser the user still sees a list three times as long as if he had been presented the content with column layout. I find that as accessible enough. I improved also the URL layout and made Yii present the URLs more beautiful. Now there is no PHP in the address any more. Even more, there is no index.php. There should be no cryptic stuff like ‚?‘ shown in a URL so the user can easily read it. Another advantage is, that search engines can not assume generated content but must believe that all was copied by hand. Even if the search engines don’t believe it the URL of the page describing the word smart has now the word smart in it, so search engines which also evaluates the URL, know the page content should be about smart and can show it in the search results.

Offline runnable Thesaurus Training Web App – JavaScript

JavaScript is the peace of cake I avoided to eat for so much time. I often had to do with web development, but learning JavaScript to get a few tricks done? But nowadays as I want to get serious with web development, there is no way around deep knowledge of JavaScript. We live in a time of single page apps written entirely in JavaScript, talking with the backend via REST services. That’s why AngularJs is so popular. How to learn JavaScript to program the offline runnable thesaurus training web app?

Beginning JavaScript Development with DOM Scripting and Ajax

For me the first step was to read Christian Heilmanns Beginning JavaScript Development with DOM Scripting and Ajax. The focus of this book is to write unobtrusive JavaScript. Unobtrusive JavaScript leads to Progressive Enhancement. According to Heilmann JavaScript is meant to enhance web pages but pages should not depend on it. It is clearly an annoying show stopper if some small JavaScript code will break the whole process to order the tickets for the flight into the next holidays. Instead JavaScript should just enhance a web page. This is practiced by first testing if the browser supports the desired feature. This is another good habit Heilmann teaches, to test for functionality rather than to test for browser vendors or versions. And the book teaches to depend on standards and go the mainstream way. There are several good reasons for progressive enhancement. Users that turned off JavaScript deliberately or under constraint are able to use the website. But that is just the obvious effect. Search engines can index the website. Nowadays I’ve heard that Google interprets JavaScript anyways. But I have to read more about this. But search engines will be deeply grateful that they get content without much fight. Accessibility is another reason to enhance a website instead of generating it by JavaScript. If content or navigation is generated, screen readers might not be able to read it. These are all the concepts that are applied throughout the whole book when Christian explains how to use modern JavaScript to change the DOM, change the presentation layer via CSS, handle images and windows, enhance navigation and forms, interact with the backend via Ajax, validate user input, use third party libraries and debug scripts. Heilmann often mentions the historical background of several techniques that evolved in the JavaScript field. That means, it is not just a technical book that teaches, what can be done but also what is the best way to do something. I like such kind of books where a very experienced mentor is sitting beside you and helps you around the pitfalls. My copy is the first edition from 2006. But the current edition has not changed much. I compared my edition with a PDF of the new one and did not find big differences. I don’t believe that it’s due to the authors laziness. This book does not discuss the hottest news but how to write modern JavaScript and apply good concepts and obviously this hasn’t changed the last years very much.

What Heilmanns book does not deal with is structuring a large code base. Maybe this is generally contrary to the concept to use JavaScript to enhance a web site? Heilmann explains the JavaScript object notation to avoid global variables that collide with variables of other scripts and creates chaos. But he does not explain the module pattern, how to hide information in private variables or methods, closures and all things that make JavaScript a great language.

For getting a deep knowledge of the JavaScript language itself, Douglas Crockford is your man. I watched some videos on youtube where Crockford explains the bad and the good parts of JavaScript and how to avoid the bad and how to concentrate on the good parts. You can buy his book JavaScript: The Good Parts and his book is also available for free. I have not read this one yet.

Offline runnable Thesaurus Training Web App – Deployment

Deployment of the offline runnable thesaurus training web app was not the easiest part so far. Yii has some configuration aids. Some portion of code may be configuration dependent. For example, the paths to the resources may vary from development to production. There are Yii variables like YII_ENV. When YII_ENV ist set to prod, then YII_ENV_PROD is defined, so you code can make a query like if (YII_ENV_PROD) { do it; }. Now I have one or two places in my code, to ask if in production or in development and set the paths accordingly.
What puzzled me most about Yii until now was the publishing of assets. An asset is a resource like a Javascript or CSS file. When they are getting auto published, what must explicitly be prohibited, they reside in folder with a hashed name. It is to avoid version conflicts. I can’t find a use case for that yet. But each time I wanted to deploy the app on openshift, the scripts where put into a folder with another hashed name. So I cannot reference them outside Yii. I am using HTML5 Application Cache, an HTML5 technique to make web sites or part of them able to run offline. For knowing which files to cache, there is a manifest file which references this files. Even if there is a server connection available, this files will be obtained from the cache, that is defined in the manifest. Thus, HTML5 Application Cache saves bandwidth. Sometimes I may want to update my Javascript files, so this requires to specify an update strategy which I left out for the future. The way to left out the resources to be published is to set the variable $sourcePath in each asset class which extends the class AssetBundle to null. Took me a while to find this out. In addition the initialization of the array js which is inherited from the AssetBundle base class depends on where the app runs, on localhost or on production server. My solution is to override the init() method of the existing asset classes and use a method getAssetSourcePath() there which I added to the AssetBundle class:

    public function getAssetSourcePath(){
        if (YII_ENV_DEV) {
            return "phpapp/web/";
        } else if (YII_ENV_PROD){
            return "";

My YiiAssetclass now looks like this:

class YiiAsset extends AssetBundle
    public $sourcePath = null;

    public function init(){
        $this->js = [];
        array_push($this->js, parent::getAssetSourcePath().'js/yii.js');

    public $depends = [

deployment on openshift is the easiest part of deployment and works with a few console commands using git, the rhc command and in my case mysql. First I have to install ruby, since the rhc command line tool requires it. The documentation on openshift can be followed quite straight forward.

Deploying the MySQL database worked with these commands:

rhc scp myapp upload /path/to/db.slp app-root/data
rhc app ssh myapp

Another strange problem: To download compressed CSV files and uncompress them via Javascript, I use zip.js. In the production environment I stumbled upon a strange error. zip.js first makes a HEAD Ajax request, before actually downloading the zipped file via Ajax. But the Content-Length of the response header was not there, so Javascript reads 0 and zip.js interpretes this as a corrupted file. I don’t want to spend much time to go deep into that problem. I just return the Content-Length statically, since all data is static. Sure, it is no solution for getting data with dynamic length.

That’s it for deployment. Now, when I deploy I change YII_ENV from dev to prod and set YII_DEBUG to false and run the following three git commands

git add —all
git commit -m "my comment“
git push

Offline runnable Thesaurus Training Web App – Yii

As the framework for the offline runnable thesaurus training web app I chose Yii (Yes it is). According to the PHPmagazin.de framework survey, Yii is now the most favored framework of 2015. Had a I googled a bit further I had found Lavarel as the most popular one, based on a survey made by sitepoint.com. Looking at the Google results listing the frameworks itself there are Symfony and Lavarel. Probably there ist no Yii at the very top of the search results because it is younger and Google weights good old websites heavier. It’s a good thing to choose a framework that stood the test, like Laravel and Symfony. You will find information easier.

Yii supports the active record concept. I found that very comfortable. You just write model classes which represents and maps to a table. All you have to do is specifying the relation the table has to other tables. You don’t have to write any properties but can access colums by dynamically created properties of that class at runtime.
I am already familiar with the MVC model. It’s the very same as in ASP.NET MVC. In the URL adress you route to a controller and an action which is a method on that controller. Then the controller may take a parameter and finally builds a viewmodel from a model or gives the model directly to a view, which renders what it gets from the controller using its view logic.
The URL can be beautified. I am not finished with that, but grasped the method, how to do it.

Offline runnable Thesaurus Training Web App – PHP???

I am having a party. I managed to deploy the result of the first iteration of the offline runnable PHP thesaurus training web app on openshift.

Why PHP? And why is PHP so popular? According to Wikipedia, PHP is used for 82% of all websites. That means, only every fifth website you are jumping on is not written in PHP. That’s quite a bit of popularity for a language that has such a bad reputation. The language is said to have a bad design. For example objects were introduced many years after its creators gave birth to it. Now you can put your whole code into global functions and global variables. You can even mix your whole PHP code with HTML output in each page, like in JSP. Like JSP is now outperformed by JSF, which follows an MVC approach in Java, most frameworks for PHP are also MVC based. In PHP you can do both. You can also encapsulate code which belongs together in classes due to its high cohesion. You are free to write ugly code and write good code. In the Java world you are forced into better code by design. But you can also write classes with many thousands of lines of code. This is just one example of bad code. The fast way is always seducing and looking for victims belonging to each programming language fraction. Bad programming style is doable in every language, especially in PHP. That’s why PHP has a bad reputation. It is so easy to write a program und do not follow any rules of modern programming and it’s the language of script kiddies, since it is running on every server. But you can also do it professionally for a living. That’s my aim and therefore I find PHP so interesting. PHP is so widely spread that there are hardcore software development projects as well as small website buildings. When I am looking for a part time job I can only see PHP jobs. That must be rewarded and now I am going to write some projects in PHP to be able to sell myself as a PHP developer. There are other good sides of PHP that many developers find bad. PHP is not a typed language. The type of data is determined by the interpreter. That leads to the next characteristic. PHP is an interpreted language, thus code is not compiled but interpreted at runtime. Potentially, PHP programs are less fast, so raw performance cannot be the design decision for creating interpreted languages. The advantage is, you just change the code and run it! My last job was to develop a JSF GUI on a JBOSS server with many java projects which depended on each other, a monolithic system, crafted in many years by many developers under an immense amount of time pressure. Often, an SVN update led to a compiling orgy. Even, if you just have to compile only the project you are currently working on, each time you change code, you have to compile, stop the server, deploy it, start the server again and crawl to your created function in the application to test it, only to find that you made a small mistake and must do the whole cycle from the beginning. It’s a pain to develop a user interface in this way. When I develop my PHP app, I change the file and press F5 or whatever shortcut to refresh the webpage and can watch the change immediately.

Progressive Enhancement of a datadriven offline Web App

If you want to develop a data driven offline web app, you will nowadays use IndexedDB, since WebSQL is deprecated. In the native world where things are perfect you will create a download for a SQLite file, which can then be queried. In the HTML5 world you have to populate the indexed database in two steps. At first, the data must be downloaded and then this data has to be inserted via Javascript. This is somewhat cumbersome, since it lets the user wait until your highly efficient Javascript code managed to provide the offline feature. If there are a few MB of data to be inserted and there are millions of records to be created in the object stores of the database, Javascript takes its time, especially on a smartphone. I made an insert test with about 800.000 records on my macbook pro with SSD and a powerful i5 processor and it still took up to two minutes. The same procedure took 15 minutes on an android chrome browser. I did not test all different browsers on all different platforms yet. This is another problem to solve, since not every browser has the same implementation of IndexedDB. You see, while developing web apps is strategically a good choice, you start developing the data driven offline web application with a handicap. How to solve this problem? This is where progressive enhancement comes into play. Like every principle there are advocates and opponents. Despite of having more code to write to progressively enhance the user experience of a web app I can only see advantages. Concerning our problem populating the IndexedDB on the client side, why not let the user request the content from the server, until all needed data is available on the client and then query against the local database and update the page via Javascript. Web users are used to get data from the cloud be it via ajax or by a page reload. How happy are they if from a certain moment on the app works offline. They feel like on an airplane, that took off!
There are other advantages of progressive enhancement. It is important for optimizing your website for search engines (SEO). Search engine robots which visit your pages to retrieve content to their indexes are not willing to interprete Javascript. So this is another reason to let the website work without Javascript. Javascript might really enhance the user experience. But if your content can be retrieved by good old reloading the page from the server, the search engine robots have much to eat and love your website. You can make your whole database available for search engines and in this way generate many thousands of web pages in the index. This increases the number of potential visitors enormously.
Another reason to enhance a website by Javascript functionality instead of depending on it is the increasing complexity of Javascript code. Since Javascript became such a popular and important language to build websites, more and more code will be written and more and more errors are made. If this code breaks, the functionality is still available and there is more relaxation to fix it.
As a side effect is the web app usable for the 1% of users who have willingly or under constraint disabled Javascript.