Heckling Jekyll

It has come to my attention that when this blog is served it properly references its main stylesheet on the main page but loses track of it when you navigate to an inner page.

This problem does not show up on a local server. I am trying to grok what these guys say about the fubar

Jekyll it seems to me is more trouble than it is worth.

Notes of a Paraguayan Pilgrim

Marginal commentary on recent screenshots. They help me measure Paraguayan progress.

One year ago, boy did I truly suck at this.

But now after much wracking of the brains — or «racking, tanto faz » moments of technical insight and front-end loveliness. Overcoming configuration glitches with Bootstrap Material Design and dropping ts drawers.

View the images full size right clicking and choosing &aquo;open image in new indow»

But first.

In Memoriam The Bossa Nova Watts

But first with great tristeza and saudades do we relate the passing of Neuza Brancaccio Parahos de Almedia earlier this month — wife and mother and sogra and a lifelong grand piano admirer of Gershwin and Tom Jobim and Debussy.

We have just found a stash of parituras in the apartment in recent days — right where she had set them dutifully aside to be a full-time mother in the Sixties.

I understand she played beautifully. We are endeavoring to find a worthy NGO that would put the hands of an eager child on the family ivories and ebonies.

I have a Web design idea for all the family photos meanwhile.

Watts — our affectionate apelido for Dona Neuza — dot Github dot Eye Ô do Borogodó. A carousel on Daemonite Material or Propeller.

Why not?

Ride a painted pony on the spinning wheel ride &— with captions by Neuzinha and who knows? Some multimedia? Gershwin «Concerto in F»?

Or create a Watts memorial mobile app with Framework7 Watts Up? I am supposedly more into mobile first nowadays. I am a dedicated follower of fashion.

Holding Down the Fortaleza

I am just no damn good at emotional moments like this but I am doing my best to shore up the morale of my Neuza as we pack up an entire Perdizes condominium lifetime along with the other offspring of Geraldo and Neuza. Keeping the doggies walksied and the poop scooped. Field trips to the Sacolão fr alimentos. Available for long, nostalgia converax e bate-papos.

We are already meeting prospective inquilinos. The Sambodian real estate market waits for no Watts.

Paulo flew in on his way to Chile. He and Paula and the Chilean lionesses their daughters had Just undertaken a grand European tour, planned for years.

Watts was always so proud to have a musician in the family and Paulo literally rocks — and sambas and choros and jazzes it up, too — while Júnior is a remarkable painter.

And Neuzinha a helluva of a lusophone prose wrangler you ask me. She is writing about Coney Island and Brighton Beach at the moment and enlisting my saudades of Brooklyn.

Will someone someday take pride in my Web design?

Neuzona meanwhile lived for Tom and Vinicius and «Inútil Paisagem». And «Rhapsody in Blue»

Geraldo Senior, who passed a couple of years ago, always reminded me of Juscelino Kubitschek — the «bossa nova president» who built Brasília.

I am planning to read his entire library now, starting with the juvenile literature of Monteiro Lobato. Think L. Frank Baum but with banana plantations.

Still trying to figure these crazy Brazilians out after all these years.

Dropping Drawers

But to so-called work, where dropping and popping drawers is the order of the day.

Above, a Bootstrap Material Design template of which I had to rejigger the JS a lot when it did not function at the junction — the responsive menu especially.

Most JS plugins worked as advertised, so what is the fubar Mister Fez?

Megaboilerplate might be a better choice

… but I like Propeller most of all I think …

… and W3.

Bad Bandbreadth

Saturday morning. Swampy hot.

Too hot even for the crazy dogs and that Englishman who has been lending me police fiction from the motherland in the mother tongue.

I have warned a friend of mine his student that she risks acquiring a rollicking Cockney accent from Steven but she does not grok «My Fair Lady» it seems. I could teach her California surfer dude instead.

Work is what the Material Design drawer boilerplate has not been doing but as you will see I dei um jeito and now it is ótimo.

I am also running the command-line tool speedtest constantly in order to prove that Tim LIVE is providing subpar or rather totally fubar service just as I suspect. Thirty-five megas uma ova. I am writing the readings down you bastards. How am I supposed to know if my project is busted or not if communication with my remote stylesheets is touch and go?

And then Eletropaulo left us in the dark for seven hours yesterday.

Maintenance only when there is risk of death from ligntning bolts blowing up iffy transforms as happens every time it rains. And it rains a lot.

First World rates for Third World service.

