DEV Community: Saija Saarenpää

Slow motion with Legos

Saija Saarenpää — Wed, 16 Dec 2020 21:44:28 +0000

The last few years have been a great development for mobile video. Not only for Instagram stories and Youtube vlogs but also for capturing sports or funny things in slow motion. Because I find slow-motion videos entertaining, I wanted to try one myself too and share my experience. I decided to combine this with one of my favorite hobbies, Legos. Long story short, if you want to see how I totally smash the building complex in the next photo, go to see this video. The music of the video is from Bensound

This complex is an imaginary build of a terraforming facility on Mars and withholds thousands of plants. I didn't use a super long time for building it just to destroy it. The complex itself and its total destroyal were inspired by Australian Lego Masters, season 1, episode 2. The assignment was to build a space-themed complex just to be destroyed by either dynamite, baseball bat, falling from high, or smashing towards the wall with high speed on rails. The closest I found doable inside my house was to smash it with something. I don't own a baseball bat and had to figure out something else. My weapon of choice is in the following pic.

It's a decorative wakizashi, the middle one from the decorative set having katana, wakizashi, and tanto. Katana was a little bit too long, and I was afraid that I would hit the photographer. Even though it's not very sharp because it's decorative, I still decided to use the dull edge to do the actual hit so my Legos would get the least damage. In the following image, you can see my setup. As a background, I have two black queen-sized bedsheets. On the table, I laid a black bed cover. That stool is there for me to stand on. I wanted to do the hit myself, so I asked my husband to operate the camera. I wore some black clothes too so only my hands are clearly visible in the video.

The best mobile phone cameras can do either 720p or 1080p with 240fps, which roughly means you can get 8 x slower than normal video speed. You can get even slower if you are willing to cut down the resolution. Some apps also use trick techniques to achieve an even bigger slow factor. My video is shot 240fps on 720p. First, we did a dry-run to see what is visible in the frame and how the lighting works. These poor bastards in the following image got to be the guinea pigs before destroying the real building. I just tossed them in the air and, we checked out if they are clearly visible in the video. We also checked if they look cool enough on the 8x slowness to see if it's worth doing the whole thing at all. After all, there was a lot of collecting small Lego pieces from the floor at stake. I don't want to do that for anything. Luckily dry-runs supported going on with the real thing.

The actual photo shoot went pretty well. I had designed the building to have a lot of bits and pieces hidden in its towers and domes, just to look nice when bursting around after the hit. The break happened quite evenly and almost all the tiny things got out. Even though I tried to build the towers quite flimsy, they did not mostly fall apart. That kind of turned out ok because I love that final tower rolling to the floor at the end of the video. Here you can see some details of what I had hidden into one of the towers, including some shiny gems!

For the post-processing of the video, I first tried Vegas Pro 14. The app crashed every once in a while, so I had to be saving the whole thing pretty often. At some point, I lost my nerves on the crashing and decided to use Adobe Premier. Unfortunately, I did not find all the same functionality for slow-motion video editing from that. The best thing in Vegas was the speed envelope. You could add it to the whole clip and then add additional stops on the curve. You could then move those stops to achieve different speed at different parts of the clip. I googled a bit and ended up with the impression that Adobe After Effects has similar functionality. I tried that, but it was not so intuitive to use and, I did not manage to get the same outcome, so I came back to Vegas after all. This is a partly screenshot of the Vegas timeline. You can see the green line with dots over the video that is the varying speed curve, the higher the faster.

For the sound part, I removed the original sound. I replaced it with a free (with attribution) epic track I found online. There was still one thing to fix. In one part, a tiny piece of white wall on top of the bedsheet was visible. Luckily I knew that it was possible to add solid color boxes wherever you need in the clip. They can be used e.g. to introduce a speaker, to have a box behind the text, and some graphics when someone new is speaking in the video. I used the same functionality for adding a tiny box on top of the video and matched its color with the background. That's the topmost track in the timeline. There, fixed! That was my experience with the slow-motion photoshoot and editing it. I sure had fun, even though I had to collect all the pieces everywhere from the house afterward. It would be nice to hear your experiences and tips in the comment section. Where do you get ideas and resources (music etc.) for this kind of entertainment?

