Top

Importing and exporting files using ReactJS.

REACTJS
JAVASCRIPT
JSON
EXPORT
FILE
IMPORT
CLIENTSIDE
FRAMEWORK
UPLOAD

While learning ReactJS over this summer and one of the biggest mistakes I made was using a third-party library to outline my layouts, just because I didn’t want to go through all the hassle of designing a whole website.

I reviewed quite a lot of possible projects that I could try while in the process of learning ReactJS and also stumbled upon this frightful post about puppy dieing when someone builds a To-do list applications. It’s whatever at this point, if building a To-do application teaches me quite a lot of things about ReactJS, why not?!

Anyways, back to our context of importing files using ReactJS, it’s quite similar to Javascript but considering I used ANT Design library, the documentation wasn’t quite clear enough, or let’s just say incomplete for what I was looking to do.

I think, the biggest problem for me was that I was trying to read a .json file without completely uploading it to a server (fully client-sided). 1

  1. The reason behind me wanting to read a JSON file completely client side was because of the project I was working on. Trail is a task completion web-application developed in ReactJS, I wanted to make it as simple as possible as there was no plans to create a way to backup the data. 

Read More

Create a page scroll progressbar for websites using plain jQuery.

SASS
HTML
JQUERY
JAVASCRIPT
DESIGN
DEVELOP
WEBSITE
CODEPEN

Website scroll progressbar might not be the accurate terminology to describe this thing but hopefully can clarify the context I am referring to. It is basically a progressbar which progresses as you scroll below and regress as you scroll upwards. I’ve seen this implemented through a 3rd party plugins and libraries in countless websites.

Instead of using a whole different third party library for a simple task as this, I decided to create my own to implement in this blog and I must say, it looks fairly similar to any other 3rd party plugins out there.

Read More

Exporting PleX contents list using Python.

PYTHON
SERVER
PLEX
MOVIES
TV-SHOWS
LIST
EXPORT
XML
REMOTE
LOCAL
PARSE

It didn’t quite start out with my friends and family members asking me what movies or genre of movies I watch but more with a slab of XML content thrown at me when I mistyped my Plex URL in the browser. The difference can easily be noticed, even today, on Plex version 1.12.0.4829-*.

I run my Plex server in a static local IP, 192.168.1.111:32400, and I came across this absolutely ridiculous slab of XML content when I forgot to append /web after :32400 because the actual Plex Web URL format would be 192.168.1.111:32400/web.

Read More

Creating a web widget to get currently playing tracks using Last.FM.

JQUERY
SCSS
WEB
HTML
CODEPEN
AJAX
AUTO
LASTFM
MUSIC
WIDGET
DEVELOPMENT

It all started with my cousin asking what kind of songs I listen to, a simple question with simple answer. This is where the idea of Now Playing integration on my website came from. Considering I already used Last.fm which is the last stop for music enthusiasts, I kid you not; it is amazing to create and compile a library with an amazing and accurate recommendation. I am currently using it to Scrobble my Spotify’s Now Playing tracks and loving it so far. I noticed Last.fm provides free-to-use API, although requires an API key generated specifically for you to access the API Endpoints, it is free nonetheless. I was occasionally fiddling around with my music clients, namely CMUS, Spotify and QMMP and noticed they have Last.FM integration, built-in or in plugin form.

Fast forward; I started researching on Last.fm’s API Endpoints and noticed a section named User with bunch of sub-endpoints which includes User.getRecentTracks, the one which our widget will solely rely on.

Read More