A new life for vocabup.com: MARKETING

I reached a new stage in developing the vocabulary enhancement app. I come to a point to stop development for a while and do market research and marketing. As in case of vocabup.com I am marketing and development guy in one person and I realize now, that programming does not make the whole show. The previous work was good and I reached my goal to build a reference app showing state of the art software development implementing the progressive enhancement and mobile first webdesign principle. The result is a very accessible app that can be enhanced up to a native equivalent offline app easily. The app can even do the balance act to run without JavaScript, a characteristic of Accessibility. The effort to make the app offline is far less than to write an app for every platform. All I have to do is to write/extend the client side database layer and master and apply Application Cache. As I chose a dedicated node.js webservice as the view layer I do not have to change my view code, be it for server side rendering or client side rendering whether via Ajax or IndexedDb, since this layer can be executed on server and client. I was not under time pressure and could think in the very long term and strategically and so I was able to build the jack of all trades software, or lets say the jack of all platforms and use cases.

Look at the performance test results for the vocabulary app exercise page! There are still some minor issues. The database queries for this page are complex in order to present the user an intelligent word quiz and so it takes time for the server to send the first byte to the browser. The thesaurus pages can let users wait for a second too. There are words having up to 75 definitions each of them having synonyms, sample sentences and domains they belong to and many semantically related definitions which for their part have synonyms and sample sentences. The WortNet 3.1 database is like its name says a net, so the information you get about a word is complex and relating to other words. That is what make this thesaurus and dictionary so interesting but also stresses resources. But the majority of the vocabup.com pages load fast, like that page. I decreased the page size by compressing all the big JavaScript and CSS files and even the HTML is compressed in the case of the blog pages or React apps. Now the vocabulary app can be accessed even when the data transfer rate on a mobile device is low. That means my website is also accessible to many countries which has poor infrastructure. In Germany there are many spots where mobile services has no chance. But my app will still respond quickly! And the app fits in all displays in contrast to many old and established web apps.

I had a problem with React. This does not shed good light upon React and I was worried first. I still did not get an answer from the React guys on stackoverflow yet. Maybe I post it in the React forum more prominently. On the other side I am satisfied with a workaround in the meantime. As I have a marketing phase now anyway I will return to that problem later.

In order to start marketing I integrated a wordpress blog into vocabup.com. The strategist that I am I have different goals by writing a blog. First is search engine optimization (SEO). Search engines love text and if I want to be found by them I have to tell them how good I am at knowing and providing ways how to improve vocabulary. But it is more than search engines. I read some pages about improving vocabulary. Read, read, read, they say and write. Having a strong vocabulary is said to be the most important factor for having success. Writing really helps myself to dive into the topic and find my niche in the market. And while doing this I can praise what vocabup.com can already do for vocabulary enthusiasts and gather ideas how to improve and direct vocabup.com. Google Analytics will show me which keywords are best to concentrate on and where competition is low enough and what the visitors are interested in. Finally I can enter the market and develop the software very focused and thus efficiently. So blogging is a very cheap and efficient way to get into the market and try keyword combinations out and get feedback.

Tutorials like this helped me to find an approach how to incorporate a wordpress blog into vocabup.com seamlessly. An obstacle was the unexpected behavior openshift adds to committing and pushing a git repository to the production server. Normally you would tell git which files to leave out from committing and pushing by the .gitignore file. My aim was to just leave different wordpress installations on development and production server and maybe just check in and deploy the theme. Git supports this workflow and can ignore files that are not in the index. But Openshift deletes ignored files from the remote repository on the production server. Openshift clears the remote repository at first and push the resources freshly each time you git push to production. So I just had to write a post deployment action hook, which creates a blog directory and places a symbolic link into it which points to a persistent directory where I have my wordpress installation now. But know that!

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

vocabup.com

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.

New SEO

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.