Português English

Blogs

Hugo Images Processing feature
2021.08.11

Hugo Images Processing

Hugo static website creating is a fantastic tool and I told you before. Since I changed to it, I’m very confident that the site is fast and responsive.

However, my site is packed full of images. Some are personal. Some are huge. Some are PNGs and some are JPGs. I created a gallery component just to handle posts that I want to fill with dozens of them.

Managing posts images is a boring task. For every post, I have to check:

  • Dimension
  • Compression
  • EXIF metadata
  • Naming

Dimension

Hugo images processing size 2.jpg

Having a bigger image than the size of the screen is useless. It’s a bigger file to download, consuming bandwidth from both the user and from the server. Google Lighthouse and other site metric evaluators all recommend resizing the images to at most the screen size.

In Hugo, I’ve automated using some functions:

{{ $image_new := ($image.Resize (printf "%dx" $width)) }}

Compression

Loss compression comparison.png

My personal photos are, most of the time, taken in JPEG. Recently I changed the default compression to HEIC for my phone camera, that provides better compression to hi-resolution photos. The web, however, does not allow such format.

Some pictures used to illustrate the posts are PNG. They have better quality at the expense of being larger. Mostly only illustrations and images with texts are worth to have a lossless format.

Whatever the format, I would like to compress as much as possible to waste less bandwidth. I’m currently inclined to use WebP, because it can really shrink the final size to a considerable amount.

{{ $image_new := ($image.Resize (printf "%dx webp" $width)) }}

EXIF metadata

Each digital image have a lot, and a mean A LOT, of metadata embedded inside the file. Day and time when it was taken, camera type, phone name, even longitude and latitude might also be included by camera app. They all reveal personal information that was supposed to be hidden.

In order to share them in the open public internet, it is important to sanitize all images, stripping then all this information. Hugo do not carry these infos along when it generates new images. So, for all images get a minimal resize, this matter is handled by default.

Naming

I would like to have a well organized image library, and it would be nice to standardize the file names. Using the post title to rename all images would be great, even more if used some caption of user provided description.

However, Hugo does not allow renaming them. To make matters even worse, it appends to each file name a hash code. A simple picture.jpeg suddenly became picture-hue44e96c7fa2d94b6016ae73992e56fa6-80532-850x0-resize-q75-h2_box.webp.

An incomprehensible mess. If you know a better way, let me know.

So What?

So, if most of the routines can be automated, that’s the problem?

The main issue is that Hugo have to pre-process ALL images upfront. As mentioned in the previous post, it can take a considerable amount of time. Especially if converted to a demanding format to compute such as WebP.

Netlify is constantly reaching the time limit to build the site, all because the thousands of image compressions. I am planning to revert some commits that I implemented WebP and rewrite them little by little, allowing Netlify to build a version a cache the results.

There are some categories of images:

  • Gallery full-size images: there are hundreds of them, it would take a lot of the processing time, but I will have the metadata extracted from the originals. The advantage is that they are rarely clicked and served.
  • Gallery thumbnails: the actual images that are shown on gallery mode. They are accountable of the biggest chunk of the main page overall size when a gallery is in the top 10 latest posts.
  • Post images: images that illustrate each article. They are resized to fit the whole page, so when compressed they represent a nice saving.
  • Post top banner: some posts have a top image. They are cropped to fit a banner-like size, so they are generally not that big.

I will, in the next couple of hours, try to implement the WebP code on each of these groups. If successfully completed, it will save hundreds of megabytes in the build.

Bonus Tip

Hugo copies all resources (image, PDF, audio, text, etc.) from the content folder to the final public/ build. Even if you only use the resized ones. Not only the build becomes larger, but the images that you wanted to hide the metadata is still online, there. Even if not directly pointed in the HTML.

A tip for those that are working with Hugo with a lot of images processed: use the following code into the content front-matter to instruct Hugo to not include these unused resources in the final build.

cascade:
  _build:
    publishResources: false

Let’s build.

Edit on 2021-08-25

I discovered that Netlify has a plugin ecosystem. And one of the plugins available is a Hugo caching system. It would speed up drastically the build times, as well the possibility of converting to WebP all images once and for all. I will test this feature right now and post the results later.

Edit on 2021-09-13

The plugin worked! I had to implement it using file configuration instead the easy one-click button. Building time went from 25 minutes to just 2. The current cache size is about 3.7 GB, so totally understandable.

It will allow me to must more frequent updates. Ok, to be frank: it will not restrict the posting frequency. However, patient, inspiration and focus are still the main constrains on blogging.

On netlify.toml file on root, I added:

