This project is an attempt at building a bookmarks visualiser in order to more easily reference resources when developing. In particular I found chrome’s bookmarks system quite irritating. Not being able to view a list of bookmarks without navigating to the management screen, I feel, makes it less useful. So, I built a parser that will build an interface to which I can browse my bookmarks with relative ease. It’s currently built with: vanilla JS, SASS, HTML, webpack, node.js, express, multer and some bootstrap icons. It is purely a personal project to keep up some practice with Javascript whilst also trying out some new techniques and libraries.

Currently the user can choose an exported html file or local appData file to upload (jsonlz4 or plain json) via express and multer. It animates in each folder’s contents as a folder is clicked and closes any folder contents that are no longer needed. It also displays a loader whilst a file is being parsed and read. If a non jsonlz4 / json / bookmarks html file is selected, then an alert will pop up having handled the error. In order to parse the different file types I have used two different parsing libraries which are called asynchronously via helper methods (bookmarks-parser, bookmark-parser).

The app also utilises responsive design and displays as intended on all major screen sizes. One main difference for the smaller screens is that each folder’s content is opened vertically rather than horizontally on larger screens. Therefore, making better use of the device and creating a better user experience. The code is viewable on my GitHub profile.