That there is shock therapy privatization for you.

Dialogical Materialism au Gogo

But.

A big but.

Lately I have gravitated inexorably to all things Material and Bootstrap-based and Material Bootstrapped. With quite a few digressions, of course.

Above, the intuitive to use and very educational CE Material.

Excellent docs. Simple. Semantic. Step by step. This is the tag structure. These are the attibutes. Is that too much to ask?

Above we see Epistles to the Romans and Romanians and Ramones in a .card layout. Nothing spectacular.

Here on the other hand we have a full-page modal — analogous to a drawer.

My exercises with CE Material taught me a bit more about flexbox vertical alignment and the background to the topic, too. I am studying this in-depth next semester.

Well, just auditing, really though I am looking into cursinhos at USP maybe.

The drawer works correcty but dropdowns do not and the collapsing navbar is totally food for bears.

You see that? Have you encountered it? The list items are not stacked in a menu box under the dropdown button. Even though the dropdown from the horizontal menu opens as desired. I set this project aside for the time being..

Perservering with Bootstrap Material Design meanwhile — I started over and rejiggered the dependencies — has led to a truly satisfying moment of insight.

Not working at first.

And then not fubarred at all.

Olha só uma gaveta persistente — in this case, cellular-sized and duly collapsed. Click the pancakes and bazinga!! a menu listing all the Los Angeles suburbs I lived in between 1968 and 1980. Add Claremont and Pomona.

A persistent push drawer I think they call it. I read Material.io religiously but I do not always grok it fully.

And I had been having trouble with the starter template shown here.

>

Nav collapses on medium and down and then you click the pancake stack to activate the side or top or left or right or bottom drawer.

List items are Southern Californa suburbs I lived in or spent time in as a kid so far as I can remember. It was very peripatetic my life back then.

W3 For Me

Even more enlightening: the W3 scheme of things. I love this stylesheet with a passion. You see that persistent sidebar behind the modal? Hit F12 on Chrome to make it mobile telephone size and it does all the right things pretty much on its own.

Cards in a modal mood over tabled going through the motions and a variety of other types of modal. Using the grid for example.

And here is W3 with more Lawrence Welk accordions of FAQs and also with multimedia tab navigations featuring the Kinks and Stones and Who and such.

Yardbirds. Somewhere here I am working on a nested accordion with band member subnavigation. Using those Led Zeppelin symbols whatever the hell those were supposed to mean.

I think it is in my main Semantic UI kitchen sink page.

But yes I actually remember the Sixties if you must know. Dylan goes electric. Folkies like my father — a regular mouth-breather of a Stanley Kowalski — are indignant.

And yes but Megaboilerplate also, too. Really handy for scaffolding up a project fast, with a generous range of components. And Bootstrap helper classes — I have learned to love those.

Excellent said Mister Burns. The accordion items are members of the A Team. Extremely awful TV from the Hideous Seventies.

The configuration wizard also gave me a way into Foundation at last — which I am otherwise too lazy to learn.

Who can grok so many platforms? But we try. And initial fubars have been dealt with now if I decided to turn my attention to the stiftung. Foundation in German is a stiff tongue.

The Oh, Socratic Daemonite

And then there is Daemonite Material.

The name reminds me of bearded cattle-droving Mennonites go figure.

It has what in my paltry experience is a somewhat unique top-drawer stacking overlay nav that I find really clever and handy.

And another version — prototype for an homage to Madame Watts as I said.

All those old photos where she channels Catherine Deneuve to Neuzinha’s Dorothy Gale in the back seat of the family Aero Willys.

But there are so many frameworks in this Material-hypen and prefix-Material category these days it is hard to keep them organized in the cabeça.

On the Javascript side alone, Material for Polymer and Angular and React and Ember and Vue.

I have very little JS but I have been working a little bit with the latter recently. I like its «idiots welcome» ethos and have built some easy stuff before getting bogged down a little in open drawer and close drawer.

But there above is a successful modal yodel, at least

And then there is content in a flex grid cell, jumbotron-style, in Vuetify, above.

What is not working yet is the sliding of the drawer and the collapsing to the hamburger pancake waffle or crepe stack. We need the digital equivalent of butter for that.

I will get back to it.

The Material Sublime

Now as to dialectical materialist CSS frameworks, there are at least two going by the name Material CSS, with folder and file names that overlap. Pisses me off a little.

Here is one that sort of worked out for me during some preliminary fumbling. Which one? Confused and what is more labeled my folders confusingly.

