HTML5

URL, Hash, and History API

Kevin Lee

Dec 3, 2015 — 1 min read

Single Page App (SPA) brought a possibility to change application states from the client-side. AJAX using XMLHttpRequest object is the core technique of SPA development. SPA is cool because users can experience desktop application feeling, because SPA does not reload the entire page on each clicking on links.

However, SPA had an issue of bookmarking and Back button, because browsers could not detect state changes in the same URL. Web developer invented a workaround. Using the hash #, SPA can mark state changes, which means that bookmarking and Back button work properly.

However, another issue was raised from the perspective of Search Engine Optimization(SEO). Because the hash # are not crawlable by Search Engine, SPA turns out a bad option for marketing, although it wins user experience.

But another solution is provided. HTML5 introduced History API specification. Browsers implemented with History API (pushState) can now remember application states even when using AJAX techniques. And later, the onpopstate callback will be called to reconstruct the original page and its state without reloading a page.

It is also important to remember that the server side URL must work to serve the front-end side dynamic URL fragments, because, in this case, the front-side URLs are faking as real/true/standard URLs.

Helpful links:
http://blog.mgm-tp.com/2011/10/must-know-url-hashtechniques-for-ajax-applications/
https://lostechies.com/derickbailey/2011/09/26/seo-and-accessibility-with-html5-pushstate-part-1-introducing-pushstate/
https://lostechies.com/derickbailey/2011/09/26/seo-and-accessibility-with-html5-pushstate-part-2-progressive-enhancement-with-backbone-js/

How to Install NVM on Mac

Problem If you manage many node.js projects, you will definitely come across a time when your packages require you to use an upgraded node version. I think that using NVM is the best bet for this task. NVM is a version manager for node.js. You can easily install

Ghost was able to start, but errored during boot

Problem This error were reported when updating and starting Ghost. The error message is similar to this: Ghost was able to start, but errored during boot with: alter table `members_link_click_events` add constraint `members_link_click_events_member_id_foreign` foreign key (`member_id`) references `members` (`id`) on

Connect DigitalOcean droplets with SSH

First, create a key pair. This will eventually create a private key and a public key under ~/.ssh directory on your machine. $ ssh-keygen -t ed25519 It will ask the location to which it store the key files. You can specify your preferred location if needed. Enter file in which to

Ghost update with NVM

Problem Maintaining a ghost blog on its own VM requires diligent system updates and maintenance. Today, when I updated ghost using ghost-cli, it threw a message that I need to update compatible node version. My node was v14 and the new ghost update requires the version 18. While there are

Read more

How to Install NVM on Mac

Ghost was able to start, but errored during boot

Connect DigitalOcean droplets with SSH

Ghost update with NVM