She's a Rainbow

  • 3
  • 2
  • Question
  • Updated 10 months ago
  • Doesn't Need an Answer
  • (Edited)
She's a Rainbow ~ She Comes in Colours Everywhere



This weekend I was listening to my Rolling Stone discography and came upon this delightful song:



I suddenly realized that I had forgotten to explain how to customize any aspect of QuickBase's CSS including colors. With all the commotion last week over the Branding & Application Bars and the new class definitions for Vibrant and Success I rushed to put together this application that demonstrates a new way to customize any aspect of QuickBase's look and feel using Service Workers:

She's A Rainbow
https://haversineconsulting.quickbase.com/db/bne59biqr

Have a look around and you will note that the Branding & Application Bars have the trendy new purple color scheme popularized by world famolus Pantone Color Institute:

Color of the Year 2018 - Ultra Violet 18-3838
https://www.pantone.com/color-of-the-year-2018

Now let me show you how you can modify any aspect of QuickBase's CSS using a Service Worker by making several color and structural modifications to the Branding and Application Bars. Using an evergreen version of Chrome, FireFox, Opera, UC Browser or the Fall Creators Edition of Edge click the button labeled "reg.html" and dismiss the alert messages after it shows up:

If you now visit the various tables you will see that each table has a different color scheme for the Branding & Application Bar and the the fourth table has hidden the Branding Bar:
Home     - #74489D Dark Lavender
Table #1 - #6495ED Cornflower Blue
Table #2 - #ED6495 Light Crimson
Table #3 - #95ED64 Inchworm
Table #4 - #74489D Dark Lavender - Branding Bar Begone!

Table #1 Screenshot


Table #4 Screenshot (Branding Bar BEGONE!)
We achieved these various effects without modifying anything in the native QuickBase Branding configuration - rather we modified QuickBase's nav.css file "on-the-fly" during transport of the file from QuickBase's Server to your Browser's rendering engine using simple Service Workers. For demo purposes explained in the notes below, we actually used four slightly different Service Workers - one for each table. Here is the full code for sw1.js that controls Table #1 and links to all four Service Workers.

self.addEventListener("install", event => {
  event.waitUntil(self.skipWaiting());
});
self.addEventListener("activate", event => {
  event.waitUntil(self.clients.claim());
});
self.addEventListener("fetch", event => {
  var navCSS = "https://assets.quickbasecdn.net/res/873e615-1340/css/themes/classic/nav.css";
  
  var init = {
    status: 200,
    statusText: "OK",
    headers: {"Content-Type": "text/css"}
  };
  if (event.request.url == navCSS) {
    event.respondWith(
      fetch(event.request.url + "?rand=" + new Date().getTime()).then(response => {
        return response.text().then(resp => {
          var respModified = resp.replace(/74489D/g, "6495ED");
          return new Response(respModified, init);
        });
      })
    )
  }
});

Service Worker for Table #1
https://haversineconsulting.quickbase.com/db/bne59biqr?a=dbpage&pagename=sw1.js

Service Worker for Table #2
https://haversineconsulting.quickbase.com/db/bne59biqr?a=dbpage&pagename=sw2.js

Service Worker for Table #3
https://haversineconsulting.quickbase.com/db/bne59biqr?a=dbpage&pagename=sw3.js

Service Worker for Table #4
https://haversineconsulting.quickbase.com/db/bne59biqr?a=dbpage&pagename=sw4.js

In a nutshell. we un-cached the CSS file nav.css and substituted a new color for the default color #74489D in the original file and responded with the modified CSS content.  Yep that is all the code does - pretty simple.

What could be simpler and more obvious? - if you don't like the defaults just change them!
 

In the case of the Table #4 we left the color alone and simply changed the Branding Bar to display: none. Begone Branding Bar! I did not like your looks and you were only taking up valuable screen space.

Service Worker Registration Page
https://haversineconsulting.quickbase.com/db/bne59biqr?a=pageedit&pagename=reg.html

Notes:

(1) Obviously this technique could be used to modify any aspect of QuickBase's CSS - not just colors. In fact, Service Workers can be used to  modify any aspect of QuickBase whatsoever and is why it is affectionately called god mode for QuickBase.

(2) Note the changes made by the Service Worker do not result in any jank (ie screen flicker) in the display. This is because the changes are made BEFORE your browser even starts rendering the page!

(3) Admittedly the Service Worker code is fragile because it makes assumptions about the structure of QuickBase's nav.css as well even the fact that such a file is even used to construct the page. These concerns are not even significant as the Service Worker could easily be written in another fashion. I explicitly avoided addressing this issue as it would only make the Service Worker longer and cloud understanding its utterly simple purpose (to modify QuickBase's native styling).

(4) MAJOR TAKEAWAYS:
  • Rolling Stones Good
  • Service Workers is god Mode for QuuickBase
  • Agile Bad
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,572 Points 20k badge 2x thumb

