thingsinjars

  • 8 Jun 2015

    PrologCSS

    Seeing as both Prolog and CSS are declarative languages, I found myself wondering if it would be possible to create a mapping from one to the other. It was an interesting thought experiment that quickly found itself being turned into code.

    Way back when, Prolog was actually one of the first languages I learned to program in. It had been a while since I'd last used it for anything (a chess endgame solver in high school, I think) so I looked up an online tutorial. The following example is derived from section 1.1. of Learn Prolog Now

    Simple rules

    If you think of Prolog facts as denoting true/false attributes of elements, you can consider every known item in a KnowledgeBase (KB) as a DOM Element. For example:

    mia.
    

    Is equivalent to:

    <div id="mia"></div>
    

    While

    woman(mia).
    

    Equates to:

    <div id="mia" class="woman"></div>
    

    You can make multiple statements about an item in the KB:

    woman(jody).
    playsAirGuitar(jody).
    

    Which is mapped to:

    <div id="jody" class="woman playsAirGuitar"></div>
    

    You can then represent these facts using visual attributes:

    .woman {
      background: yellow;
    }
    .playsAirGuitar {
      border: 1px solid black;
    }
    

    The only real issue is that CSS values can’t be aggregated. If they could be, you could always use the same attribute (e.g. box-shadow) and combine them:

    .woman {
      box-shadow: 1px 1px 0 red;
    }
    .playsAirGuitar {
      box-shadow: 2px 2px 0 red;
    }
    

    You'd want this to render two box-shadows, one with a 1px offset and one with a 2px offset.

    Instead, you have to use a unique CSS attribute for each class of facts. However, for the simplest examples, It’s not too complicated...

    If you want to query the KnowledgeBase, you need to map a standard Prolog query such as:

    ?- woman(mia).
    

    Into the a different output mechanism: HTML.

    The response is visualised in HTML and CSS using the following rules:

    • There is an element with id "mia"
    • There is a class "woman"
    • The element with ID "mia" has the class "woman"

    In the demo below, you can read this by verifying that the #mia div has a yellow background. Done.

    Here's the complete KnowledgeBase for the first section of "Learn Prolog Now".

    <!-- woman(mia). -->
    <div id="mia" class="woman"></div>
    
    <!-- woman(jody). -->
    <!-- playsAirGuitar(jody). -->
    <div id="jody" class="woman playsAirGuitar"></div>
    
    <!-- woman(yolanda). -->
    <div id="yolanda" class="woman"></div>
    
    <div id="party"></div>
    

    And here are the queries that could be answered by looking at the visual output:

    ?- woman(mia). 
    Yes (the element with id="mia" has a yellow background)
    
    ?-  playsAirGuitar(jody).
    Yes (the element with id="jody" has a solid black border)
    
    ?- playsAirGuitar(mia).
    No (the element with id="mia" does not have a solid black border)
    
    ?- playsAirGuitar(vincent).
    No (there is no element with id="vincent")
    
    ?- tattooed(jody).
    No (there is no CSS style for a class '.tattooed')
    
    ?- party.
    Yes (the element with id="party" exists)
    
    ?- rockConcert.
    No (the element with id="rockConcert" does not exist)
    

    View the output

    More complex rules

    It starts to get tricky when you have rules depending on other values such as

    ?- happy(jody):- playsAirGuitar(jody)
    (“If jody plays air guitar, jody is happy”)
    

    But I think some clever element nesting could handle that.

    First, change the structure so that the classes/properties are on parent elements

    <div class="woman">
        <div class="playsAirGuitar">
            <span id="jody"></span>
        </div>
    </div>
    

    Make properties into divs and entities into spans

    Then update the structure of the rules:

    .woman span {
        background: yellow;
    }
    .playsAirGuitar span {
        border: 1px solid black;    
    }
    

    Now you can make rules dependent using the cascade. First, add the property:

    <!-- happy(jody):- playsAirGuitar(jody) -->
    
    <div class="woman">
        <div class="playsAirGuitar">
            <div class="happy">
                <span id="jody"></span>
            </div>
        </div>
    </div>
    

    Then create the rule:

    .playsAirGuitar .happy span {
        box-shadow: 1px 1px 0 red;  
    }
    

    The rule for happy(jody) will only be true (show box-shadow) if the rule for playsAirGuitar(jody) is also true.

    View the output

    Conclusion

    Sure, it's all a bit silly but it was quite a fun little experiment. There are probably a few big aspects of Prolog that are unmappable but I like to think it might just be possible to create a chess endgame solver using nothing but a few thousand lines of CSS.

    Ideas, Development, Geek

  • 13 Nov 2013

    Hardy v1.1 - Cartwright

    Thanks to some great work by Daniel Wabyick and his team, Hardy has had a bunch of improvements over the last few weeks.

    The biggest change in this version is that, if you have GraphicsMagick installed on your machine, Hardy will use it for native image diffs but fall back to the built-in method if you don't. The current image diff technique involves creating an HTML page with a canvas, opening that with PhantomJS, loading the image into the canvas and using imagediff.js to calculate the diffs. It works everywhere PhantomJS works but it's slow. Daniel benchmarked the difference and it's a huge performance gain if you rely on image diff tests.

    There's also some minor improvement around logging and the cucumber report format but I'll write about them later once I've had a chance to update the Hardy website.

    CSS, Geek, Development

  • 23 Oct 2013

    High-definition CSS Testing!

    Well, kinda. Before giving my Automated CSS Testing talk at CSS Summit in July, I recorded a video of it as a backup. If everything fell apart during my presentation, Ari could seamlessly switch over the One I Made Earlier. Fortunately, the Internet did what it does best and just worked fine.

    That means I have an Automated CSS Testing video all ready and waiting that nobody's seen!

    Yes, it does get progressively darker as you watch. That's not your eyes playing tricks on you, that's me sitting on my balcony recording as the sun went down.

    CSS, Opinion, Development

  • 15 Sep 2013

    Hardy, meet Travis

    While developing the website for Hardy, it seemed obvious that I should be writing Hardy-based tests for it. What better way to figure out how to simplify testing than see what bits of the process were the hardest?

    The site is hosted on GitHub using the gh-pages branch of the hardy.io project. I've played with various toolchains in GitHub pages in the past - csste.st uses Wintersmith, for example - but wanted to follow my own best practice suggestions and automate the process of getting an idea from inside my head, through the text editor, through a bunch of tests and out onto production as much as possible. The main Hardy project uses Travis CI to run unit and acceptance tests on every commit so it seemed obvious to use it for this. What I've ended up with is what I think is a nice, simple process. This is designed for sites hosted on GitHub Pages but is applicable to other sites run through Travis,

    The manual steps of the process are:

    • Make change in your website master branch
    • Preview changes locally
    • Commit changes and push to GitHub

    After this, the automation takes over:

    • Travis pulls latest commit
    • Builds website project to dist folder in master branch
    • Launch web server on Travis
    • Run Hardy tests against local web server
    • On successful test run, push (via git) to gh-pages branch

    The full process is used to build hardy.io. Have a look at the .travis.yml, package.json and post_build.sh files mostly.

    CSS, Development, Javascript

  • newer posts
  • older posts

Categories

Toys, Guides, Opinion, Geek, Non-geek, Development, Design, CSS, JS, Open-source Ideas, Cartoons, Photos

Shop

Colourful clothes for colourful kids

I'm currently reading

Projects

  • Awsm Street – Kid's clothing
  • Stickture
  • Explanating
  • Open Source Snacks
  • My life in sans-serif
  • My life in monospace
Simon Madine (thingsinjars)

@thingsinjars.com

Hi, I’m Simon Madine and I make music, write books and code.

I’m the Engineering Lead for komment.

© 2025 Simon Madine