After a 4 year hiatus, I’m finally coming back around to this blog and doing some cleaning before writing again. Part of that cleaning includes making sure the RSS feed works as expected. To do so, it needs to check off the following:

• Provide valid RSS content
• Include the posts’ contents so they can easily be read with RSS readers
• Exclude pages that are not posts

The first box is ticked by default thanks to Hugo’s RSS generator

Task 1: Including the post’s contents

Looking at PaperMod’s RSS layout, I noticed the following code:

{{- if and site.Params.ShowFullTextinRSS .Content }}
    <content:encoded>{{ (printf "<![CDATA[%s]]>" .Content) | safeHTML }}</content:encoded>
{{- end }}

This might’ve been added some time in the 4 years since I started this blog and seems to solve all of our problems. One update to our site’s config and voilà, the RSS feed’s XML includes our posts’ content in it!

One task down, one to go!

Task 2: Excluding specific pages

The easy way

As pointed out on Hugo’s Discourse there is a straightforward way to generate an RSS feed only for blog posts:

1. Update the output section of your site’s config file so it does not include RSS

[...]

[output]
- home = ["HTML", "RSS", "JSON"]
+ home = ["HTML", "JSON"]

[...]

2. Add an _index.md file to your /posts subfolder with the following front matter:

+++
title = "Posts"
outputs = ["HTML", "RSS"]
+++

3. We now have an RSS feed at https://sunbro.dev/posts/index.xml!

… but there’s one problem: this breaks the feed for anyone already subscribed to the current feed at https://sunbro.dev/index.xml. That URL now 404s.

The “correct” way

Now that we know we want to preserve the current /index.xml let’s give ourselves a way to exclude certain pages from it. Let’s add a new entry on to our pages’ config: RSSExclude. You should add it to all the pages you want to exclude from the RSS feed.

For example in my projects.md that I want to exclude I added:

+++
title = "Projects"
[...]
RSSExclude = true
+++

Now, let’s customise PaperMod’s index.xml layout to take it into account. Copy the theme’s file into your /layouts/_default/ and edit it as follows:

- {{- if and (ne .Layout `search`) (ne .Layout `archives`) }}
+ {{- if ne .Params.RssExclude true }}
    <item>
        [...]
    </item>
{{- end }}

Instead of only excluding pages with the search or archives layouts we now exclude all pages where RSSExclude is true.

Task two, check!

Conclusion

I’m happy to see this was much easier than I thought. Although I wish PaperMod natively supported excluding pages from the RSS feed, this has only motivated me to tweak the theme’s layouts even further in the future.

The initial idea comes from a discussion with friends over dinner a couple of nights ago, when we realized ar(1) can read input from STDIN. While we were wondering why that would be useful and what it could be used for, one of use mentioned that gcc(1) can also read input from STDIN. From there, the conversation derailed into how to “misuse” that feature in order to do something completely over the top and useless.

Inspired by Kelsey Hightower’s nocode idea, we wanted to use gcc(1) to write our code directly on STDIN, compile it, and, if successful, add and commit it to a git repo. Obviously doing all of this by hand wouldn’t cut it, so all of it had to be “automated” or neatly wrapped into a useable script.

Which then gave birth to Nocode: A simple way to write clean single-file code without taking up disk space.

Implementation

Nocode is essentialy a bash script which wraps all of the useful steps.

It starts of by creating and filling a .gitignore file if none exist, as to not create git clutter with the following steps.

if [ ! -f ".gitignore" ]; then
    $(echo "a.out" >> ".gitignore")
    $(echo -n "*.c" >> ".gitignore")
fi

The script then goes on to read the code from STDIN, in order to compiling it. Before passing the input to gcc(1) it is first given to clang-format in order to apply the coding style the user wants. This is then input to tee(1) in order to save it until it is committed to our git repository, and finally into gcc(1) for compilation.

# "$ARG" is equal to the first argument given to Nocode
$(clang-format | tee "$ARG" | gcc -x c -)

The next step is to check if the script was called in a git repository, if not the user is prompted to initialize one. If the user refuses, the script stops and the generated C file is saved.

