André Baltazar - Blog

8 year (- 2 days) since last blog post

2026-07-20T19:24:30+00:00

It's been quite a while since I wrote here... 8 years - 2 days to be exact. Still alive.

Life happened during this time away. New skills were forged, and also dwindled away by the force of AI. LLMs are everywhere.

They have changed the way I work, how I search for information, and how much code I actually remember how to write without some assistance. It is great to describe a problem and immediately get something that almost works. The “almost” part is important. You still need to understand what it produced, especially when it confidently invents a function, a configuration option, or an entire version of reality.

Coming back to this website felt a little like opening a time capsule. Some of the code was written by a version of me that apparently liked creating features and then forgetting to finish them. There was an empty Let's Encrypt administration page, a Journal prototype with buttons that did nothing, and a Twitter widget that had stopped being useful a long time ago.

Naturally, there were also several unfinished projects. At least that part of the website was still accurate.

The site itself was still running on an old version of PHP. Somehow, most of it continued to work. The blog posts were still here, the images and GIFs still rendered, and the database survived all these years. That is probably more than I should have expected from code I had barely touched since 2018.

It has now been moved to PHP 8.4 inside its own Docker container. The design was also updated, the broken Twitter widget was removed. The tags are still colored, of course. Some things are too important to remove.

The Lab also received a new design. I would like to say this means it will be updated regularly with new experiments and finished projects, but the last eight years provide strong evidence against making that promise. It will continue to be a place for ideas, prototypes, and projects that may or may not reach the finish line.

A lot has changed since the previous post, both in software and outside it. Frameworks appeared, became popular, and were replaced before I even had time to complain about them here. AI started writing code. JavaScript probably gained another few thousand ways to build the same website. PHP is still alive. Apparently, so is this blog.

I don't know how frequently I will post from now on. Hopefully, the next one will arrive sooner than eight years from now. If it does not, at least the website should be better prepared to wait for it.

Thanks for reading. See you in eight years! (Hopefully sooner.)

(Disclaimer: This article was fully written by AI from the completion of the first two initial lines, but it is eerily accurate.)

Flutter Animated Backgrounds

2018-07-22T21:16:11+00:00

In this post I will show you how to create a simple animated background from scratch using the Animated Backgrounds package available at https://pub.dartlang.org/packages/animated_background/, created by me.

By the end of this post we will have an app with a background looking like this:

Note that this background is interactive and you can pop the bubbles before they reach their maximum size. Also note that this post may be too detailed for new users. If you just want to check the code, go to my GitHub at https://github.com/AndreBaltazar8/animated_background_example.

1. Getting Started

If you are new to Flutter go to the Flutter website to download it. This should take you 5 to 10 minutes and you will be ready to develop applications in Flutter. I also suggest you to take some time to learn some basic concepts on their website.

Building an animated background with this package is simple, all you need to do is implement a few methods that update and render the objects the represent that animated components of your background. Follow the steps below to get started.

First of all, we need to have a project. If you are viewing this tutorial, you probably have a project you want to integrate this in, but I will create a new project to keep things simple.

To create a new project just run flutter create animated_background_example on your terminal. This should give you a fresh Flutter project.

Open the project on your editor and open up the pubspec.yaml file and add the package to your dependencies like this:

dependencies:
  animated_background: ^0.0.4

(Note: the current version might be different, please check the package page and get the latest version.)

After that run the flutter packages get command to get the package.

Your project is now ready to use animated backgrounds.

2. Creating an animated background with a default behaviour

Let's start by creating a background with a default behaviour. This is a behaviour that is already implemented in the package and available to everyone.

Open the lib/main.dart file that contains the root of your application. In this file you will see the Home Page widget that creates home page for your application. We will be extending this file to add our animated background.

The package provides a widget appropriately named AnimatedBackground that is used to add the background. This is the only widget necessary to render the animated background.

To be able to use the widget we need to import it. This can be done with the code below (put it on the top of the file).

