Skip to main content

Ralsina.Me — Roberto Alsina's website

New in Nikola v6 part I: Typography

I am plan­ning to do a ma­jor re­lease (ver­sion 6!) of Niko­la my stat­ic blog and site gen­er­a­tor the next week­end. It's a ma­jor ver­sion be­cause there has been a ton of fea­ture work done. So, I will do a quick se­ries high­light­ing some of those im­prove­ments this week.

Today's Topic: Typography.

Niko­la used to suck at this. It pro­duced sites like most web­sites: ab­so­lute garbage when it came to ty­pog­ra­phy. So, we fixed it.

Here is what a cer­tain sec­tion of A Study in Scar­let looked like when built us­ing Niko­la 5.5.1 (the cur­rent re­lease):

Read more…

Six Earlier Days (Every Day, #0.5)

Cover for Six Earlier Days (Every Day, #0.5)

Review:

Ev­ery­thing good about Ev­ery Day is here, and ev­ery­thing bad is here too, both just small­er. So, 4 small stars.

You

Cover for You

Review:

Any­one who has ev­er been in­volved in a long-lived project knows the feel­ing this book de­scribes. It's fun, it's de­cent­ly writ­ten, and it has that feel­ing. I liked it.

The best reStructuredText directive ever. Really.

It all start­ed qui­et­ly with an Is­sue in the Niko­la bug track­er:

gustavodiazjaimes opened this issue 3 hours ago
oembed by micawber - feature sugestion

instead of using specific code for embed object (Youtube, Vimeo, Soundcloud) use a generic solution like https://github.com/coleifer/micawber

So, I looked at mi­caw­ber. And it's awe­some and I had nev­er heard of it be­fore. What it does is, it looks at a URL, and if it knows the site where it's point­ed at, it will then gath­er in­for­ma­tion from it. And us­ing that in­for­ma­tion it will cre­ate for you a HTML frag­ment so you can em­bed it in your own HTML page.

And how hard is it to turn that in­to a re­Struc­tured­Text di­rec­tive? NOT HARD AT ALL.

import micawber

class Media(Directive):
    """ Restructured text extension for inserting any sort of media using micawber."""
    has_content = False
    required_arguments = 1

    def run(self):
        providers = micawber.bootstrap_basic()
        return [nodes.raw('', micawber.parse_text(self.arguments[0], providers), format='html')]

So now, in Niko­la's github mas­ter you can do this:

Read more…

My Solution For Bootstrap's Freaking Fixed Navigation Bar Hiding Things

This is a well known prob­lem with boot­strap:

If you use a fixed nav­i­ga­tion bar at the top, when­ev­er you fol­low a link to some­where in­side the page, the ac­tu­al link tar­get is go­ing to be hid­den be­low that freak­ing nav­i­ga­tion bar.

There are a ton of so­lu­tion­s, which have two tons of mi­nor is­sues. There seems to be no way to solve this us­ing CSS and JS with­out caus­ing oth­er prob­lem­s.

There are a bunch of JS so­lu­tions around. Here's mine:

<script type="text/javascript">
 $(window).on('hashchange', function(){
     if (location.hash) {
         $('body').animate({scrollTop: $(location.hash).offset().top - $('#navbar').outerHeight(true)*1.2 }, 1);
     }
 });
 $(document).ready(function(){$(window).trigger('hashchange')});
 </script>

It works well, is short and has de­cent brows­er cov­er­age. It on­ly fails in the cor­ner case of click­ing on the same in­ter­nal link twice (which, who cares).


Contents © 2000-2023 Roberto Alsina