My first virtual presentation

Saija Saarenpää — Thu, 10 Dec 2020 19:27:54 +0000

A couple of weeks ago I and my two colleagues from Vincit were having a streamed presentation about "Web development in an hour" in Mimmit Koodaa - This Is Not a Webinar event. In this post, I'm going to open the experience a little bit. If you're interested in the presentation itself or see the introduction of what the whole This Is Not a Webinar event was about, check out my post on how to quickly ramp-up with NodeJS. I've been to many conferences and smaller events before, both as a guest and as a speaker, but never been in one where I can't be in touch with the audience. Judging by this single experience, it's quite a bit different than usual.

First, we arrived at the venue. Siili Solutions had offered their office for the streaming. There were two studio rooms, as there were two stages with program streaming at the same time. One track was for more technical presentations and the other for some softer topics. There was a strict timeslot to arrive to be prepared in time, but to avoid too many speakers being present at the same time. We were escorted to a nice waiting room full of healthy snacks and drinks. Before our turn, there was some extra time which was used efficiently by photographing us in front of the Mimmit Kooodaa banderol and a few other places. I kind of felt like I've been in a nice gala event and suddenly felt bad for wearing my full stacker sneakers. Yeah, that's me on the left in the pic.

After the photo-op, we were escorted to the studios. Before going in, mics were installed. This was also an interesting operation because I have previously used only a handheld mic, or a one hanging in a stand. My head seems to be an odd-shaped for a head mic since it was not easy to get this stay as it should. I also eventually had to lose my right earring because it was almost guaranteed that it would have been causing some nasty sounds to the stream just by hitting the mic arm. The studio room itself was nice, you can see it in the cover photo of this post. It had some markings on the floor which guided which area is visible in the stream so we had some leeway on where to stand.

After our introduction, one of my colleagues started her presentation about ReactJS. At that point, I and my other colleague whose part in this presentation was to ask the questions from the stream chat on the Q&A section were waiting for our turn to be on the stage and discovered a horrible surprise. The slide notes were not present at all, we were on our own. You can see from our faces that we were following the situation carefully, but noticed our colleague was doing very well without the notes. This technical problem did not resolve during our whole presentation so I was forced to confront it as well, on my turn, when talking about NodeJS.

Apparently, I managed to do ok as well. I haven't seen the recording yet (they are coming later, though only in Finnish only, but I try to offer some captions there), but we got a lot of praise for having a clear and understandable presentation. Especially those who were not yet familiar with web development were very pleased that we managed to explain things without too much jargon. I think we covered our target audience pretty well, who were mostly people either changing career path to IT from something else or just otherwise new to IT. Even though afterward it came clear that we did well, I had plenty of doubts during the presentation. The most difficult part for me despite not having the slide notes was that I could not see any of the listeners' faces. I had no idea if they were laughing with me or were they already asleep. I'm excited to see if these virtual conferences and seminars are here to stay or just covering up the lack of physical ones during COVID-19. Anyway, it's always nice to have new experiences, and I would love to hear about yours in the comment section!

Need help, fullscreen button bug

Saija Saarenpää — Thu, 03 Dec 2020 21:44:18 +0000

Hello fellow developers!

My colleague sent me a screenshot (partly in cover pic, complete screenshot at the end of this post) from his browser when reading my blog post about Tailwind. The fullscreen buttons which are in the top-right corner of a code blog appeared huge to him. I couldn't debug this at his machine, but I dug out the offending component with dev tools and ended up with this block

<div class="highlight__panel-action js-fullscreen-code-action">
    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512" class="highlight-action highlight-action--fullscreen-on"><title>Enter fullscreen mode</title>
        <path fill="#fff" d="M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z"></path>
    </svg>
</div>

which seems to include the svg path of the fullscreen icon. I noticed that the viewbox is huge (448 x 512). I bet there is some css which normally overrides this size, but in his case, it did not load. I could not reproduce this, but he sent me some console debug from Firefox where it happened, but fixed on reload. He said he didn't use any ad blockers, but Firefox might block something by default. Anyway, I don't think it's about blockers because it did fix with a reload.

