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
on

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.

JAVASCRIPT
this.docs = [
    'templating',
    'tag',
    'mixin',
    'observable',
    'router',
]
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.
JAVASCRIPT
var shortcuts = document.querySelectorAll('h1,h2,h3')

And loop through them, passing them into my markdown tag

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

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.

JAVASCRIPT
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.

Summary

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.

How do you build re-usable interactive webcomponents without wasting your precious time bending the DOM to your needs? Get my latest content about building front-end web-apps delivered directly to your inbox and get free code samples for all the components I create.

See other articles

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.

About being part of the community

Hello there! A few months ago, I decided that I have to be more active in the community of web developers. Since then, I wanted to give talks about my favorite tools.

See all Articles