I divided this article to several parts:

• Idea
• Three.js basics
• Create the stars (universe)
• Add the planets
• Add music
• Loop animation

Demo * / Code on Github:

*I recommend opening the demo on bigger screens (the flaws of the app are listed at the end of article)

Idea

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.

Anyway, my mind was blown away when I checked the examples and I felt inspired. But learning three.js, canvas…

You might be using Google Analytics on your website to track some information about your visitors — the demographics, their behavior, what technology they use etc.

If you use a 3rd party software on your website that enables your customers to purchase/to book something, you might want to track more information — what’s their shopping behavior, what do they purchase?

To show a specific example, I’ll be using beds24, which is a property management and booking system. You can apply the stuff described here with other systems too. But you must have access to the iframe. …

I am going to show you 10 exciting CSS properties. Some of them are marked as experimental on MDN web docs, which means they are just coming to fruition. As they state on their website, a technology is experimental if one or both of these will be true:

• It is implemented and enabled by default in less than two modern major browsers.
• Its defining spec is likely to change significantly, in backwards-incompatible ways (i.e. it may break existing code that relies on the feature).

If it is experimental, you should consider whether it can be used in production.

1. aspect-ratio

The aspect…

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

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.

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…

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

We can split the process into 3 sections:

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

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.

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

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…