13:28:59.784 Loading failed for the <script> with source “https://practicaldev-herokuapp-com.freetls.fastly.net/packs/js/runtime~Search-5ec5f41eb3c09400436a.js”. my-first-date-with-tailwind-57d7:28:1
13:28:59.852 Loading failed for the <script> with source “https://practicaldev-herokuapp-com.freetls.fastly.net/assets/hello-dev-a33d069dda0cc1cfef81b71ac053adb1c4cfb617ad4140d02892b548b3081161.js”. my-first-date-with-tailwind-57d7:1591:1
13:28:59.921 Loading failed for the <script> with source “https://practicaldev-herokuapp-com.freetls.fastly.net/assets/base-7b4225a18255cd93f336b035a111a621d1f896f66fa18e26141c1958a7dbeabb.js”. my-first-date-with-tailwind-57d7:31:1
13:28:59.992 Loading failed for the <script> with source “https://practicaldev-herokuapp-com.freetls.fastly.net/packs/js/Search-5b0e630aa6f089abbc66.chunk.js”. my-first-date-with-tailwind-57d7:30:1
13:28:59.993 Loading failed for the <script> with source “https://practicaldev-herokuapp-com.freetls.fastly.net/packs/js/vendor-2db052da96e92ab3c700.chunk.js”. my-first-date-with-tailwind-57d7:29:1
13:29:00.004
Uncaught TypeError: window.InstantClick is undefined
    254 responseTemplates.js:3
    Webpack 4
responseTemplates.js:3
13:29:00.218
Request to access cookie or storage on “<URL>” was blocked because it came from a tracker and content blocking is enabled. 2

Of course, this is not a major issue as it probably does not happen a lot, but on the other hand, if the viewbox of the svg element is unnecessarily too big, it could be fixed. Anyway, this is just an assumption of what happens, please chime in if you come to the same or different conclusion. For some reason, this is bugging me, probably not least because this is happening to a person who reads my blog 😅

4 tips on getting your hobbies done

Saija Saarenpää — Sat, 28 Nov 2020 23:38:43 +0000

If you want to skip the background section and go straight to the tips, jump here

Background

As long as I've been in a full-time job, I've been, more or less, struggling with balancing work, hobbies, and sleep. For a long time, I've known how many hours of sleep do I need to feel even slightly awake to start doing any brain-related work. This has even been emphasized during the remote work era since there are not many minutes from the moment I wake up until I'm in my remote workstation with a cup of coffee and breakfast. It doesn't help a lot that I'm an evening person, and in most of the seasons in Finland, it's already quite dark outside when I've finished working from the day. In general, if the hours needed for working and sleep are counted, there is a certain amount of leftover hours for doing the rest of your life.

The era of remote working that I count starting from spring 2020 has helped to organize life a bit. I find it a relief that I can take a needed break of brain-work to start or empty a dishwasher or water the flowers. I can appreciate the usefulness of the break as that time is now freed for my hobbies in the evening. Of course, at the same time, I miss hanging out with my colleagues on those breaks. The other thing I miss is the ready-made food for my lunch. Sometimes it's fun to cook during the day, but some days are just so busy that I would have wished I've had a microwave dinner that I can consume at my workstation.

Despite some of the relief with the house chores brought by the era of remote work, there are still plenty of things I would like to achieve during the few hours left during the evenings after work and before getting some sleep. I know I have too many hobbies. I'm the person who gets excited about everything. I often start many projects simultaneously, and then I always have to choose which one to continue at which time, and that seems to be overwhelming for me. Besides the selection problem, another problem I've had is the "I can barely start" problem. I don't know if this is familiar to you, but it's this feeling that if you only have an hour or two to do something relaxing and fun, you think that there's so little time that you can bearly start working on it until the time is already over, it's not worth to start at all. That has happened to me a lot. Usually, it means that I browse some social media or play some casual games on my phone instead of doing something I know I would enjoy and would be useful for me, but I'm just unable to start doing it.

It hasn't been very long since I've overcome those issues. Every once in a while, I still might spend a whole evening browsing social media or shopping on my phone to fill some kind of void. There just are some days that I'm so tired of work that I can't even think about doing any useful afterward. The situation currently is way better compared to what I've had in my worst days, even though it still could be improved. I've had some times when I have lived for the weekend. Evenings during the week have meant nothing to me. I have just been wishing it would be a weekend again and I could do something productive.

