Skip to main content

Recreating Google Docs automatic "Saving..." status display

Developing a new Warcraft guild website gave me a handful of good opportunities to construct and recreate/imitate some edge features used in modern apps today. One of them is a "Saving" status display when you are editing a Google document. So here are the steps I wanted to mirror in my own app:

  1. when the app is constantly saving what the user inputs
  2. when it is just done saving every piece of data
  3. when some time passed and it wants to inform the user about real time status information

These are the steps for the frontend side. On the server side, well just look at this network traffic below, this absolutely has to be custom tailored to everyones infrastructure

Let's look at my original code that was born to recreate this action


The above code looks like this in the browser (sorry, it's the Hungarian version)


Now let me sum up the crucial points in the above code. Javascript is good in using callbacks, async calls. This behaviour could lead to tricky "bugs" or some hours of search on Google. When using setTimeout() with AJAX hand-in-hand then we have to think about AJAX's async nature, where calls are not finished one-by-one in a numbered row. They will finish independently on different timeframes, some fired later but finishes earlier. To overcome this I use an array to store the timeout ids and clear all of them out when the user sends more input. Now there will be no race to clear all living timeouts in time :)

I hope this little code gives some of you more ideas. Please bare with this code as it is premature and not yet ready for production (I believe).

Labels:

Popular posts from this blog

Shrink Vmware Workstation Ubuntu guest's VMDK file size physically on Windows host

I will be short on the topic as you too only seeking the resolution to the problem in the title. This tutorial is based on using Vmware Workstation 11 on Windows 8.1 host using an Ubuntu 14.04 guest. Note : you have to have the vmware tools, client additions installed on the quest machine! First go to the Vmware client's terminal when you are ready to shrink it down and type: sudo vmware-toolbox-cmd disk list This will give you the mount points that can be shrinked individually. For me I will only go with shrinking the main disk with "/" (root). First lets wipe the free space clean so the shrinker will know what is free to get rid of: sudo vmware-toolbox-cmd disk wipe / To shrink: sudo vmware-toolbox-cmd disk shrink / That's it, after the process in my case I've had a 4.4G file shrinked down to 1.7G, which is much closer to what the client OS saw (1.5G).
Read more

Login to Ubuntu with Yubikey

DISCLAIMER: I am by no means responsible for anyone using this tutorial to lock herself out of their system, nor for any damage, data loss, etc. You get the idea, use this at your own risk. With that out of the way, let's get to the fun part. This tutorial will outline the steps I used in my current Xubuntu (Ubuntu with Xfce) 16.04 to enable my Yubikey as a hardware key as a requirement to log in. I am using the default eCryptFS encryption method to encrypt a private folder (not my home folder) which also keeps unlocking when my user logs in. This process worked on my Arch desktop too, which I took from this genius post: https://blog.jamesthebard.net/archlinux-and-u2f-login/ Big thanks and credit to him! This tutorial will be mostly copy-paste, though I wish to do it with the Ubuntu specifics. The login manager I am using is LightDM , I also removed the screensaver that comes with Xubuntu out of the box. On Arch I was able to use GDM with success....
Read more

Directory tree in Bash

I was recently searching for a bash script that could be used to create the skeleton of a yaml file containing directory structure. The best material I found is here: http://systembash.com/content/one-line-linux-command-to-print-out-directory-tree-listing/ With the modification of this line: find ./ -type d | sed -e 's/[^-][^\/]*\//--/g;s/--/ |-/' I managed to produce the best skeleton: find ./ | sed -e 's/[^\/]*\// /g' Since I still have to shape this file up with more data I am not bothering with finding a method to put the ':' at the end of each directory as I can do it myself with little effort. I use Vim's visual mode to get rid of the extra leading spaces at each line.
Read more