Discussions

Expand all | Collapse all

She's a Rainbow

  • 1.  She's a Rainbow

    Top
    Contributor
    Posted 01-28-2018 17:08
    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


  • 2.  RE: She's a Rainbow

    Top
    Contributor
    Posted 01-28-2018 21:25
    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. 


  • 3.  RE: She's a Rainbow

    Posted 01-29-2018 13:35
    Hey Dan, I can't access the Service Worker Registration Page. This is great though, can't wait to try it out!


  • 4.  RE: She's a Rainbow

    Top
    Contributor
    Posted 01-29-2018 15:51
    Why not? The permission should be Everyone on the Internet.


  • 5.  RE: She's a Rainbow

    Posted 01-29-2018 15:56
    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"


  • 6.  RE: She's a Rainbow

    Top
    Contributor
    Posted 01-29-2018 16:11
    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?


  • 7.  RE: She's a Rainbow

    Posted 01-29-2018 15:20
    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?


  • 8.  RE: She's a Rainbow

    Top
    Contributor


  • 9.  RE: She's a Rainbow

    Posted 01-29-2018 16:33
    oooo good to know!


  • 10.  RE: She's a Rainbow

    Top
    Contributor
    Posted 01-29-2018 16:01
    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.


  • 11.  RE: She's a Rainbow

    Posted 01-29-2018 20:12
    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...


  • 12.  RE: She's a Rainbow

    Top
    Contributor
    Posted 01-29-2018 20:53
    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")) {
      ...
    }


  • 13.  RE: She's a Rainbow

    Top
    Contributor
    Posted 02-02-2018 13:59
    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.