Posted 10 months ago

  • 3
  • 2
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,572 Points 20k badge 2x thumb
BTW, Service Workers is implemented in Edge on Windows 10 but you may have to get the Fall Creators Edition through the Windows Insider Program. This is what I am running on the current machine:

Windows Insider Program Fast Channel
Windows 10 Home Insider Preview
Version 1709
OS Build 17083.1000

Microsoft Edge 42.17083.1000.0
Microsoft EdgeHTML 17.17083

But I have to admit it is very confusing checking on what you have installed, installing the correct version and the installation/update instructions appear to change as time goes by. 
Photo of Ryan

Ryan

  • 120 Points 100 badge 2x thumb
Hey Dan, I can't access the Service Worker Registration Page. This is great though, can't wait to try it out!
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,272 Points 20k badge 2x thumb
Why not? The permission should be Everyone on the Internet.
Photo of Ryan

Ryan

  • 120 Points 100 badge 2x thumb
Not sure, I can access the tables just not the reg.html page. It asks me to sign in and then says: 
"Sorry, you're not a registered user of the Quick Base site haversineconsulting.quickbase.com"
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,272 Points 20k badge 2x thumb
Well I just logged out and was able to access the sw.js URL.

What browser are you using? Does the demo work for your? Screenshot or other debug info?
Photo of Ursula Ll

Ursula Ll

  • 1,446 Points 1k badge 2x thumb
Great idea Dan!! I wish we could modify the color for the home & user icons, but it seems these are in fact pngs, not css, which is crazy. I guess I could save them, modify the color as needed, and then override it with this process. May work?
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,272 Points 20k badge 2x thumb
It is a sprite:

https://assets.quickbasecdn.net/res/873e615-1340/css/themes/classic/images/icons/tableIconSprite24.p...

So if you came up with an alternate sprite of the same structure it should be simple to implement in a Service Worker as there is only one URL to listen for.
Photo of Ursula Ll

Ursula Ll

  • 1,446 Points 1k badge 2x thumb
oooo good to know!
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,572 Points 20k badge 2x thumb
With a Service Worker it is trivial to substitute one URL for another. In fact I created demo (non-QuickBase) for a local meetup group that does exactly this:

Demo 3 - Simple Service Worker - Network Proxy - Substitute Response
http://dandiebolt.com/sw/demo3.html

Here is the URL for the Service Worker and the code:demo3_sw.js


self.addEventListener("install", event => {
});
self.addEventListener("activate", event => {
event.waitUntil(self.clients.claim());
});
self.addEventListener("fetch", event => {
if (event.request.url.match("clubs")) {
event.respondWith(
fetch("images/red_joker.png")
)
}  
});
https://dandiebolt.com/sw/demo3_sw.js

In this case I was just listening for a club card image to be fetched and if so I responded with the red joker image instead. In general It would be simple to change the code to detect particular icon and substitute a custom one. The only issue I can think of off the top of my head is that the icons might be in a sprite so you might have to do a little more work generating the substitute sprite.
(Edited)
Photo of David Maskasky

David Maskasky

  • 160 Points 100 badge 2x thumb
https://assets.quickbasecdn.net/res/873e615-1340/css/themes/classic/nav.css

Your reference to the CSS file is going to break when Quickbase updates their repository.  873e615-1340 changes to something else periodically.

You can get around this by replacing the first part of the url with Quickbase's global JS variable gResDir.  Only issue then is that the service workers will execute before that variable loads.

If only there was a way for service worker to cache that variable from the previous page load.  Hmm...
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,522 Points 20k badge 2x thumb
I made the shortest script to not confuse anyone on the basic functioning of the code. There would be dozens of ways to make the script less fragile. The issue you pointed out could be handled with a simple pattern matching test:
if (event.request.url.match("css/themes/classic/nav.css")) {
  ...
}
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,522 Points 20k badge 2x thumb
Updated essential code placed in Pastie Database:

Pastie Database
https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=621

To avoid the sensitivity of breaking when the CDN version is changed the code now matches on the relative path:

  var navCSSPath = "/css/themes/classic/nav.css";

  if (event.request.url.match(navCSSPath)) {...}

The code is still sensitive to detecting the original and unmodified default color (#74489D) but it is probably best to let the code fail and investigate and fix it until a best practice is developed (Earth is at the early stages of using Service Workers with QuickBase). Reference:

var respModified = resp.replace(/74489D/g, "6495ED");

In the future when QuickBase uses some type of enhanced CSS build technology (LESS, SASS, PostCSS etc) there would probably be a more robust way to parse and substitute the CSS with a Service Worker. Actually I have no idea what QuickBase is dong with their CSS during the build process but they must be doing something as the CSS appears minified.
(Edited)