Javascript on myByways

Lock Screen "Launcher" Widget with Scriptable

Fri, 02 Dec 2022 00:00:00 +0000

iOS 16 introduced new lock screen widgets! Rather that installing various third party widdgets, I want to create my own using Scriptable. Here is a simple “universal” widget to launch an application or a Shortcut (bonus: or even the home screen too!)

Remove address bar in Firefox child windows

Fri, 21 Jan 2022 00:00:00 +0000

I use JavaScript bookmarklets in Mozilla Firefox to open my email, calendar, chat, etc. in pop-up child windows without a toolbar or menu bar. I do this in order to save screen real-estate, and to prevent me from using those windows for browsing and keep them visible all the time. I’ve been wondering how to have pop-up windows without the address bar….

A few of my bookmarklets

Sun, 18 Apr 2021 00:00:00 +0000

I have a few Javascript bookmarklets that I thought I’d share. Bookmarklets are short snippets of JavaScript code that run in the context of the current web page in the browser. I prefer them over extensions since I can see what the code does. There are plenty on the web, here are a few of mine.

Hide Firefox Toolbar and Tabs in Fullscreen

Thu, 15 Oct 2020 00:00:00 +0000

I use macOS spaces (virtual desktops) to arrange the various apps I frequently use. I have one space setup with two Firefox windows, in fullscreen Split View mode. But by default, Firefox windows are not really “full screen” for me, in that the tabs, toolbar and bookmarks bar will still be displayed. Here is my workaround to force the browser to full screen.

Single Page Bulma template with Smooth Scroll and Scroll Spy JavaScript

Wed, 30 Oct 2019 00:00:00 +0000

I was building a single page website using Bulma, and I wanted to achieve effects similar to what I was familiar with using Bootstrap’s Creative one page theme. As you know, Bulma (mostly) does not provide any JavaScript code, so I had to code the Smooth Scrolling and Scroll Spy features I missed. I intentionally avoided jQuery! So I present my solution using plain-old JavaScript.

Forcing Dark Mode with prefs-color-scheme Media Query

Sun, 11 Aug 2019 00:00:00 +0000

A few posts ago, I described how to set Dark Mode with the prefs-color-scheme Media Query. The browser will detect the OS Dark Mode setting (set in the Windows Control Panel or macOS System Preferences) and use the appropriate CSS Media Query rule. But what if you want to programmatically set either Dark or Light mode irrespective of the OS setting?

Dark Mode with prefers-color-sheme Media Query

Wed, 03 Jul 2019 00:00:00 +0000

Dark Mode is all the rage with desktop and mobile OS’es right now. Interestingly, modern browsers can detect the OS dark mode preference, and use a different set of CSS styles respectively for light or dark modes! Here’s how I updated My custom Grav theme.

My custom Grav theme

Mon, 20 May 2019 00:00:00 +0000

I re-designed my blog template using a new CSS framework called Bluma, re-developed all JavaScript without jQuery and customized some plugins. This was quite a journey, so this post is going to be quite long too!

Chart.js - it's easy!

Sun, 20 May 2018 00:00:00 +0000

In my post yesterday, I inserted a chart using Chart.js. I didn’t plan to, but after 5 minutes reading the documentation, I was convinced to try - and it turned out to be easy! Here’s how it’s done.

Convert SVG to PNG using your browser

Sat, 23 Sep 2017 00:00:00 +0000

Lots of web pages now rely on SVG instead of PNG or JPG images. SVG stands for Scalable Vector Graphics, an XML-based vector image format that scales well, unlike bitmap images (bitmaps become pixelated when up-sized). I recently wanted a quick way to convert a SVG to PNG, and discovered modern browsers (read: Chrome and Firefox) can do this with a simple bit of code.