# Hugo cache resources plugin
# https://github.com/cdeleeuwe/netlify-plugin-hugo-cache-resources#readme
[[plugins]]
package = "netlify-plugin-hugo-cache-resources"

[plugins.inputs]
# If it should show more verbose logs (optional, default = true)
debug = true
2021.03.14

Project Curva

For the last 9 years, I work as a planner and controller of a multinational Brazilian oil company. The team consolidates all the planning information of the whole company, analyses it, and reports to the company board of directors.

For all these years, I’ve struggled to deal with some basic business scenarios:

  • At the very end of the process, someone in the chain of information submits a last-minute update that cannot be ignored
  • The board decides to change the plan
  • The existence of multiple simultaneous plans, for optimistic and pessimistic scenarios
  • Changes in the organizational structure

The current information systems used or developed by the company are too restrictive to accommodate their business cases. The general solution is to create entire systems using dozens of spreadsheets. It is a patchwork of data, susceptible to data loss and zero control.

To address this, I decided to develop, on my own, a new system that is both flexible and powerful. The overall core propositions are:

  • Versioning: instead of overwriting data whenever there is a change request, the system should be able to preserve the existing data and generate another version. Both should be accessible, in other to allow comparison and auditing.
  • Branching: not only sequential versioning (v1, v2, v3), it should allow users to create multiple current versions. Creating scenarios of event temporary exercises should be effortless.
  • Multiple dimensions: for each unit (ie, a project in a list of projects), the user could insert the future CAPEX, OPEX, production, average cost, number of workers, or any arbitrary dimension. It’s all about capturing future series of values, regardless of the meaning.
  • Multiple Teams: in the same organization, users can create inner teams that deal with different aspects of the business. The system should allow to users set the list of units to control (projects, employees, buildings, or whatever), their dimensions of measurement, and then control the user access to all this information. It’s a decentralized way to create plans.
  • Spreadsheet as a first-class citizen: small companies might not use them much. But any mid-to-big companies use spreadsheets for everything. Importing and exporting system data as Excel/LibreOffice/Google Docs is a must.

With this feature set in mind, I started to create a spear time what is now temporally called Project Curva for the last 3 months. I will post more about it in the future: the used technology, the technical challenges, and some lessons learned.

A beta is due at the end of April 2021.

Update 2021-10-18

The project is called NiwPlan and can be checked on NiwPlan.com.

Cyberpunk 2077 feature
2021.03.10

Cyberpunk 2077

When you read this post, you probably already know: the Cyberpunk 2077 hype did not pay off. However, I would like to explore some personal insights.

Cyberpunk 2077 6.jpg

Me-Character and My Character

As a Role Playing Game, you are someone else. A player might spend one full hour just tweaking the characters’ appearances, hair, weight, and eyelashes. Then calmly considering spending the scarce points on each attribute. One is not creating himself/herself, but a different being. Maybe a projection or simply experimenting with unique approaches.

Then the game starts.

You barely see yourself on the screen.

Shooters are much easier to do in first-person. CDPR said they opted for the first-person approach as part of the vision that the player should feel he is indeed there. They even removed some features of the game because it was not working well in the first-person.

But as I said before, since one spent so much love creating the character, it would be a wiser decision if one would see it more often. A third person would be a better decision. It was more valuable to see the custom V fighting than was seeing Geralt’s.

The result is that I have never really connected to the character that I created.

Also, there is a second take on character creation that is unique to Cyberpunk 2077 universe: augmentations and down-the-line customizations. A game advertised as being open regarding your physical appearance, it was noted by many the lack of visual modification during the game. Not even changing the hairstyle, present in a much less relevant The Witcher 3, was absent.

Clothing functions as both technical improvements and fashion. The game could embrace the idea each piece of clothing could have any game element or bonus. It would encourage players to find their style instead keep mixing weird styles just to get specific bonuses.

Cyberpunk 2077 2.jpg

Bugs and Cars

The game was plagued by technical issues. There are hundreds of videos on YouTube with hilarious situations. CDPR had to reimburse many players, and it was removed by the PlayStation Store days after the release, due to the impossible state!

I had no crashes but a ton of buggy behaviors. Citizens’ reactions, random explosions, and enemies’ misbehavior. In some critical emotional moments, a bug can spoil the fun. I finished the game trying to do ALL the achievements. But one was impossible to achieve due to a bug in a side mission.

Then cars… The Witcher’s horse, Roach, was a delicious surprise and set the benchmark to address rideable in video games. Just before launch, Geoff Keighley (one of the few people that tasted it at the time) said driving was super satisfying. The cars felt so bad. Driving was a burden. Felt like balloons, weightless. Bikes are even worse.