import 'package:animated_background/animated_background.dart';

In the build method of the _MyHomePageState class, we have the creation of the main widgets of the app. This is here we will insert an AnimatedBackground widget.

Wrap the Center widget with an AnimatedBackground widget and provide the behaviour and vsync parameters with the values RandomParticleBehaviour() and this, respectively.

Your build method should now look like this:

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: AnimatedBackground(
        behaviour: RandomParticleBehaviour(),
        vsync: this,
        child: new Center(
          child: new Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              new Text(
                'You have pushed the button this many times:',
              ),
              new Text(
                '$_counter',
                style: Theme.of(context).textTheme.display1,
              ),
            ],
          ),
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: new Icon(Icons.add),
      ),
    );
  }

This will have an error on the this value provided to the vsync parameter. Before we fix this, let me explain what this parameter does. In order to animate the background we need to receive a tick from the application allowing us to update the background. This is done via this parameter where we specify a TickerProvider that is used to create a ticker which will update our background.

One simple way of getting a ticker provider is by making the state use the mixin TickerProviderStateMixin. To do this edit the _MyHomePageState declaration to use the mixin. It should look like the following:

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  // Class implementation
}

You can now run the application! It should look like this:

You can experiment with all particle options available through the options parameter of the behaviour to get different effects and even use images as the shape particles. An example app with configurable particle behaviour can be found inside the package, or on GitHub at: https://github.com/AndreBaltazar8/flutter_animated_background/tree/master/example

3. Creating a new behaviour (our new background)

From this point forwards things get serious. It requires some understanding of rendering in Flutter, but I will try to make it as simple as I can.

As I showed in the start, we are trying to get a bubble like effect for our background. This is similar to the particles but we will be implementing it without using the particles behaviour as a base, because particles have movement, and we do not need that.

Lets start by creating a class to hold the information about each bubble. For each bubble we will need the following information: its position, its current and final sizes and finally the color. The class will look like the following:

class Bubble {
  Offset position;
  double radius;
  double targetRadius;
  Color color;
}

Now lets create the behaviour for these bubbles, lets call it BubbleBehaviour and implement the Behaviour class.

class BubbleBehaviour extends Behaviour {
  @override
  void init() {
    // TODO: implement init
  }

  @override
  void initFrom(Behaviour oldBehaviour) {
    // TODO: implement initFrom
  }

  // TODO: implement isInitialized
  @override
  bool get isInitialized => null;

  @override
  void paint(PaintingContext context, Offset offset) {
    // TODO: implement paint
  }

  @override
  bool tick(double delta, Duration elapsed) {
    // TODO: implement tick
  }
}

Lets start by implementing the initialization of the bubbles. First we need a container to put the bubbles in. We will use a list for that. Inside the class declare a field of type List<Bubble> that will hold our bubbles and name it _bubbles, making it private and only editable by our class. One other thing that we need is how many bubbles will we display on screen. For this implementation we can use a constant number, so define with the number of bubbles you would like. Make sure this number is not too large, because it will cause performance problems if you create way too many bubbles.

We are now ready to create our bubbles. For this, we use the init method, which is called when the behaviour should be initialized. In this method we can generate the bubbles and assign them to the list. We use the following piece of code to achieve that:

_bubbles = List<Bubble>.generate(numBubbles, (_) {
  Bubble bubble = Bubble();
  _initBubble(bubble);
  return bubble;
});

We use the generator constructor of a List that allows us to generate a specified amount of values of a class. In this case we are generating numBubbles amount of Bubble instances, and calling _initBubble with them as a parameter when they are created. This method will initialize each bubble according to our behaviour.

Now that we initialized our bubbles we can implement the isInitialized getter, that is used to check if the behaviour is initialized or not. We just need to make it return true if the behaviour is initialized. We can simply return _bubbles != null as the value.

@override
bool get isInitialized => _bubbles != null;

