brizy post

This commit is contained in:
wgroeneveld 2020-05-26 09:21:31 +02:00
parent d609e6b6fe
commit f2f065f688
8 changed files with 175 additions and 40 deletions

View File

@ -17,10 +17,7 @@ Voorbeeld: [(S)NES Mini Classic](https://www.nintendo.com/super-nes-classic/)[^3
3. **Hybride** consoles: emulatie-gebaseerde spelconsoles die toch de fysieke handeling van het "_er weer in steken_" mogelijk maken. Net voor het starten van het spel wordt in de software de ROM van de casette uitgelezen en al dan niet opgeslagen. <br/>
Voorbeeld: [retrofreak](https://www.cybergadget.co.jp/retrofreak/en.html), Retron 5
<center>
![analogue NT](/img/analoguent.jpg)
<em>Analogue Super NT[^2] met 8bitdo bluetooth ontvangers</em>
</center>
{{< figure src="/img/analoguent.jpg" title="Analogue Super NT met 8bitdo bluetooth ontvangers" >}}
Allereerst even dit: waarom zou je een nieuwe, _oude_ in feite, console kopen, als je al een originele Super Nintendo bezit? Misschien omdat je van de voordelen van optie 2 en 3 wenst te genieten. Maar waarschijnlijk omwille van HDMI 720p of 1080p capaciteiten die een console van 1990 niet heeft, tenzij je een oude CRT speciaal voor zo'n soort consoles bewaart. Een ander overtuigend argument is de _"region lock"_ van oude consoles: je kan geen Amerikaanse of Japanse _cartridges_ op een Europese console spelen of omgekeerd.
@ -30,10 +27,7 @@ Mijn vrouw heeft van haar jeugd nog een originele SNES console die we ook aanges
Dat digitale aan de SNES Mini stoort me al vanaf het eerste uur dat ik er mee speel: het keuzemenu dat een vrolijk liedje speelt terwijl jij je spel kiest. De vraag is: welk spel? Niet genoeg keuze. Tools als Hackchi2 installeren bevrijdt je Mini van het ronde getal 20 en laat je toe om eender welke ROM die je in je bezit hebt er bij op te proppen. Nog meer keuze. Welk spel? De Hackchi tool heeft addons waarbij emulators van andere consoles geïnstalleerd kunnen worden. Ik kan plots een Playstation 1, DOS(Box) of SEGA MegaDrive spel spelen op mijn Nintendo SNES... Nog meer keuze. Welk spel?
<center>
![SNES Mini](/img/snesmini.jpg)
<em>SNES Origineel en SNES Classic Mini[^2]</em>
</center>
{{< figure src="/img/snesmini.jpg" caption="SNES _Origineel_ en SNES _Classic Mini_" >}}
Hoe meer _luie keuze_ ik heb (een druk op de knop, een selectie uit een menu), hoe minder ik toegewijd ben om een spel van begin tot einde écht te _spelen_. Dit vind ik heel vreemd. Ik ben bijvoorbeeld ook opgegroeid met een Gameboy en tijdens beursbezoekjes schuim ik dan standjes af om herinneringen terug tot leven te laten komen. Die dure heraankopen maken mij blijkbaar wel erg toegewijd. Alle GBA Castlevania's zijn volledig herspeeld. De actie van een fysieke casette in een console te steken en die aan te zetten geeft mij veel meer goesting om er iets langdurig mee te doen dan simpelweg iets te kiezen uit een hoop dingen die reeds beschikbaar zijn.
@ -47,10 +41,7 @@ Hetzelfde geldt voor een e-reader. Ik heb nooit begrepen waarom mensen de intere
Hetzelfde geldt voor muziek, voordat streaming software als Spotify de kroon stak. MP3's downloaden was schering en inslag. Op den duur zit je met gigabytes aan (illegale) bestanden die uit je iPod barsten waarvan je misschien 10 tot 20% vaak herbeluistert. 20 jaar geleden kocht ik CD's die ik weken aan een stuk opnieuw durfde af te spelen, totdat mijn zussen en ouders er gek van werden. Tegenwoordig verzuip ik in de mogelijkheden en voorstellen die Spotify aanreikt. Wat is het gevolg? Mijn jaarlijkse top lijst bevat heel weinig nummers: ik speel telkens opnieuw dezelfde gekende dingen af.
<center>
![WII Channel](/img/wiichannel.jpg)<br/>
<em>Retro Wii kanalen, al dan niet modded[^2]</em>
</center>
{{< figure src="/img/wiichannel.jpg" title="Retro Wii kanalen, al dan niet modded" >}}
Volgens mij spelen hier verschillende factoren mee:
@ -63,10 +54,8 @@ Dat laatste is zeker niet onbelangrijk. Als ik zo graag mijn geliefde Turtles IV
Dan vergeet ik nog even de enorme hoeveelheid aan namaak op de markt. Een leek ziet amper het verschil: blauwdrukken van casettes worden zo goed als 1 op 1 nagegoten. Het is precies een sport geworden om dit aan de retro enthousiasteling verpatst te krijgen zonder hij of zij er erg in heeft. Vooral op gebied van Game Boy (Advance) _cartridges_ is het bedroevend gesteld. In sommige gevallen ben je bijna verplicht het open te schroeven om te kijken naar de EEPROM en batterij op het bord. Als je op eBay een Rolex horloge koopt voor $10 wéét je dat dit namaak is. In dat geval is de koper evenzeer aansprakelijk als de verkoper. Maar slimme verkopers bieden hun zaakjes aan in dezelfde prijscategorie. Aan een foto is bijna niet af te leiden of het om een namaak _cartridge_ gaat of niet. Aan "_How to spot fake GBA games in 10 steps_" artikels heb je niets als je vanwege de beperkte beschikbaarheid vanop afstand iets aankoopt.
<center>
<img src="/img/fake-gba.jpg" class="bordered"/><br/>
<em>Welke GBA _cartridge_ is hier fake?[^2]</em>
</center>
{{< figure src="/img/fake-gba.jpg" title="Welke GBA cartridge is hier fake?" >}}
Hoeveel keer koop je een ouder spel dat niet meer uitgegeven wordt opnieuw? Een keer via de 3DS store, een keer via de Wii store, een keer via een Steam collectie. Met de komst van de Nintendo Switch heb ik de intentie om mijn Wii te verkopen - maar de digitaal aangekochte spellen hangen daar aan vast. Kan ik dan het downloaden van een ROM bestand goedpraten? Ik heb dit immers al drie keer gekocht. Ik kan er ook niet aan doen dat Nintendo niet de optie aanbiedt om dit bestand uit mijn Wii te halen... Stel dat het officiëel gekochte digitale spel in ROM formaat af te halen is van je console, is het dan legaal om dit op je SNES Mini te plaatsen? De prijzen op de Wii waren nog gedelijk: 5 EUR voor NES, 8 EUR voor SNES en 10 EUR voor N64 spellen. Maar uiteindelijk worden ze natuurlijk ook geëmuleerd. En uiteindelijk is de Wii ook "gekraakt".
@ -76,10 +65,7 @@ Het wordt dus een delicate ethische kwestie.
Stel dat een online aankoop, bijvoorbeeld vanuit de vroegere Wii Store om een SNES spel te kopen, evenveel zou kosten als de _cartridge_. Welke versie verkies jij dan? Volgens enquêtes, en volgens mezelf, gaat de voorkeur uit naar de fysieke versie. Dat komt omdat wij als mens graag iets in handen hebben, _waar voor ons geld_ willen. Vreemd, gezien het geld dat overhandigd wordt toch ook gewoon bestaat uit 1 en 0? Maar nu geldt het bovenstaande argument niet meer, dus de fincanciële investering als enkele factor beschikt over onvoldoende overtuigingskracht.
<center>
![retrofreak](/img/retrofreak.jpg)
<em>retrofreak: de alles-in-1 oplossing[^2]</em>
</center>
{{< figure src="/img/retrofreak.jpg" title="retrofreak: de alles-in-1 oplossing" >}}
En toch geeft het niet zo veel voldoening als de fysieke versie. De retrofreak console ziet er redelijk aantrekkelijk uit en kan énorm veel fysieke formaten aan. Dat zou betekenen dat ik mij niet meer moet inhouden als we nog eens naar een retro beurs gaan: _one ring to rule them all_. Jammer genoeg draait dat op Android en hangen er rechtzaken boven het hoofd van deze consoles - om nog maar te zwijgen van de Chinese kwaliteit. En zou ik dan de ROM op een SD kaart zetten[^1], of van mijn vrouw genoeg geld mogen uitgeven om _cartridges_ te stockeren? Ik heb geen _mancave_, en moet dan ook nog een glazen vitrinekastje kopen om te pronken met mijn dure casettes...

View File

@ -14,10 +14,7 @@ Je _kan_ via Ali Express eender wat bestellen. Dat wordt dan wel drie weken wach
Ik kijk met de ogen van een vijfendertigjarige naar achtjarige kinderen die schreeuwend van hun ouders eisen dat LEGO doos z onmiddellijk MOET worden aangekocht. Betekent dat dat ik als achtjarige nooit schreeuwde en iets graag wilde hebben? Natuurlijk niet, maar mijn ouders gaven me nooit zo snel mijn zin - en maar goed ook. Ik herinner me nog dat ik een of andere plastieken Turtle zelf mocht kiezen, maar dat ik er eerst voldoende over diende na te denken. Na de keuze is er immers geen weg terug: ik kreeg maar één exemplaar. Ik koos uiteindelijk na, volgens mij voldoende, te hebben nagedacht. Twee uur later had ik er al enorme spijt van, en wilde ik dolgraag het andere exemplaar. Ik was oprecht verdrietig, en als ik nu terugdenk aan dat nog glashelder moment, krijg ik het terug warm. Maar ik begreep ook dat ik een keuze had gemaakt, en dat ik onmogelijk beiden kon bezitten. Ik was als kind natuurlijk afhankelijk van het geld en de toestemming van mijn ouders. Die manier van verantwoordelijkheid implementeren lijkt te ontbreken bij velen. Ze willen alles. _Whatever it takes_, zoals de popliedjes zo vrolijk beschrijven. Of, _because you're worth it_. Of we er nu voor moeten schreuwen, dreigen, of twee keer op een webshop voor moeten klikken: ontvangen zullen we - en hoe.
<center>
<img src="/img/tnmt.jpg" /><br/>
Nostalgie in de vorm van goede of slechte herinneringen?
</center>
{{< figure src="/img/tnmt.jpg" title="Nostalgie in de vorm van goede of slechte herinneringen?" >}}
Een speeltje dat niet in de lokale winkels lag kon men vroeger bestellen bij diezelfde handelaar. Dat betekende een week of twee wachten, tot de groothandelaar de juiste zaken terug aanleverde. Ondertussen kon je genieten van iets magisch: _uitkijken naar iets_. Kennen we dat eigenlijk nog? Het enige wat wij momenteel kunnen doen is uitkijken naar bepaalde dagen, want die zijn nog niet beschikbaar op bestelling. Zelfs dat klopt niet helemaal: de feestdagen beginnen elk jaar vroeger dankzij de commerciële mallemolen die ons nog meer opjut om op de 'koop nu' knop te drukken.
@ -28,10 +25,7 @@ Na een zware werkdag, die ook nog eens eiste dat je de frustrerende files moest
Onmiddellijke voldoening heeft ook te maken met de onmiddellijke aanwezigheid van alles, dankzij de hyper verbonden wereld en de 150gr zware apparaatjes die precies een extensie van onze hand geworden zijn. Als we nu op vakantie zijn, kunnen we onmiddellijk de familie kiekjes opsturen, waarvan we uiteraard verwachten dat ze onmiddellijk bekeken worden. Wanneer mijn ouders op vakantie zijn, word ik gebombardeerd met foto's van idyllische landschappen, goedkoop bier, en veel te veel 'selfies'. Daar wordt dan onmiddellijk op gereageerd, liefst met zaken als 'leuk! (hartje) (hartje)', of 'amuseer u, hier is het nog steeds kak!'.
Vijfentwintig jaar geleden reden mijn ouders mijn zussen en mij voorbij de Spaanse grens, om een dag later het dorpscentrum in te rijden en peseta's in een telefooncel te steken, hopend op een verbonden lijn die de grootouders geruststellen dat we allemaal nog leven. Vakantiefoto's werden uiteraard pas ontwikkeld na de terugreis.
<center>
<img src="/img/mediamarkt.jpg" width="60%" /><br/>
Meer wachten dan nodig? _Ik ben toch niet gek!_
</center>
{{< figure src="/img/mediamarkt.jpg" width="60%" title="Meer wachten dan nodig? Ik ben toch niet gek!" >}}
Dat klinkt allemaal redelijk pessimistisch, verlangend naar een vervlogen tijdperk van telefoonkaarten in een pre-Euro zone. In feite wil ik dit zeggen: waarom is het nodig om nutteloze foto's van nietszeggende dingen door te sturen op het moment zelf, in plaats van ter plekke te genieten en het verhaal achteraf te vertellen? Want wat valt er de familie te vertellen bij de thuiskomst, als we heel de rit al veel te intens hebben meegemaakt? 'Oh ja, dat wist ik al, ik zag het op foto x'. Iedereen is al op de hoogte van elkaars reilen en zeilen voordat we mekaar effectief zien. Dat betekent dat er op het moment van weerzien maar bitter weinig te vertellen valt. En dan zijn we verwonderd dat sociale capaciteiten toch niet de grote sterktes van tegenwoordig zijn.

View File

@ -42,7 +42,7 @@ Without a preset, there is nothing to do, but without the core and the cli compo
To facilitate easy local debugging in different browsers, I skipped the babel and minify steps using a Hugo directive:
```
```html
{{- if (ne hugo.Environment "development") }}
{{- end }}
```

View File

@ -0,0 +1,127 @@
---
title: Page Building with Brizy in Wordpress
date: '2020-05-26'
bigimg: /img/brizy.jpg
subtitle: Shortcodes and custom hacks incoming...
tags:
- php
- wordpress
- brizy
---
As you may have read, I'm quite the [Hugo.io fan](/post/hugo-extended) and I build all my websites using this static website generator. As cool and tech-savvy it is, projects like [forestry.io](https://forestry.io/) exist to leverage Hugo's powers into the world of teams an non-technical bloggers. However, it still requires things like _committing_ and does not come with a lot of custom design options.
My wife has been blogging on and off for more than five years now, and she's been using things like Blogspot, Webnode, Wix and Wordpress. Not content with any of those, about a month ago she started creating yet another blog, calling in my help with the code portions. She's never content with the design options the free templates offer, and would like to design things herself, without having a lot of knowledge of CSS/HTML.
That's where things like Webnode and Wix come in: a lot of illustrators and designers create their own website using **blocks**: they are **page builders**, where drag and dropping is possible and (ugly) CSS/HTML is scaffolded. Since both Webnode and Wix are paid solutions, and both do not enable you to host it yourself, we decided to go for the Wordpress option again, more specifically with a page builder plugin: _[Brizy](https://brizy.io)_.
### "The most user-friendly website builder in town"
See for yourself:
{{< youtube KUv-NqDR-8s >}}
Amazing, right?
Not quite.
It's all good as long as you are creating _pages_. Pages are static webpages in Wordpress. But when it comes to designing the layout of your blog posts, or _posts_, things get ugly. Brizy of course also offers a paid version which comes with premium page blocks and more options, but we contented with the free version. I have to admit that creating pages with the free version was surprisingly easy (and maybe even a bit fun too).
In Brizy, you can create a 'page' that acts as a template for blog detail pages, but it 'forgets' to add the actual blog content. I'm sure there's another way in the paid version, but I solved that by using a lot of shortcodes: enter [Shortcode Ultimate](https://getshortcodes.com). Adding `[su_post field="post_content"]` in a block does generate an error in Brizy's preview mode, but works outside of that.
Actually, injecting post content using that shortcode comes with a big shortcoming: it does not parse shortcodes inside posts themselves (`[caption]`, `[embed]`, ..). Solution? A custom filter:
```php
function su_post_content_filter($value) {
return apply_shortcodes($value);
}
```
The `apply_shortcodes()` [function](https://make.wordpress.org/core/2020/02/13/wordpress-5-4-introduces-apply-shortcodes-as-an-alias-for-do-shortcode/) in Wordpress parses the shotcodes in the argument for us. I have found the Wordpress function reference to be quite complete and useful. However, it is quite a mess: there are `do_` functions, `apply_` ones, lots of methods `echo` stuff, resulting in me having to capture `stdout` to return it:
```php
function blog_detail_comments_shortcode() {
ob_start();
comments_template();
$html = ob_get_contents();
ob_end_clean();
return $html;
}
add_shortcode('blog_detail_comments', 'blog_detail_comments_shortcode');
```
Yuck. What a mess. But now I can use `[blog_detail_comments]` inside a Brizy template to render the Wordpress blog comments partial - yay! I had to create the following shortcodes myself to get the job done:
- `blog_detail_comments` - comments form
- `blog_detail_footer` - a span with blog detail date and categories
- `show_categories` - a list of all categories, used in the sidebar
- `show_current_category` - a list of current categories
#### The Blog Overview page
This page usually contains a list of latest blog entries. Shortcodes Ultimate does not support pagination - great. I grew tired of reinventing the wheel and installed yet another plugin to do the work for me:
```
[display-posts pagination="true" image_size="thumbnail" include_excerpt="true" excerpt_length ="30" include_date="true" category_display="true" category_label="" include_excerpt_dash="false" image_size="medium" date_format="d/m/Y"]
```
The result is not great. Instead of utilizing URLs such as `/page/2/`, as the default Wordpress templates do, now we're stuck with `/blog/?dps_paged=3` - that is, unless I intervene and rewrite things. Yet. Again. Yuck.
#### The Blog Detail page
{{< figure src="/img/brizy_invalid.png" title="Did I do something wrong?" >}}
A lot of shortcodes are needed here. Blog title, blog contents, blog metadata (the detail footer), blog comment forms, showing a list of categories, a list of most popular or recent posts in the sidebar, ... The problem for my wife is that while designing this page, there are no placeholders available, so it's a bit of a guess how it will turn out to be.
Oh, did I mention that I had to style these things myself? Since you can't use the Brizy Editor to apply a font? That means duplication. And that means more shit when my wife decides to use another font on all pages: the shortcodes won't budge.
#### The Category page
Right, "terms" in Wordpress. Are you using tags or categories? Or did you create your own taxonomy? What's with all the complexity when I just want a simple way to sort and organize my blog posts? Here, I used another self-made shortcode, `[show_current_category]`.
### The Wordpress mess
I'm slowly but surely starting to detest the Wordpress mess we've made. A few other things that bother me:
1. Sass transpilation? The wordpress admin page offers a nice and easy way to edit inline source files of the themes, but they are CSS-only.
2. Same problem with ES6. I had to transpile the big `preview.js` JS file from Brizy myself because somehow inline SVGs did not get replaced in Safari. Turns out there was actually a JS syntax error!
2. Plugin hell. Which plugin to use for SEO or image optimization? Oh, this one seems cool. Nope, not modified in a year. Oh and this one? Nope, freemium shit. What about... Hours later: fuck it, pick a random one.
3. The theme child/parent thing is a mess. In the end, I copied the `twentytwenty` dir over to do some heavy lifting - being well aware of things possibly breaking in future Wordpress versions.
### The Brizy mess
Brizy allows you to save "blocks" as global blocks so they can be reused on different pages. That's very handy, and my wife easily creates other pages with the same header and footer using a swift drag-and-drop move. However, since the logo is included in the header, and we accidentally uploaded the wrong one, I swapped the image out on the server. Guess what, on most other pages, the wrong version was still there:
```
user@vps:/var/www/kristienwp/wp-content/uploads/brizy$ find . -name 'testlogokristien.png' | wc -l
389
```
Wait, what?
Yup:
```
./455/assets/images/iW=652&iH=any/testlogokristien.png
./455/assets/images/iW=151&iH=69&oX=1&oY=0&cW=150&cH=69/testlogokristien.png
./455/assets/images/iW=326&iH=any/testlogokristien.png
./455/assets/images/iW=328&iH=any/testlogokristien.png
./455/assets/images/iW=300&iH=136&oX=0&oY=0&cW=300&cH=136/testlogokristien.png
./3682/assets/images/iW=150&iH=68&oX=0&oY=0&cW=150&cH=68/testlogokristien.png
./3682/assets/images/iW=106&iH=48&oX=0&oY=13&cW=106&cH=23/testlogokristien.png
./3682/assets/images/iW=145&iH=any/testlogokristien.png
./3682/assets/images/iW=246&iH=112&oX=0&oY=0&cW=246&cH=112/testlogokristien.png
./3682/assets/images/iW=212&iH=96&oX=0&oY=26&cW=212&cH=46/testlogokristien.png
./3682/assets/images/iW=310&iH=142&oX=0&oY=0&cW=310&cH=142/testlogokristien.png
```
Brizy duplicates images from global bocks for each page, and for each page, Brizy duplicates images for each (mobile) device. `26` images for one page id.
There goes my [nginx caching strategy](/post/vps). What a mess. Should I write a bash script to create symlinks? That does not change anything for the clientside webbrowser. What a mess.
### So, trash Brizy and use something else?
Perhaps. But now that we invested a couple of weeks in this Wordpress + Brizy + custom hacks on my side, my wife is content. She's even thinking about the same setup to port one of her websites from Webnode, a paid and hosted service. It's intuitive to use and it works - for the most part. The shortcodes should not change often, and the blog detail and category brizy templates are not that difficult to maintain if you ignore the errors in the editor.
As long as you don't try to peek behind the scenes and into the source code, all is well...

View File

@ -265,11 +265,3 @@ Would I employ this toolchain again when writing the next book? Without a doubt.
At least I won't have to start from scratch next time!
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
border: 1px solid var(--accent);
}
</style>

View File

@ -64,8 +64,44 @@
/** index.html **/
img.bordered {
border: 1px solid var(--accent);
ul {
list-style: circle;
}
div.highlight {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.text-justify img {
display: block;
margin-left: auto;
margin-right: auto;
border: 1px solid #ccc !important;
border-radius: 4px;
margin-top: 1.5em;
margin-bottom: 1.5em;
}
figure img {
margin-bottom: 0;
}
figure {
margin-bottom: 1.5em !important;
}
figure figcaption {
margin-top: 1rem !important;
}
figure figcaption h4, figure figcaption p {
text-align: center;
margin-top: 0 !important;
font-size: 1.7rem !important;
font-style: italic;
font-weight: normal;
color: #aaa;
}
.avatar-container {
@ -207,7 +243,7 @@ pre {
@media only screen and (min-width: 768px) {
/* indien header image, hoogte vergroten */
.big-img .container {
height: 150px;
height: 200px;
}
}

BIN
static/img/brizy.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 63 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB