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

About these ads
This entry was posted in Kynetx. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s