I was hoping to drive like a vagabond, exploring each inch of the city. But instead, I was using teleportation all the time.

The pace that the fixes were coming was also much desirable. I finished the game in 3 months, but some patches were released back then. CDPR always had a top-in-industry attitude regarding enhancing their games after release, but this time I believe they are subpar.

Cyberpunk 2077 1.jpg

Story

At the very beginning, you have to choose the background story. There are 3 possible starting conditions. And the first act considers this choice important, pointing to it frequently.

Then it becomes irrelevant. The mid-game is a generic Ubisoft open-world game or GTA. V is on a brink of death, but the game’s open-world nature let her have romantic relationships, racing, and help other people that, frankly, could wait until you solve your most significant issue.

While not very original “there is a dude inside your head”, their take is unique and grounded. However, CDPR opted to use other very boring tropes like “He was supposed to die, but he miraculously survived”. No need to put a bullet in V’s head to wake her up in the next scene.

The mid-game is an “ensemble a killer team” theme. It was nice but the team and the final mission are less like Ocean’s Eleven and more like The Avengers: group a team of 3 guys and storm into the castle. A good point is the insertion of several recurring characters in side missions. From love affairs to super AI or ex-cops, the player starts to care about them after some time.

The final orchestrated act was also lacking due to a single biggest factor, IMHO: there are no good villains. A good villain has to be seen, tasted, and feared often. If you show Adam Smasher only once, 50 hours late you could not care less about him. The other Arasaka family members are the same.

Think about the great movie and video game villains. They have a considerable amount of screen time, so the viewer has the chance to witness his evil intentions. Darth Vader, Joker, Glados, LeChuck, Ganon, Bowser.

A very good aspect of the story is the cultural references and jokes. More than once, I was caught laughing out loud with some of them.

Cyberpunk 2077 5.jpg

Conclusion

As one of the first games I have ever pre-ordered, I must say that knew what was coming. If I waited for some reviews first…

Cyberpunk 2077 is an ambitious project and several parts of it show it. However, despite the strong beginning, it becomes a generic open-world game with amazing graphics.

I finished the game and most of the achievements. 100+ hours on it. Yet, I feel disappointed. I even may get back to it in a couple of months or years, with extra content and numerous enhancements.

Cyberpunk 2077 1.png

My Rating: 7★★★★★★★
Metacritic: 86
Project Management Certification feature
2020.12.20

Project Management Certification

After months of studying, I could finally accomplish an old dream: be a certified project manager. I work with projects since the dawn of time. I create personal and professional projects often. Big and small. For myself, with teams, and for the company.

Despite liking dealing with processes, my goal was never to be in a process-driven career. Personally, the part I like the most about processes is their implementation or optimization projects!

And I genuinely try to enhance my abilities, by studying, researching, and training. I’m an agile advocate at my job long before it was a thing. Now they are all project-flying and agile-ing all major parts of the business processes.

But one thing is to know you are good at something. Another thing completely different is to convince someone about it. Here comes the certification program. PMI is the de-facto institution regarding project management. I read their main material many, many years ago and followed their general guidelines ever since. But the certification itself, nope.

Better later than never. I decided to finally apply for the certification exam. Here’s a motivational tip: first apply for an exam then start to study for it. It’s much more effective, psychologically speaking, to have a fixed deadline to be engaged and motivated. Studying for a “to be defined” date is prone to procrastination.

I bought an online course. The instructor was very clear: each exam has its quirks and style. He will exploit PMI’s style to deliver a laser-focused course with the only goal being to facilitate passing the exam. No philosophical discussions. No discussions at all. Just the pure content. Delivered with the precise method.

It was both effective and efficient. It took me just a week of classes and an extra one to review and consolidate the knowledge. PMI requires that one should have not only a previous experience in the field but also a minimum amount of formal education, so the classes could not be shorter even if possible.

I did the online exam. Man, it was equally scary. Some dude had to check our computer screen, I had to turn on the camera all time. And any movement or sound, I was called upon.

The questions were super generic. It’s the downside of being a generic Project Management certification. It was not about construction or software development. So the online course was right. After a couple of hours, exhausted (I had to do it after the business hour, so I was extra tired), I finished.

Days after, the good news: I did it! One old dream checked! And it’s on my Linkedin, of course!

Media List 2020 feature
2020.12.09

Media List 2020

2020 might compete in the Most Pivotal Year in History Award, but it had its fair share of surprises. I had the time to attack start to finish several games. I reused the commute time to play. Below is the list that I compiled using the new GOG Galaxy app, that tracks games even from other stores.

The list of movies I’m going to skip this time, since it would not fit into a single post.