The actual tips

The path to overcoming those issues has been quite long, but I'll now share my few tips on how to make it better if you are having similar problems.

Overall, the most important thing you can do is to change your mindset. One needs to think that doing something is better than doing nothing, even if you wouldn't have time or strength to progress a lot. You can choose a task that is the easiest to grab or which you'll know will last the least time to accomplish, as long as you do something. If you think all your tasks will take a long time or need a lot of preparation, the next tip may be helpful.
Prepare your projects in subtasks. This is helpful if you only have a small timeframe to do your hobby at a time. I have a concrete example of a task I recently churned into smaller pieces. I'm planning to apply for a Finnish version of the Lego Masters reality show, and I have a lot of practice to do to make sure I can pass the building test. One of the tasks that I set to myself is to make the same assignment as the first episode of Australian Lego Masters season 1. Basically, to build a city block which can live along with the skyscrapers already present in the city. I know this is a huge task to be completed in one go, so I divided it into several tasks. At the first session, I will clean up some space to even think about starting to make a project that big. The next task is designing the main building in the block and its surroundings. The following tasks are to complete one or two buildings or parts of the block. Actually, any of those tasks are not needed to be completed in one go if I run out of time or feel like not finishing them. I used to start tasks with a mentality that I need to have something concrete finished in the same day, and that caused me to not start at all until the weekend because I knew I didn't have time to accomplish the whole shenanigan. Now I know that it's a great job if I accomplish even a simple subtask.
Keep your projects easily available. It's quite hard to start anything if you need to go through a lot of trouble to get started. This is the reason I have organized my Legos so that they are easily available if I just sit on my building bench. I also have my watercolor inks and acrylic paints easily available if I want to start painting. I store my yoga mat on the living room floor (not very pretty, but handy) to start exercising whenever there's a feeling I want to do that. I have a puzzle building mat that I can just unwrap to continue building the one I'm in the middle of. I have my knitting bag, including my WIP knittings, for taking it with me anywhere I need. I also have all my code editors always open for jumping into any project whenever I feel like it. If I should dig all these things from the closet and use some time to set them up, I probably would not be as keen to start working on them.
The previous tips have been mostly for the "I can barely start" problem. For the selection problem, for me, the most efficient tip has been to try to do stuff evenly. Sometimes I'm more interested in one particular project than the others, and it's easy for me to select to work on that one, and it's ok, but sometimes it's more tricky. As I'm the one who gets excited about everything, I'm usually interested in many projects at the same time. In those situations, the best thing for me is to work on the one I haven't worked on in a while. It's also refreshing to alternate the projects and keep all of them in fresh memory.

I hope these tips are useful for you if you're struggling with the same thing. You're also welcome to share yours in the comment section. I have lots to do until I'm as productive as I want to be in my free time.

Quick ramp-up with NodeJS

Saija Saarenpää — Sun, 22 Nov 2020 16:39:49 +0000

Last Friday I was keeping a presentation with my colleague about web development for #mimmitkoodaa (freely translated: women who code) audience. Mimmitkoodaa program is basically developed for advocating diversity and gender balance in the IT industry. This particular event called ThisIsNotAWebinar was targeted especially for people who are starting their career in IT either by studying it in the first place or transferring from another field of expertise.

I and my co-presenter are both full-stack developers so we divided the presentation so that she told about frontend development with ReactJS and I told about backend development with NodeJS. In case someone is now starting with NodeJS, I'll show our example app from the presentation. It shows how to get easily started with backend development. In this example, we are creating a small todo-board app, where the user can add post-it notes, modify and remove them, and give them likes. In this post I will go through setting up the backend project, creating the base of the server, and one endpoint (GET) to get started. The rest of the endpoints, database setup, and the whole application code with a lot of comments, and with a fully functional ReactJs frontend is in Gitlab

Getting started with backend development is very easy. There's no need to have any boilerplate starter packs or anything, it's very easy to just start writing code. Here are the basic steps:
A) Install NodeJS, LTS version is fine if you don't want to live on the edge
B) Create an empty folder for your project
C) In that folder, create file index.js
D) Insert some code into that file (we'll get back into that step)
E) Install dependencies with the command npm install (more about that later)
F) Run by typing node index.js in your folder in the console of your choice (terminal, Powershell, or similar, depending on your platform)

