And resolving conflicts in VS Code

A few weeks ago I wrote an article about Git submodules. This is a follow-up on that topic, because I am going to describe Git cherry picking using TortoiseGit. Also I am going to show you how to resolve conflicts in the commits which might contain also submodules. I work with Visual Studio Code, so I also have a tip for using these two programs side by side.

What is a Git cherry pick?

Git cherry pick is a command that enables us to pick a commit that we want from one branch and apply it to another branch. I think that’s the most common scenario…


A summary of articles I’ve found recently

This week I don’t have a specific topic to cover. I am falling short by not planning ahead and sometimes I am just lucky to discover something at the last moment that I can quickly write about. Not that there is nothing to write about. It’s quite the opposite and that’s overwhelming at times.

Will I write about some old piece of work? Or should I write about some new cutting edge features, frameworks, ideas? Writing about old work might not be relevant or interesting, but in order to write about new stuff I need to try and learn them…


Flipbook animation reimagined

Do you like animations? I certainly do. It’s a pleasure to look at them and if you also want to have fun creating some, check out Looom. It is an iOS application and its tagline says — Flipbook animation reimagined. In this article I will show you how to use it and will cover pros and cons of this app.

Looom is all about looping animation with a smile. It was designed for professionals and beginners of any age, and is already being used by some influential indie animators.

I decided to try it this week and installed it on…


Using VS Code and TortoiseGit

It helps me when things are visualized. Reading lengthy articles or documentation might be boring. Lots of commands for terminal and technical terms might be overwhelming. I even prefer articles to videos sometimes when they are written clearly with the help of images.

In this article I explain what Git submodules are with some visual help. Also I describe how can we use them with 2 tools. The first one is TortoiseGit and the 2nd one is Visual Studio Code.

What is a Git submodule?

Submodules are repositories inside other Git repositories.
As an example, let’s assume we have 2 repositories called ‘skeleton’ and ‘core’.

Image for post
Image for post
Linking submodule via .gitmodules configuration file


Quick program walkthrough

There’s a new tool for 3D! It’s called Spline. You can download it for free on macOS, Windows and Linux. It’s still in the early stages so you might experience some glitches but it’s worth to try. I am going to just quickly walk you through the program and show you how to create, for example, a camera.

Image for post
Image for post
Photo by Marek Piwnicki on Unsplash

But what is a spline? In the computer science subfields,

Splines are popular curves because of the simplicity of their construction, their ease and accuracy of evaluation, and their capacity to approximate complex shapes through curve fitting and interactive curve design.

A…


and keep them in a specific position

We often need just a few lines of code to define a basic layout behaviour using flexbox. Something like display 2 columns in a row and center the text inside vertically. On mobile we change flex-direction to column and that’s it. Sometimes the components we create require more than that. Let’s take a look at the elements inside the box (flexbox) that have to be aligned vertically and keep their position regardless of the number of elements.

Image for post
Image for post
Photo by Karsten Winegeart on Unsplash

There are some useful properties we can apply on the elements in the flexbox to keep them vertically aligned. …


and additional react hooks

Adding a modal (dialog) to your website or app is a common scenario. How can we do it in React? Specifically in Gatsby? Before React version 16, developers had to hack their way a bit to create this simple element. It’s because there wasn’t a straightforward way to create a DOM element next to root/parent element, which could cause issues with positioning (z-index, overflow: hidden). React v16 introduced a new feature called Portals that enables just that.

Image for post
Image for post
Photo by Zoltan Tasi on Unsplash

React portals

In the case of Gatsby, the DOM would look like this after implementing React portals.

<html>
<body>
<div id="___gatsby"></div>
<div id="portal"></div>
</body>
</html>


Created using the p5.js library

I am going to show you how to create a 3D effect on canvas using a library called p5.js. I watched some videos demonstrating the usage of this library and I found also this coding challenge (creating starfield) in Processing. I decided to rewrite it in JavaScript and then improve it slightly. Do you remember old Windows screensavers? One of them looked like this:

Image for post
Image for post
old Windows screensaver

The animation above is based on Starfield Simulation, or Warp drive. Instead of ‘stars’ we can see flying windows. Let’s recreate this but with the latest Windows logo so the result would look like this.


created with three.js

A few years ago I discovered this Christmas experiments website — an advent WebGL calendar featuring various digital artists. It looks like the project has been abandoned and the last version is from 2018. I also managed to access the archive by going to https://christmasexperiments.com/2017/01 but the demos don’t seem to work.

Anyway, my mind was blown away when I checked the examples and I felt inspired. But learning three.js, canvas or WebGL also felt like a daunting task and my aspirations faded away as quickly as they emerged. …


Can you answer these questions?

I get a few JS questions for you to broaden your Javascript horizons or perhaps just to refresh things you already know. Grab a pen and a piece of paper. Ok, the electronic form of it will do. Before you read the answers, try and write them down. Why bother?

As Israeli-American psychologist Daniel Kahneman said:

“A general “law of least effort” applies to cognitive as well as physical exertion. The law asserts that if there are several ways of achieving the same goal, people will eventually gravitate to the least demanding course of action. In the economy of action…

Miroslav Šlapka

Web Developer and hobby photographer (IG: miresk)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store