Let’s build the slider controls as on the Museum of Science and Industry of Chicago’s website.

Photo by Veri Ivanova on Unsplash

The website I just mentioned in the subtitle of this article is pretty nice. If you land on the homepage, you will see the background images that change and slide up after a few seconds. On the left side, there’s a typical JavaScript dot navigation. It’s accompanied by a play/pause button that has a time indicator. I am going to show you how to recreate that and even improve it with a help of the GSAP GreenSock library.


Save the bandwidth and load the resources dynamically

Wordpress has been a very popular content management system but its robustness has some downsides. You might face performance issues unless your website is very well optimized or you just use it on the backend because the frontend is statically generated. However, if you have full Wordpress running and you use 3rd party scripts, consider loading them dynamically.

Instead of loading all the resources on the initial load, we can lazily load the scripts on interaction using dynamic import(), for example when the user clicks a button or scrolls towards the component. (Well, this article is about Wordpress so can…


Using modern JavaScript techniques

There are many weather APIs that allow us to get data and display forecast for a specific location. I found openweathermap API to be a good choice. It’s free up to 1,000,000 calls/month and there’s a One Call API that gives you all the essential information you need. I am going to use it to build a weather web ‘widget’, that displays a 7-day forecast with the following data:

  • day
  • temperature (in Celsius)
  • icon (clear sky, rain, mist, etc.)
Photo by Raphael Rychetsky on Unsplash

We can split the process into 3 sections:

  1. Get the data
  2. Display the data
  3. Performance improvement — load the resources when…


Utilizing CSS grid for more complex tables

Building responsive tables used to be tricky. It all depends on design, but before we often had to use CSS properties like display: block, float: left, position: absolute etc. to display elements properly for mobile devices. Flexbox makes things easier but there’s an even better solution, which is CSS grid. In this article, I’ll focus particularly on grid-template-areas.

Photo by Daniel McCullough on Unsplash

Let’s take a look at a specific example. Below we have a normal HTML table that works the same on desktop and tablet. It contains 5 columns. We can see an icon, document type (Invoice), number, price and download icon.


The list of protocols, systems and tools for decentralization

The web is evolving fast and over a few decades it has brought us many things we can’t even imagine living without. We all use it on a daily basis, we are connected, we use digital services but at the same time the system is a bit broken. Our personal data, privacy and trust is at stake. Big corporations own it, use it and sell it to 3rd parties. Data breaches happen and we are exposed to threats.

Photo by CHUTTERSNAP on Unsplash

The Web is a key space for civic debate and the current battleground for protecting freedom of expression.
https://dci.mit.edu/decentralizedweb

New movements are…


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’.

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.

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…

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