Using CSS Parameters to Stop Content Shifting with Dynamic Vue/React Content

Con­tent Shift­ing, also known as Con­tent Jump­ing, hap­pens when ele­ments of a web page change height while a page is load­ing. This can be dis­ori­en­tat­ing to users, and in extreme cas­es can cause prob­lems if a user clicks on an ele­ment as it moves, caus­ing unde­sired input. It’s also expect­ed in 2021 that search engines will begin penal­is­ing con­tent that exhibits con­tent shift­ing.

To avoid con­tent shift­ing, the ele­men­t’s height would be set regard­less of the dynam­ic con­tent it con­tains.

When using Vue or React JavaScript frame­works, I’ve found that CSS para­me­ters are use­ful. In my exam­ple, a Vue app loads dynam­ic con­tent and dis­plays it. Unfor­tu­nate­ly this caus­es con­tent shift­ing.

To avoid this, I pass the num­ber of rows in the HTML/view:


1
<div class="container" style="--preload-row-count: {{ $count }};">...</div>

In my CSS/SASS stylesheet, I then use this para­me­ter in a cal­cu­la­tion. There are two columns, so the num­ber of rows is divid­ed by 2. It is then mul­ti­plied by the height of a sin­gle row, and a min­i­mum height is set for the con­tain­er so that it will not shift:


1
2
3
4
.container{
    --calculated-board-rows: calc( var(--preload-row-count) / 2);
    min-height: calc( var(--calculated-board-rows) * 50px );
}

This fair­ly sim­ple method is an effec­tive way to stop con­tent shift­ing using CSS para­me­ters and cal­cu­la­tions.

Twilio Studio — IVR and Chat Bots

Twilio Studio — IVR and Chat Bots

I’ve used Twilio for a while for pro­gram­mat­i­cal­ly send­ing and receiv­ing SMS mes­sages. There’s also a visu­al edi­tor called Stu­dio that can be used to make call and mes­sage flows:

It can be con­nect­ed to Twilio Autopi­lot to make AI-pow­ered bots. Tasks are trained with sam­ple phras­es. These sam­ple phras­es are vari­a­tions on what would be said to trig­ger an action e.g. ‘Call recep­tion,’ ‘Front desk,’ ‘Talk to a human.’

An exam­ple that comes to mind, is mak­ing a call han­dling sys­tem for an office. Rather than a voice menu that details each option fol­lowed by a num­ber, the caller could sim­ply say who they want­ed to talk to or what their request was about, and the sys­tem would han­dle it. This is far more respect­ful of the caller’s time com­pared to hav­ing them lis­ten to a long list of choic­es.

It works with SMS and voice calls, and seems a good way to build an IVR (Inter­ac­tive Voice Menu) sys­tem. TwiML can be used for more com­pli­cat­ed tasks, while still using Studio/Autopilot. The pric­ing is a lit­tle high­er than if you were to use a self-host­ed sys­tem, but there are so many com­pli­cat­ed func­tion­al­i­ties it seems well worth pay­ing the extra, as it would save time and reduce com­plex­i­ty.

I built a remote con­trolled car that used Twil­io’s cell­phone ser­vice. You can read about it here.

Mikrotik Script — Wake On LAN All Devices from DHCP

Mikrotik Script — Wake On LAN All Devices from DHCP

A lit­tle script to wake up all Mikrotik devices on your net­work that have a DHCP lease, using Wake On LAN.

It may be a good idea to set your DHCP lease expiry to some­thing long like 7 days. A short expiry may mean dynam­ic leas­es have expired if the device has been switched off for some time.

It should also wake up any devices with sta­t­ic leas­es, so you could also set all your devices as sta­t­ic in your DHCP.

1
2
3
4
5
/ip dhcp-serv­er lease
:fore­ach i in=[find] do={
:put ([get $i address].”,”.[get $i mac-address].”,”.[get $i server].”,”.[get $i host-name].”,”.[get $i expires-after])
:exe­cute { /tool wol interface=bridge [get $i mac-address] }
}

Designing Voice User Interfaces

Designing Voice User Interfaces

I watched this refresh­ing video on improv­ing Voice User Inter­faces. I can see how it could be used to improve many tele­phone menus I’ve used.

ESP32 E‑Paper Status Display

ESP32 E‑Paper Status Display

Using an ESP-32 board with an embed­ded E‑Paper dis­play, I cre­at­ed a gad­get that shows sta­tus infor­ma­tion from my web serv­er.

E‑Paper, also known as E‑Ink, only needs pow­er when being updat­ed, and uses no pow­er between updates. This means that the gad­get can be pow­ered for weeks from a recharge­able bat­tery.

The pur­pose of this gad­get is to put on my wall or desk, and show reg­u­lar­ly updat­ed impor­tant infor­ma­tion on my web serv­er, to keep informed of web site prob­lems and sta­tis­tics. The infor­ma­tion dis­played can be eas­i­ly changed, for exam­ple to the lat­est weath­er, news, cur­ren­cy prices or any­thing that can be accessed via the inter­net. E‑Paper means it uses a very small amount of pow­er and heat, com­pared to a com­put­er dis­play or tele­vi­sion.

You can view my code on GitHub if you are inter­est­ed in mak­ing your own.

ESP32 E-Paper Display
ESP32 E-Paper Display
ESP32 E-Paper Display