That's it! Let's now take a closer look at step D, where we add the code into that index.js file. I have a small example app here:

const Koa = require('koa');
const port = 8000;
const app = new Koa();
app.listen(port, () => {
  console.log("App running in port: " + port);
});

You can do your server with pure Node, but if you are building a little bit bigger app than just Hello World, you probably want to include some kind of helper framework that provides routing for your endpoints. In this example, I have used Koa. It's a modern framework from the makers of Express if that's a more familiar name for someone. Let's break down the code line by line:

1) We take Koa into use by requiring it
2) We define the port number we want to use for our server
3) We create a Koa app object which acts as our server
4-6) The app object has a method called "listen", which starts the server. It takes the port we defined as a parameter

Next, we can move on to step E where we install dependencies. As we use Koa, that is now our dependency, so we run npm install koa. That will install the Koa module to be used in our app.

This is all we need so far to get the server running. At this point, if you run node index.js you should see your app printing App running in port: 8000 in the console.

This application does not yet do anything. The next step is to add at least one endpoint. For simplicity, we are here using a more traditional REST (Representational State Transfer) model for our interface. It operates on HTTP (Hypertext Transfer Protocol) standard methods GET (for fetching resources), POST (for adding resources), PATCH (for modifying resources), DELETE (for deleting resources), and a few others. If you want to look into something more modern, e.g. GraphQL is a good option. Here we have some new piece of code I added between the creation of the Koa app object (line 3) and starting the server (line 4):

var Router = require('koa-router');
var router = new Router();
router
  .get('/items', async (ctx, next) => {
    // TODO: add implementation here
  })
app.use(router.routes());

Let's once again go through it line by line.
1) We take the Koa-router module into use. This allows us to create routes for the application. Routes are used for identifying which resource we are getting, adding, deleting, or modifying.
2) We create a Koa router object, similar than we did with the Koa app object.
3-6) This will create our first endpoint. In this example, we have a generic resource called items. This endpoint will allow fetching of all items we have stored in our server.
7) The Koa app object has a method called "use". This allows adding some functionality called middleware. Middleware can react to the requests coming to the server. This line takes all the defined routes into use.

Next, we are going to implement the GET items endpoint. Following code needs a little bit more preparation. If we want to store some data in the backend, we'll need a database. Generally, you would create and use a proper database like PostgreSQL, MySQL, or MongoDB, or another similar one, but setting up any of those is beyond this post so we are using a temporary text file-based database module for Node called node-persist. Node-persist is a key-value based storage that allows storing data temporarily. In the example code, we have set up the database to expire its data after one week. The setup for the database is done like this:

(async () => {
  await storage.init({
    dir: 'storage',
    expiredInterval: 1000 * 60 * 60 * 24 * 7
  });
})();

Addition to setting the expiration interval, we also define the folder for the database to use for storing our notes. Take a look at the whole source code file to see where to put it. Also after using the Koa router and the node-persist database, before running our project again, we need to install new dependencies. Run "npm install koa-router node-persist". Let's now take a look at the implementation of a GET endpoint:

const ITEM_PREFIX = 'item_';
router
  .get('/items', async (ctx, next) => {
    let allPostIts = await storage.valuesWithKeyMatch(ITEM_PREFIX);
    ctx.response.body = JSON.stringify(allPostIts);
    return ctx.status = 200;
  })

Break up into lines of code:
1) We define ITEM_PREFIX. This is because node-persist is key-value based, and we need a way to identify each note item. Node-persist does not provide any help for using a running item counter to have keys for the items as a running number like ID property in a normal database. For this purpose, we have our own item counter which we also store in the database. Because we store both the items and the counter, we need to have the ITEM_PREFIX added to those IDs which refers to the actual note items. To get a closer look at how we have been saving the note items and the counter in the database, check endpoint POST items from the complete code file.
2-3) This is already familiar from the previous code example
4) This line fetches all items from the database whose key matches with our ITEM_PREFIX. This basically then fetches all the note items we have there and excludes the item counter itself.
5) Rest is easy, we just stringify the results for giving them to the frontend as a JSON string instead of a Javascript object.
6) The last thing is to return HTTP status 200 which means everything went OK.

