organizing images using post, remove docs
This commit is contained in:
wgroeneveld
parent
53338a05b5
commit
441d28327a
|
|
@ -7,5 +7,6 @@ out/
|
|||
build/
|
||||
resources/
|
||||
node_modules/
|
||||
docs/
|
||||
|
||||
*.class
|
||||
|
|
|
|||
|
|
@ -17,7 +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
|
||||
|
||||
{{< 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.
|
||||
|
||||
|
|
@ -27,7 +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?
|
||||
|
||||
{{< 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.
|
||||
|
||||
|
|
@ -41,7 +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.
|
||||
|
||||
{{< figure src="/img/wiichannel.jpg" title="Retro Wii kanalen, al dan niet modded" >}}
|
||||
|
||||
|
||||
Volgens mij spelen hier verschillende factoren mee:
|
||||
|
||||
|
|
@ -54,8 +54,7 @@ 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.
|
||||
|
||||
{{< 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".
|
||||
|
||||
|
|
@ -65,7 +64,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.
|
||||
|
||||
{{< 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...
|
||||
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ Other interesting links:
|
|||
|
||||
Simply comparing two files within the editor can be a pain - the easiest way to do it in Eclipse is just select both files, rightclick and select "compare". No such option here. You can compare a file with a previous version from TFS, but not two physically different files, weird. Install [VSCommands](http://vscommands.squaredinfinity.com/) and that problem is also solved:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
It uses the built-in VS2012 comparison window, which is quite nice.
|
||||
|
|
|
|||
|
|
@ -89,7 +89,8 @@ After that, you can start writing tests. Looking at the examples, the test flow
|
|||
);
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Siesta also comes with it's downsides though.
|
||||
|
||||
|
|
|
|||
|
|
@ -20,8 +20,7 @@ Public Sub MyTestMethod_WithSomeArg_ShouldReturn45
|
|||
End Sub
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
The test code is very readable thanks to the [NUnit](https://nunit.org/index.php?p=documentation) influence on SimplyVBUnit. The package is very easy to install, but there are a few gotcha's.
|
||||
You need to create a separate VBP file (Visual Basic Project) which acts as your UnitTest project with a reference to the SimplyVBUnit package. That's easy enough, but it's a project. That means it can't reference other projects! Our software is basically one large project with heaps of muddy code. Compiling the EXE and referencing that one is not an option for us. That leaves us with a few alternatives:
|
||||
|
|
|
|||
|
|
@ -14,10 +14,7 @@ Also worth reading: [Reverse engineering a curriculum](/post/reverse-engineering
|
|||
|
||||
I happened to come across a very interesting study path for "game programmers" published at [https://github.com/miloyip/game-programmer](https://github.com/miloyip/game-programmer). It's a nice visual representation of books that help you become a better (game) programmer, starting from zero (game programming for kids) and ending at advanced game physics and Artificial Intelligence. I am not keen on becoming a game programmer but the reason this is interesting is that the author has done a great job trying to categorize the different requirements - what it takes to be a programmer in general. Let's take a closer look at that.
|
||||
|
||||
<center>
|
||||
<img src="/img/miloyip.png" class="bordered"/><br/>
|
||||
<span>A cut-out part of the study path, copyright Milo Yip</span>
|
||||
</center>
|
||||
|
||||
|
||||
## Study paths for any programmer
|
||||
|
||||
|
|
@ -128,10 +125,7 @@ This clearly suggests a (big?) difference between a developer and an _engineer_.
|
|||
- Networking
|
||||
- System design, scalability and data handling
|
||||
|
||||
<center>
|
||||
<img src="/img/csbooks.jpg" class="bordered"/><br/>
|
||||
<span>Which of these is the most important one?<br/>SICP of course!</span>
|
||||
</center>
|
||||
|
||||
|
||||
It's an unordered list but you can easily map those subjects onto the previous bachelor years. It's a bit more practically oriented though: a lot more in-depth algorithms and less logic, probability and mathematics. Prerequisites are knowing C so imperative programming got you covered. You can read more about his personal story [on Medium](https://medium.freecodecamp.org/why-i-studied-full-time-for-8-months-for-a-google-interview-cc662ce9bb13).
|
||||
|
||||
|
|
|
|||
|
|
@ -25,9 +25,7 @@ Als software ingenieur met meer dan een [decennium ervaring](/about) heb ik een
|
|||
|
||||
Het traditioneel coachen en lesgeven brengt echter niet altijd even veel op. Dat kan natuurlijk aan mij liggen (de manier waarop), aan het de stof die ik wil overbrengen (het onderwerp) of aan de interesse van het doelpubliek (de ontvanger). Bij veel teams waar ik de afgelopen jaren tijd in heb doorgebracht is het moeilijk om iedereen op dezelfde golflengte te krijgen.
|
||||
|
||||
<center>
|
||||
<img src="/img/sweng_prob.png">
|
||||
</center>
|
||||
|
||||
|
||||
Ik begon mij af te vragen hoe ik het probleem zou kunnen identificeren en hier iets concreet rond doen. De vraag werd een **meta-vraag**: in plaats van te vragen wat te leren begon ik te vragen hoe het leren te leren. Dus: _wat zien we over het hoofd wanneer we toegeven dat software schrijven niet altijd gesmeerd loopt?_
|
||||
|
||||
|
|
@ -47,10 +45,7 @@ De woorden in de (Engelstalige) titel verklarend:
|
|||
|
||||
## De doelstelling
|
||||
|
||||
<center>
|
||||
<a href="/img/phd_summary.jpg"><img src="/img/phd_summary.jpg"></a>
|
||||
Klik om te vergroten.
|
||||
</center>
|
||||
|
||||
|
||||
Voordat we die ongelijkheid uit de weg kunnen ruimen moeten we een andere vraag stellen: wat valt er allemaal onder die zogenaamde industriële vereisten? Die eisen kunnen we langs diverse opleidingen plaatsen om een kritische blik te werpen op de inhoud ervan. Als we terugdenken aan de vraag "wat missen we", onderscheiden we[^2] een aantal belangrijke **deelvragen**:
|
||||
|
||||
|
|
@ -92,9 +87,7 @@ We wensen immers technologie te gebruiken om iets (het domein) uit te drukken, e
|
|||
|
||||
Dit probleem beperkt zich echter niet binnen de software ingenieurs maar komt ook terug bij ingenieurs in het algemeen. Ik merk uit mijn ervaring als lesgever dat studenten opdrachten vaak te goed willen doen, en uit mijn ervaring als technische coach dat collega ontwikkelaars dit nog steeds niet hebben afgeleerd.
|
||||
|
||||
<center>
|
||||
<img src="/img/frameworks.jpg">
|
||||
</center>
|
||||
|
||||
|
||||
De focus leggen op het _concept_ in plaats van het _framework_ is echter makkelijk gezegd: hoe doe je dat? Waarom zijn hogescholen zo gebrand op praktische voordelen van frameworks die na 2 jaar toch niet meer actueel zijn? Waarom zijn universiteiten zo gebrand op theoretische concepten zonder een praktisch voorbeeld aan te halen?
|
||||
|
||||
|
|
@ -104,9 +97,7 @@ Ik wil op zoek gaan naar een goede cocktail van het conceptuele met het praktisc
|
|||
|
||||
De metafoor die zegt dat software ontwikkelen een beetje zoals tuinieren is sluit mooi aan met mijn idee. Maar wanneer beslis je om takken weg te knippen en bomen bij te planten? Op welke manier druk je je dan uit? Het "groeien" van software wordt altijd ondersteund door _test-driven development_, zoals het groeien van bomen wordt ondersteund door organische meststoffen. Op die manier reduceer je drastisch het mythische "aantal WTFs per minuut".
|
||||
|
||||
<center>
|
||||
<img src="/img/wtfm.jpg"/>
|
||||
</center>
|
||||
|
||||
|
||||
De beschrijving van vereisten met de **natuurlijke taal** in code zorgt voor een belangrijke bijdrage tot onderhoudbaarheid. Concepten die van belang zijn voor je product (zoals een vacature, sollicitatie of contract) moeten dezelfde dingen betekenen in de code zelf. Ik wil hier _Domain-Driven Design_ aanraken, maar er niet helemaal in mee gaan.
|
||||
|
||||
|
|
@ -135,7 +126,8 @@ Dit concept wil ik graag doortrekken in dit doctoraatsvoorstel. In plaats van ee
|
|||
|
||||
Dit sluit beter aan met de _agile proces_ dat ook bij Prato gebruikt wordt om sneller feedback te kunnen verzamelen en ook sneller een meerwaarde te kunnen bieden.
|
||||
|
||||
<img src="/img/agile.png"/>
|
||||
|
||||
|
||||
|
||||
## De toepasbaarheid
|
||||
|
||||
|
|
@ -177,7 +169,7 @@ Een concreet voorbeeld: het vak "Software ontwerp in Java" leert studenten het _
|
|||
|
||||
Dit voorstel past perfect binnen de onderzoeksgroep [LESEC](https://set.kuleuven.be/LESEC):
|
||||
|
||||
> **LEUVEN ENGINEERING & SCIENCE EDUCATION CENTER**<br/> A community of researchers and practicioners contributing to the advancement of education in the Science, Engineering & Technology group.<br/>
|
||||
> A community of researchers and practicioners contributing to the advancement of education in the Science, Engineering & Technology group.
|
||||
This includes R&D and consultancy activities, and the establishment of a network for cooperation and the exchange of experiences.
|
||||
|
||||
## Huidig onderzoek
|
||||
|
|
|
|||
|
|
@ -42,9 +42,7 @@ A third part of learning is being able to manage the heap of stuff to learn. Not
|
|||
|
||||
Mental models are models formed in your mind when you talk about specific parts in the software you know. When communicating to other team members, you need a model to find a common ground to talk about. The problem is that each developer's mental model is potentially incomplete and out of date.
|
||||
|
||||
<center>
|
||||
<img src="/img/curriculum/model.jpg" class="bordered"/>
|
||||
</center>
|
||||
|
||||
|
||||
> We spend time reconciling our mental models enough to communicate with each other; this is a [coherence penalty](http://www.michaelnygard.com/blog/2018/01/coherence-penalty-for-humans/).
|
||||
|
||||
|
|
@ -58,9 +56,7 @@ Malleability of software as a material is very understated. The ever faster appl
|
|||
|
||||
> There’s something extra special about development teams: software is the most malleable material we’ve ever used in engineering, by thousands of times. There’s nothing else like it, and this changes the meaning of “team.”
|
||||
|
||||
<center>
|
||||
<img src="/img/curriculum/idea.jpg" class="bordered" />
|
||||
</center>
|
||||
|
||||
|
||||
It doesn't only change the meaning of team, but also the way you should think about limitations of your own expertise: there is (almost) none - except time constraints that are not relevant here. Emphasis on the creative process with the right help of brainstorming and retrospectives, techniques that can also be rightfully applied within a classroom, guided or not.
|
||||
|
||||
|
|
@ -82,9 +78,8 @@ There are many ways to change an educational (master) programme:
|
|||
|
||||
Apart from a small portion of every possibility above, my take would be to take the existing courses and integrate the principles we've extracted in part 1. It wouldn't hurt to shake up the contents now and then (1.) or to enabling students by introducing more active ways of lecturing (2.), but let's for now focus on incorporating those principles without changing too much content.
|
||||
|
||||
<center>
|
||||
<img src="/img/curriculum/teach.jpg" class="bordered" />
|
||||
</center>
|
||||
|
||||
|
||||
|
||||
#### A. Create a software engineering philosophy. Teach all courses in context of this shared understanding.
|
||||
|
||||
|
|
|
|||
|
|
@ -77,9 +77,7 @@ That's simply a matter of configuring your `.bashrc` or `.bash_profile` files -
|
|||
|
||||
OSX's Finder makes it easy to create shortcuts for directories that have been heavily used, like my `~/development` dir where all repositories live. Luckily, Ubuntu's file manger also has this feature:
|
||||
|
||||
<center>
|
||||
<img src="/img/files_linux.png" class="bordered" />
|
||||
</center>
|
||||
|
||||
|
||||
##### Taking screenshots of areas
|
||||
|
||||
|
|
|
|||
|
|
@ -73,7 +73,8 @@ Apart from that, I'm relying on the following labels:
|
|||
|
||||
### The _lean_ Tools used to battle with
|
||||
|
||||
<img src="/img/acm_notes.jpg" class="bordered" />
|
||||
|
||||
|
||||
|
||||
#### 1. Use _analog_ tools
|
||||
|
||||
|
|
|
|||
|
|
@ -68,9 +68,7 @@ As you can see, I've been inspired by other well-known C#/Javascript frameworks
|
|||
|
||||
Assertions like `reg`, `scratchpad`, `port` verify the correct end state of your Assembly file. Seeing a red or green test in your favorite IDE or in the console is a _huge_ improvement over this:
|
||||
|
||||
<center>
|
||||
<img src="/img/picoblaze_sim.png" class="bordered" />
|
||||
</center>
|
||||
|
||||
|
||||
Inspecting a wave form after simulating your hardware configuration in tools like Vivado is a huge pain compared to writing separate test cases in software. I know the Test Bench tooling can be used to write test for your synthesis, but when uploading a bitstream into an FPGA, you never know whether it's the HDL that's incorrect, or the Assembly loaded into it.
|
||||
|
||||
|
|
|
|||
|
|
@ -22,10 +22,7 @@ The problem with educational software engineering research in this area, is that
|
|||
|
||||
Simply trying to pin down these terms by defining them seems to be a daunting task that will likely never receive a consensus[^3]. For example, I tried to [define](https://wgroeneveld.github.io/phd/src/definities/) the differences between "skill", "ability", "knowledge" and "competence". It took me more than a week and I gave up: every author gives his or hers own interpretation to these terms.
|
||||
|
||||
<center>
|
||||
<img src="/img/skills.jpg" alt="noncognitive skills" />
|
||||
<em>What to call "noncognitive skills"? - [img source](https://www.npr.org/sections/ed/2015/05/28/404684712/non-academic-skills-are-key-to-success-but-what-should-we-call-them?t=1540302642056)</em>
|
||||
</center>
|
||||
|
||||
|
||||
Since my background is with Computer Science and I've been a software engineer for 11 years, I'd like to incorporate this experience into my future work by concretizing these vague "skills" into something that people from the engineering industry understand and can work with. In the end, I'll have to define my own interpretation of the words "lean skills".
|
||||
|
||||
|
|
@ -96,6 +93,8 @@ To remind myself of the constant dilemma between **focus** and **exploration**,
|
|||
|
||||
> In fact, figuring out the scope is the prime challenge of completing a PhD. (...) The ambiguity of scope can also manifest itself in lack of positioning. Not having a clear overall argument is an important reason for PhD failure. The project 'thesis', the story and the new idea, spread too widely and too thinly can result in failure.
|
||||
|
||||
[Figure src](https://www.npr.org/sections/ed/2015/05/28/404684712/non-academic-skills-are-key-to-success-but-what-should-we-call-them?t=1540302642056)
|
||||
|
||||
[^1]: Radermacher, Alex, and Gursimran Walia. "Gaps between industry expectations and the abilities of graduates." Proceeding of the 44th ACM technical symposium on Computer science education. ACM, 2013.
|
||||
[^2]: Sedelmaier, Yvonne, and Dieter Landes. "Software engineering body of skills (SWEBOS)." Global Engineering Education Conference (EDUCON), 2014 IEEE. IEEE, 2014.
|
||||
[^3]: Duckworth, Angela L., and David Scott Yeager. "Measurement matters: Assessing personal qualities other than cognitive ability for educational purposes." Educational Researcher 44.4 (2015): 237-251.
|
||||
|
|
|
|||
|
|
@ -35,10 +35,8 @@ First of all, **non-technical** abilities are completely ignored. The CEPIS surv
|
|||
Second, **context** is missing. What's an enterprise architect? Does this mean I get to play with toys? Each profile is carefully defined to be applicable for any large company, but yet generic enough to be completely useless. <br/>
|
||||
Third, thinking _inside_ the box instead of _outside_ **hurts creativity** enormously. If I'm a test specialist, why wouldn't I be able to do certain tasks of an enterprise architect? These frameworks are still thinking in terms of _functions_, not _roles_. In your daily work as a software developer, you're the architect one day and the tester the next. Or even in a shorter timespan. Yet you never adhere to the rules of a carefully described competence profile. It's simply worthless.
|
||||
|
||||
<center>
|
||||
<br/>
|
||||
Does this mean anything to you?
|
||||
</center>
|
||||
|
||||
|
||||
|
||||
* fBOK (_Foundational IT Body of Knowledge_)
|
||||
* [SWEBOK](https://www.computer.org/web/swebok) (_Software Engineering Body of Knowledge_).
|
||||
|
|
@ -64,9 +62,9 @@ Don't be fooled by the `.org` domain name: you are still heavily encouraged to p
|
|||
|
||||
Is programming a craft? Is it a proper _profession_? Dan North [says it isn't](https://dannorth.net/2011/01/11/programming-is-not-a-craft/):
|
||||
|
||||
> It would be great if programming were a proper profession, but it isn’t. A profession has a structured model for advancing through levels of skill and ability, be it studying for a law degree and articles (working for a legal practice) or the years of undergraduate and medical training a doctor undertakes before specializing. The latter has clearly-delineated ranks, from junior doctor, via a brutal regime of 80-hour weeks, to constant.
|
||||
>
|
||||
> Conversely there is no minimum entry requirement for programming. Some people naturally have a flair for it (two of the best programmers I know never went to college), some teach themselves out of books, others just tinker until they get something working. A programmer’s skill and ability is only as good as their personal reputation: there isn’t an accepted, transferable ranking like there is in a “proper” profession.
|
||||
_It would be great if programming were a proper profession, but it isn’t. A profession has a structured model for advancing through levels of skill and ability, be it studying for a law degree and articles (working for a legal practice) or the years of undergraduate and medical training a doctor undertakes before specializing. The latter has clearly-delineated ranks, from junior doctor, via a brutal regime of 80-hour weeks, to constant._
|
||||
|
||||
_Conversely there is no minimum entry requirement for programming. Some people naturally have a flair for it (two of the best programmers I know never went to college), some teach themselves out of books, others just tinker until they get something working. A programmer’s skill and ability is only as good as their personal reputation: there isn’t an accepted, transferable ranking like there is in a “proper” profession._
|
||||
|
||||
It's a [heated debate](https://lizkeogh.com/2011/01/14/why-i-didnt-sign-the-software-craftsmanship-manifesto/), joined by many well-known technological experts out there. Melissa McEwen goes so far as to call it [the product of a 10-year-old development manifesto](https://qz.com/work/1371151/what-happened-to-software-craftsmanship/). The problems exposed by each of these articles has been tried to mitigate in SEMAT, resulting in something completely different, with it's own set of misery. As Dan said it, these attempts are at risk of letting programmers’ egos run riot - and I've seen that happen all too often when still working in [the industry](/post/a-decade-in-the-industry/).
|
||||
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ The syllabus is accessible through the links, although in Dutch.
|
|||
|
||||
Especially the live Castlevania demo's were quite appealing to students, showcasing sprite design, different backgrounds, and the palette:
|
||||
|
||||
<img src="/img/teaching/cpp/aria-of-sorrow.gif" style="width: 100%" class="bordered" />
|
||||
|
||||
|
||||
God I love that game. I'll gladly take every opportunity I have to look and/or play it.
|
||||
|
||||
|
|
@ -56,9 +56,7 @@ The sprite engine does the heavy lifting in terms of image memory allocation and
|
|||
|
||||
The emphasis lies on the _object-oriented_ part of the course title, that is why the design of the game, and game engine, was very important to me. If you are creating a platformer like Mario, and you can jump, grab coins, and squash enemies, then I want to see that reflected in your design. Where is the statement `mario.jump()`, where are the `class Coin` and `class Goomba : public Enemy` definitions? You can extend from the following engine parts:
|
||||
|
||||
<center>
|
||||
<img src="https://github.com/wgroeneveld/gba-sprite-engine/raw/master/img/design.png?raw=true" alt="gba-sprite-engine design" />
|
||||
</center>
|
||||
|
||||
|
||||
After the oral defense of their game, students completed a short survey that helped me assess what to do with the course during the next academic year. Most students were very enthusiastic regarding the inclusion of the GBA, compared to another dull set of assignments. They also responded positively to the question whether the Game Boy could be used in other courses as well, such as hardware architecture design, or (advanced) chip design (using an FPGA).
|
||||
|
||||
|
|
|
|||
|
|
@ -21,9 +21,7 @@ If you cannot fail, you cannot learn. And since failure is so easy (and hopefull
|
|||
|
||||
One of those models is Amabile's Componential Model of Creativity[^ama] ([img src](https://www.slideshare.net/medikawy_2005/how-to-kill-creativity-in-your-organization/14-knowledgeexibility_imaginationintrinsic_extrinsicThe_threecomponentsof_Creativityexpertisemotivationcreativethinkingskillswhere)):
|
||||
|
||||
<center>
|
||||
|
||||
</center>
|
||||
|
||||
|
||||
As deceptively simple as this looks, let us zoom in on each component and try to map these to the field of software development.
|
||||
|
||||
|
|
@ -119,10 +117,8 @@ Drawing from information from outside your own domain could also be useful and g
|
|||
|
||||
In Linguistic Creativity, creative patterns are hypothesized to be part of two categories: pattern-forming (following the rules of the language, creating interactions/repetitions) and pattern-reforming (breaking the rules and reshaping it into something new).
|
||||
|
||||
<center>
|
||||
|
||||
Creative Patterns?
|
||||
</center>
|
||||
|
||||
|
||||
|
||||
> ##### 5. _Incubation_ (letting 'the idea ripen' for a while)
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
title: Page Building with Brizy in Wordpress
|
||||
date: '2020-05-26'
|
||||
bigimg: /img/brizy.jpg
|
||||
bigimg: ../brizy.jpg
|
||||
subtitle: Shortcodes and custom hacks incoming...
|
||||
tags:
|
||||
- php
|
||||
|
|
@ -70,7 +70,7 @@ The result is not great. Instead of utilizing URLs such as `/page/2/`, as the de
|
|||
|
||||
#### 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.
|
||||
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ And it did not happen overnight. I started working on the idea in 2017, but was
|
|||
|
||||
To focus on the writing itself, and not the layout and whatnot, I decided to write in Markdown. In a non-fiction book, such as the one I was planning to write, it is important not to overburden readers with flashy layouting - so Markdown's minimalistic approach helped a lot here: underscores to _emphasize_ things is mostly enough.
|
||||
|
||||
|
||||
|
||||
|
||||
### The toolchain
|
||||
|
||||
|
|
@ -69,7 +69,7 @@ The first three pages of the book are the cover pages, and they are set:
|
|||
|
||||
An optional fourth page, which I included, contains the copyright, edition information, and so forth. Everything is part of `\frontmatter`, and written in LaTex itself. I got inspired by some examples provided by the memoir fellows:
|
||||
|
||||
|
||||
|
||||
|
||||
The style is called 'Gentle Madness'. I had no intention of pouring hours into making my own original version of something that was already good enough: it's part of the cover pages... You know, the things you flip through, in search for the actual content?
|
||||
|
||||
|
|
@ -77,7 +77,7 @@ The style is called 'Gentle Madness'. I had no intention of pouring hours into m
|
|||
|
||||
As said before, memoir comes with 'batteries included' - and that is definitely the case for chapter styles. I opted for a minimalistic chapter number and a title - that's it:
|
||||
|
||||
|
||||
|
||||
|
||||
The tex needed to do that:
|
||||
|
||||
|
|
@ -127,7 +127,7 @@ Enter the `perpage` package, where footnote numbering can be tampered with, with
|
|||
|
||||
The end result looks like this:
|
||||
|
||||
|
||||
|
||||
|
||||
For the header and footer, I wanted to maximize the available space on a page. That means only one of both, so no header. It is important to distinguish footer text from chapter text, so I opted to reduce the harshness of the text by using gray and another font type. It can be configured as a separate chapter style, that should distinctively **not** be applied to 'part x' pages:
|
||||
|
||||
|
|
@ -143,7 +143,7 @@ For the header and footer, I wanted to maximize the available space on a page. T
|
|||
|
||||
For citing work, the rough draft employed a dusty academic way (the default way) of doing that: author and year between brackets: 'in research blabla bla (Surname, 2019).' It gave me a headache: it does _not_ read fluently at all. the '\[10\]' thing at the end of a sentence was not that great either. It is non-fiction, but it should not be a boring piece of academic work! In the end, I opted for superscript with a reduced font size:
|
||||
|
||||
|
||||
|
||||
|
||||
I found that citation style in [zotero.org/styles](https://www.zotero.org/styles and https://citationstyles.org/authors/), it's called `the-open-university-numeric-superscript.csl` and added as a parameter in the metadata YML file for pandoc to parse. As you can see from the pandoc command, the `pandoc-citeproc` filter was used - it worked well enough and meant not manually fiddling with bibliography tools.
|
||||
|
||||
|
|
@ -152,7 +152,7 @@ I found that citation style in [zotero.org/styles](https://www.zotero.org/styles
|
|||
|
||||
The problem with using LaTeX and the memoir style is that most of the default settings feel a bit too rigid - too academic. I tried shaving off that word 'academic' as much as possible. For lists, this meant reducing it's complexity to simply a pointer to the page instead of numbering them individually:
|
||||
|
||||
|
||||
|
||||
|
||||
After a lot of stackoverflow hints, I managed to nail it down to:
|
||||
|
||||
|
|
@ -194,7 +194,7 @@ For 'default' inline figures, that works. However, some figures I wanted spread
|
|||
|
||||
The end result:
|
||||
|
||||
|
||||
|
||||
|
||||
Sadly, to make use of the new LaTeX command, I had to interleave it with the rest of the text in my Markdown chapter file. The above screenshot is the result of this:
|
||||
|
||||
|
|
@ -259,7 +259,7 @@ I found the solution to the problem on another blog and can't remember which one
|
|||
|
||||
The end result, at the bottom of the page:
|
||||
|
||||
|
||||
|
||||
|
||||
### The verdict
|
||||
|
||||
|
|
|
|||
|
|
@ -11,19 +11,19 @@ Thanks to another great "internet stumble", I came across [Laura Kalbag's blog](
|
|||
|
||||
Take a look at HLN.be, "Het Laatste Nieuws", a Belgian newspaper website. Opera informs me the SSL certificate is valid:
|
||||
|
||||
|
||||
|
||||
|
||||
Wait, what? **75 cookies in use**? Did I give my consent for every single one of those? You bet I did not! Luckily, I browse with "protection on" these days, and my protection of choice is not an Adblocker plugin using Google Chrome but Opera's built-in security systems. Pay special attention to the console errors in the above screenshot: `net::ERR_BLOCKED_BY_ADBLOCKER`. I do not want to know what happens when I turn it off.
|
||||
|
||||
Where do these nasty things come from? Who's keeping an eye on me and should I be tracking the trackers? Good question. Here's another screenshot of the _Sources_ tab, to get an idea of where all the data (and thus, trackers) are coming from at hln.be:
|
||||
|
||||
|
||||
|
||||
|
||||
These servers are serving data when my adblocking system is turned _off_. `tentacles.smartocto.com`? A quick look at that webites says things like "make every story count" and "translate strategy into actionable notifications". Smells like they're shipping off tracking data to one of those analytics companies that feed on the information of others.
|
||||
|
||||
Let's try another more authorative news website in Belgium, vrt.be/nws. This time, I let Opera inform me on what was blocked and what was not. It blocks both ads and trackers (image pixels, javascript).
|
||||
|
||||
|
||||
|
||||
|
||||
It still contains 12 blocked trackers. Most of those are downright advertisers, but others are more subtle. The most common one is of course _Google Analytics_.
|
||||
|
||||
|
|
@ -44,7 +44,7 @@ It is unavoidable that these endpoints can get access to your visitor's _referer
|
|||
|
||||
I threw out Bootstrap, jQuery, and Font Awesome, and refactored my Hugo theme to utilize [Sass](/post/2020/05/hugo-extended) (reducing the mean load of an uncached page with more than `200kb`!). Next, I threw out Google Analytics in favor for [Fathom](https://usefathom.com), another small and privacy-focused self-hosted go container (netting me another `40kb`). Then, I hosted all third-party libraries I used myself. So rest assured, Google does not know you were here! This is how the Fathom dashboard looks like:
|
||||
|
||||
|
||||
|
||||
|
||||
The commenting system I self-host is Commento, a fast, privacy-focused commenting platform. It does come with cookies if you decide to login, but then again: it’s on my own SSL-verified domain. Disqus, the popular and standard static website commenting system, has been known before to be [coming with hidden costs](https://replyable.com/2017/03/disqus-is-your-data-worth-trading-for-convenience/).
|
||||
|
||||
|
|
@ -64,7 +64,7 @@ For Facebook integraion on my other website [Red Zuurdesem](https://redzuurdesem
|
|||
|
||||
For the "classic" Facebook widget - well, I cheated... by taking a screenshot:
|
||||
|
||||
|
||||
|
||||
|
||||
Sometimes, the simplest solutions are the best. I bet nobody notices it's static content. I might even go out on a limb here and retake the screenshot once in a while. This gives me the freedom of throwing out the ugly Facebook JS API and token system that has to be renewed every few months (and comes with tons of "free" cookies!). Good riddance.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
title: Tags
|
||||
bigimg: /img/Archive.jpg
|
||||
icontag: tag
|
||||
---
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 8.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 84 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 260 KiB |
|
Before Width: | Height: | Size: 102 KiB After Width: | Height: | Size: 102 KiB |
|
Before Width: | Height: | Size: 66 KiB After Width: | Height: | Size: 66 KiB |
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 97 KiB After Width: | Height: | Size: 97 KiB |
|
Before Width: | Height: | Size: 185 KiB After Width: | Height: | Size: 185 KiB |
|
Before Width: | Height: | Size: 51 KiB After Width: | Height: | Size: 51 KiB |
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 137 KiB After Width: | Height: | Size: 137 KiB |
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 32 KiB |
|
Before Width: | Height: | Size: 180 KiB After Width: | Height: | Size: 180 KiB |
|
Before Width: | Height: | Size: 328 KiB After Width: | Height: | Size: 328 KiB |
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 50 KiB |
|
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 54 KiB |
|
Before Width: | Height: | Size: 195 KiB After Width: | Height: | Size: 195 KiB |
|
Before Width: | Height: | Size: 123 KiB After Width: | Height: | Size: 123 KiB |
|
Before Width: | Height: | Size: 82 KiB After Width: | Height: | Size: 82 KiB |
|
Before Width: | Height: | Size: 49 KiB After Width: | Height: | Size: 49 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
|
Before Width: | Height: | Size: 443 KiB After Width: | Height: | Size: 443 KiB |
|
Before Width: | Height: | Size: 47 KiB After Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 176 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 112 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 117 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 652 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 114 KiB |
|
Before Width: | Height: | Size: 63 KiB After Width: | Height: | Size: 63 KiB |
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 180 KiB |
|
Before Width: | Height: | Size: 57 KiB After Width: | Height: | Size: 57 KiB |
|
Before Width: | Height: | Size: 338 KiB After Width: | Height: | Size: 338 KiB |
|
Before Width: | Height: | Size: 96 KiB After Width: | Height: | Size: 96 KiB |
|
Before Width: | Height: | Size: 244 KiB After Width: | Height: | Size: 244 KiB |
|
Before Width: | Height: | Size: 66 KiB After Width: | Height: | Size: 66 KiB |
|
|
@ -27,15 +27,6 @@ document.addEventListener("DOMContentLoaded",function() {
|
|||
});
|
||||
})();
|
||||
|
||||
(function lightbox() {
|
||||
[...document.querySelectorAll('main img')].forEach(el => {
|
||||
if(el.parentNode.nodeName !== 'A') {
|
||||
el.parentNode.innerHTML = `<a href="${el.src}" class="lbox">${el.outerHTML}</a>`;
|
||||
} else {
|
||||
el.parentNode.setAttribute('class', 'lbox');
|
||||
}
|
||||
})
|
||||
const box = new SimpleLightbox('.lbox', { /* options */ });
|
||||
})();
|
||||
const box = new SimpleLightbox('.lbox', { /* options */ });
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -97,17 +97,23 @@ img
|
|||
|
||||
figure
|
||||
margin-bottom: 1.5em !important
|
||||
margin-left: 0
|
||||
margin-right: 0
|
||||
img
|
||||
margin-bottom: 0 !important
|
||||
figcaption
|
||||
|
||||
figcaption
|
||||
margin-top: 0.8rem !important
|
||||
h4, p
|
||||
font-size: 1.2rem
|
||||
text-align: center
|
||||
margin-top: 0 !important
|
||||
font-style: italic
|
||||
font-size: 1.2rem
|
||||
text-align: center
|
||||
font-style: italic
|
||||
font-weight: normal
|
||||
color: #aaa
|
||||
|
||||
/** Hugo's figure shortcode seems to render h4s sometimes **/
|
||||
h4
|
||||
font-size: 1.2rem
|
||||
font-weight: normal
|
||||
color: #aaa
|
||||
|
||||
|
||||
/** general **/
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
{{ partial "header" . }}
|
||||
|
||||
{{ partial "bigimg" . }}
|
||||
|
||||
<main class="list">
|
||||
|
||||
{{ if .Title }}
|
||||
|
|
|
|||
|
|
@ -1,21 +1,22 @@
|
|||
{{ partial "header" . }}
|
||||
|
||||
{{ if .Params.bigimg }}
|
||||
<div class="jumbotron big-img" style='background-image: url("{{.Params.bigimg}}");'>
|
||||
<div class="container">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{{ else }}
|
||||
<div style="padding-top: 3rem">
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ partial "bigimg" . }}
|
||||
|
||||
<a name="top"></a>
|
||||
{{ partial "list-item" . }}
|
||||
<main class="single">
|
||||
<br>
|
||||
<div class="text-justify">
|
||||
<!-- thanks https://www.godo.dev/tutorials/hugo-image-figure-wrap/ -->
|
||||
{{ $reAltIn := "<p><img src=\"([^\"]+)\" alt=\"([^\"]*)\" /></p>" }}
|
||||
{{ $reAltOut := "<figure><a href=\"$1\" class=\"lbox\"><img src=\"$1\" alt=\"$2\"></a></figure>" }}
|
||||
{{ $altContent := .Content | replaceRE $reAltIn $reAltOut | safeHTML }}
|
||||
|
||||
<br> <div class="text-justify">{{ .Content }}</div>
|
||||
{{ $reAltTitleIn := "<p><img src=\"([^\"]+)\" alt=\"([^\"]*)\" title=\"([^\"]+)\" /></p>" }}
|
||||
{{ $reAltTitleOut := "<figure><a href=\"$1\" class=\"lbox\"><img src=\"$1\" alt=\"$3\" title=\"$3\"></a><figcaption>$3</figcaption></figure>" }}
|
||||
{{ $finalContent := $altContent | replaceRE $reAltTitleIn $reAltTitleOut | safeHTML }}
|
||||
|
||||
{{ $finalContent }}
|
||||
</div>
|
||||
|
||||
<!-- related posts with the same tags -->
|
||||
{{ $related := first 3 (where (where .Site.RegularPages.ByDate.Reverse ".Params.tags" "intersect" .Params.tags) "Permalink" "!=" .Permalink) }}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
{{ partial "header" . }}
|
||||
|
||||
{{ partial "bigimg" . }}
|
||||
<main>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
{{ if .Params.bigimg }}
|
||||
<div class="jumbotron big-img" style='background-image: url("{{.Params.bigimg}}");'>
|
||||
<div class="container">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{{ else }}
|
||||
<div style="padding-top: 3rem">
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
<!-- Intentionally left empty. Override this partial in your website to insert code just after the
|
||||
opening <body> tag. For example, to install Google Analytics. -->
|
||||
|
|
@ -14,7 +14,6 @@
|
|||
</head>
|
||||
<body>
|
||||
{{ partial "icons" . }}
|
||||
{{ partial "body-open" . }}
|
||||
<nav class="navbar navbar-default navbar-fixed-top">
|
||||
|
||||
<div class="container">
|
||||
|
|
@ -53,4 +52,5 @@
|
|||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
</nav>
|
||||
<a name="top"></a>
|
||||
|
|
|
|||
Loading…
Reference in New Issue