Updating the riot cheatsheet

It has been roughly a year since I created the riot cheatsheet. With the knowledge acquired by now, it is time to start from scratch. #news 4 #riot 12 #nodejs 2 #webpack 3

Martin Muzatko Written by Martin Muzatko

Projects grow and so do you. What have you achieved within a year of learning new tools and approaches? Have you achieved your goals in learning new technologies? New approaches?

I have. Partially. Looking back, I can just laugh about what I used to do, and I did a lot of mistakes in my todays mindset and worldview.

  • I preprocessed my less on the clientside
  • I had all the libraries as static files as part of the repo
  • The layout was unreliable, but it was a beginning with flexbox
  • I used HTML to write the contents, which turned out to be tedious
  • A lot of information was redundant
  • the space provided for code was too little
  • What makes it worse, even contributors had to deal with the HTML I created. Yikes!

With my current work on frontend automation, and a lot of knowledge that came with learning about nodejs and npm, I decided to fork from a very flexible setup from a recent talk about webpack.

Link to the Cheatsheet: http://martinmuzatko.github.io/riot-cheatsheet/

What's new

I used webpack so I'm able to load markdown files as HTML, and include them in my riotjs app. The config for that was pretty simple to write and is available for you, to see on github.

Organizing the contents in markdown has been a breeze, compared to HTML. Even though I weren't that flexible anymore, I found my way around by creating a navigation based on the files to include.

this.docs = [
Problems I think most of the time went into creating a filterable search menu. I wasn't satisfied, that you only could get results for the string you looked for. I wanted to logically group them, so I pretty went crazy on the search "algorithm". I collected all the headings after all markdown pages were rendered.
var shortcuts = document.querySelectorAll('h1,h2,h3')

And loop through them, passing them into my markdown tag

    <div name="content"></div>
        this.on('mount', () => {
            this.content.outerHTML = require(`../../docs/${opts.file}.md`)

I was astonished, how easy it is to make this possible. Webpack knows that I'm using a variable here and includes all files I will require into the bundle. Very smart and easy, no additional configuration other than html!markdown.

Extra spice

A nice little feature was, to use prismjs as the code highlighter.

var marked = require('marked')
var renderer = new marked.Renderer()
renderer.code = (code, language) => {
    var html = prism.highlight(code, prism.languages.javascript)
    return `<pre class="language-${language}"><code class="language-${language}">${html}</code></pre>`

A lot of heart and soul went into finding a way to automatically group the results together based on level (h1-h3). I'm pretty satisfied with the end result.

Another search feature I wanted to have, is fuzzy search. By splitting the input based on the space, occurences can be highlighted before or later in the results.


I think building your own projects with the knowledge you have, and getting to know a lot more during the way is one of the most rewarding actions you can take, to extend your horizon. Even if you are stuck, on a platform like github it is very likely to find support for your roadblocks. Do you want to start using software that works for you? Have a read on frontend automation. If you want to work with the same easy but powerful frontend library, make sure to visit an introduction to riotjs.

Do you need inspiration how to solve those tricky issues? Issues that when resolved once and for all, would ease a lot of daily user interface interaction.

Get on my list! You are invited to reply to any email with your important questions and get a hand-crafted reply with hands-on guides. You will learn how to solve your individual use-cases. Fill in your name below and get in touch today :) . It is about a nice conversation from developer to developer after all.

See other articles

Check username and email availability without a page refresh

Learn how to implement asynchronous form validation for your projects. This allows feedback before tedious forms are completed

Using noUiSlider as range slider to filter between two numbers

Do you know these fancy range sliders that can filter items with the blink of an eye? You move around a handle and get the desired results right away. In this article, you are going to learn how to implement a range slider to filter your data.

How to group together filter inputs to obtain and combine their values

When you want to filter a set of products or other lists, naturally you have to think how you could wire together the variety of filters. With this article, you will learn how you can retrieve the data and combine the values to filter your items in real-time.

Becoming a zombie

Do you find yourself losing track of time again? Without really knowing, a year passed. As day for day you continue your work, you had some random bursts of motivation, but you know that these kind of motivation spikes won't get you anywhere in the long term.

See all Articles