Top

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

Creating an animated News/Announcements ticker using CSS and jQuery.

JQUERY
SCSS
NEWS
ANNOUNCEMENTS
TICKER
ANIMATED
WEB
HTML
CODEPEN

We come across multiple websites with news ticker now-a-days, mainly on the websites dedicated to serving news to the readers. It sounds very simple but its simplicity is what makes it even more desirable. In the end of the day, animation draws the reader’s attention towards the ticker, constantly if I might add, which is a good thing. Whether we have a static ticker with constant data or dynamic data, ticker makes it beautiful in a way to view newly added/updated contents.

Image

I would like to clarify beforehand that the terminologies used, such as “announcements”, “news” are meant for similar purposes for this tutorial. You can name it whichever or whatever, I named it announcement because this is my personal blog and not a news website.

Read More