Games

  1. Assassin’s Creed: Odyssey (9★★★★★★★★★): I loved this game, setting and its protagonist Cassandra
  2. Dishonored (9★★★★★★★★★): unique story, gameplay and visuals (1)
  3. Hellblade Senua s Sacrifice superb visuals and premise
  4. Half-Life 2 (8★★★★★★★★): amazing game, even today (1)
  5. Prey (8★★★★★★★★): these guys from Arkane Studios also know how to write and make all characters relevant
  6. >Observer_ (8★★★★★★★★): super weird setting that caught my attention
  7. Rise of the Tomb Raider (7★★★★★★★): messy story, despite the good gameplay loop
  8. Dishonored: Death of the Outsider (7★★★★★★★): while it have the same not the same
  9. Far Cry 3: Blood Dragon (7★★★★★★★): hahaha some over the top jokes
  10. Virginia (7★★★★★★★): lovely story
  11. A Way Out (7★★★★★★★): I’ve played with my girlfriend, together.
  12. Frostpunk (7★★★★★★★): I tend not to like rougelike or crazy-difficult, but this one surprised me
  13. Shadow Warrior 2 (7★★★★★★★): hahaha some over the top jokes (again)
  14. The Council (ep 1) (7★★★★★★★): amazing premise and the first episode is nice. I heard that the other episodes are not great
  15. Tacoma (7★★★★★★★): passive, calm and nice story
  16. Ape Out (7★★★★★★★) die and repeat
  17. Assassin’s Creed: Origins (6★★★★★★): beautiful but boring and another AC messing story
  18. Framed (Collection) (6★★★★★★): interesting premise
  19. Metro 2033 (Redux): the amount of DeusExMachina moments is off the charts. the same for best friend companions that dies in the very next scene. (1)
  20. The Red Strings Club (6★★★★★★): weird
  21. Bioshock Infinite (5★★★★★): I really did not like the story and not the gameplay (1)
  22. Realpolitiks (5★★★★★) interesting take on politics and economics simulation
  23. Far Cry 5 (5★★★★★) beautiful but boring and another FC forgetting story

Finished in 2018-2020 (before pandemic)

  1. Doom (9★★★★★★★★★) (sort of: a bug near the end broke the saved game)
  2. Thomas Was Alone (8★★★★★★★★): once I decided to restart and go to the end, I enjoyed so much the humor
  3. Gorogoa (7★★★★★★★):
  4. Hollow Knight (7★★★★★★★): difficult as hell
  5. Quarantine Circular (7★★★★★★★): the same creator of Thomas was Alone. The same humor
  6. The Sexy Brutale (7★★★★★★★): great premise
  7. The Line (7★★★★★★★): classic whada fuck moment on gaming history
  8. The Turing Test (7★★★★★★★)
  9. Rime (6★★★★★★): samey
  10. Middle-earth: Shadow of War (6★★★★★★): (sort of a bug near the end broke the saved game)
  11. The Awesome Adventures of Captain Spirit (5★★★★★): lack in every aspect from its sister game Life is Strange

Not finished yet (for one reason or another)

  1. Gunpoint (8★★★★★★★★)
  2. Ori and the Blind Forest (8★★★★★★★★)
  3. Rome: Total War (8★★★★★★★★)
  4. Shadow Tactics: Blades of the Shogun (8★★★★★★★★)
  5. The Quiet Sleep (8★★★★★★★★)
  6. Baba Is You (7★★★★★★★)
  7. Bad North (7★★★★★★★)
  8. GRID 2 (7★★★★★★★)
  9. Offworld Trading Company (7★★★★★★★) (campaign)
  10. Subnautica (7★★★★★★★)
  11. Superhot Mind Control Delete (7★★★★★★★)
  12. Everspace (6★★★★★★)
  13. Sunless Sea (6★★★★★★)
  14. FAR: Lone Sails (5★★★★★)
  15. The Pillars of the Earth
  16. Hand of Fate 2
  17. Kentucky Route Zero
  18. Detection
  19. Else Heart Break

Continuous playing

  1. Scythe (9★★★★★★★★★): the award-winning board game
  2. Ticket to Ride (9★★★★★★★★★): played online with family and friends
  3. Democracy 3 (8★★★★★★★★): always in Vogue
  4. Imperialism II: The Age of Exploration (8★★★★★★★★)
  5. Hidden Folks (7★★★★★★★): success with small kids and non-gamers alike
  6. Offworld Trading Company (7★★★★★★★)
  7. Stellaris (7★★★★★★★)
  8. Surviving Mars (7★★★★★★★)

In preparation of the upcoming Cyberpunk 2077!!!

Bruno MASSA