Now we should also implement the initFrom method which is used to initialize the behaviour from an old behaviour that was being used by the AnimatedBackground. This method will be called when the application updates state for example. In our case, we want to preserve the bubbles so we need to copy them from the old behaviour. To do this we can use this simple code:

@override
void initFrom(Behaviour oldBehaviour) {
  if (oldBehaviour is BubbleBehaviour) {
    _bubbles = oldBehaviour._bubbles;
  }
}

For the final part of the initialization, we need to implement the _initBubble method that we used before. This will take care of initializing the bubble.

Since we want to initialize the bubble in a random position on the screen, we need to have a way to generate these random numbers. For this we can use the Random class provided in dart:math.

Import it using import 'dart:math'; and create an instance of the Random class. This instance can be a static instance on the BubbleBehaviour class.

static Random random = Random();

Lets start implementing our _initBubble method. We start by generating a random position for both coordinates of the bubble. To do this we generate a random number with random.nextDouble() multiply it by the screen size on that axis and assign that to the coordinate. To get the screen size, we can use the size getter that is available for all Behaviour classes. The initialization of the position will look like the following:

void _initBubble(Bubble bubble) {
  bubble.position = Offset(
    random.nextDouble() * size.width,
    random.nextDouble() * size.height,
  );
  // TODO: missing other initializations
}

Next we need to initialize our radius and target radius. For the radius we can specify the value 0.0, because we want to make the bubble grow in size to the target radius. In the case of the target radius, we need to get a random number for it. We again make use of the random.nextDouble method and with two new constants maxTargetRadius and minTargetRadius we can initialize the target radius. Since the color is all we have left to initialize, we can also initialize it to some color, for example, Colors.red.shade300 from the material design color swatches. You can take care of randomizing a color after, to make it cooler, but for now we will use only one color.

The final code for _initBubble will look like the following:

void _initBubble(Bubble bubble) {
  bubble.position = Offset(
    random.nextDouble() * size.width,
    random.nextDouble() * size.height,
  );
  bubble.radius = 0.0;
  bubble.targetRadius = random.nextDouble() * (maxTargetRadius - minTargetRadius) + minTargetRadius;
  bubble.color = Colors.red.shade300;
}

By now you are probably tired and just want to see the bubbles on the screen of your device... but hang on, we are almost there. We just need to update the bubbles to make them grow and then paint them on the screen.

Since we are working on the logic side of things, lets make the bubbles grow. For this we need to implement the tick method. This method is called every tick of the ticker provider passed to the background. Before we create a loop to iterate over the bubbles to update them, we need to check if the behaviour was initialized. The reason for this check is to make sure we do not iterate over the null container, since the tick is called even if the behaviour is not initialized yet. (This will probably change in the future, so do not rely on this to initialize or do anything when the behaviour is ticking but not initialized...)

Now we are ready to create the loop that iterates over our bubbles list. For each bubble we will need to increase its radius towards the target radius. This can be done using the elapsed argument passed on the tick method. This argument has the elapsed time (in seconds) since the last tick. This value is usually much less than 1 second. For example, if your app is running at normal speed (60 frames per second) it should be around 0.016667 seconds (1s / 60 frames = 0.016667 seconds per frame). We multiply this value, by a new constant that will be our growth rate, so call it growthRate, and add the resulting value to the radius.

After growing the radius, we check if it is greater or equals to the target radius and in the case this is true, we call _initBubble with the bubble. Remember this function is the one we created to initialize the bubble. This will reinitialize the bubble in a new position with a radius of 0.0 and a new target radius, making it disappear. A custom effect for the bubble popping could be created but we will keep this simple. In the end of the function, return true to specify that you want the background to repaint. The code for this function is like the following:

@override
bool tick(double delta, Duration elapsed) {
  if (!isInitialized)
    return false;
  for (var bubble in _bubbles) {
    bubble.radius += growthRate * delta;

    if (bubble.radius >= bubble.targetRadius)
      _initBubble(bubble);
  }
  return true;
}

