Improvements in my web app
Tags: snipcode
Published: 2017-08-04 04:23:33

---
title: Improvements in my web app
published: true
description: Review of my web app Snipcode
tags: snipcode
---

## What I got

I got any reviews and suggestion from peers and from friends. Some of them were

- Homepage font is awesome
- The app is nice but loading is slow.

After all these reviews now is the time for improvement. The first thing I must consider is the loading time of my web app which was very high due to the use of .gif file in background hence I compressed it manually though I was not satisfied with the loading time. So introduced a new package in my project [compression](https://www.npmjs.com/package/compression)

``` javascript
var compression = require('compression')
var express = require('express')
var app = express()
app.use(compression())
```

One more idea came to my mind. What if the background will be chosen randomly?

## Random background

I introduced 4 more gifs in my static/img folder and wrote a small script to chose them randomly.

```javascript
var source = [
            'back.gif',
            'code.gif',
            'codeback.gif',
            'abs.gif',
            'app.gif'
        ];
var randomNumber = Math.floor(Math.random()*source.length);
$('body').css('background-image', 'url(/img/'+source[randomNumber]+')');
```
And voila everytime the user reloads he will get a new background(most of the time).

Homepage 1                 |  Homepage 2               | Homepage 3
:-------------------------:|:-------------------------:|:------------------------:
![](https://thepracticaldev.s3.amazonaws.com/i/23cekfk8p2va0xk30z6q.png)  |  ![](https://thepracticaldev.s3.amazonaws.com/i/5yhtfueknkjopazxkaxf.png) |  ![](https://thepracticaldev.s3.amazonaws.com/i/2exicnuyb86236hcdadq.png)


## Search optimization

One more tweak I would like to do in future is optimizing the search by including a separate column for tsvector and indexing that using GIN. Going through the documentation of PostgreSQL I ran into these three pages for optimizing full-text search and info about the functions.
- [Seacrhing tables](https://www.postgresql.org/docs/9.5/static/textsearch-tables.html#TEXTSEARCH-TABLES-SEARCH)
- [Update trigger of tsvector](https://www.postgresql.org/docs/9.5/static/textsearch-features.html#TEXTSEARCH-UPDATE-TRIGGERS)
- [Text search functions](https://www.postgresql.org/docs/9.6/static/functions-textsearch.html)

*Here is the index of all the post regarding this series of snipcode developemnt*

[Part I: App Idea](https://dev.to/sroy8091/app-idea-for-hasura-internship)
[Part II: App prototype](https://dev.to/sroy8091/app-prototype)
[Part III: Local Development](https://dev.to/sroy8091/hasura-local-development)
[Part IV: G for Git](https://dev.to/sroy8091/g-for-git)
[Part V: Data Modeling](https://dev.to/sroy8091/its-modeling-time)
[Part VI: Data & Auth APIs](https://dev.to/sroy8091/postman-a-major-tool-for-developers)
[Part VII: Basic Functionalities](https://dev.to/sroy8091/i-love-cookies-expressjscookies)
[Part VIII: App Screen 1](https://dev.to/sroy8091/i-built-it-with-codemirror)
[Part IX: App Screen 2](https://dev.to/sroy8091/app-screen-2)
[Part X: App Screen 3](https://dev.to/sroy8091/search-page-using-postgres-full-text-search-feature)
[Part XI: User Reviews](https://dev.to/sroy8091/improvements-in-my-web-app)
[Part X: Final Submission](https://dev.to/sroy8091/final-app-submission)