Forem: Peter Gašparík

Put Design Patterns on the Flavor Wheel

Peter Gašparík — Wed, 09 Dec 2020 20:56:41 +0000

Photo by Mae Mu on Unsplash

Do you like coffee? I do.

Do you like design patterns? I do. Well, most of them.

So I brought Coffee Tasters Flavor Wheel and design patterns together with a design patterns wheel. Unlike flavor wheel, this wheel has only 2 layers. Inner layer represents pattern categories and outer layer represents concrete design patterns. I find this kind of category visualization quite nice.

Try implementing optimization algorithm from time to time 🤔

Peter Gašparík — Mon, 05 Oct 2020 15:05:04 +0000

I used to enjoy solving optimization problems in the collage. Then I graduated and moved from one webdev job to another and I realized, that there is not a lot of computer science in webdev. I think it's more of a architecture oriented field, which is not bad, just ... I sometimes miss a good brain twister. However, I came across a task, in work, that required me to solve a subset sum problem. I did not know that, it was a subset sum problem at a time. I tried to apply some greedy algorithm, which was good enough, so I considered this task done.

Few weeks latter I came across the same code and I found a combination of inputs that would result in a wrong answer. Well, that's what you get by implementing a greedy algorithm, I thought, but I wasn't satisfied. The combination of inputs, was so primitive, that I had to search for better solution.

I knew there was a perfect solution: run trough every combination. Not a great idea because of a thing called exponential growth. You know, the thing that gets crazy big really fast. So, could an optimal algorithm, computed in a reasonable time, be reached?

I searched around and found a wikipedia page about subset sum problems. Subset sum problem is a problem of selecting a subset of items which sum equals to some integer. In general, the solution for this problem assumes, that items in subset cannot repeat. However, my problem could repeat items from the set of items. I updated my search query to subset sum with repetition and there are other people wanting to solve the same problem as I do. However, I could not find any wikipedia page on this one.

I read trough stackoverflow questions, various articles and came back to the original wikipedia page. Some sources were useful some less. In the end I came across a pseudo code for solving subset sum. To be honest, pseudo code got me good. After a lot of years of webdev work I realized, that my ability to follow pseudo code is much worse then during my collage years. Once I got a feel how to solve this problem with dynamic programing I implemented it, wrote tests and wrote documentation.

It took me a week or so, to finish the dynamic programming algorithm, because I was doing it outside my work hours, but it was really an enriching journey.

👉 Moral of the story is, try to solve a computer science problem once in a while. It is so refreshing after months of parsing json and communicating with APIs. It also showed me, that my skill to read technical documentation is not as sharp as it used to be.

👉 Experiment and try some new technology or development technique. For example I tackled this problem with TDD and I have to say, it was a perfect tool for this kind of a job. Job where you can define specific examples for inputs and outputs.

👉 Also, if the problem is small enough, write a documentation and try to explain the problem and your solution. This activity can also show you that you still have some gaps in your knowledge. Writing an understandable documentations, is much harder then it seems. It made me appreciate docs, that are easy to follow, more.

You can also plot effectiveness of this solution against running trough all combinations. You may find some interesting results.

Of course, I put my code on github.

git + svn (both remote) in case you need it

Peter Gašparík — Mon, 21 Sep 2020 15:19:53 +0000

You may be traveling to work right now and reading this article wondering, is this worth to read? Well, for the majority of you, the answer is no. But in case you are in a situation, where your source code has to be stored in the svn (for example because of some legacy deployment process), but you, and your team, want to start using git and take advantage of pull requests and code reviews, then this article might be for you.

Overview

The goal is to use git for everyday commits and update svn just before deployment (or when you need it). I found a lot of tutorials, on the internet, for running git and svn side by side, but they concentrate, on how to use git locally and still commit to remote svn. That means, you cannot use git with your team and git is just your own personal helper in this case. However, I want to be able to have remote git and remote svn and synchronize them.

In the end we will have 2 workflows.

Feature flow - this is a process for day-to-day programming. You can create new branches from master branch (to fix a bug or develop new feature) and in the end, you can merge changes back to the master branch. This workflow can be separated from svn, therefore it will be done solely in git.
Synchronization flow - This flow is meant to synchronize changes between git and svn. It's quite easy to put this process into words, but it was much harder to actually make it work. In a nutshell, take all changes from svn and take all changes from git master branch. Mix them together and update them both (git master branch and svn) with the current source code. Easy, right?

Setup

I will assume, that you have a git remote repository and svn remote repository up and running.