Now comes the part you were waiting for, drawing of the bubble, which is done in the paint method. To get started drawing our bubbles we need to have access to the canvas, this is done through the context argument. Simply define a canvas variable from the context.canvas. After this, we need to create an instance of Paint, which is the object that defines a style to use when drawing on a canvas. In this paint object we want to change to fields that will be similar in all bubbles we draw. The first one is strokeWidth which defines how wide the edges are drawn for our bubbles, and the second field is style which we set to PaintingStyle.stroke which specifies that we only want to paint the edges.

We now have the canvas that we will draw the particle in and the paint that will be used to style our bubbles so its time to draw them. Create a loop to iterate the list of bubbles, and with the color field of the bubble update the color field of the paint instance. This will set the color for our next bubble that will be drawn. After that, use the drawCircle method of the canvas to draw the bubble. Pass in the position as the first parameter, the radius as the second, and finally the paint object to be used to draw. And that's it! Finally we are done! If you run the application the bubbles should render on the screen. The code for this method should look as the following:

@override
void paint(PaintingContext context, Offset offset) {
  var canvas = context.canvas;
  Paint paint = Paint()
    ..strokeWidth = 3.0
    ..style = PaintingStyle.stroke;
  for (var bubble in _bubbles) {
    paint.color = bubble.color;
    canvas.drawCircle(bubble.position, bubble.radius, paint);
  }
}

The result is what I showed at the start, but without interaction:

This is cool, but we can take it a little further and make this interactive, where we can "pop" the bubbles before they reach the target radius. Follow me to the next section where I will show you how to do that.

4. Adding interactivity

As you are probably familiar, in order to make a Flutter app, we use widgets for almost everything. Gesture detection is no exception. To make our behaviour detect gestures we make use of the GestureDetector widget. The onTapDown callback contains the necessary details to know which bubbles we need to pop. Next we add the widget to the tree. This is done by overriding the builder method of the behaviour, and specify the widget normally, except for the child, which must be a call to the builder of the super class. It is also important to define the behaviour of the gesture detector to either HitTestBehavior.translucent or HitTestBehavior.opaque to be able to get the gestures. The only difference between them is that one allows taps to go through the detector to elements behind and the other does not.

We still need to implement the logic for our tap down method. As I said previously, we receive the tap details in this callback, and we will use it to pop the bubbles. Set the callback of the tap as (details) => _onTapDown(context, details.globalPosition) this will forward our call to other method with the necessary arguments. In the implementation of the method, we start by finding the render box in the context, using RenderBox renderBox = context.findRenderObject();. This render box allows us to convert the global position of the gesture to a local position using renderBox.globalToLocal(globalPosition); which then can be used to know which bubbles should be affected by our tap. That's what we implement next.

Create a loop for the bubbles, and subtract the position of the bubble from the local position of the tap that we just calculated. The resulting value should be of the type Offset. With this you can get the square of the distance between the two positions with the distanceSquared getter. Getting the square is faster than the actual distance between them because we don't need to perform a square root operation. You are probably thinking this is irrelevant but calculating the square root for many numbers, in our case, one for each bubble, can be quite expensive on the CPU.

Finally we can compare this distance with the radius of the bubble, but since the distance is squared we need to have bubble.radius * bubble.radius and you can also multiply this value by a small constant (eg. 1.2) to give the bubble a larger radius that we can press to pop it. If squared distance is smaller than the squared radius, we call _initBubble to re-initialize the bubble. It should now be interactive. The full code for this section should be similar to:

@override
Widget builder(BuildContext context, BoxConstraints constraints, Widget child) {
  return GestureDetector(
    behavior: HitTestBehavior.translucent,
    onTapDown: (details) => _onTap(context, details.globalPosition),
    child: super.builder(context, constraints, child),
  );
}