This can look a little bit overwhelming at first sight if you are a beginner, but this is still much easier than to set up the frontend side of the project ;)
If you want to see your app up and running, you need to either set up the frontend from Gitlab or you can poke around the API endpoints with Hoppscotch or Postman. You'll find your notes by GET http://localhost:8000/items. By posting
{"text": "Remember to buy milk!", "likes": "0"} into POST http://localhost:8000/items you'll add a new item with text "Remember to buy milk!". If you created new item and it got ID 1, you can now add like by posting POST http://localhost:8000/items/1/like You can check further instructions from the manual of the API tool you decided to use if you are not yet familiar how to send requests using any of them. With that note, I hope you enjoyed this small ramp up guide.

My first date with Tailwind

Saija Saarenpää — Wed, 11 Nov 2020 21:31:07 +0000

Peeps in one of my favorite Finnish tech-related podcasts @ Webbidevaus.fi have been gloating long enough about the awesomeness of Tailwind CSS that I finally needed to try it out. Luckily I had just a perfect project for that. After spring, when most of us has spent a lot of time inside due to Covid-19, my friends and I started to play Cards Against Humanity online a lot. Some dark humor to lighten these days. I also needed a new coding project to practice GraphQL, which I haven't used in any work project yet. I decided to take it as a challenge to create my own CAH server, which also would look nice and have some usability thought out. I can tell you at this point that it's not nearly ready yet, so there isn't much to show yet. Anyway, this was a nice starting point to have Tailwind CSS included in the project so I could quickly create some preliminary styling for a couple of first screens of the game.

This is how the starting screen currently looks like. Simple label + input + button. First, I was horrified in putting all that clutter inside the JSX, which is already messy by itself by my standards. But very soon, I started to grow into it. I found this nice tutorial, which I followed for setting up Tailwind CSS https://www.smashingmagazine.com/2020/02/tailwindcss-react-project/ At least the installation part of it did explain clearly what I have to do and why. The only problem I encountered was with autoprefixer. I needed to install exactly version 9.8.6 because a newer version did cause some problems.

Like you can see, all of my first game screens consist of buttons, labels, and input fields so it was very easy to get the style in all of those screens. Next, we can take a look at the JSX of one of my function components, JoinServerDialog (the first screenshot). Now when I think about it, it's not even a dialog, but a full-page query.. need to think about renaming it.

<div className="h-screen flex flex-col
    justify-center items-center space-y-4">
<label className="text-pink-700 text-lg"
    htmlFor="nickname">Set nickname</label>
<input className="w-40 h-8 shadow-lg rounded
    border-2 border-pink-700 p-1 text-teal-700 text-md"
    type="text" id="nickname" name="nickname" placeholder="foobar"
    value={inputNickname} onChange={(event) => {
  setInputNickname(event.target.value);
}} onKeyDown={(event) => {
  if (event.key === 'Enter' && inputNickname) {
    setSubmitted(true);
  }
}}></input>
<button className="w-40 h-10 rounded bg-pink-700 shadow-lg
    text-white text-lg" key={"joinServerButton"} 
    disabled={!inputNickname} onClick ={(event) => {
  setSubmitted(true);
}}>Join server</button>
</div>

There are four stylable items: parent div, label, input, and button. Tailwind provides a few basic colors for starters, but you can expand the selection with your own theme. I did not take a further look into that yet, because I just quickly wanted to get rid of default HTML styling, so I picked one of those ready-made colors as an accent color. Let's take a look at those stylable items one by one.

<div className="h-screen flex flex-col
    justify-center items-center space-y-4">
</div>

The parent div does some basic things like adding spacing between items and centering the content in both axes. Tailwind supports Flexbox under its hood, which is nice because that's what I've been using lately. That has satisfied me by fixing the most horrible first world problem about how to center an item with CSS.

<label className="text-pink-700 text-lg"
    htmlFor="nickname">Set nickname</label>

