CSS is Awesome Happy-CSS

Dealing with the daily frontend trouble with Martin Muzatko

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.

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.

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 = [
    'templating',
    'tag',
    'mixin',
    'observable',
    'router',
]

And loop through them, passing them into my markdown tag

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

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>`
}

that's already it! Later in the webpack config I just insert for the markdownLoader, but see for yourself.

I wanted to have a lightweight alternative to scrollSpy, which is heavily used in twitter bootstrap. A package that helped me to achieve that was Waypoints - although not perfect yet.

Another lightweight alternative to jquery scrollTo for smooth anchor scrolls was provided by zenscroll. One of the few just add water packages you can find out there with zero dependencies. Through that, I also learnt that there is a new css property for modern browsers: scroll-behavior. Chrome 49 and upwards will support this:

body {
    scroll-behavior: smooth;
}

#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')

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.