void _onTap(BuildContext context, Offset globalPosition) {
  RenderBox renderBox = context.findRenderObject();
  var localPosition = renderBox.globalToLocal(globalPosition);
  for (var bubble in _bubbles) {
    if ((bubble.position - localPosition).distanceSquared < bubble.radius * bubble.radius * 1.2) {
      _initBubble(bubble);
    }
  }
}

This concludes the creation of the interactivity and this example.

5. Conclusion

Finally you have a simple background working with interactivity. It can be easily extended to make a popping animation, implement the randomization of the color (which we setup the variable, but did not create code to change it) and some other tweaks. I leave it to you as an exercise.

I understand that this post is extensive, probably contains some errors and not everyone will read it until the end, but if you did, thank you! If you have any question regarding this or suggestions on how to improve it, please tweet me @AndreBaltazar.

The full code is available on my GitHub at:

https://github.com/AndreBaltazar8/animated_background_example

Hope you enjoyed! Have a nice day.

New place for projects and ideas!

2018-01-06T17:20:00+00:00

It's been a while since my last post... I've been doing some random stuff and playing more games, but I wanted to post an update on the site. A few days ago, I created a new place to share my projects and ideas, with the world. It's called "The Lab" and has just two ideas, a project, and a prototype of something I've been working on. You can find it on https://lab.andrebaltazar.com/

I would like to update it with a few more projects and ideas, but don't know when that is going to happen... (probably in another year?) There isn't much more to say. Thanks for reading, hope you find something interesting there.

CS:GO Chicken Defusal - Tales Of An Unfinished Project

2017-05-02T19:00:00+00:00

Most of the times when I'm not programming, I'm playing games. I have been playing Counter-Strike (CS) for a long time, and Counter-Strike: Source (CS:S) is my most played game on Steam, with a total of 1866 hours on record. When Counter-Strike: Global Offensive (CS:GO) came out, I naturally transitioned to it. I have been playing for a long time with Ricardo "UNREAL" Sousa, who is a Level Designer/Game Dev/3D Modeler/Source Engine Expert (his words, not mine — more like Source Engine Mapping Expert). He has done lots of maps for the different versions of CS.

Before CS:GO came out (early 2012), Ricardo watched a video on YouTube (included below), from Flashdeck Animations, which is kind of a joke about the game. However in this video they joke about having a bomb strapped to the chicken, and have the Counter-Terrorists chasing the chicken to try to defuse the bomb.

He tried to implement this idea in a map, here is a video of the initial test map:

This was the first implementation of the map, but the Flashdeck Animations guy shared the video, which was awesome. When he told me that idea, he wanted me to turn this into a mod to actually be able to play any map as chicken defusal map, which we did. Well, at least we started... It gained some traction, and rechyyy (a popular YouTuber) made a video about it.

This test, was a very early test of the mod, which allowed to spawn chickens with the bomb strapped in their backs, and played some effects when the bomb was supposed to explode. However, it was the foundation for the mod, which gained some attention from the community. I don't know exactly why the project did not go forwards as intended, because it was some years ago, but Ricardo told me it was related with the AI of the chicken, which would not allow the chickens to run uphill. The chickens were really dumb. And still are. They run into the corners of the map/into each other, and get stuck really easy.

I suspect I was the one that did not want to move forward with the project, because Ricardo published a chicken defuse example map, in 2013, and states that "I made it into a map for the lack of scripters interested". This map was visited by nearly 30 thousand people, and has 15 thousand subscribers, which is great! Again, this map was shared by Flashdeck Animations. Sadly, it no longer works correctly.

