This article is an optimized transcription of an interview with our engineer on Amazon ElastiCache Serverless. It provides comprehensive answers about this service, why it is needed, and when it is best to be used. You can also watch this interview on our YouTube channel. Happy reading.
Q: Hello everyone! This is ITSyndicate in touch. We are a leading provider of DevOps services with more than a decade of experience in the field. Our team specializes in providing effective DevOps solutions. Specifically, we help optimize and improve infrastructures, ensuring their scalability, reliability, and security. Today, we will have the opportunity to talk with our DevOps engineer about the Amazon ElastiCache Serverless. This new product from Amazon has attracted much attention among developers and companies working in the cloud environment.
Many CSS properties accept numbers as values. Sometimes those are whole numbers. Sometimes they’re decimals and fractions. Other times, they’re percentages. Whatever they are, the unit that follows a number determines the number’s computed length. And by “length” we mean any sort of distance that can be described as a number, such as the physical dimensions of an element, a measure of time, geometric angles… all kinds of things!
You’re going to see a lot numbers in CSS. Here are a few examples?
/* Integers */
1
/* Pixels */
14px
/* em */
1.5em
/* rem */
3rem
/* Percentage */
50%
/* Characters */
650ch
/* Viewport units */
100vw
80vh
50dvh
/* Container units */
100cqi
50cqb
While these all mean different things, they essentially do the same thing: define an element’s dimensions in CSS. We need units in CSS because they determine how to size elements on a page, whether it’s the height of a box, the width of an image, the font-size of a heading, the margin between two elements, how long an animation runs, etc. Without them, the browser would have no way of knowing how to apply numbers to an element.
So, what the heck ispx? What’s up with this thing called rem? How are these different than other length units? The unit defines what type of number we’re dealing with, and each one does something different, giving us lots of ways to size things in CSS.
Types of numbers
You may think a number is just a number, and you’re not wrong. Numbers are numbers! But we can distinguish between a few different types of numbers, which is helpful context for discussing the different types of units we attach them to since “number” can mean, well, a number of different things.
Integers (literally a unit-less number, e.g. 3)
Numbers (same as an integer, only measured in decimals, e.g. 3.2)
Dimensions (either a number or integer with a unit, e.g. 3.2rem)
Ratios (the quotient between two divided numbers, e.g. 3/2)
Percentages (e.g. 3%)
Got that? They’re all numbers but with nuances that make them ever-so-slightly different.
From here, we can think of numbers in CSS as falling into two specific types of units: absolute and relative. Let’s start things off our deep dive on CSS length units by breaking those down.
Absolute units
An absolute unit is like Bill Murray in the movie Groundhog Day: it’s always the same. In other words, whatever the number is, that’s exactly how it computes in the browser regardless of how other elements are sized.
The most common absolute value you’ll see is the pixel value. It’s sort of hard to define, but a pixel is the smallest building block of a graphical display, like a computer screen. And it’s based on the resolution of the screen. So, if you’re on a super high-resolution screen, a pixel will be smaller than it would be on a low-resolution screen, as the resolution can pack more pixels into a smaller amount of space for higher clarity. But look at the example below. All of the boxes are sized with pixels, so you can get a sense of how large 50px is compared to 250px.
Absolute values are nice in that they are predictable. That could, however, change in some situations, particularly when it comes to zooming. If, say, a user zooms into a page using browser settings, then anything defined with an absolute value is going to increase its absolute size accordingly. So, if the font-size of a paragraph is set to 20px, the paragraph is going to be larger as the user zooms closer into the page. And because zooming is often used to make content more readable, using absolute values that retain their sizing could be a good approach for making pages more accessible by allowing users to zoom things up to a spot that more comfortable to read.
But then again, see Josh Collinsworth’s click-baity, but fantastic, post titled “Why you should never use px to set font-size in CSS” for an exhaustive explanation of how pixels behave when used to set the font-size of an element. It’s a great read to better understand the behavior and limitations of pixel units.
And, hey: pixels are only one of many types of absolute lengths that are available in CSS. In fact, we can group them by the types of things they measure:
Length units
Length units are a little funny because they can technically be either an absolute unit or a relative unit. But we’re discussing them in absolute terms at the moment and will revisit them when we get further along to relative length units.
A length is essentially a dimension, which is any integer proceeded by a unit, according to the list of types of numbers we looked at earlier. And when we talk about dimensions, we’re really talking about the physical size of an element.
Unit
Name
cm
Centimeters
mm
Millimeters
Q
Quarter-millimeters
in
Inches
pc
Picas
pt
Points
px
Pixels
What we’re looking at here are the types of units you might use see on a tape measure (e.g., cm and in) or in print design (e.g. pc and pt). They are what they are and what you see is what you get.
Angle units
Angle units are purely geometric. They’re good for setting shape dimensions — like a circle’s radius, setting the direction of a linear-gradient(), or setting the how much we want to rotate()something.
Unit
Name
Description
Example
deg
Degrees
A full circle is equal to 360deg.
rotate(180deg)
grad
Gradiens
A full circle is equal to 400grad.
rotate(200grad)
rad
Radiens
A full circle is equal to 2π (i.e., 2 × 3.14), or about 6.2832rad.
rotate(3.14rad)
turn
Turns
A full circle is 1turn, like a bicycle wheel making one full rotation.
rotate(.5turn)
Time units
Time units are what you’d expect to find on a clock or watch, but only measure in seconds and milliseconds. Apparently the web cannot be measured in minutes, hours, days, weeks, months, or years. Perhaps we’ll get a new category of “calendar units” at some point, or maybe there’s no good use case for that sort of thing. 🤷♂️
Unit
Name
Description
Example
s
Seconds
One full minute of time is equal to 60s.
animation-duration: 2s
ms
Milliseconds
One full second of time os equal to 1000ms.
animation-duration: 2000ms
Frequency units
You won’t see frequency units used very often and for good reason: they’re not supported by any browser at the time of this writing. But they’re specced to change sound frequency, such as a sound’s pitch. The best I can make of it as it currently stands is that frequencies can be used to manipulate an audio file with a higher or lower pitch measured in hertz and kilohertz.
If you’re wondering what constitutes a “low” pitch from a “high” one, the spec explains it like this:
[W]hen representing sound pitches, 200Hz (or 200hz) is a bass sound, and 6kHz (or 6khz) is a treble sound.
Resolution units
Resolution is how many little dots are packed into a screen — such as the screen you’re looking at right now — where more dots per inch of space improves the clarity and quality of the display. The fewer dots there are, the more pixelated and blurry the display.
Why would you need something like this? Well, it’s great for targeting styles to specific screens that support certain resolutions in a media query.
The number of dots packed into one centimeter of space.
@media (min-resolution: 960dpcm) {}
dppx (or x)
Dots per pixel
The number of dots packed into one pixel of space.
@media (min-resolution: 1dppx) {}
Interestingly, the specification makes mention of an infinite value that is supported by resolution media queries for targeting screens without resolution constraints. It’s not so much of a “catch-all” value for targeting any sort of screen, but for cases when we’re using the media query range syntax to evaluate whether a certain value is greater than, less than, or equal to it:
For output mediums that have no physical constraints on resolution (such as outputting to vector graphics), this feature must match the infinite value. For the purpose of evaluating this media feature in the range context, infinite must be treated as larger than any possible <resolution>. (That is, a query like (resolution > 1000dpi)will be true for an infinite media.)
A relative unit is extremely well-named because whatever value we use for a relative unit depends on the size of something else. Say we have an HTML element, a <div>, and we give it an absolute height value (not a relative one) of 200px.
<div class="box">
I am 200 pixels tall
</div>
.box {
height: 200px;
}
That height will never change. The .box element will be 200px tall no matter what. But let’s say we give the element a relative width (not an absolute one) of 50%.
<div class="box">
I am 200 pixels tall and 50% wide
</div>
.box {
height: 200px;
width: 50%;
}
What happens to our box? It takes up 50%, or half, of the available space on the screen.
See that? Go ahead and open that demo in a new window and change the width of the screen. And notice, too, how the height never changes because it’s an absolute length unit in pixels. The width, meanwhile, is fluidly resized as “50% of the available space” changes with the width of the screen.
That’s what we mean when talking about computed values with relative numbers. A relative number acts sort of like a multiplier that calculates the value used to set a length based on what type of unit it is relative to. So, a value of 3rem is going to wind up becoming a different value when it is computed.
Percentages, like 50%, are only one kind of relative unit. We have many, many others. Once again, it’s helpful to break things out into separate groups to understand the differences just as we did earlier with absolute units.
Percentages
We’ve already discussed percentages in pretty good detail. What makes a percentage relative is that it computes to a number value based on the length of another element. So, an element that is given width: 25% in a container that is set to width: 1000px computes to width: 250px.
Unit
Name
Relative to…
%
Percent
The size of the element’s parent container.
Font relative units
The em and rem units we looked at earlier are prime examples of relative units that you will see all over the place. They’re incredibly handy, as we saw, because changing the font-size value of an element’s parent or the <html> element, respectively, causes the element’s own font-size value to update in accordance with the updated value.
In other words, we do not need to directly change an element’s font-size when updating the font-size of other elements — it’s relative and scales with the change.
Unit
Name
Relative to…
em
Element
The font-size value of the element’s parent container.
rem
Root element
The font-size value of the <html> element.
ch
Character
The width of one character of content relative to the parent element’s font. The computed width may update when replacing one font with another, except for monospace fonts that are consistently sized.
rch
Root character
The same thing as a ch unit except it is relative to the font of the root element, i.e. <html>.
lh
Line height
The line-height value of the element’s parent container.
rlh
Root element line height
The line-height value of the <html> element.
cap
Capital letter
The height of a capital letter for a particular font relative to the parent element.
rcap
Root capital letter
The same measure as cap but relative to the root element, i.e. <html>.
ic
International character
The width of a CJK character, or foreign glyph, e.g. from a Chinese font, relative to an element’s parent container.
ric
Root international character
The same measure as ic but relative to the root element, i.e. <html>.
ex
X-height
The height of the letter x of a particular font, or an equivalent for fonts that do not contain an x character, relative to the parent element.
rex
Root x-height
The same measure as ex but relative to the root element, i.e. <html>.
Some of those terms will make more sense to typography nerds than others. The following diagram highlights the lines that correspond to relative font units.
So, at the expense of beating this concept into the ground, if width: 10ch computes to a certain number of pixels when using one font, it’s likely that the computed value will change if the font is swapped out with another one with either larger or smaller characters.
Viewport relative units
Unit
Name
Relative to…
vh / vw
Viewport Height / Viewport Width
The height and width of the viewport (i.e., visible part of the screen), respectively.
vmin / vmax
Viewport Minimum / Viewport Maximum
The lesser and greater of vh and vw, respectively.
lvh / lvw
Large Viewport Height / Large Viewport Width
The height and width of the viewport when the device’s virtual keyboard or browser UI is out of view, leaving a larger amount of available space.
lvb / lvi
Large Viewport Block / Large Viewport Inline
These are the logical equivalents of lvh and lvw, indicating the block and inline directions.
svh / svw
Small Viewport Height / Small Viewport Width
The height and width of the viewport when the device’s virtual keyboard or browser UI is in view, making the amount of available space smaller.
svb / svi
Small Viewport Block / Small Viewport Inline
These are the logical equivalents of svh and svw, indicating the block and inline directions.
dvh / dvw
Dynamic Viewport Height / Dynamic Viewport Width
The height and width of the viewport accounting for the available space changing if, say, the device’s virtual keyboard or browser UI is in view.
dvb / dvi
Dynamic Viewport Block / Dynamic Viewport Inline
These are the logical equivalents of dvh and dvw, indicating the block and inline directions.
dvmin / dvmax
Dynamic Viewport Minimum / Dynamic Viewport Maximum
The lesser and greater of dvh/dvb and dvw/dvi, respectively.
Ah, viewport units! When we say that something should be 100% wide, that means it takes up the full width of the contain it is in. That’s because a percentage unit is always relative to its nearest parent element. But a viewport unit is always relative to the size of the viewport, or browser window. If an element has a viewport height of 100vh and a viewport width of 100vw, then it will be as tall and wide as the full browser window.
This can be a neat way to create something like a hero banner at the top of your website. For example, we can make a banner that is always one half (50vh) the height of the viewport making it prominent no matter how tall someone’s browser is. Change the CSS in the top-left corner of the following demo from height: 50vh to something else, like 75vh to see how the banner’s height responds.
There’s something else that’s very important to know when working with viewport units. You know how mobile phones, like iPhone or an Android device, have virtual keyboards where you type directly on the screen? That keyboard changes the size of the viewport. That means that whenever the keyboard opens, 100vh is no longer the full height of the screen but whatever space is leftover while the keyboard is open, and the layout could get super squished as a result.
That’s why we have the svh, lvh, and dvh units in addition to vh:
svh is equal to the “small” viewport height, which occurs when the keyboard is open.
lvh is equal to the “large” viewport height, which is when the keyboard is disabled and out of view.
dvh is a happy medium between svh and lvh in that it is “dynamic” and updates its value accordingly when the keyboard is displayed or not.
dvmin / dvmax is the greater ore lesser of dvh, respectively.
It’s a bit of a tightrope walk in some cases and a good reason why container queries and their units (which we’ll get to next) are becoming more popular. Check out Ahmed Shader’s article “New Viewport Units” for a comprehensive explanation about viewport units with detailed examples of the issues you may run into. You may also be interested in Sime Vidas’s “New CSS Viewport Units Do Not Solve The Classic Scrollbar Problem” for a better understanding of how viewport units compute values.
Container relative units
Unit
Name
Equivalent to…
cqw
Container query width
1% of the queried container’s width
cqh
Container query height
1% of the queried container’s height
cqi
Container query inline size
1% of the queried container’s inline size, which is its width in a horizontal writing mode.
cqb
Container query block size
1% of the queried container’s inline size, which is its height in a horizontal writing mode.
cqmin
Container query minimum size
The value of cqi or cqb, whichever is smaller.
cqmax
Container query maximum size
The value of cqi or cqb, whichever is larger.
Container units are designed to be used with container queries. Just as we are able to target a specific screen size with a media query, we can target the specific size of a particular element and apply styles using a container query.
We won’t do a big ol’ deep dive into container queries here. The relevant bit is that we have CSS length units that are relative to a container’s size. For example, if we were to define a container:
…then we’re watching that element’s inline-size — which is equivalent to width in a horizontal writing mode — and can apply styles to other elements when it reaches certain sizes.
Try resizing the following demo. When the parent container is greater than 30ch, the child element will change backgrounds and shrink to one-half the parent container’s width, or 50cqi.
What about unit-less numbers?
Oh yeah, there are times when you’re going to see numbers in CSS that don’t have any unit at all — just a single integer or number without anything appended to it.
aspect-ratio: 2 / 1; /* Ratio */
column-count: 3; /* Specifies a number of columns */
flex-grow: 1; /* Allows the element to stretch in a flex layout */
grid-column-start: 4; /* Places the element on a specific grid line */
order: 2; /* Sets the order of elemnents in a flex or grid layout */
scale: 2; /* The elementis scaled up or down by a factor */
z-index: 100; /* Element is placed in a numbered layer for stacking */
zoom: 0.2; /* The element zooms in or out by a factor */
This isn’t a comprehensive list of all the CSS properties that accept unit-less numeric values, but it is a solid picture of when you would use them. You’ll see that in most cases a unit-less number is an explicit detail, such as a specific column to position an element, a specific layer in a stacking context, a boolean that enables or disables a feature, or the order of elements. But note that anytime we declare “zero” as a number, we can write it with or without a prepended unit, as zero always evaluates to zero no matter what unit we’re dealing with.
border: 0; /* No border */
box-shadow: 0 0 5px #333; /* No shadow offset */
margin: 0; /* No margin */
padding: 0; /* No padding */
We can create our own custom units!
In some cases, we may want to work with a numeric value, but CSS doesn’t exactly recognize it as one. In these cases, the number is recognized as a “string” value instead, regardless of whether or not it contains alphabetical characters. That’s where we can use @property to create what’s called a “custom property” that evaluates a numeric value in a certain way.
Here’s a good example. There was a time when it was virtually impossible to animate a gradient that changes colors over time because to do so would require (1) a color function that allows us to change a color value’s hue (which we have with hsl()) and (2) being able to interpolate that hue value around the color spectrum, between a range of 0deg and 360deg.
Sounds simple enough, right? Define a variable that starts at 0 and then cycles through 360 degrees at the end of an animation. But this doesn’t work:
That’s because CSS reads the variable as a string instead of a number. We have to register that variable as a custom property so that CSS aptly reads it as a numeric value.
This is super tricky because CSS is extremely flexible and there are no definitive or hard-and-fast rules for when to use a specific type of CSS length unit over another. In some cases, you absolutely have to use a specific unit because that’s how a certain CSS feature is specced, like using angle units to set the direction of a linear gradient:
The same goes for the values we use in certain color functions, like using percentages to set the saturation and lightness levels in the hsl() function:
.element {
background: hsl(0 100% 10%);
}
Speaking of color functions, we define alpha transparency with either an integer or number:
All that being said, many cases are going to be some degree of “it depends” but there are some instances where it makes sense to use a specific unit in your work.
Generally set font sizes in rem and em units
This way, you can set things up in a way where changing the font-size value of the <html> or a parent element updates the font sizes of their descendants.
html {
font-size: 18px; /* Inherited by all other elements */
}
.parent {
font-size: 1rem; /* Updates when the `html` size changes */
}
.child {
font-size: 1em; /* Updates when the parent size changes */
}
Declare “zero” without units if you’d like
It’s not a big deal or anything, but leaving off the units shortens the code a smidge, and anytime we’re able to write shorter code it’s an opportunity for faster page performance. The impact may be negligible, but we’re able to do it since 0 always computes to 0, no matter what unit we’re working with.
Use container units for responsive design, where possible
Container queries in general are so gosh-darn great for responsive layouts because they look at the size of the container and let us apply styles to its descendants when the container is a certain size.
.parent {
container: my-container / inline-size; /* Looks at width */
}
.child {
display: flex;
flex-direction: column;
max-width: 100vh; /* 100% of the viewport */
}
/* When the container is greater than 600px wide */
@container my-container (width >= 600px) {
.child {
flex-direction: row;
max-width: 50%; /* 50% of the parent elenent */
}
}
So, if we going to size the .child element — or any of its children — it’s worth specifying sizes in relation to the container’s size with container units than, say, the viewport’s size with viewport units.
.parent {
container: my-container / inline-size; /* Looks at width */
}
.child {
display: flex;
flex-direction: column;
max-width: 100cqi; /* 100% of the container */
}
/* When the container is greater than 600px wide */
@container my-container (width >= 600px) {
.child {
flex-direction: row;
max-width: 50cqi; /* 50% of the container */
}
}
Use percentages when you’re unsure of the context
Yes, use container units for responsive design, but that only does you good if you know you are in the context of a container. It’s possible, though, that you use the same component in different places, and one of those places might not be a registered container.
In that case, go with a percentage value because percentages are relative to whatever parent element you’re in, regardless of whether or not it’s a container. This way, you can declare an element’s size as 100% to take up the full space of whatever parent element contains it.
The only word of caution is to note that we’re only basing the size on the parent. Meanwhile, container units can style any descendant in the container, no matter where it is located.
Viewport units are great for laying out containers
You may be thinking that viewport units are a bad thing since we’ve been advising against them in so many cases, like font sizing, but they are still incredibly useful, particularly when it comes to establishing a full-page layout.
I say “full-page” layout because container queries are the gold standard for sizing elements according to the space they have in their container. But if we’re working with a full page of containers, this is where viewport units can be used to establish a responsive layout at a higher level.
If the elements of individual containers look at their container for sizing information, then the sizing and placement of individual containers themselves probably ought to look at the viewport since it directly influences the amount of space on the page.
Examples
Element (em) and Relative element (rem) units
Let’s talk specifically about these two little buggers. We saw how a percentage unit calculates its size by the size of something else. em and rem units are sort of the same, but they are calculated based on the relative font size of specific elements.
Let’s start with em units and say we have an HTML element, a <div> with a .box class, and we set its font size to 20px. That means any text inside of that element is 20px.
Great, now what if we decide we need additional text in the box, and give it a relative font size of 1.5em?
See how a font size of 1.5em is larger than the 20px text? That’s because the larger text is based on the box’s font size. Behind the scenes, this is what the browser is calculating:
20px * 1.5 = 30px
So, the relative font size is multiplied by the pixel font size, which winds up being 30px.
And guess what? rem units do the exact same thing. But instead of multiplying itself by the pixel font size of the parent container, it looks at the pixel font size of the actual <html> element. By default, that is 16px.
/* This is the browser's default font size */
html {
font-size: 16px;
}
.box {
font-size: 1.5rem; /* 16px * 1.5 = 24px */
}
And if we change the HTML element’s font size to something else?
html {
font-size: 18px;
}
.box {
font-size: 1.5rem; /* 18px * 1.5 = 27px */
}
Character unit (ch)
The character unit (ch) is another is another unit relative to font size and, while it isn’t used all that often, it is amazingly great at sizing things based on the amount of content displayed in an element, because one character unit equals the width of one character of content. Here’s how I wrap my own head around it. If we have this in our HTML:
<p>The big brown dog lazily jumped over the fence.</p>
…and this CSS:
p {
width: 10ch;
}
What we get is a paragraph that is 10 characters wide. That means the text will break after the tenth character, including spaces.
But note that the words themselves do not break. If the content is supposed to break after 10 characters, the browser will start the next line after a complete word instead of breaking the word into multiple lines, keeping everything easy to read.
The line-height unit (lh) looks at the line-height property value of the element’s containing (i.e., parent) element and uses that value to size things up.
When would you use this? Personally, I find lh useful for setting an exact height on something based on the number of lines needed for the text. You can see this clearly demonstrated in Temani Afif’s “CSS Ribbon” effect that uses lh to establish dimensions for each row of text that makes for consistently-sized lines that adapt to whatever the parent element’s font-size value happens to be,
The Vehicle Routing Problem (VRP) is a fundamental challenge in logistics and supply chain management, involving the optimization of routes for a fleet of vehicles to deliver goods to a set of customers. The problem's complexity increases with the number of vehicles, delivery points, and constraints such as delivery windows, vehicle capacities, and traffic conditions. Recent advancements in deep reinforcement learning (DRL) and metaheuristics offer promising solutions to enhance VRP efficiency and scalability.
Understanding the Vehicle Routing Problem
The VRP can be seen as an extension of the Traveling Salesman Problem (TSP), where multiple vehicles must visit a set of locations and return to a central depot. The goal is to minimize the total travel distance or time while satisfying constraints such as vehicle capacity and delivery windows. The combinatorial nature of VRP makes it computationally challenging, especially as the problem size grows.
When I think about technical debt, I still remember the first application I created that made me realize the consequences of an unsuitable architecture. It happened back in the late 1990s when I was first getting started as a consultant.
The client had requested the use of the Lotus Notes platform to build a procurement system for their customers. Using the Lotus Notes client and a custom application, end-users could make requests that would be tracked by the application and fulfilled by the product owner’s team. In theory, it was a really cool idea – especially since web-developed applications were not prevalent and everyone used Lotus Notes on a daily basis.
I’ve done a decent amount of accessibility work in the past few months, largely thanks to a nice fellow who uses JAWS and seems to enjoy our sessions together testing various bits of CodePen, old and new. I use classic tools like the axe and the WebAIM tools to find issues, and still, testing over a video call has found some really embarrassing stuff on CodePen that felt good to clean up. We had a page with four <h1> tags on it, for cripes sake, and I’m not going to tell you which page it was (it was the homepage).
There are lots of accessibility failures that are hard or impossible to detect without actual usage and sometimes with unique people. And sometimes they are just blunders that come from too narrow of a world view. Bruce Lawson pointed out an example with a “First Name” and “Last Name” form where the “First Name” required 2 characters and the “Last Name” was required, both assumptions that just aren’t culturally true. Jimmy Eaglechest works fine but, as Bruce pointed out, U Nagaharu the Korean-Japanese botanist couldn’t use the site (booo).
It’s nice when the big companies that lots of us use take accessibility seriously.
It’s nice to see that GitHub now has (at least optionally) underlined links, which are highly recommended for accessibility. They faced harder challenges, like their very complex search form inputs with a whole variety of accessibility considerations.
And the winner of the best blog post title I’ve seen recently is Ian Lloyd’s When I Get That Low Contrast Feeling, I Need Non-Textual Healing. The post is a great reminder that testing for color contrast is tricker than it seems. I thought he was going to get into how the actual math to calculate the contrast is hard (I’m sure it is), but the interactive examples get into much more nuanced situations. It’s not just the color vs the background in the normal/default state, but also in the various states of interactivity, importantly the focus state.
Just in case you didn’t know, the minimum size for a “clickable target” is 24px × 24px. The bigger the target the easier to click, which is true, and even more true when we think “touch” instead of “click”. This accessibility guideline is really driven by, well, average human finger sizes. Make clickable/touchable things too small, people can’t actually click/touch them, and you have a real accessibility failure.
There is also an element of proximity to it. In Nicole Sullivan’s Expanding your touch targets, she notes the WCAG 2.2 guideline about when you absolutely need a smaller target:
If your design requires a smaller clickable target, keep any other clickable elements at least 12px from the center of the target.
Nicole’s article gets all into how browsers even figure out what thing a user is trying to touch, which is pretty fascinating. And it all started with a Pen, naturally.
You’ll have to pardon my French on this last one. I was captivated by Eric Bailey’s Swearing and automatic captions. While they are “better than nothing at all”, automatic captions are rife with problems.
Many automatic captioning services censor swear words. I feel this is done because there’s the assumption that they’ll be used in a business context.
You can’t solve culture with technology. If you need to rely on software to police your employee’s language, you’ve got bigger fucking problems.
Have you ever seen websites that show file icons next to the download links?
Recently, one of our readers asked if it was possible to display attachment file icons in WordPress. You can easily show different icons so that users know which type of file they are downloading.
In this article, we will show you how to add attachment file icons in WordPress.
When You Need Attachment File Icons in WordPress
By default, WordPress allows you to upload images, audio, video, and other documents. You can also enable additional file types to be uploaded in WordPress.
When you upload a file through the media uploader and add it to a post or page, WordPress will try to embed the file as if it is an image, audio, video, or in a supported file format.
For all other files, it will just add a file name as plain text and link it to the download or attachment page.
In the above screenshot, we have added a PDF and a Docx file. However, it is difficult for a user to guess which type of file they would be downloading.
If you regularly upload different file types, then you may want to display an icon next to the link. This way, your users can easily find the file type they are looking for.
Having said that, let’s see how to add attachment file icons in WordPress for different file types.
Method 1: Add Attachment File Icons in WordPress Using Plugin
The easiest way of adding file type icons is by using a WordPress plugin like MimeTypes Link Icons. It is a free plugin that is very easy to use and lets you add icons for different file types.
Upon activation, you need to visit the Settings » MimeType Icons page to configure the plugin settings.
The plugin allows you to choose the icon size, as well as between PNG and GIF icons. Next, you need to choose the icon alignment and which file types will display the icon.
After that, you can scroll down and select icons to display on your website. For instance, there are icons for file types like PDF, PPT, CSV, AVI, RPM, TXT, and more.
Next, you can scroll down to the Advanced Settings section.
Here, you will find the option to show file size next to the download link. It is turned off by default, as it could be resource-intensive.
Once you are done, don’t forget to click on the ‘Save Changes’ button to store your settings.
You can now edit a post or page and add a file download link using the media uploader. Simply preview your post, and you will see the file icon next to the download link.
Method 2: Using Icon Fonts for Attachment Files in WordPress
In this method, we will be using an icon font to display an icon next to the attachment file link.
Upon activation, you can head to the Settings » Font Awesome page from your WordPress dashboard. Here, you can edit the general settings for the plugin, like choosing whether it should use pro or free icons.
Next, you can edit a post or page where you want to add an attachment link.
Once you are in the content editor, you must enter the HTML code for the icon you want to display.
To find that HTML code, you can visit the Font Awesome icon library website. Simply search for an icon in the search bar and then click on the image.
Next, you will see different variations of the icon and its HTML code.
Go ahead and click on the code to copy it.
After that, you can return to your website’s WordPress content editor and click the ‘+’ sign to add a Custom HTML block.
From here, simply paste the code for your icon into the block.
Once you are done, go ahead and publish or update your page.
You can now visit your website to see the newly added icon for the attachment file type.
Bonus: Sell Digital Files to Make Money Online
Now that you know how to add attachment file type icons, you can go a step further and sell different files as digital downloads. This allows you to make money online or encourage users to sign up for your newsletter in exchange for a free resource.
As artificial intelligence (AI) and machine learning (ML) continue to gain traction in organizations across industries, developers, engineers, and architects must stay informed about the challenges, best practices, and emerging trends in this rapidly evolving field. In a recent interview, Daniel Avancini, Chief Data Officer at Indicium, shared valuable insights on how organizations can successfully adopt AI and ML technologies, the skills professionals should focus on building, and the future of the CDO role.
Aligning AI and ML Initiatives With Strategic Goals
One of the organization's most significant challenges when adopting AI and ML is failing to align these initiatives with their strategic goals. Avancini emphasizes the importance of applying a Data Maturity Framework that considers the three pillars of a successful AI and ML initiative: People, Organization, and Data. By ensuring that data platforms are AI-ready, establishing the proper data organization, and investing in data literacy training programs, companies can lay a solid foundation for AI and ML success.
This guide is a valuable resource for Java developers seeking to create robust and efficient GraphQL API servers.
This detailed guide will take you through all the steps for implementing GraphQL in Java for real-world applications. It covers the fundamental concepts of GraphQL, including its query language and data model, and highlights its similarities to programming languages and relational databases.
While I was coding for a performance back-end competition, I tried a couple of tricks, and I was wondering if there was a faster validator for Java applications, so I started a sample application.
I used a very simple scenario: just validate the user's email.
PostgreSQL is a highly popular open-source database due to its rich feature set, robust performance, and flexible data handling. It is used everywhere from small websites to large-scale enterprise applications, attracting users with its object-relational capabilities, advanced indexing, and strong security. However, to truly unleash its potential, PostgreSQL demands fast storage. Its transactional nature and ability to handle large datasets require low latency and high throughput. This is why pairing PostgreSQL with fast storage solutions is crucial for optimizing performance, minimizing downtime, and ensuring seamless data access for demanding workloads.
For flexibility, scalability, and cost optimization, it is preferable to run PostgreSQL on Virtual Machines, especially in development and testing environments. But sometimes, Virtualization introduces an abstraction layer that can lead to performance overhead compared to running directly on bare metal. On the other hand, using just bare metal leads to non-optimal usage of the CPU and storage resources, because one application typically doesn’t fully utilize the bare metal server performance.
Anyone here that wants to share if they use AI Code Assistants professionally, which one and why? I'm looking for experiences with backend .NET development in Visual Studio to be specific.
In an era where data is the new oil, effectively utilizing data is crucial for the growth of every organization. This is especially the case when it comes to taking advantage of vast amounts of data stored in cloud platforms like Amazon S3 - Simple Storage Service, which has become a central repository of data types ranging from the content of web applications to big data analytics. It is not enough to store these data durably, but also to effectively query and analyze them. This enables you to gain valuable insights, find trends, and make data-driven decisions that can lead your organization forward. Without a querying capability, the data stored in S3 would not be of any benefit.
To avoid such scenarios, Amazon Web Services (AWS) provides tools to make data queries accessible and powerful. Glue Crawler is best suited to classify and search data. Athena is a service used to make quick ad hoc queries. Redshift Spectrum is considered a solid analyst capable of processing complex queries at scale. Each tool has its niche and provides a flexible approach for querying data according to your needs and the complexity of the tasks.
Reactive programming has significantly altered how developers tackle modern application development, particularly in environments that demand top-notch performance and scalability. Quarkus, a Kubernetes-native Java framework specifically optimized for GraalVM and HotSpot, fully embraces the principles of reactive programming to craft applications that are responsive, resilient, and elastic. This article comprehensively explores the impact and effectiveness of reactive programming in Quarkus, providing detailed insights and practical examples in Java to illustrate its transformative capabilities.
What Is Reactive Programming?
Reactive programming is a programming paradigm that focuses on handling asynchronous data streams and the propagation of change. It provides developers with the ability to write code that responds to changes in real time, such as user inputs, data updates, or messages from other services. This approach is particularly well-suited for building applications that require real-time responsiveness and the ability to process continuous streams of data. By leveraging reactive programming, developers can create more interactive and responsive applications that can adapt to changing conditions and events.
2024 and the dawn of cloud-native AI technologies marked a significant jump in computational capabilities. We're experiencing a new era where artificial intelligence (AI) and platform engineering converge to transform cloud computing landscapes. AI is now merging with cloud computing, and we're experiencing an age where AI transcends traditional boundaries, offering scalable, efficient, and powerful solutions that learn and improve over time. Platform engineering is providing the backbone for these AI systems to operate within cloud environments seamlessly.
One fascinating method in the fast-developing field of artificial intelligence that improves the capabilities of large language models (LLMs) is Retrieval Augmented Generation (RAG). This method yields more accurate and contextually appropriate responses by enabling AI to access and use fresh or recent data that is not part of its training set. This post will go over some of the main ideas behind RAG and explain how important tools like vector databases and embeddings are.
What Is Retrieval Augmented Generation (RAG)?
An AI approach called Retrieval Augmented generating (RAG) combines generating capabilities with retrieval techniques. In contrast to conventional LLMs, which only use prior knowledge, RAG systems are able to retrieve current data from outside sources. Because of this, they are especially helpful for applications that need up-to-date and thorough data, such as tailored recommendations, real-time question answering, and news summaries.
Hey there, WordPress fans! I am back with the latest edition of our monthly WordPress news roundup, which covers everything that happened in WordPress over the past 30 days…or so.
Do you want to show product recommendations in WordPress?
Displaying product recommendations can encourage users to make additional purchases, boosting your sales and revenue. It can also improve user engagement by convincing visitors to stay longer on your site.
In this article, we will show you how to easily show product recommendations in WordPress, step by step.
Why Show Product Recommendations in WordPress?
If you have an online store, then showing product recommendations on the cart or checkout page can increase the average order value on your site.
By suggesting relevant products, you can help customers discover items they might be interested in, leading to a more satisfying shopping experience.
For instance, if a customer purchases a hat in your clothing store, you can recommend sunglasses because both these options protect from the sun and are often bought together.
You can show these recommendations as a slide-in cart, order bump, upsell, or cross-sell products, and even send automated emails to users upon purchase to gain traction.
Having said that, let’s take a look at how to easily show product recommendations in WordPress.
For this tutorial, we will be using multiple methods, so you can use the links below to jump to the one of your choice:
Method 1: Show Product Recommendations on the Products Page
If you want to show relevant recommendations on the products page, then this method is for you.
You can easily do this using the default upsell feature in WooCommerce, so you won’t need any other plugin for this method.
Upsells basically means recommending a more premium version of the product the user is purchasing. However, you can also add other relevant products in this section.
First, you must visit the Products » Add New page from the WordPress dashboard to create a new product. You can also edit an existing one if you want.
Once you have added the details, scroll down to the ‘Product Data’ section and switch to the ‘Linked Products’ tab from the left column.
Here, you can add different products to your WooCommerce store in the ‘Upsell’ section. To do this, just enter the name of the product, and you will be shown the search results from which you can choose a product to add.
After that, scroll back to the top and click the ‘Publish’ button to store your settings and make your product live.
Now, visit your WooCommerce store to view the upsell products under the ‘You may also like’ section.
Method 2: Show Product Recommendations on the Cart Page
If you want to display product recommendations on the cart page just as the customer is moving to the checkout, then this is the method to use.
WooCommerce offers the default cross-sell option that allows you to show relevant and complementary products without using any plugin.
First, open the product of your choice in the WooCommerce editor and scroll down to the ‘Product Data’ section.
Here, switch to the ‘Linked Products’ tab where you can add relevant products to be displayed on the carts page in the ‘Cross-sells’ section.
Once you are done, just click the ‘Publish’ or ‘Update’ button at the top to store your settings.
Now, visit your store and add a product in the cart to head over to the Cart page. Here, you will notice that the product recommendations are displayed in the ‘You may be interested in…’ section.
Method 3: Show Product Recommendations as a Sliding Cart
You can use this method if you want to show product recommendations in a sliding cart.
FunnelKit is a popular WooCommerce plugin that lets you add a sliding cart to your store and also show relevant recommendations within this cart to encourage users to make more purchases.
Upon activation, head to the FunnelKit » Cart page and toggle the ‘Enable Cart’ switch to ‘On.’
After that, you can select the sliding cart visibility, icon position, coupon field, summary, and checkout settings from the section below. For more details on this, see our tutorial on how to easily add a sliding cart in WooCommerce.
Once satisfied, you must switch to the ‘Upsells’ column from the left and toggle the ‘Enable Cart Upsells’ switch to ‘On.’
Note: Keep in mind that you will need the pro version of the plugin to unlock the upsells feature.
This will open new settings on the page from where you can configure the display layout for product recommendations. You will be able to see a preview for each layout style on the right corner of the screen.
After that, you must select if you want to show cross-sell or upsell products as recommendations. You can also choose the ‘Both’ option.
Then, you can add a heading to be displayed at the top of product recommendations and choose the number of recommendations to be displayed.
Once that is done, scroll down to the ‘Upsells and Cross-Sells’ section to view the list of all the products on your online store.
From here, expand a product’s tab and click the ‘Add Upsell’ or ‘Add Cross Sell’ button to add recommendations.
Remember that upsell products are like the premium version of the product that the customer has added to the cart, while cross-sell products are the ones that are related to the product the user is purchasing.
Upon clicking on one of the buttons, a popup will open on the screen from where you can search and add the product that you want to be displayed in the recommendations.
You can follow the same process for all the products on your online store.
Once you are done, just click the ‘Save’ button at the top to store your settings.
You can now visit your WooCommerce to view the sliding cart with product recommendations.
Method 4: Show Product Recommendations as Order Bumps
Use this method to display relevant product recommendations as an order bump, which is a technique used on the checkout page to show relevant products to customers at a lower price point.
This can often convince them to buy it right before finishing the checkout process.
Note: FunnelKit Builder has a free plan, but you will need the pro version to unlock the order bumps feature.
Upon activation, visit the FunnelKit » Settings page from the admin sidebar and switch to the ‘License’ tab in the left column.
Then, enter your license key and click the ‘Activate’ and ‘Save Changes’ button to store your settings. You can get this information from your account on the FunnelKit website.
Once that is done, go to the FunnelKit » Store Checkout page from the WordPress dashboard and click the ‘Add Order Bump’ button.
This will open a popup where you must add a name for the order bump that you are creating and click the ‘Add’ button.
The plugin will now add the order bump to your checkout funnel. Here, click the ‘Edit’ button to start the process.
This will take you to a new screen where you must click the ‘Add Product’ button to open a popup.
Here, just type and add the products that you think will complement the buyers’ purchase and then click the ‘Add Product’ button.
Next, you can select a discount type for the products that you chose from the dropdown menu and can even offer more than one quantity for each item to customers.
Once you have done that, just click the ‘Save Changes’ button to store your settings.
Then, scroll down to the ‘Order Bump Settings’ section, where you can select the order bump’s behavior and display position during checkout.
For instance, if you select the ‘Add Order Bumps to Cart Items’ option as the bump behavior, then customers will be suggested these products to add as an extra purchase.
However, when choosing ‘Replace Order Bumps with a Cart Item (used for upgrades)’, you give customers the option to replace their purchase by upgrading to a higher-end version of the product.
After that, switch to the ‘Design’ tab from the top. Here, you can configure how the order bump offer will look to customers.
You can add a title and description and change the text colors, background color, toggle color, border, font size, price display, and box padding and width. Once you are satisfied, just click the ‘Save’ button to store your settings.
Now, it is time for you to switch to the ‘Rules’ tab, where you have to click the ‘Add Rules’ button.
This will display some new settings on the screen that you can use to display the order bump for specific products. The rules can be based on the cart, customer, geography, or date and time.
For example, if you want to display the order bump on the checkout for a specific product, then you must choose the ‘Customer Product Purchased’ option from the dropdown menu on the right.
After that, just add the product name in the text field on the right and click the ‘Save Changes’ button to store your settings.
Now, visit your WooCommerce to view the order bump on the checkout page of a specific product.
Method 5: Offer Post-Purchase Recommendations With Emails
If you want to send a post-purchase recommendation email to customers, then this method is for you. For this, you will need FunnelKit Automations, which is a powerful automation plugin.
You can create a workflow with it that will automatically send a recommendation email to users sometime after their purchase.
Note: You can sign up for the FunnelKit free plan to do this.
Upon activation, visit the FunnelKit Automations » Automations page from the WordPress dashboard and click the ‘Create Automation’ button.
This will take you to the ‘Add Automations’ page, where you will see a list of premade templates offered by the plugin.
From here, switch to the ‘WooCommerce’ tab and select the ‘Post Purchase Sequence’ template.
Doing that will open a preview of the automated workflow in a new tab from where you must click the ‘Import Recipe’ button.
This will open a new prompt. Here, add the name for the workflow that you are making and click the ‘Create’ button.
The FunnelKit Automation editor will now be launched on the screen. You can start by clicking on the ‘Order Created’ tab. This is the trigger that will start the workflow.
A popup will appear on your screen, where you will have to select the order status. For instance, if you select the ‘Processing’ option, then the email will be sent to users after they place their order.
However, when choosing the ‘Completed’ option, customers will receive an email after they get the order at their address. Just configure these settings and click the ‘Save’ button.
Once you do that, click the ‘Delay’ tab.
This will open the prompt on the screen where you can choose how long after the purchase the email should be sent to users. For example, you can choose 1 hour from the dropdown menu.
After that, click the ‘Save’ button to store your settings.
Next, click the ‘Action’ tab in the editor to open its settings in the popup. Here, you can start by configuring the subject line of the email.
Then, click the ‘Merge Tags’ option at the top.
On doing that, a popup will open up where you have to switch to the ‘Orders’ tab.
Next, scroll down to the ‘Order Cross Sells’ option and click the copy button next to it.
The prompt will now automatically close, and you can scroll down to the text builder in the ‘Action’ popup.
Here, you can change the email content according to your liking and add the cross-sells tag. Now, users will see a list of relevant products that you added for the purchased product using WooCommerce or FunnelKit.
Once you are done, just click the ‘Save and Close’ button.
You can now view your automated workflow again to see if you want to make any changes.
After that, toggle the ‘Inactive’ switch at the top to ‘Active’.
Now, your customers will receive an email with product recommendations exactly an hour after purchase.
Method 6: Show Product Recommendations in Popups
If you want to show product recommendations in popups, then this method is for you.
For this, you will need OptinMonster, which is the best lead generation and conversion optimization tool on the market. It allows you to create popups, gamified spin the wheels, banners, and floating bars using its premade templates and visual editor.
It also has exit intent technology that lets you display product popups to users just as they are planning to leave your store.
To create a product recommendation popup, you will need to create an account on the OptinMonster website.
Once you do that, open your WordPress dashboard and install the free OptinMonster plugin, which will connect your website with the tool.
Upon activation, the OptinMonster setup wizard will open up, where you must click the ‘Connect Your Existing Account’ button. You can then follow the onscreen instructions to complete the process.
Next, visit the OptinMonster » Settings page and click the ‘Auto Generate Keys + Connect WooCommerce’ button.
If you don’t do this, then campaigns created with OptinMonster won’t be shown in your store.
Once that is done, head over to the OptinMonster » Templates page from the WordPress dashboard and select ‘ Popup’ as the campaign type.
Next, click the ‘Use Template’ button for a template that you want to use. For this tutorial, we have used the ‘Product Recommendations’ template.
This will open a prompt where you can add a name for the campaign that you are creating.
Once you do that, OptinMonster’s drag and drop builder will be launched on the screen. Here, you can use different blocks to add an image, details, and CTA for a product. For more instructions, see our tutorial on how to create a WooCommerce popup to increase sales.
Then, click the ‘Product Details’ button in the popup preview to open its settings in the left column. You can now add the URL for the product’s page in the ‘Redirect URL’ field.
Now, switch to the ‘Display Rules’ tab from the top. Here, you will be setting conditions for the product recommendation popup appearance.
To do this, open the ‘Time on Page’ dropdown menu and choose the ‘Page Targeting’ option.
This will allow you to show your popup to users on a specific product’s page, letting you cross-sell or upsell the product.
Upon choosing this option, select ‘contains’ from the dropdown menu in the middle and then add the URL of the product page where you want to display the specific recommendation popup.
You can also choose the ‘Exit Intent’ option to display the popup as the user is about to leave your store.
If you want, you can change the feature’s intensity to show it to more customers.
Finally, switch to the ‘Publish’ tab from the top.
Here, click the ‘Publish’ button to make your popup live. Then, click the ‘Save’ button to store your settings.
You can now visit your online store to view the product recommendations popup in action.
If you selected a specific page for the popup, then you must head to that page to view the results.
Method 7: Display Product Recommendations in Easy Digital Downloads
If you sell digital downloads on your online store, then the above methods may not be suitable for you.
In that case, you can use Easy Digital Downloads, which is the best plugin for selling digital goods, to show product recommendations.
Note: EDD has a free plan, but you will need the pro version to unlock the Cross-sell and Upsell add-on.
Upon activation, visit the Downloads » Settings page from the WordPress admin sidebar to enter your license key. You can get information from under your account on the EDD website.
Then, click the ‘Activate’ button.
Once you have done that, you must set up your store to start selling products. For instructions, see our beginner’s guide on how to sell digital downloads in WordPress.
Next, head over to the Downloads » Extensions page and locate the ‘EDD Cross-sell and Upsell’ addon, and click the ‘Install’ button under it.
Once the addon is installed, it will automatically show an activated toggle like this:
Now, it’s time for you to visit the Downloads » Settings page and switch to the ‘Extensions’ tab.
From here, you can configure the heading for upsell and cross-sell products. Remember that the upsell products are like a premium version of the product the user is purchasing, while cross-sell products are the ones that are related to the purchased products.
You can add your headings according to your liking and also adjust the number of product recommendations to be shown from the dropdown menus.
After that, just click the ‘Save Changes’ button to store your settings.
Now, open the digital product where you want to add product recommendations.
Once the block editor appears, simply scroll down to the ‘Cross-sell and Upsell’ section, where you can add custom headings for each section.
If you don’t add a heading, then the default headings you configured will be added to the page.
After that, select the upsell product recommendations from the dropdown menu. You can follow the same process for cross-sell products as well.
Once you are done, just click the ‘Update’ or ‘Publish’ button to store your settings.
Now open the product page on the website front-end, and you will see that the upsell product will be recommended on the product page.
On the other hand, the cross-sell products will be recommended to users when they are on the checkout page.
This is how the cross-sell products looked on our demo website.
Bonus: Properly Set Up eCommerce Tracking In WordPress
Once you have added product recommendations, it is time for you to set tracking for your online store to find your top-selling products, see which campaigns perform the best, and understand how people find and use your website.
This will help you find what kind of products customers are likely to buy along with others in your store. For example, you may notice that anyone who is buying sunscreen is also purchasing a hat.
With this information, you can show relevant product recommendations to customers and boost your conversions.
Then, head over to the Insights » Addons page from the WordPress dashboard and install the eCommerce addon.
Now visit the Insights » Settings page and switch to the ‘eCommerce’ tab. Here, you must toggle the ‘Use Enhanced eCommerce’ switch to ‘On.’
Once you do that, MonsterInsights will start recording analytics and find the data you need, including conversion rate, transactions, revenue, average order value, and top products.
Hey there, WordPress fans! I am back with the latest edition of our monthly WordPress news roundup, which covers everything that happened in WordPress over the past 30 days…or so. 
