Browsed by
Category: JavaScript

Course/movie labeling solution using Firebase and ViolentMonkey

Course/movie labeling solution using Firebase and ViolentMonkey

There are pages that do not show information about items you watched, want to watch or don’t want to. May it be a movie database, TV guide, list of online courses, and so on. One such page is Highbrow which, for an unknown reason, has no account feature yet lists a lot of courses. It may be easy to forget which you completed and even harder to find a new course to start.

I’ll show how to create a kind of addon – a GreaseMonkey/ViolentMonkey script that will be run automatically once you enter that page (here: Highbrow) and show the items you marked as completed or todo. That script will connect with a free cloud database Google Firebase to store your list and provide an easy ability to mark every course. Here it is in action:

Read More Read More

Automatically enhance headers with hierarchy, links and smooth scrolling with offset

Automatically enhance headers with hierarchy, links and smooth scrolling with offset

There are several things useful in a longer document:

  • showing position of given heading in the structure
  • ability to create links to a heading
  • smooth scrolling to internal links
  • offset for scrolling if the top header covers some of the contents

Read More Read More

Programming paradigms in JavaScript – callbacks, Promise, async/await, promisify, functional Ramda and reactive RxJS

Programming paradigms in JavaScript – callbacks, Promise, async/await, promisify, functional Ramda and reactive RxJS

As a quick exercise, I wanted to read all URLs from my page’s sitemap instead of crawling the site. Just after I added a nested callback I decided to apply the Single Responsibility Principle and convert calls to Promises. Later I experimented with async/await and automatic conversion with Node’s promisify. Finally, I rewrote the solution in functional style using Ramda and reactive using RxJS. Read on to follow the evolution of callbacks in JavaScript.

Read More Read More

CSS – two headers – big and smaller sticky

CSS – two headers – big and smaller sticky

In modern web, you often see pages that have a big fancy header with a menu. It would be impractical to keep that menu visible all the time when scrolling because it would occupy too much of screen space. Therefore those pages often introduce a smaller header just with the navigation and logo that will be displayed as user scrolls down. I will show how to easily create such a header and add some animation to it.

Read More Read More

JavaScript – hoisting, var, let, const

JavaScript – hoisting, var, let, const

This post is a quick summary of the differences in JavaScript variable declaration.

Before ES2015 (previously named ES6), there was only one keyword to declare variables: var. The newer standard introduced two extra useful keywords: let and const.

Briefly:

  • var declares “almost global” variables
  • let declares block variables
  • const declares block read-only variables

Explanation follows.

Read More Read More

JavaScript: converting values to boolean or what is false and what is true

JavaScript: converting values to boolean or what is false and what is true

What will !x return? And !!x? It depends on what is x

!x will convert any value to a boolean, and !!x will negate the previous value. When x is a boolean, !x is its negation and !!x is back the original value x. But for other types, some magic happens thanks to auto conversion.

What exactly? I’ll explain in several cases. JavaScript recognizes 7 primitive data types, of which the most prominent ones are:

Read More Read More