The label has only a couple of properties to set. For text color, I picked the accent color in a semi-dark shade. There are nine shades for all the predefined colors available, and they range from 100 to 900 by steps of 100. The other property I'm setting is size. There are five predefined font sizes available xs, s, base, lg, xl. Large seemed suitable for me. I'm not totally happy with the default font. The default font family includes several websafe sans type of fonts, but I might be changing to something more customized later. Anyway, now just want to get this up and running and finetune the details later so the default font is fine.

<input className="w-40 h-8 shadow-lg rounded
    border-2 border-pink-700 p-1 text-teal-700 text-md"
    type="text" id="nickname" name="nickname" placeholder="foobar"
    value={inputNickname} onChange={(event) => {
  setInputNickname(event.target.value);
}} onKeyDown={(event) => {
  if (event.key === 'Enter' && inputNickname) {
    setSubmitted(true);
  }
}}></input>

For the input, there are a few more properties to set. In addition to defining width and height, there are a few more properties. As I'm probably ending up using some variation of material design look, I added a shadow. There are a couple of default shadows available, but this is likely something I will customize later. For the border, I set a rounded style with a solid accent color with a 2 unit border width. Tailwind uses rems (root em) as size units to allow a unified look across the whole application. The last two parameters of the definition are for the input field text. P-1 adds a 1 unit spacing inside the input and I've picked a semi-dark shade of teal as a secondary accent color. It's used for user typed text in many places of the app.

<button className="w-40 h-10 rounded bg-pink-700 shadow-lg
    text-white text-lg" key={"joinServerButton"} 
    disabled={!inputNickname} onClick ={(event) => {
  setSubmitted(true);
}}>Join server</button>
</div>

The properties of the button are basically the same I already defined for the label and the input. I use the same look, similarly sized, rounded, with shadow and accent color. In this case, the accent color serves as the background color and the text color is defined as white. This is how far I got. Now I'm looking into how I can efficiently re-use the styles I've defined for other similar components without copy-paste. Also when I get further into actual game logic, for fun and balance, I'll return to take a look at customizing and expanding the Tailwind defaults. The best tips and tricks are welcome in the comment section!

The controlled chaos of Legos

Saija Saarenpää — Wed, 04 Nov 2020 20:13:36 +0000

When I've had a rough day at work, I need something creative to unwind. A few years ago, I re-discovered Legos, one of my favorite childhood toys. It started when I got an Architecture Studio set as a Christmas present from my husband in 2014. The studio contained a little bit over 1000 pieces, and they were white in color to keep the focus on the form and function, not distracted by colors. I soon started to expand the collection by ordering more white parts from Lego's own Pick a Brick service and a previously unofficial market place BrickLink which is nowadays owned by The Lego Group. I created tens of buildings with only white pieces until I started to crave more colors. Last year, in addition to more colors, I discovered a whole community from Finland, Palikkatakomo, whose members, mostly adults, share the passion I have. From that point on, my collection of pieces has expanded uncontrollably.

With that intro, we can get finally into the topic, how to keep it all kind of organized. In the above photo, you can see how my part of the shared Lego room looks nowadays when I'm in the middle of a project. Not an interior decoration magazine quality type of photo, even though I like to take those too, but from the other rooms. As you can see the space is quite tight, closet in one direction, the make-up table in the other. There's just enough room in the middle to spin around with a saddle chair.

That space hasn't been always that tight. First, I bought a few of those boxes which are in the cover photo. They are probably meant for some screws and other small bits and pieces. Now they include my smallest Lego parts. I categorize them first by function, and if there's enough of them to take many compartments, I also categorize them by color. If there's plenty of them, each color gets its own compartment, or even more. Usually, there are not so many of them so I put two to three colors in the same compartment, but I select the colors so that they have plenty of contrast to each other so I can separate them easily.

In addition, I also had a couple of bigger Ikea "sugar bite" style storage boxes for all my white pieces, but no room where to put them, so they have been laying on the floor. Until this day, they still do. You can barely see a couple of them under the make-up table. Very soon I found out I need something like ten times more storage space.

