Category Archives: Lab

10 December, 2017

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

16 October, 2016

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.

10 April, 2016

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.

10 April, 2016

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.

4 April, 2016

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.