My blog includes a sidebar that is sometimes visible (on the home page or when browsing by a tag or category). However, after scrolling far, the scrollbar scrolls too and becomes invisible. I wanted the sidebar to be visible even after scrolling, but it had to be smart.
…Let’s assume we want to retrieve some data from an API and show it together with the original data. For instance, I’ll use the DuckDuckGo API to find capital names for countries.
…Sometimes I create pages with minimal interaction and amount of JavaScript – for instance, with a hamburger menu, toggle or tabs. They require simple yet repetitive JavaScript code. There are nice big components or frameworks that solve this problem (like Bootstrap, React, Vue), but the problem is their size and often a complexity to set up. Recently (in November 2019), a new library emerged – Alpine.js.
Read moreI don’t want to create a guide on the declaration files but only share some tips: what is an ambient declaration, what’s specific about ambient namespaces and what is the result of using ambient namespaces.
…The script I created in Course/movie labeling solution using Firebase and ViolentMonkey worked well on one page but randomly failed to work in another. It was caused by the page’s JavaScript code which altered the behavior of XMLHttpRequest. Because I was not able to resolve it, I decided to convert my script into a Chrome extension, which would be executed in an isolated environment.
…While trying to enhance a Chrome plugin that translates text on pages (GitHub), I wanted to show two translations at once – of the pointed word and of the entire sentence or paragraph. Technically it was not hard except for the part of retrieving two translation results and displaying them in one popup.
…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:
…There are several things useful in a longer document:
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.
…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.
…