Lessons learned from developing and introducing the Smileyhash app

At http://smileyhash.perandersen.no you can see a React Web app I have developed myself. But no one uses it. However, at least, I know I am able to make a web app.

I have things on my Trello board that I will look into, unless I start chasing other ideas and I have stopped doing development as I uploaded it to the host and posted about it on LinkedIn, I posted it on Reddit and I posted it on my facebook profile and no one has made any tweets with the hash tag.

For me it is hard to know if it was the idea and concept that didn’t seem appealing to people (what is the use for the tweeter anyway? They don’t benefit from rating their tweet mood using my hashtag) or if I just have not been doing enough to gain mass interest. It is not something I would try to make viral through spending on ads, as I would not see any income from it. And working more on making it indexable for search engines is something I have on my list, but I do risk that people never tweet using the tag even if it is indexable for search engines. So it is hard not to move focus over at developing other apps and ideas.

If I was to make some kind of app and/or web service successful, I think it would have to be concerning something people actually need. And those ideas are hard to get. At least now I know that I have the ability of following thorugh and I know I am technically able to make a solution based on an idea. This is great news.

Upgrading websites with SPA behaviour without destroying search engine readability and design.

I started doing web frameworks a few years ago and have been experimenting both with Angular and React. What I normally think is that the Javascript application is what I design and nothing more. And normally it is designed as a single page app.

Basically what happends when you create an app in a JavaScript framework is that you let the framework take control over the DOM manipulation but it is known that search engines can’t see the content.

In react there is a way past this that is called isomorphic react and this is a good strategy if you are building a new interactive website today that is kind of unique when it comes to functionality. At least it is an option to using a CMS.

But if you already have a website, and you use a CMS that server side renders the content it can be upgraded making parts of it into React or Angular apps. You can even do this with existing parts of a website.

The interesting thing is in the way a single page app is mounted in to your website.

In a Single Page App you have a static html file that usually only contains a div element with a ID such as “root” or “app” and little other. And this is what google sees. An empty element. Everyting else happends in time after this has been loaded and Google doesn’t follow this. It only sees the empty div.

But the beauty is, as an alternative to isomorphic renderToString in react – the mount div does not have to be empty.

This means that the following approach can be taken, both when creating web sites from scratch instead of running node.js on the server, you can place static content in the div.

I think you will find benefits in isomorphic react and building with this as an architecture for web apps and services that exist online, but when upgrading existing sites, this is beautiful. Take the static content and introduce dynamic behaviour with the existing markup and style as base and mount to the div you would like to make into a dynamic application and perhaps if needed design some small services hosted elsewhere or in the scripting language available on the host of the website.

The web is upgradeable and static websites still are major online. They can be upgraded and this does not have to affect search engine readability. Your website can have the same existing design as before, but be extended into having the functionality it lacks without a big affect to the design that might have been carefully done with a colour theme, fonts, a layout etc.

My point on use of reactDOM.render() in SPA templates and scaffolders:

But the beauty of ReactDOM.render is that it sets innerHTML behind the scenes. It doesn’t add the React components to the div with the id “root”. It swaps the content. Therefore:

In this way you can make use of react in existing websites leaving the static content in the mount node so that Google and other engines can see some text. Great for use on upgrading existing websites.

Examples of what I can provide

Here are some examples on deliveries I can provide for you and your business:

  1. You need a website for your business or a new design that meets today’s standards
  2. You have an existing website but you need extra functionality without breaking the design
  3. You need an app or you need your website to be more accessible on other devices
  4. You are custom to regulations that needs to be implemented such as accessibility (Norway: Universell utforming)
  5. You need an application available to your employees via the intranet or via log in online

Maybe some example functions:

  1. Chat with your customers
  2. Make them able to preorder food or other items for quick pickup
  3. Book an appointment
  4. Integrating a webshop with a cart and payments
  5. Blogging and news in various categories
  6. Contact you in a different way than calling your main number
  7. Social functionality and integration to Facebook or other third party

I can provide a WordPress site and manage it for you or make you able to manage it yourself. Cost will be based on how much tailoring is needed. Contact me to get an offer, I do not charge before we have agreed. Also if you need something tailor made with a different CMS than wordpress I will be able to help. Many new solutions are built using cloud platforms and a newer way of delivering is through something called node.js and no use of WordPress or PHP (the language WordPress i written in).

Discounts for first customers.

Looking for customers with existing websites they want to “spice up” with interactivity

Currently being unemployed I am looking at the possibility of starting my own company rather than being hired as an employee of an existing established company. I have found that many websites online could have more interactivity but they are very nicely designed and plan to address this as a segment.

I have specialised in web development and can provide you, if you have a website, with extra functionality. I can upgrade your existing web design without breaking the fancy visual form and effects that you had delivered from the web designer. And I do so at reasonable prices.

An example would be if you have a restaurant and you have a menu on that website. Why not take orders? Or maybe you just need a contact form? Maybe you are looking into integrating a small web shop into your site.

The way I do this is by using the React framework from the Facebook team. With this I can turn parts or your existing web site in to an interactive application. Also I can use back end server side functionality offered by the host you use today if you are in need of some server side functionality for your upgrade.

Also, I would be interested in having contact with designers who do not necessarily know a lot about how to provide interactivity through web programming both server side and client side. I have no experience in visual design and would love to work with someone who has.

So contact me on LinkedIn if you would like my web programming services and have a customer or you are a customer yourself.

Looking for startup people

Currently I am unemployed and it would be a great time for me to start some kind of service online. I have some ideas but no one to work with.

If you have ideas and maybe some funding, please contact me on LinkedIn

Deploying simple restify node.js application with mongodb backend on AWS and lessons learned

Today and yesterday I have been working on deploying a simple rest api written in node with a Twitter Streaming API connection saving tweets to a mongodb and enabling a search in the tweets with averages on a number in the result json.

First I tried running it on OpenShift on the free service but I couldn’t get it running.

Then I tried setting it up in AWS Linux but it was easier to do in Ubuntu 16.10 following these guides:

https://www.digitalocean.com/community/tutorials/how-to-set-up-a-node-js-application-for-production-on-ubuntu-16-04

https://www.digitalocean.com/community/tutorials/how-to-install-mongodb-on-ubuntu-16-04

I then set up a Security Group in the EC2 control panel of AWS allowing incoming connections to port 8080, which is the port my script is running on.

Still I am unemployed but I hope someone finds interest in my work and soon my Smileyhash application is ready and hopefully some company will be interested.

Working on “Twitter Smileyhash”

I am currently working on a Twitter app I have called Smileyhash. It introduces a new hashtag in the form #smiley(0-10). The way it works is that you can use the hashtag to mark the mood or feeling in you tweet.

For instance, you can tweet:

I think #Trump is the worst president ever #smiley0

Or:

I really love president #Trump he is the best #smiley10

Or maybe:

#Trump doesnt mean anything for me #smiley5

This, in my app, will give opportunities to later search for #Trump and give averages. You can also search for other things and compare. So for a while ago, during the presidential campaign in USA, you could for instance have been comparing Clinton and Trump.

I will release the app soon and post here when it is done. I make the app in React with Redux with a node.js backend using MongoDB as base and utilize the Twitter Streaming API to fetch tweets with the hashtag.

The backend will be hosted on some cloud service, I think either AWS or OpenShift.

At the time of writing I am working on developing the API and stream saver locally but will soon deploy and test on cloud and release the front end probably as a sub domain of perandersen.no. If you have a job offer in the Oslo area, contact me on LinkedIn and I will give you a demo.

For future readers, the Smileyhash Twitter app can be found here