Let's start by cloning git repository git clone https:\\www.yourgit.com\path\to.git. Now open .git/config file and add these lines.

[svn-remote "svn"]
    url = https://www.yoursvn.com/url
    fetch = you_can_fetch_some_subdirectory_from_svn

This will create new remote named svn and git will know, that this is a svn remote. You can find full documentation for git-svn. That's it. You are all set up now, so let's take a look at synchronization process.

Synchronization

You and your teammates will develop new features and fix bugs with git branches. You may create pull requests and merge all changes to the master branch. But there will come a time to synchronize all git changes with svn. One person on your team, should be able to do this job. These are the steps, that I follow when synchronizing changes with svn.

Fetch all changes from svn repository and move them to our release branch. We will use bridge branch to fetch svn changes. Bridge branch should be local, do not push it to git remote.

checkout bridge
git svn rebase
git checkout -b release/<id>

merge all changes from master to this release branch

git merge master

If you encounter a conflict while merging, that means somebody changed something in svn and also in git and git cannot solve the issue. Resolve conflicts the same way as you would in standard git merge conflict scenario and then run git add -A and git commit -m "merge master".

update svn by committing all changes that are in release branch. That includes all changes from git.

git svn dcommit

Now is the right time to push release branch to git remote, but this step is optional git push origin release/<id>

update git master branch by merging all changes from release branch. That includes all changes from svn.

git checkout master
git merge release/<id>
git push origin master

As you can see, this sequence of steps can solve also special case, when someone still uses svn and commits changes to svn repository, but some people use git. That's achieved, when we take all changes from svn and move them to release branch.

When to request data in SPA

Peter Gašparík — Sat, 04 Jul 2020 15:45:44 +0000

I came to SPA (single-page application) development from MPA (multi-page application). Surprise, surprise, they are not identical. SPA has some unique concepts, that you don't need to think about in MPA. One of them is the issue with requesting data from API. In MPA development, every user interaction is a new request to server and every URL, you put in the browser, is also a new request. But SPA has much more options. You can request some data at the start of your application, then there are moments (usually preceded with user interaction) when you have to request other data for you application.

My understanding is that every application state should be represented by a URL (and vice versa, every URL should be able to provide correct content), no matter if you are building SPA or MPA. For example, if I had an application that allowed you to list books and view a detail of a book, I would probably have 2 kinds of URL:

/books
/books/:id

However, when I am building SPA it's not that obvious, when is the right time to request data from API and when to change URL. It seems to be all one atomic action in MAP (user interaction, URL change, request), but in SPA you have to choose what is the right sequence. I used Angular and Vue for my projects, but I cannot remember that I read about this in their documentation. They give you many tools, but they don't mention what is the correct tool for managing asynchronous data for your views.

API request first

user interaction -> API request -> change URL -> change view

I thought, that most API requests should start with some user interaction (for example clicking a button). This idea was much easier to comprehend for me. User sees list of books, they click on a book and app will request a detailed information of this book and if this request is successful app will change the URL (and view) to the book detail. Then I noticed some other advantages. Your views don't have to handle an invalid state, when they don't have data, because app will change URL only if data is correct. This can reduce your if statements in the view. But this approach is failing, if user just enters URL into the browser. This will be a special case, that will haunt you during entire development process. It was such a big issue for me, that I tried to think of an other way to request data from API.

URL change first

user interaction [optional] -> change URL -> change view -> API request

I had to get rid of my assumption, that API request should follow user interaction. Instead, I made my special case my main use case. I have to be able to serve correct content to user if they enter URL to browser. In other words, I want to make a URL change to trigger API request. Angular is equiped with guards and resolvers and vue is equiped with guards and component lifecycle. You will probably have to make your views more robust (you will have to handle invalid data, because API request will be asynchronous and view will be already rendered) but I found it a small price for easier data requesting. And let's be honest, you would probably want to handle invalid data in view anyway.

Of course, you are still able to react to user input. When user clicks on a button, you will change URL and everything will continue as if user only inserted URL to browser.

Note: Router can behave differently in each framework. For example Vue won't notify you if there is a change in URL parameter. This can be handled by watching URL parameter, but I found it a little bit odd. There is probably some good reason behind this design decision, but I'm yet to find that out.

I find the second approach, URL change first, much easeir to work with. I still strugle with some concepts, but I think it might take me some time to get used to them. Or maybe there is still something I am missing.

Improve your website performance (gzip + cache)

Peter Gašparík — Tue, 14 Apr 2020 12:07:17 +0000