Luckily under my hobby desk which I have used for assembling puzzles, creating jewelry, and as a Lego assembly desk, I had some room to put two six-store cabinets. In those, I store fences, windows, doors, furniture, arches, curved pieces, windshields, columns, and some various wall making materials like palisade and masonry bricks. Those cabinets have wheels, and in this case, the wheels were pretty important because my make-up table was blocking some parts of the access for other stuff under the hobby desk. Probably you can guess what I meant with other stuff... more Legos. A box with my rarely used pieces and some set instruction books. Actually, even though I've always categorized myself as a nerd, I haven't been very attracted to Technic Legos, and thus they end up being my most rarely used pieces.

Soon I bought two more of those storing cabinets, but now as a 10-story version. This time I also had a small problem that wheels did solve, again. There was no room to open both the clothing closet and make-up table drawer at the same time, so wheels helped because I could move the cabinets out of the way in the direction needed at the time. The only problem I found is that the cabinets are not very sturdy material, and they are heavy because they are full of Legos so when I try to move them, they easily just bend if I don't take a proper hold of them. At the moment they are storing car parts, other machine parts (ships, space ships, whatever you imagine), castle parts, bigger plates, and other bigger stuff like water slides and skate park ramps.

Those two cabinets also provided me a space to store those bits and pieces boxes on top of them. I ended up finally buying 18 of those, and I should buy some more because now they are all full. The problem is that I just don't have any space to put those anymore because the piles of those boxes are already dangerously high.

Aaaand finally gone are my clothes. I had to take a few very serious KonMari moments to get rid of two closet shelves of clothes to fit some Legos instead. Luckily there were plenty of clothes I hadn't worn in ages so that part was not that hard. Those shelves quite snuggly did fit all my narrow basic bricks, small rectangular plates, and all roof slopes. For two studs wide pieces I have a separate container.

In addition to these contained spaces, I still have plenty of unopened packages. Some I'm planning to assemble as is because I'm a huge fan of Expert Series Modular Buildings. I have a few of them already assembled (Assembly Square, Downtown Diner, and Bookshop) and a couple of them waiting for assembly (Parisian restaurant, Palace Cinema). Other packages will be categorized as loose pieces. I use ReBrickable to categorize all my loose parts and I've now reached 50k bricks. Even though that might sound a lot, I'm always missing some pieces from here and there, even if building something quite small. If you read this far, here's a cute little Lego porcupine for you:

Hello all! Let me introduce myself..

Saija Saarenpää — Thu, 22 Oct 2020 20:18:42 +0000

I just joined here, and I could tell a few things about myself. So we can get to know each other. If you only read this first chapter, here's a TL;DR: I'm a developer / graphic designer who enjoys constantly learning new stuff. I've been coding mobile, desktop, and web applications during my career. As a graphic designer, I'm specialized in brand identities and logos. You can find my exact skills and frameworks from my profile later because I haven't filled them out yet when writing this. To name a few favorite ones, for desktop and mobile development, I prefer Qt. For web development, ReactJS and NodeJS are my favorites.

More...

If you read this far, you are likely to get to know what else I do besides programming and graphic design. I spend a lot of time on my computer, but less than I used to, so I think I have got some more healthy habits. What I do besides coding in my free time is 3D graphics with Blender, play Civilization 6 with my friends, or Photoshop things like grungy photo composition art (this might need explaining a bit, but that's for another post). I also love to make demos for the demoscene. Usually, I've done them with Three.js, but the next one is probably going to use Vulkan.

Basic stuff beyond the monitor

When I'm not sitting beside the computer, I'm probably doing one of these things:
Sleeping (one of my favorites), cooking (that's also a thing I like a lot, not a master chef but slowly learning), or trying to do some exercise. In the last one, I'm not very good, and laziness is my middle name. If there happens to be some extra time in the day besides the things already mentioned, there are a whole plethora of things you can catch me doing.

Advanced stuff beyond the monitor

First, and the most important thing to mention is Legos. I love Legos. I have half of a room filled with them. I build and collect whole sets and also build imaginary stuff or something from a real-life model or photo. If I still have some free time after building with Legos, I love to play board games or assemble medium size puzzles (something between 1000 and 5000 pieces). Also, I enjoy doing some different kinds of handicrafts (sewing, jewelry making, knitting), play an electric piano, or plan some new interior decoration. There's probably more stuff, but I tend to do hobbies periodically, and sometimes I forget something for a whole year or more and might restart later.
That was basically me in a nutshell. I hope I get to know you folks, too!