On the other hand, Materialize is memorable, entirely. Just remind yourself of Engineer Scott pulling a slider control and triggering a cheesy tinfoil-based rematerialization effect with beep-boop sound effects.

The old episodes are running on Netflix here by the way. Funny how the familiar commonplaces are not yet set in stone. Giving her all she’s got, Captain!

Materialize in fact has really grown on me lately. Above, a bottom sheet. Below, a partially improvised hero page — just make the container height relative to viewport height — with the carousel that ships with the software.

I do like the infinity spinner effect. Better would be a carousel with a lightbox effect on each image, while captions on hover would be de rigueur. See what I can gin up at W3 Schools.

That Miami Art Deco default color scheme need not be an impedient.

I like working in the spectrum of the blue greys, for example. But I am not a diehard color nerd either. I like black and shades of grey and a touch of firebrick with outline or ghost buttons and that is pretty much it.

That drawer — the Materialize drawer — really works well for me and seems admirably up to Google snuff. Same with Propeller, below.

Here, a Materialize install that solves a minor difficulty with using the Font Awesome icon that serves as my logo.

Getting text and icon to vertically align.

And here, something called FeatureDiscovery which I had never heard of. Trigger it and a floating action button explodes into noisy action.

The docs warn that overuse can breed chatice.

Propulsado pelo Propeller

And then Propeller also — as above so below — most definitely. With the right to a neat-o FAB button group labeled with tooltips. «Go directly to the porn, please».

Above, my first kitchen sink project with the bugiganga several months back.

And above, fixing a slight malfunction: make the drawer dim the main content on overlay.

Among other things Propeller seems easy enough to m-deify even if it has no Sass variables file to do it with.

If I and I had a client — and I and I still do not — I might well start them off with a Propeller-based prototype. Or maybe Bulma or maybe even Materialize or more daringly with Pug Material. Or fuggit why not just some flavor of good old Bootstrap seasoned to taste?

Or perhaps with the W3 flavor of CSS. I like it more and more. And more.

Bootstrap Babel Materialism

But I am also remembering Material Design Bootstrap all too well lately — mainly for all the glitches I have experienced with it.

Does not seem muito bem supported.

Dropdowns do not function at the junction, for example. In my case.

Neither the Material ones nor the Bootstrap ones.

They exhibit weird behavior, above.

You click the button and then hit the up-arrow key and the list view opens at the root of the page. Disembodied

There are console errors to the effect that .sideNav is not a function and Cannot read property addEventListener and material is not defined.

The hamburger is served but ought to be blue grey just as I coded it.

I am tabling MDB for now, then — Brazilian parliamentarians use the term engavetar or that is, sticking it in a drawer. Aptly.

You can stick it. In your persistent drawer. For now. We will see whether the forum has patience with me or not.

And worse is the difficulty with the hamburger collapse in MDB — which is not any flavor of BDM. But I made no screen capture of that. Or did I?

No no I did I did.

Foobaz. Too bad. I nearly gave up on it until I decided to start over and rejigger the CSS and JS. With useful results.

Get Shit Done has suffered from a similar malaise ‐ on my Sambodian machine at least.

I think some of the click-detection fubars I see in projects like this one are due to this crappy old Microsoft-engineered piece of planned obsolecence I use to run the labirinto for cheese. Like when the demo sites gives you the same grief.

Get Shit Done in a previous Bootstrap: Navbar unresponsive on small screen.

I am not making much progress with Now UI either — another project of that Creative Tim guy if he really exists, or he is some sort of Waldo clone? You really have to wade through a labyrinth of hucksterism before getting to the component documentation.

That there likewise is a persistent drawer template for Bootstrap Material Design. It is not yet running right on my machine. In any way! Oh yes, it collapses to hamburger all right but the Input and Output burger of sainted California memory is not edible.

And this is too bad because the framework has a lot of nice components.

Which you should be able to paste into HTML to Jade and then Pug and then run your Harp or Express or Roots build environment and viola da gamba.

Above, lightboxes and slideshows with captions and Lawrence Welk accordions.

But here an attempt to jigger nav.navbar goes south.

Bootstrap Material or Material Bootstrap?

Or am I thinking of Bootstrap Material — BMD? Fez or Kevin Ross? Versions seem to multiply like medieval manuscripts.

I built my first carousel on this bugiganga and it was pretty simple at that.

Oh but see I had this difficulty with the resposinve nav.navbar that was driving me nuts.

