Day 13 – Use External Resource Files

Goal: use external CSS and JavaScript resources in app

ruleset a60x497 {
  meta {
    name "use-resource-example"
    description <<
      use-resource-example
    >>
    author "Mike Grace"
    logging on
    use javascript resource "http://mikegrace.s3.amazonaws.com/kynetx-app-a-day/use-resource-example.js"
    use css resource "http://mikegrace.s3.amazonaws.com/kynetx-app-a-day/use-resource-example.css"
  }

  global {
    emit <|
      console.log("emit in global block");
    |>;
    css <<
      a {
        color: green;
        font-size: 60px;
      }
    >>;
  }

  rule run_after_resources_and_global_load {
    select when pageview ".*"
    {
      emit <|
        console.log("emit in action block in rule")
      |>;
    }
  }
}

• 9-10 load external resource file before the rest of the app
• 14-16 emit JavaScript before rules execute but after resources have loaded
• 17-22 emit CSS before rules execute but after resources have loaded
• 28-30 emit JavaScript after global and resources

use-resource-example.js file

console.log("JS resource file loaded");

use-resource-example.css file

p {
  font-size: 30px;
  color: blue;
}

App run on example.com with bookmarklet

Console output from running app on example.com with bookmarklet

Before app was run on example.com

Get the bookmarklet to try it out yourself!

Gratuitous day 13 Grace face