I always forget to pay attention to webpage load performance and size. I had a mindset, that it's complicated and that it requires a lot of effort. But that is not true. I want to share 2 easy steps how to improve your webpage load time and size.

To verify, that changes I made had positive inpact I used two tools: lighthouse and gtmetrix. Graphs are at the end of the article.

Compression

All files, that are requested from your server, can be compressed. Size reduction depend on file content, but I think you can get pretty good results in general.

Compression will reduce your page size and improve your page load time. And actually it's really simple. This is an example of my Nginx virtual host.

gzip on;
gzip_vary on;
gzip_types text/plain application/javascript application/font-woff text/css application/json;

gzip enables or disables compression
gzip_types set what types of files should be compressed
gzip_vary enables or disables Vary header, that tells server to not serve cached gziped files if browser does not support gziped files.

The issue with Vary header might be a topic for another article. All you need to know, at this point, is that you should add this header if you use cache and compression.

Server cache

Both tools (lighthouse and gtmetrix) will warn you about long caching of static files. It seems that you cannot improve that much after compression, but this change will bring you closer to 100% rating.

You can cache your files in Nginx by adding these lines into your virtual host:

location ~* \.(?:png|svg|css|ttf|woff)$ {
    expires 720d;
    add_header Pragma public;
    add_header Cache-COntrol "public";
}

location ~* .(?:png|svg|css|ttf|woff)$ this line decides which files to cache. In my case its .png .svg .css .ttf .woff files.
expires 720d; i want to cache files for 720 days. It is recommended to go for more then a year (that's the "long" in long term cache).
add_header and set some headers

Results

For full disclosure, fully loaded time can vary, quite a lot, so this value is not very accurate. Nevertheless, I tried to average 10 tests and get a value.

Other improvements

You can never be truly done optimizing your webpage and steps that are right for you often depend on your website content and priorities. However, there is a list of some other areas to improve on.

preconnect/preload resources
http/2
define image dimensions in HTML or CSS

File based database migration app

Peter Gašparík — Thu, 31 Oct 2019 11:18:17 +0000

I get frustrated if I have to do a task that can be automated or accomplished easier (with less brain activity). I think writing file based database migrations is one of those tasks.

File based database migrations

For those, who don't know, what file based database migrations are. It's basically version control for databases. Every application, that uses database, and evolves over time, will eventually have to change database structure. We can use special files, migrations, to share this change between developers and servers. Migration file is a SQL (or other language) code, that can apply database changes or undo those changes.

Migration framework keeps track of already applied changes and not yet applied changes. You can update to the newest database scheme version or fallback to specific version in time.

Creating migration file

To create a migration file you have to know SQL really well or know specific migration framework commands. In my last job, we did 4-5 migrations in a month. It's not frequent enough to remember all the commands needed to create valid file, but frequent enough to make me angry each time I have to google correct commands.

Migrator

I decided to create a desktop application, that generates this migration file for you. This application should be able to create, update and remove database tables with zero code. I think it's possible to create user interface, that will handle most migration cases.

First of all, I tried to google if this kind of application already exists. I did not have any success finding one. If you know about existing application let me know

The application is called Migrator. It's written in java, so everyone should be able to run it. There might be some bugs and missing features, but I think it's enough to prove the concept. Also, some form labels might be confusing. Unfortunately, I did not add any hints for them, but it might be improved in the future.

Download: https://github.com/pipan/migrator/releases/download/v0.2.2/migrator.jar

Github: https://github.com/pipan/migrator

Current support

Current version of the application supports only phinx migrations (PHP) and MySQL databases.

Possible future support could be for:

flyway (java)
db-migrate (nodejs)
fluent (.net)

I will appreciate any feedback or contributions. The idea is to keep it open source and let community add other database drivers and language support.

You might need Java 12 and higher to run this application

Don't ignore caught exceptions

Peter Gašparík — Wed, 28 Aug 2019 09:32:44 +0000

I had a really bad day because of a function, that ignored all caught exceptions. Code looks something like this and it was part of a third party library, that I was using. I didn't know about implementation details at the time.

function doSomething() {
    try {
        // some code
    } catch (err) {}
}

Debugging function like this, that never crashes and never prints any error messages, is a nightmare. I usually trust third party libraries and at first assume that problem has to be with my code. That’s why I spent hours debugging this.

So, what to do with exceptions? I think it's valid to let other programmers (those that use this library) to handle the exception. Especially, if you have no idea what to do with it.

What do you think? Is there a situation where this is acceptable? Maybe production environment? I personally don't think so, because you want to know about errors in production and store them somewhere.