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>

#___gatsby is the parent element and #portal is a new sibling node, in which we can inject our modals for example. …


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, effort is a cost, and the acquisition of skill is driven by the balance of benefits and costs. …


and using power of Sass

In this article I am gonna cover:

  • Styling HTML elements based on number of their siblings
  • utilizing @at-root Sass rule

I’ve had a chance to refactor one page component recently. I just wanted to remove some unnecessary HTML classes and rewrite some bits of CSS. There were some elements still floating and it was time for them to flex.

Image for post
Image for post

Let’s imagine this scenario. There is a container that can contain from 1 to 4 columns. The columns have to be always centered and in some breakpoints they stack. Flexbox can handle that with ease but there was a tricky part. The width of the columns ought to change based on number of columns.


require property

Note: I wrote this article in 2016 and it serves for archival purposes. There’s a new version of Angular and AngularJS is now in Long Term Support mode.

Image for post
Image for post
Photo by Markus Winkler on Unsplash

I have stumbled across a problem at work recently when I needed directives to get some information from outside (parent element or controller). Imagine several buttons that represent directives. When I click a button it should increment its value by 1. This is fairly simple but I needed the buttons to be dependent on each other so they increment values continuously just by 1 and prevent further clicking. …


The last part of the Customizing Google charts series

NOTE: This article contains snippets of code from a project I worked on in 2016! It uses jQuery and Google charts API that could have changed.

In the first part of this series, we created a Treemap using getBoundingClientRect() method. In the 2nd part we created a custom Line Chart legend. We are going to put these 2 charts together utilizing the revealing module pattern (to put it simply, make our code cleaner and easier to maintain). When we interact for example with Line chart, it is reflected also on the Treemap and vice versa. …


It wasn’t without hurdles

So, I moved in into this cottage in New York next to a mysterious mansion. I got it for a good price but I felt someone was watching me from the mansion. I believe it was Mr. Gatsby. Ahem..

Sorry that’s a different story. Let’s start over.

This week I started my first Gatsby project. Gatsby is a react-based framework for creating the statically generated websites and apps. Its ecosystem contains Plugins, Themes and so called Recipes, that automate certain tasks. The official website says:

Create a complete website in the time it usually takes to build a prototype

I was very excited to try it and see if the above is true. I had a good first impression, but encountered some obstacles. Not all were related to Gatsby though. Let’s see how it went. …


Creating a custom legend for Line Chart

NOTE: This article contains snippets of code from a project I worked on in 2016! It uses jQuery and Google charts API that could have changed.

In the first part of this series, I talked about Treemaps and the usage of getBoundingClientRect() method, that helped us to recreate the rectangles. Now we will take a look at Line chart and we will build a custom interactive legend that will highlight the lines in the chart. …

About

Miroslav Šlapka

Front-end 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