Andrea Ercolino, Software Engineer
WordPress plugin for Custom fields transclusion and execution
In my article about My take on a Vending Machine Simulation, I wanted to include a link to my Gist, together with a nice thumbnail. Having installed Nzymes on my blog, that wasn’t too difficult.
I thought about using an injection like this:
´{[ =<URL of the file>= | 1.thumb(1) ]}´
so that I could easily reuse it just by changing the URL.
Here are the contents of the execution enzyme.
The idea is to rely on the PagePeeker free service and return a properly built A IMG element.
In my article about How to setup a Multi Page Application in AngularJS, I wanted to include code from GitHub. Having installed Nzymes on my blog, that wasn’t too difficult.
I thought about using an injection like this:
´{[ =<URL of the file>= | 1.get-url(1) | =javascript= | 1.hl(2) ]}´
so that I could easily reuse it just by changing the URL.
Here are the contents of the execution enzymes.
The idea is to download the remote file once and store it on the server, in a directory structure like the url (except the protocol). Thus, at any later time, the local copy is returned.
The idea is to wrap the escaped code into a PRE CODE element, prepared for Chili to later highlight it in the browser. Fun fact: above hl highlights itself:
´{[ 1.hl | =php= | 1.hl(2) ]}´.
In my article about How to setup a Multi Page Application in AngularJS, I wanted to show a directory structure. I thought I would wrap it into a PRE element, to easily glance at the containment hierarchy. I started by jotting down only folders and files that I needed to talk about, hoping to simplify my readers task to go through them. But soon I realized that that structure was exactly what I was trying to describe in the first place and it didn’t make much sense to intentionally leave out other meaningful folders and files, just because it would be a pain to read. So I understood I had to find a way to make folders toggle on click. That would allow me to show only a portion by default, and allow the reader to freely move around in the hierarchy.
I looked in the Internet for a ready made solution with these features:
I couldn’t find anything that suited my needs, so I embarked into building something myself.
First I found an ingenuous article about making a Pure CSS collapsible tree menu. But if a way to expand collapse unordered lists is just a couple of lines in jQuery, and I still needed some code for converting the indented text to an HTML list, better to stay in the JS realm for all the solution and not mess with CSS. However, I really enjoyed how that guy took advantage of checkboxes to keep track of the collapsing state of folders.
After a couple of days, I shared my Indentation to Toggling List project on GitHub.
https://github.com/aercolino/indentation-to-toggling-list#indentation-to-toggling-list