While researching for links to do this post, I found an implementation of the mod for CS:S (which I haven't tried), which was also inspired by the Flashdeck Animations video, and supposedly allows a dead terrorist player to control the chicken. I don't know how well that works. I also found some other YouTube videos about the topic (I will not link these because they were re-uploads from other YouTube channels, and I did not find the original videos).

Everything considered, it was a great project with some traction behind it, however, in the end it is just another project that was not finished. It could have been something played by a lot of people, even though it is not really very competitive and more of a fun game mode. Maybe someone, someday will make a good chicken defusal mode. I will certainly give it a try (play the mod, not implementing it!).

——

I am thinking about doing some more posts like this one, so if you enjoyed this one, or have any question, hit me up on twitter @AndreBaltazar.

React Native: Some Thoughts - Part 2

2017-04-13T23:00:00+00:00

In my last post, I talked a little bit about React Native. Today, I'm here for a little rant about what I don't like about RN (or the reasons I will probably not use it again). These reasons may be somewhat biased towards how HTML and CSS work on the Web, but it reflects my opinion.

Let's get right into it:

Styling is a mess in React. This is the main problem I have with React. I love how it allows to create dynamic styles (using code to modify the styles) for the different components, however, I think it should be easier to apply the styles. For example, if there is two images in a view, it is required to go to both images and create a style property with the style we want for the image. This is were in my opinion, React's styles could be better, something like CSS where you can reference multiple elements/components with a single rule-set, and specifying the affected elements much easier. I know that CSS can get messy really fast, however, if done smart and modular, it offers an easier way to style the elements, compared to RN, even though it does not allow those "dynamic styles".

One other problem was, as I mentioned in the other post, that I structured my project following a guide on how to organize a RN project. This is made sense in the beginning, because I wanted to have the app organized, for future development, but it made me waste too much time organizing files, instead of actually programming the app. The way it is organized, separates everything into different files, and for someone getting into RN, I think its a daunting task to organize it all. I understand that this allows to have kind of MVC style app, but for a first app is not good. Managing all the callbacks from the different components, gets confusing really fast.

Finally, I lost some interest in the app I was going to create. I wanted to create it using RN, to have a standalone app, with the bonus of having it be cross-platform. However, the idea required me to create a custom list-like component, with a group of priority items locked on top of the list. I managed to create half of the component, allowing the user to drag the list items, but it's missing the drop part. One of the reasons I found very difficult to create this was because the items were lagging behind the drag, due to having Developer Mode active on the app.

Conclusion

Even though I have these problems, I recognize that React has some good features, like the Hot Reloading that I discussed in the other post, which is super fast. However, this is not enough keep me using React. Maybe in the future, the styling will change, and I can take it for another spin.

Thanks for wasting your time (seriously, it was for sure a waste of time) reading my post, and if you liked this post or have any question, please hit me up on twitter @AndreBaltazar.

React Native: Some Thoughts

2017-02-10T18:32:00+00:00

A few days ago, I started using Facebook's React Native. I had an idea for an app, and decided to give RN a try. I installed it, and tried to run the "example application", and could not figure out how to open the Developer's Menu in the Android Emulator to reload the code. Looked it up, and couldn't still open the menu. (BTW: I was on the right page, but didn't read it properly) So I immediately quit the emulator, uninstall everything, and go back to the Android Studio. Spent an hour creating some layouts, and an adapter for a list view, and went to bed. Next day, I wake up, and decide to give React Native another shot, because the layout that I made was bad, and it took me an hour to make it... Install everything again, and here we go, let's test the example application, change some code and try to open the menu, I glance at the same page, that I saw the day before and voilà, there it is the shortcut to open the damn menu... Great, let's see how fast I will be able to create something.

First Steps

I fire up Atom, and start changing some code to see how everything works. Since RN is programmed mostly in JavaScript, it's not difficult to get started. I create a simple component, import it, and it works great. The hot reloading is very fast.

I decided I needed some way to organise the code for the app, because it will have many different views and components. With a quick search I found this guide by [Spencer Carli], on the structure of a RN & Meteor project, I reproduced the structure, and went to work. In a few hours, I had the application, with a list view, running great with a much nicer layout. The project is now stopped for a few days, because I went trough two different sortable list view components that did not work as well as I wanted them to, and I needed to reevaluate how to do the layout properly.

Getting More Advanced