# Check if we're it a git repository
$(git status &>/dev/null)

if [ "$?" -ne 0 ]; then
    read -p "Not a git repository, do you want to create one? [Y/n] " USERCREATEGITINPUT

    if [ "$USERCREATEGITINPUT" = "n" ]; then
        echo "nocode.sh: leaving file as is"
        exit 0
    fi

    $(git init &>/dev/null)
fi

To finish everything off, the file is added and committed to the repository before finally being deleted.

# Perform all git actions except push, left up to the user
$(git add "$ARG" &>/dev/null)
$(git commit -m "$ARG: update" &>/dev/null)

# Remove file because we're #NoCodeCompliant
$(rm "$ARG")

Of course, not all of the boilerplate is presented here because it is not very interesting. The scource code is available on GitHub. Issues and PRs are welcome!

Usage

All you have to do to use Nocode is call it with the filename you want to save, as follows:

./nocode.sh filename.c

Once you are done writing your code on STDIN, you can use CTRL+D to send an EOF in order to tell clang-format that you are done typing.

Pushing the code to the repository’s remote is left up to the user in order to avoid dealing with git credentials.

At the time of writing this post, this website uses Hugo and the Terminal theme by panr. I really like the way this theme handles content and Markdown integration, but there is no native support for videos. This is probably due to the fact that there currently is no way to embed videos in Markdown files, unlike images for example.

This problem reared its head when I was writing my first Pokémon Emerald romhack post. At the time, I planned to use GIFs to illustrate the changes made to the game. However, I quickly realised that GIFs take up a lot of memory and can take quite long to load for readers, contrary to videos, MP4 in our case, which are up to 10 times smaller !

$ du -h static/captures/birch_speech_original.gif
3.1M static/captures/birch_speech_original.gif

$ du -h static/captures/birch_speech_original.mp4
332K static/captures/birch_speech_original.mp4

Solution

The answer to our solution comes in the form of Hugo “shortcodes”. Shortcodes are a way to bridge the gap from Markdown to HTML. Therefore, we can use one to handle integrating videos in our posts’ Markdown files.

To get started create a shortcodes sub-directory in your layouts folder. Once that is done create a video.html file in layouts/shortcodes/. The shortcode’s code is as follows:

<video autoplay loop muted playsinline aria-label='{{ .Get "label"}}' style="width: 100%; height: auto;">
    {{ with .Get "mp4" }}<source src="{{ . }}" type="video/mp4">{{ end }}
    {{ with .Get "webm" }}<source src="{{ . }}" type="video/webm">{{ end }}
    <p> Your browser does not support video. </p>
</video>

The syntax is explicit enough to get a basic grasp of how it works. Our shortcode takes three possible parameters: label, mp4, and webm. If label is defined, its contents become the aria-label of the video HTML element. If mp4 or webm is defined, their contents become the source for the video element.

The rest of the shortcode is plain HTML, with inlined style to make it “responsive” and readable on mobile devices.

Using the shortcode in a post’s Markdown file goes like this:

{{< video label="this is a label" mp4="/path/to/video.mp4" >}}

I hope this helps you if you encounter the same problem, good luck!

Here is where our romhack currently stands:

1. Changing Professor Birch’s speech
2. Changing the Littleroot Town map
3. Adding an interaction event in Littleroot Town
4. Changing the starter Pokémons
5. Changing the first trainer’s team
6. Modifying the first wild Pokémons

Goal

The goal for this step is to modify the starting town’s map, and add an object we will later be able to interact with. This object will most likely be a signpost, or npc, or one of both.

To make these changes, we are going to use Porymap, available here.

Using Porymap

Once you’ve compiled and executed the Porymap binary and opened the relevant project, our romhack in this case, you should an interface that is reminiscent of the typical RPG Maker interface.

The leftmost panel should be a list of folders named gMapGroup0 through gMapGroup33 at the time of writing. Here is what each map group contains:

