Category Archives: Lab

Refactoring: Improving the Design of Existing Code

Well, it took me 10 years to read this book. Seriously. Fowler wrote a second edition during that time, making the book way more relatable for a modern programmer.

I took many courses and matured as a programmer a lot during this time, yet I had so much trouble with this one. The reason is pretty simple: Polish translation of the original book is famously atrocious…

But hey, I’m getting way ahead of myself. Let’s start from the beginning!

At some point of your career you get annoyed by the code you produce. You might figure out what’s wrong by yourself, but when you’re neck deep in it, it’s hard to get the perspective. You can feel the smell, but you’re not always sure where it’s coming from. And Fowler’s book is going to give you that perspective.

I started reading Refactoring in 2025, while it was initially released in 1999. Sounds like madness? Well, some of the parts of the book definiitely feel dated, but the general principles are still valid. That’s because you don’t need to reinvent the wheel (which is exactly why I hate “modern” web frontend tech). The book teaches you that the code needs to be readable – it’s written for humans, not for machines. It also gives you a big chunk of solutions to frequent problems that we all have to conquer.

I’m really happy I finally found the time to grab it from the top of my Pile of Shame. It was a nice refresher and a good exercise. I just wish I had more opportunities to focus on code… It’s funny I recently did some contract work on a hellish landscape that was WordPress with hardcoded WooCommerce stuff. HTML entangled within business logic inside a theme. Like in “good” old times. It would be such an excellent case for implementing the solutions from the book!

Raspbian Stretch, WiFi and TP-Link TL-WN725N

Few weeks ago I had to install fresh Raspbian on my old Raspberry Pi 2B. Everything was way smoother than few years ago, when I bought it. The only annoying issue I had was getting the WiFi to work properly. My TP-Link card (TL-WN725N) had it’s diode indicating that it’s operational, but Raspbian couldn’t find any networks.  I saw the OS recognizing the card, and after scanning for SSIDs, I saw my network. It was pretty weird – Raspbian still wouldn’t connect to them. After few hours of googling and trying few solutions, I found two sources with tips that helped me.  Here they are:

Reference #1

Reference #2

Vue.js

I’m tired of Angular. I never had time to learn it properly. Other JS frameworks are even less appealing for me. But something has changed – Vue.js appeared on the horizon. It looked very promising, and I decided to learn it. Why? It’s lightweight, clean, and has all the features I need.

Vue.js 2.0 is going to be released pretty soon, it’s going to be much faster than 1.0, while keeping the API largely the same.

There are the sources I used for learning:

You can see the mess I created in my lab at http://lab.acedude.pl/ in the “Vue.js framework” section.

3D in HTML5 using three.js

Let’s try some 3D things today. I just found a post about using three.js and decided to try it. Three.js website is full of excellent examples, the library is well documented, and there are plenty of tutorials lying around.

I just used the code from the blog post I found. Looks like using three.js is really simple. It should be easy to use it along with my favourite HTML5 game engine, ImpactJS. I was working on a tabletop game prototype, and three.js would fit perfectly to add some 3D awesomeness.

CSS – steps()

CSS animations are fun. I don’t have a lot of experience with them, so it’s the time to change it. First related thing on my “to learn” list is steps() function, for some reason.

steps() function is used for making non-fluid animations. It’s nothing big, so I’ll just drop a link here: How to Use steps() in CSS Animations If you have no experience with CSS animations, this is an excellent starting point.

The trick consists of two parts: you define the animation function:

.tick-tock {
    animation: tick-tock 60s steps(60, end) infinite;
}

the syntax is “animation: <keyframe definition name> <animation length> steps(<number of frames>, <direction>) <iteration count> <direction>;”

then you define the keyframes:

@keyframes tick-tock {
    to {
        transform: rotate(360deg);
    }
}

and that’s it. I tested it out in my lab: http://lab.acedude.pl/css-animations-steps/

It works. Best post ever.

CSS – flexbox

Flexbox, the new CSS layout type. Created to replace hacky and messy ways of doing things with CSS. I hate all that silly “post-css” stuff, so a widely-adopted, well-specified layout system sounded great to me.

To start, take a look at:

A little bit less interesting:

All in all, it’s an awesome piece of tech. Making responsive websites can be really fun with it. It should also eliminate all the hacks, and less code = better code. One concern is browser support. Sure, it is widely supported, but the issue right now is that the websites are rendered a little bit different on various devices and browsers. Hopefully it will get better with time.

Oh, and one last thing. Flexbox should simplify stuff. If you use it, because it’s cool, and then add table/grid/float/whatever -based layout to support older browsers – it’s just stupid.