Maybe now that I have built my drawer boilerplate I can fix up my crazy Howling Wolf boilerplate, below, with all its obstinately unfunctional collapses and modals and stuff.

Near Dear Mere Semantic Semantics

Lately I also have managed to create something I have been working toward for months, with breaks to let my temper cool.

An everything but the kitchen sink page with all postmodern conveniences for Semantic UI.

Just check out that message box.

It is dimissable! (“Dismissible” is equally correct.)

Next thing you know I will be calling it up programmatically! On page load, bombard visitor with yodeling modals!

The Who and Stones demonstrate the mouseover effect called the reveal — mouseover and hidden images or other content appear — and the section under the Font Awesome food icon is a multilevel accordion menu about how to install Linux and the history of the Ramones. This makes a great sidebar menu for complicated subjects like tech docs.

Hire me to organize your docs, I know how and your users will thank you.

And there under «Modus Tollens» are triggers for various types of modal dialogs. You know these. They take over your screen and invite to buy stuff before you move on to the content you click on a Google link to beam down to.

But what I really found maddening for quite some time was enabling sidebar navigation.

Hamburger navigation you can forget as far as I can see from reading Stack Overflow unless you have the time or the JS chops — it requires fairly substantial custom CSS and script. For someone at my level anyhow.

And why can they not simply include a demo toggler button in the docs? Click here to launch the Frodo Modo? Not even Ctl-U in Chrome reveals how this goes. Unlike user-friendlier frameworks.

But Google, the guru of all user-friendly style, loves sidebar navigation drawers and so I wanted my Semantic projects to have them, too.

I had succeeded in creating a working demo some months back but now could not recreate that template.

It is always something about versioning of the CDN file or something, is it not? Or that JQuery must come first lest we forget?

So I got a little mad — and scatological. At one point I had created a toggle button that did the job but unfortunately dematerialized after it was clicked.

Now after much totally trial and error brute-force coding work all is copacetic.

Above, a kitchen sink page I started working on a few weeks ago.

I found a partial solution.

No doubt about it, Semantic UI is a thing of beauty straight out of the box.

I find its docs sort of uneccesarily opaque, however.

But to make a long story short, I got the job done with my mad perserverance.

Modals, too, as follows — a topic poorly documented, I thought. Triggered here it appears on document.onload I think.

And there you have it: contemporary Brazilian equipes de futebol. Make it a .ui.thin.sidebar.menu and ditch the image and there you have it. Trigger it from what is tantamount to the topbar or toolbar or nav.navbar and Robert is the brother of your mother.

Why Daemonite is Dynamite

Because it is, that is why.

Here for example is its small screen navigation, a mix of collapse and dropdown. The pusher gets pushed down as it should. Unlike otherwise. I understand that Foundation offers a similar configuration but when do I have time for it?

And here is a pandemonium of pops — ups and overs and stuff.

Totally friendly to modaling and far more feature-rich than comparable frameworks. Enough said.

Odds Toward an Ending

And then there are Ink and Helium and ChopChop — I really want to work with ChopChop but have configuration problems — and Blaze and a number of others.

(And above: Spark CSS misspelled, sorry. It is Spark CSS and I like it. Just organize the the otherwise excellent docs and it is good to ir.)

All with drawers and sidenavs to monkey around with.

Including this other Material CSS which does not work for me — I think it has to do with Material Icons but I have not gone through the dependencies for the umpteenth time yet.

I am buy one struggling techhnically dyslexic designer after all. You must work out of the box for my sake.

The following material tuning fork, on the other hand, yielded some early partial sucesses. Say a month or two back. Tempus fuggit.

Click «drop your drawers» and it does. A crude solution but educational.

Getting this working on Propeller — below — was also quite easy and taught me some basic concepts early on.

Colophoning Home

But what really matters is that I got myself a working Semantic UI boilerplate now and it looks like that above. Which I like.

The modals yodal and the Reveal.js functions function at the junction and a multilevel accordion is not too difficult to do. Fabulous tabulous. Words on the tips of our tools.

And at the top of the page a hamburger — it could also be a hot dog or a taco — that opens a sidebar that pushes the content to the right and direct the user to the garden of the forking paths.

Reduced to a small screen the menu items — punk rock singers of my youth — are hidden as commanded but I would still like them available in a dropdown quesadilla or cheese danish.

Still.

Frabjous day.

From mere Semantic to dear Semantic that mostly responds to my needs.

And an ema in a jabuticaba tree.