In the mean time, I started working on another idea, for a more connected app. It uses web sockets to communicate with a server and fetches some data. It works really great. Except the part where it spawns a connection every time the component hot reloads, and it doesn't close the previous one, that is something that needs some work from my part. I even added text-to-speech to see how it worked, and it is great! I am now ready to try and create my own sortable list, with some special features that I need for the other app to work correctly.

Overall, the experience has been great so far, even though I think I waste so much time, looking at the application, because I save some edit, go check how it looks, change 1 or 2 lines of code, save, and repeat... Another thing I found, is that I don't like the separation between the logic and the view that the guide mention above does for the routes, it's much easier to write everything in the same file, in my opinion. Other than that, I think React Native, is great to develop applications easily, and offers the possibility of not having to right different code for different platforms (except if you want something that requires native functionality), which is great.

These are some of my thoughts about React Native right now. I will keep using it for the time being, and see where it leads. If you liked this post or have any question, please hit me up on twitter @AndreBaltazar.

Blog Pagination is weird. Here's why.

2017-02-03T18:00:00+00:00

This week I had to implement a pagination system for the blog. Because, as I write more posts, the blog needs these kind of features. I started looking around at the blogs I read frequently, and ended up more confused on how to implement these pages than when I started.

Typically a blog presents in the first page, the most recent posts, with the most recent on top, which gives more visibility to the new content in the blog. This makes sense, to hook the reader with the most recent content, instead of old, an sometimes outdated content. However, this is here things get interesting. This first page is typically the page number 1 (one) of the blog, and they offer different types of mechanisms to navigate to older content. There is usually an archive by date of the posts, on a side bar, or the page offers pagination after the last post. We are going to focus on this pagination mechanism.

Let's start with this, blog pagination is weird, here's why. The first page of a blog, is usually numbered with number 1, and contains the most recent content on the blog, page number 2 contains content that is a little older, and so on.. This is contradictory to other things we do, for example, if you keep a diary, the most recent page is not the number 1, unless you are just starting your diary. What makes it even weirder, is that some blogs offer a link to navigate to the older posts, on the left side of the page, and to newer posts on the right side, implying that the older pages are to the left of the current one. Here is a image:

This is ridiculous when you think about it. The pages are numbered in the reverse order compared to a book, and when we insert a new blog post, every post is post is pushed "down", which can generate new pages with a higher number, that contains the older post. This example is way different from the diary. Here is an image that illustrates the insertion of a new post:

Notice how the oldest post here (the one with an "a"), is pushed to the the new page. However, there are other ways to do this pagination. Some other blogs use a pagination system where the pages seem to increase to the right, like in the next image.

Of course, this still has the same problem has the previous pagination system, because the newest posts need to be pushed down, and never stay in the same page. Why is it important for the posts to stay in the same page, you may ask? Well, if you bookmark the page for example, it would be nice to have the same posts has it had before, specially in the case of indexation by a Search Engine. Sometimes the results of a search return a post in one of these dynamic pages, but when we visit the page, the post is no longer there, and that is annoying.

One way to solve this problem of indexation, would be to have it organized like a book, and present only the last page, as in the following example:

As we can see here, this causes a few problem, while in the other systems we control the number of posts we display (3 posts per page, in the examples), this can lead to a page with only one post. Another issue, is that the latest post, is not always at the top when presented to the viewer. This would cause way too much confusion, so I settled implementing the "next/previous" system.

It is the system that is implemented at the moment, even though I don't like it that much. In the future, I will implement an Archive system, that indexes the posts, by year, that way everything is ordered chronologically, with a more understandable system, and which allows to be indexed and bookmarked. Meanwhile, everyone has to suffer with this system... If you have some comment about this topic, hit me up on twitter @AndreBaltazar. (while I don't implement the comment section)

EDIT (2017/02/03 18:20) - Fix title

The PHP type cast that always returns NULL

2017-01-27T18:00:00+00:00