• gMapGroup0: all of the “outside” maps - town layouts and routes
• gMapGroup1 to gMapGroup16: all of the “indoor” maps for the towns, with some exceptions like the inside of the moving truck found during the introduction in Littleroot Town
• gMapGroup17 to gMapGroup23 and gMapGroup27 to gMapGroup33: all of the “indoor” maps for all of the routes
• gMapGroup24 to gMapGroup26: all of the remaining “indoor” maps - Battle Frontier, caves, the inside of the moving truck, ships, etc…

Take a moment to unroll of the folders and take a look at all of the different maps you can edit. Once you’re done, open gMapGroup0 and select [0.09] LittlerootTown.

You should now see the town map in the center of your screen, and the map’s tiles on the right. The rest of the interface is intuitive enough and I will let you refer to the official documentation to see exactly what everything does.

Making our first map change

Littleroot Town currently looks like this:

Let’s add a puddle, and a signpost in the center and save our changes:

Congratulations, you’ve just edited your first map! However, as you might realise, if you compile the rom and play it, the player goes right through the signpost.

We now have to add collisions. To do so, select the Collision tab on the right, and make it so the player cannot walk through the signpost. The map’s collision look like this:

Save the map, compile the game, and you will see that the player cannot walk through the signpost anymore:

Congratulations once again, you’ve successfully edited a map and adjusted the collisions!

Interacting with the signpost

Switch to the events tab in the central panel, select the dropdown menu on the right, next to New Object and choose New Sign. A new sign event should appear in the top left corner (0,0) of the map. Select the pointer and move the event to the signpost in the middle of the puddle.

Name the script LittlerootTown_EventScript_PuddleSign and click the Open Map Scripts button. If nothing happens, open the data/maps/LittlerootTown/scripts.inc file with the text editor of your choice.

Add this code at the end of the file:

LittlerootTown_EventScript_PuddleSign::
	msgbox LittlerootTown_Text_PuddleSign, MSGBOX_SIGN
	end

LittlerootTown_Text_PuddleSign:
	.string "Welcome to the world famous Littleroot\n"
	.string "Town puddle$"

As you can imagine, this code creates a procedure called LittlerootTown_EventScript_PuddleSign which creates a message box containing the text after the LittlerootTown_Text_PuddleSign label. Save the file, recompile the game, and you should now be able to interact with the signpost:

Good job, you’ve now added your first interactive event to game and made a more complete romhack!

That’s it for now, next time we will edit the game’s starter pokémons.

The goal of this project is to create a Pokémon Emerald romhack. To do so, we are going to use a dissassembled version of the rom as a starting point. Using different tools, we are going to modify the parts we want to change. The changes we are going to make are the following:

1. Changing Professor Birch’s speech
2. Changing the Littleroot Town map
3. Adding an interaction event in Littleroot Town
4. Changing the starter Pokémons
5. Changing the first trainer’s team
6. Modifying the first wild Pokémons

Tools

Here is a list of the tools we are going to use:

A Pokémon Emerald disassembly

• pokeemerald - Github

A map editor

• Porymap - GitHub

A Gameboy Advance emulator (any will do)

• Visual Boy Advance M - GitHub

A text editor (any will do)

• Visual Studio Code - GitHub

Setting up each of these tools is well documented and can be done without too much of a hassle. Personally, I am working on a 2019 Dell XPS 13 running Arch Linux, and all of these tools are usable without issues.

Making our first change

Right now, when we start the game we get the usual speech from Prof. Birch:

Let’s change his opening line

Hi! Sorry to keep you waiting!

to

Hey all you cool cats and kittens!

To do so, start up your text editor and open the data/text/birch_speech.inc file in the pokeemerald repository. You should see this as the first 7 lines of the file:

gText_Birch_Welcome:: @ 82C897B
 	.string "Hi! Sorry to keep you waiting!\p"
	.string "Welcome to the world of POKéMON!\p"
	.string "My name is BIRCH.\p"
	.string "But everyone calls me the POKéMON\n"
	.string "PROFESSOR.\p"
	.string "$"

From this sample, we can determine that the \p character indicates when user input, typically the A button, is needed to go to the next line of dialogue, and that the \n simply indicates a line break in the dialogue.

In our case all we have to do here is to change the second line to

    .string "Hey all you cool cats and kittens!\p"

Now save the file, compile the rom, start a new game in your emulator and you should see:

Congratulations, you’ve just made your first romhack ! Take a look at the other lines of dialogue in the file, try to find other files that contain NPC dialogue, modify them and see what happens.

Next time, we will explore how to customize the Littleroot Town map !

An Android school project which uses different APIs to get a list of all Pokémons and information about them. This specific piece of code relates to a list of all pokémons, or a Pokédex.

Specifically, a RecyclerAdapter which sets the OnClickListener for each row to the same thing:

class PokedexRecyclerAdapter(val context: Context,
                             val data: MutableList<PokedexEntry>):
       RecyclerView.Adapter<PokedexRecyclerAdapter.ViewHolder>() {
    
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        
        val rowView : View = LayoutInflater.from(context)
                             .inflate(R.layout.pokedex_list_item, parent, false)

        rowView.setOnClickListener{
            (context as MainActivity).onEntryListClicked(it.tag.toString())
        }
        
        return ViewHolder(rowView)

    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        // [...]
    }
}

Problem

As each row of the RecyclerView is a different pokémon, in some specific fragments I needed to change the callback to a specific method call for each entry.

The method I needed to call looked as follows:

    private fun setUpSelectedPokemon(data: PokedexEntry) {

        selectedPokemon = data

        // Clear second type if new pokémon only has one
        resetSelectedPokemon(data)

        selectedPokemonNameTextView.text = data.name

        // [...] More code that configures the selected Pokémon layout elements
    }

Solution

The first step to fix this is to pass the callback as an argument to the RecyclerAdapter although the main fix comes from moving the assignment of the callback from onCreateViewHolder() to onBindViewHolder() which has access to the ViewHolder and the position of the element in the list.

So the RecyclerAdapter now looks like this:

class PokedexRecyclerAdapter(val context: Context,
                             val data: MutableList<PokedexEntry>,
                             val callback: ((PokedexEntry) -> Unit)? = null):
       RecyclerView.Adapter<PokedexRecyclerAdapter.ViewHolder>() {
    
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        
        val rowView : View = LayoutInflater.from(context)
                             .inflate(R.layout.pokedex_list_item, parent, false)
        
        return ViewHolder(rowView)

    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        
        // [...]

        if (callback != null) {
            holder.itemView.setOnClickListener{
                callback!!(data[position])
            }
        } else {
            holder.itemView.setOnClickListener{
                (context as MainActivity).onEntryListClicked(it.tag.toString())
            }
        }

    }
}

Which can then be called like this from our Fragment:

pokemonListRecyclerView.adapter = 
PokedexRecyclerAdapter(activity as MainActivity, data)
                          { elt -> setUpSelectedPokemon(elt) }

The idea behind G Rapidement Envie de Coder (GREC - I Wanna Code Quickly) is to take the concept of a game jam / hackathon and apply it a short project so third year computer science students can use it to learn a new concept or language. The project should be able to be completed in a weekend or 48 hours.

Tetrua

For this project, the end goal is to create a tetris clone using Lua + LÖVE.

Graphics

LÖVE makes it very easy to display sprites and images to screen. As such my first step was to draw the different blocks needed for the different tetrominos. I started off by drawing each tetrimino with Aseprite:

After thinking about it a bit more, I realized drawing each different color block separately would be easier to deal with in-game and maybe a little more memory-efficient in the long run, although that is not the priority.

Loading and displaying an image in Lua with LÖVE looks like this:

-- Load the image to a variable
sprite = love.graphics.newImage("path/to/image")
-- Draw `sprite` to screen at (150, 150)
love.graphics.draw(sprite, 150, 150)

Next time

That’s it for now, the next article will likely be about how the game board works. I hope you enjoyed reading this, see you next time!

Hello and welcome to my blog ! My goal with this website is to write about what I find interesting in computer science and to share what I learn this year. I plan to write one post per month, but that might change over time as I gradually have more and more on my plate.

Thank you for getting this far, and see you next time !