A few days ago I was going through the a PHP RFC page when I found a vote for deprecation of a cast I had never used before, a cast to NULL. The keyword unset is used for this cast, for example, $b = (unset) $a, which results in $b being assigned with the value NULL, and nothing else. This should not be confused with the function unset, which really unsets the value.

I could not find any actual usage of this casting type on GitHub, except for some tests, and other useless stuff. A Google search also falls short of anything interesting, except for a question on StackOverflow, related with this type cast, asking for what is the point of it. Only the latest answer, by [Mihailoff], has a plausible use for this type casting. Take a look at this example:

$someBool = false;
$result = $someBool ? 'foo' : (unset) fallback();

This allows the variable $result to be either 'foo' or NULL, but in the latter, we still run a function to do something, and ignore its value. However this could be done in way which is easier to read:

$someBool = false;
if ($someBool)
    $result = 'foo';
else {
    fallback();
    $result = NULL;
}

Of course that I see the trade-off there, but either way, I don't think I have ever seen the use of this cast before. In C and C++ it is somewhat common to cast things to void*, but note that it is a pointer to something without a type. This is used for example in OpenGL, to pass arbitrary type buffers to the GPU.

In the same question mentioned above, there is an answer which contains a bug report related with this cast, because even the manual was not clear to how it worked. In this bug report, PHP maintainer [frozenfire] states that "That casting type exists purely for completeness, and you may as well just use NULL.". However, I decided to dig up when this feature was implemented, and turns out it was implemented 17 years ago, on 31 Dec 1999. It is a very old feature that persisted through time without any apparent usage.

If you liked this post or have any question, feel free to hit me up on twitter @AndreBaltazar.

Links:

Implementing a simple tag system

2017-01-21T22:11:46+00:00

In the process of implementing this blog, I thought of having tags associated with the posts. This allows me to categorize the posts. However, I did not want to implement a very complex system that allows to manage the color, define which tags exist, etc, but wanted to have a color associated with each tag.

The tags of the post are stored with each post, and no color is save in the database. The focus here is how to get the color for the tags. The implementation I came up with was to hash the tag, and use the value to define the color. The following piece of code is what is used by this blog to create the color of tags like Code and Color.

function tagColor($tag) {
    $m = md5(strtolower($tag));

    $h = floor(hexdec(substr($m, 0, 4)) / 65535 * 359);
    $s = (hexdec(substr($m, 4, 2)) % 32) + 69;
    $l = (hexdec(substr($m, 6, 2)) % 16) + 75;
    return 'hsl(' . $h . ', ' . $s .'%, ' . $l . '%)';
}

In order to have more control of how the final look of the tag looks like the HSL color model was used, because the lightness needs to be high to have a good contrast with the tag text color. Since the hue is a value between 0 and 359, a single byte from the hash is not enough to get the full range, so I use 2 bytes to get the hue, and scale it from [0, 65535] to [0, 359]. For the saturation and lightness, we sample 1 byte for each of them, and do some more math to get a good value. The saturation, uses 32 modulo to get a value from [0, 31] plus a the predefined value in this case 69, which makes for a good range [69, 100] in the saturation. In the case of the lightness the modulo 16 is used to have a lower range [75, 90] of lightness values when the predefined value of 75 is added.

A few optimizations could be done here, to get the values faster, but the code is about simplicity, and understanding how the color for the tags can be created from the tag itself.

This creates a simple, yet effective system of tags, which have the same color across the posts, even though the color is not stored anywhere. If you liked this post or have any question, feel free to hit me up on twitter @AndreBaltazar.

Thanks for reading!

Welcome!

2017-01-21T21:19:25+00:00

Hello there. This is the first blog post I have ever written. Like EVER!

First of all, welcome to my website. It is still work-in-progress but it's evolving fast. This will be a place were I discuss ideas related to projects I'm working on and interesting things I find around the web. Occasionally, a post with more in-depth information relating to some specific problem may also show up.

Stay tuned. Cheers!