DEV Community: Katerina Braide

Managing a team can often feel overwhelming, especially if you’re not a professional project manager but still need to organize work efficiently. This tool serves as a productivity booster by automating repetitive tasks and centralizing project management.

Katerina Braide — Mon, 27 Jan 2025 08:45:07 +0000

Project Management Assembly of Agents Built with Agent.ai

Miracleio ・ Jan 27

#devchallenge #agentaichallenge #ai #machinelearning

Variable Fonts for Dynamic Typography

Katerina Braide — Tue, 03 Dec 2024 09:41:52 +0000

Do you find it tedious to keep track of several font files for various weights and styles? Creating distinct files for ordinary, bold, italic, and other font variations can be challenging for web designers. This complicates the creative process and clogs their workflow. How about combining all these variants into one file?

That's where variable fonts come in. Variable fonts are a groundbreaking advancement in OpenType font technology that allows one font file to contain multiple variations, such as regular, bold, and italic. This implies that designers just need to work with one file to access all the various weights, styles, and widths they require. This invention makes it simple to constantly and easily modify characteristics like weight, width, and tilt, which streamlines the design process and fosters creative freedom.

Using the Kyiv Sans font as an example, this article will look at the relevance of different fonts in CSS and demonstrate how important qualities like weight and even non-standard font variations like MIDL. Using these tools, we will learn how to produce dynamic and aesthetically stunning typography in CSS.

Introduction to Variable Fonts

Variable font technological architecture lets designers and developers instantly control these typographic characteristics using CSS, thus permitting exact changes to fit the particular requirements of a project. This improves web performance by greatly lowering load times and replacing many static font files with a single variable font file.

With their degree of flexibility and accuracy formerly unheard of with conventional static font files, variable fonts constitute a major development in typographic technology. Unlike traditional fonts, which demand separate files for every style and weight, variable fonts capture several styles within one, scalable file. This is accomplished with the OpenType font style, which permits constant variation along one or more axes—such as weight, width, and optical size.

Benefits of Variable Fonts in CSS

We'll walk you through how to create dynamic and aesthetically pleasing CSS typography using these tools. Let's examine a few examples:

Efficiency: By combining several font styles into a single file, variable fonts minimize HTTP requests, speeding up page loads and overall efficiency.

Flexibility: Designers may precisely modify typography to fit different design contexts and user preferences because of their fine-grained control over properties like wght and custom properties like MIDL and CONT.

Smooth Transitions: Variable fonts allow for dynamic changes to font styles, avoiding abrupt switches between discrete font files. As a result, transitions between font styles are smooth and fluid.

Responsive Typography: Variable fonts enable responsive typography by allowing adjustments based on viewport size or other user-defined parameters, ensuring optimal legibility and aesthetic appeal across devices.

Dynamic Typography: Variable fonts provide real-time changes depending on user interaction or environmental conditions, therefore supporting dynamic, improving user involvement, and generating immersive experiences.

Accessibility: A wider range of typographic options allows text customization and modification to ensure legibility and readability across various devices and user preferences.

Aesthetics: On the web, variable fonts inspire creative design ideas and challenge typographic boundaries, opening up new opportunities for typographic expression and experimentation.

Scalability: Variable fonts are perfect for responsive design and guarantee that text is clear and legible at any size or resolution since they are scalable without quality loss.

Introduction to the concept of responsive and dynamic typography using variable fonts

Modern web design allows designers to create more flexible and captivating typographic experiences using responsive and dynamic typography with changing fonts, let us dissect the ideas:

Variables in Fonts: Variable fonts are a single font file with several variants of a typeface, including wght and special properties MIDL and CONT. Variable fonts give more freedom and efficiency in typography design than conventional fonts, which demand distinct files for every style and enable fluid transitions between these variants.

Responsive Typography: Designing text to fit easily into many screen sizes, resolutions, and viewing environments is known as responsive typography. From big desktop computers to cellphones and everything in between, this guarantees the best readability and aesthetics across many devices. Dynamic font size, line spacing, and other typographic changes help responsive typography improve the user experience and accessibility.

Dynamic Typography: Dynamic typography enhances responsive typography by incorporating interaction and animation into typographic design. JavaScript and CSS (Cascading Style Sheets) help designers develop typefaces that suit content changes, user interactions, or scrolling behavior. Dynamic typography uses components like wght, MIDL, and CONT to generate visual attractiveness and interactivity, guiding users' attention and catching them.

Designers create rich, versatile, and immersive online typographic experiences by combining dynamic and flexible typography methods with varying fonts. Whether it's dynamically changing typeface in response to user activity, animating text elements to highlight important information, or adjusting font weight and size based on screen dimensions, this approach offers many chances for creativity and invention in digital design.

The various font properties of Kyiv Sans allow designers to create intriguing and flawless typographic transitions. This enhances the interaction and user-friendliness of web materials by increasing their aesthetic appeal and utility.

Understanding Variable Font Properties

Various typefaces offer a range of new characteristics that are absent in traditional static fonts. Knowing these characteristics is necessary to use the full potential of changeable typefaces. These are some basic ones:

Weight (wght): By varying their wght along a continuous axis, variable typefaces enable seamless transitions between several thickness levels. Designers can indicate a range of weights within a single font file, from light to ultra-bold and, all points in between.

Middle Layer Effect (MIDL): This custom axis lets designers change a middle layer effect within the typeface. This can give the text a distinctive visual style, as well as an extra degree of design freedom and inventiveness.

Contrast (CONT): Another custom axis is CONT, which lets the font's contrast be changed. By dynamically altering the contrast depending on design requirements, this can help maximize the readability and visual attractiveness of the text.

Understanding and applying these qualities will help designers produce visually striking typefaces. With its varied font characteristics, Kyiv Sans presents special customizing choices that improve the usability and appearance of web typography.

Overview of additional axes and variations available in variable fonts

Beyond the conventional weight, width, and optical size modifications, variable fonts provide a broad spectrum of personalizing choices. Below is a summary of the axes and variants that might be available:

Several registered axes that variable font designers may use are defined by the OpenType specification:

Width (wdth): This axis controls the horizontal expansion or condensation of the font, enabling designers to modify the width of characters. By adjusting this axis, designers can create fonts that appear narrower or wider without altering the overall height, allowing for a flexible range of condensed to extended styles.
Slant (slnt): This axis allows designers to apply an italic-like slant to the characters without altering the letterforms’ structure. The slant axis typically mimics the effect of traditional italics but retains the upright letterforms, making it useful for creating stylistic variations.
Italic (ital): The italic axis switches between upright and italic versions of a typeface. Unlike the slant axis, which only tilts the characters, the italic axis involves a complete redesign of the characters to reflect the cursive nature of true italics, providing a more authentic italic style.
Optical Size (opsz): This axis adjusts the font’s design to optimize readability at different sizes. For example, smaller sizes may feature thicker strokes and more open counters for better legibility, while larger sizes can be more refined and delicate. This axis is particularly useful for responsive typography across various media.
Grade (GRAD): The grade axis allows subtle adjustments to the font’s stroke weight without affecting the overall spacing. It is useful for improving readability in different print or screen environments, where a slight increase or decrease in weight can enhance contrast and clarity.
Contrast (CNTR): This axis modifies the contrast between thick and thin strokes within a font. By adjusting the contrast, designers can create fonts with varying levels of emphasis and visual impact, from low-contrast, humanist styles to high-contrast, modern designs.
X-height (xhgt): This axis adjusts the height of lowercase letters in relation to the font’s capital letters. Increasing the x-height can improve legibility at small sizes or create a more modern appearance while decreasing it can evoke a more traditional or formal feel.

Apart from the registered axes, variable font creators may specify their own custom axes. Regarding Kyiv Sans: these comprise:

Middle Layer Effect (MIDL): This custom axis gives designers more design versatility and allows them to change a specific middle layer effect inside the typeface, thereby adding original style aspects.
Contrast (CONT): This custom axis helps to control the contrast between thick and thin strokes in the letterforms. Designers can dynamically change this characteristic to achieve a variety of degrees of typographic expressiveness, from subdued contrasts to more obvious variances.

Aside from the registered axes, the option to construct new axes allows font designers to achieve a high degree of customization and sophisticated control over a font’s appearance and traits. Custom axes like MIDL and CONT, for instance, enable designers to tailor the font’s special qualities, resulting in flexible and expressive typography. These customizations, combined with variable font registration, offer numerous ways to create diverse typographic effects. For example, the Middle Layer Effect (MIDL) axis lets designers alter a unique middle layer within the typeface, adding distinctive visual qualities that enhance artistic freedom. The Contrast (CONT) axis, on the other hand, controls the variation between thick and thin strokes, allowing for dynamic adjustments that range from subtle to pronounced contrasts. By interacting with axes like Weight and Middle Layer Effect, designers can create text with varying thicknesses and unique styles, achieving precise control over the typeface’s appearance. Similarly, combining variations in Weight and Contrast enables the creation of text with different degrees of boldness and stroke contrast, balancing visual impact with readability. These examples demonstrate the unmatched freedom that both registered and custom axes provide, empowering designers to align typefaces with their specific aesthetic preferences and design objectives.

Implementing Variable Fonts in CSS

Now that you're enthralled with the possibilities of changeable fonts, let's investigate how to apply them in CSS-based web projects. CSS offers the means to properly use these adaptable typefaces' capabilities. Define the font first with @font-face, which lets you provide the varying font file and its characteristics. Once the font is set, you can dynamically change the font's axes using different CSS attributes, thus maximizing the possibilities provided by varying fonts.

Obtaining the font

First, we must download the variable font we want for our project.
A few websites on the internet allow us to access varying font files. Some of the most frequently used font websites are as follows:

For this example, we’ll go to Vfonts.com to download our Kyiv Sans variable font. The ttf or woff2 file format works fine, but we'll be using a ttf in this demonstration. If you need to convert your font file from ttf to woff2, then head to everythingfonts.com:

The screenshot above shows what you'll see when you arrive at Vfont.

We divide the project into the following steps:

Navigate to vfont: Visit the website where variable font resources are available.
Select Kyiv* Type: Choose the Kyiv* Type font, which will redirect you to Behance.net where the font is hosted.
Access the Download Link: On the Behance page, scroll all the way down to find a link to download the font.
Download from Google Drive: Click on the download link, which will take you to a Google Drive folder. Download the font file from there.
Unzip the File: After downloading, unzip the file to access its contents.
Review Font Options: The unzipped folder contains several options to choose from.
- Icons
- No variable
- Variable
Select the variable font: Focus on the files that include the variable font.
- Serif
- Tilting
- Sans
Use the Sans Font: Set up and use the Sans version of the font. Note that the Sans font weight file is 360 KB, which is equivalent to using eight non-variable font files.
Evaluate the trade-off: Consider if the use of variable fonts is worthwhile for your project. If you only need regular, bold, and italic styles, it might not be necessary to use variable fonts. However, if you require advanced control over variations, variable fonts can be very beneficial.

Note: These files above are in TTF format.

Now we're going to head to VSCode, where we'll be using a vanilla vite project.
To begin working on the project, you must install the necessary packages. You have to follow the steps below:

Open a new terminal.
Run the command
```
npm create vite@latest
```
Name your project.
Name your package.
Select a Vanilla framework.
Select the JavaScript variant.
Running npm install will help you negotiate into the project and install the necessary modules.
After setting up the dependencies, use the following command to launch the application:
```
npm run dev
```
Visit http://localhost:your-port-number to access the running program on your browser.

Once we complete our project, we will have a wealth of mock code that we can modify to build our intended application. The downloaded variable font should be dropped into a font folder, which will be dropped in the public folder. We’ll be replacing all the unnecessary mock code in style.css, main.js, and index.html.

The index.html code should look something like this:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Variable font</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/main.js"></script>
  </body>
</html>

From the code above, we're setting up a simple HTML wrapper for our project where the JavaScript will render content in the <div id="app"></div> element.

The main.js code should look something like this:

import "./style.css";

document.querySelector("#app").innerHTML = `
  <div>
    <h1 class="variable-font">
      I am<br>
      Variable font<br>
      and I'm awesome
    </h1>
  </div>
`;

This is where we use document.querySelector() to add content to the element we insert our content into using the id: #

And the style.css code should look something like this:

body {
  font-family: 'Kyiv Sans';
}

@font-face {
  font-family: 'Kyiv Sans';
  src: url('/font/KyivTypeSans-VarGX.ttf');
  font-weight: 0 1000;
  font-display: swap;
}

h1 {
  color: #bd0c0c;
  height: 100vh;
  display: grid;
  place-content: center;
  margin: 0;
  text-align: center;
}

.variable-font {
  font-family: 'Kyiv Sans';
  font-size: 5rem;
  line-height: 1.1;
  font-weight: 100;
  font-variation-settings:
   'wght' 100, 'CONT' 250, 'MIDL' 0;
  transition: font-variation-settings 500ms;  
}

.variable-font:hover {
  font-weight: 1000;
  font-variation-settings:
    'wght' 1000, 'CONT' 250, 'MIDL' -1000;
}

Now, let's explain what's going on in the code above:

Setting the Default Font for the Body:

body {
  font-family: 'Kyiv Sans';
}

Purpose: This sets the default font for the entire document to 'Kyiv Sans'.
Impact: All text elements within the body will inherit this font unless overridden by more specific styles.

Defining the Custom Font:

@font-face {
  font-family: 'Kyiv Sans';
  src: url('/font/KyivTypeSans-VarGX.ttf');
  font-weight: 0 1000;
  font-display: swap;
}

Purpose: The @font-face rule allows you to define a custom font.
Font Name: The font is named 'Kyiv Sans'.
Source: The font file is located at /font/KyivTypeSans-VarGX.ttf.
Font Weight Range: This font supports a range of weights from 0 to 1000, making it a variable font.
Font Display: swap ensures that text is displayed immediately using a fallback font until the custom font loads.

Styling the <h1> Element:

h1 {
  color: #bd0c0c;
  height: 100vh;
  display: grid;
  place-content: center;
  margin: 0;
  text-align: center;
}

Color: Sets the text color to #bd0c0c, a shade of red.
Height: The height is set to 100vh, making the <h1> element span the full height of the viewport.
Display: grid is used for layout, allowing the use of grid properties.
Centering Content: place-content: center centers the content both vertically and horizontally.
Margin: Margin is set to 0 to remove any default spacing around the <h1>.
Text Alignment: The text is centered horizontally.

Styling the .variable-font Class:

.variable-font {
  font-family: 'Kyiv Sans';
  font-size: 5rem;
  line-height: 1.1;
  font-weight: 100;
  font-variation-settings:
   'wght' 100, 'CONT' 250, 'MIDL' 0;
  transition: font-variation-settings 500ms;  
}

Font Family: Uses 'Kyiv Sans' for the text.
Font Size: Sets the font size to 5rem (relative to the root element’s font size).
Line Height: 1.1 ensures a slight spacing between lines.
Font Weight: Initially set to 100.
Font Variation Settings: Utilizes custom variation settings for the variable font:
- 'wght' controls the weight (initially 100).
- 'CONT' and 'MIDL' are custom axes for this font, initially set to 250 and 0, respectively.
Transition: Smoothly transitions the font variation settings over 500 milliseconds.

Adding Hover Effect for .variable-font:

.variable-font:hover {
  font-weight: 1000;
  font-variation-settings:
    'wght' 1000, 'CONT' 250, 'MIDL' -1000;
}

Font Weight on Hover: Changes to 1000 when the element is hovered over.
Font Variation Settings on Hover: Updates the variation settings to:
- 'wght' to 1000
- 'CONT' remains 250
- 'MIDL' changes to -1000
Effect: Creates a dynamic and interactive visual effect when the user hovers over the text, highlighting the flexibility of the variable font.

At the end of it we'll have our Result looking somewhat like this;

Creating Responsive Typography with Variable Fonts

By allowing designers to achieve perfect adaptation across many devices and screen sizes, responsive typography with varied fonts transforms online design. Unmatched versatility comes from variable fonts, which allow constant changes in font attributes including weight, width, and contrast within a single font file. Designers can dynamically change these font attributes to improve readability and aesthetic appeal using CSS and media queries, ensuring that text looks best on any device, from desktop monitors to cellphones. Because a single variable font can replace several stationary font files, it reduces the need for extensive font loading and improves website performance. This flexibility not only improves the user experience but also streamlines the design process. Without responsive typography—which becomes more appealing, efficient, and accessible with different fonts—modern web design cannot exist.

Media Queries: The Masters of Screen Size Adaptation

Media queries are a cornerstone of responsive web design, acting as the masters of screen size adaptation. Based on the features of the user's device—such as screen width, height, resolution, and orientation—they let designers apply particular CSS styles. Media searches help designers make sure a website looks and operates as best it can across a variety of devices, from laptops and desktop monitors to smartphones and tablets.

Media queries' power resides in their capacity to produce flexible and fluid layouts that fit various screen sizes. Media queries let a designer change font sizes, alter grid layouts, and even hide or show certain items based on the viewport measurements. This ensures that the material maintains its aesthetic appeal and accessibility, regardless of the device in use.

Media queries define breakpoints—specific places at which the layout adjusts to fit varying screen sizes. Targeting different devices, these breakpoints are set using min-width, max-width, and other CSS characteristics. For example, a media query might specify the use of a mobile-friendly layout for screen widths of 768 pixels or less and a different layout for larger displays.

Incorporating media searches into web design improves accessibility and user experience. On all platforms, media queries assist in developing inclusive digital experiences by guaranteeing that text is readable, navigation is intuitive, and material is well organized. Any web designer hoping to create responsive, adaptable, and user-friendly websites must first learn media queries in the era of varied device use.

Here's an example:

body {
  font-family: 'Kyiv Sans';
}

@font-face {
  font-family: 'Kyiv Sans';
  src: url('/font/KyivTypeSans-VarGX.ttf');
  font-weight: 0 1000;
  font-display: swap;
}

h1 {
  color: #bd0c0c;
  height: 100vh;
  display: grid;
  place-content: center;
  margin: 0;
  text-align: center;
}

.variable-font {
  font-family: 'Kyiv Sans';
  font-size: 5rem;
  line-height: 1.1;
  font-weight: 100;
  font-variation-settings:
   'wght' 100, 'CONT' 250, 'MIDL' 0;
  transition: font-variation-settings 500ms;
}

.variable-font:hover {
  font-weight: 1000;
  font-variation-settings:
    'wght' 1000, 'CONT' 250, 'MIDL' -1000;
}

/* Media Queries */
/* Small screens */
@media (max-width: 600px) {
  .variable-font {
    font-size: 3rem;
    font-variation-settings:
     'wght' 100, 'CONT' 150, 'MIDL' 0;
  }

  .variable-font:hover {
    font-weight: 900;
    font-variation-settings:
      'wght' 900, 'CONT' 150, 'MIDL' -900;
  }

  h1 {
    font-size: 2rem;
  }
}

/* Medium screens */
@media (min-width: 601px) and (max-width: 1200px) {
  .variable-font {
    font-size: 4rem;
    font-variation-settings:
     'wght' 100, 'CONT' 200, 'MIDL' 0;
  }

  .variable-font:hover {
    font-weight: 950;
    font-variation-settings:
      'wght' 950, 'CONT' 200, 'MIDL' -950;
  }

  h1 {
    font-size: 3rem;
  }
}

/* Large screens */
@media (min-width: 1201px) {
  .variable-font {
    font-size: 5rem;
    font-variation-settings:
     'wght' 100, 'CONT' 250, 'MIDL' 0;
  }

  .variable-font:hover {
    font-weight: 1000;
    font-variation-settings:
      'wght' 1000, 'CONT' 250, 'MIDL' -1000;
  }

  h1 {
    font-size: 4rem;
  }
}

In this example, we used media queries to adjust the font-variation-settings and weight of our font based on screen size. For devices with a maximum width of 600px, the font size is reduced to 3rem. The weight and other variations are adjusted accordingly for :hover effects, For devices with a width between 601px and 1200px, the font size is set to 4rem, with adjusted weight and variations. For devices with a width of 1201px and above, the font size is 5rem, maintaining the original settings.
These media queries ensure that the font adapts to different screen sizes, improving readability and the user experience across various devices.

The image above shows the display for Small screens

The image above shows the display for Medium screens

The image above shows the display for Large screens

Viewport Units: Making Layouts Fluid

Viewport units are a powerful tool in modern web design, enabling the creation of fluid and responsive layouts that adapt seamlessly to different screen sizes. Viewport units include vw (viewport width) and vh (viewport height), which are relative to the dimensions of the browser's viewport. One vw equals 1% of the viewport's width, and one vh equals 1% of the viewport's height. These units help designers guarantee that elements scale according to the size of the user's screen, therefore producing a more dynamic and adaptable design. Setting the font size, padding, or margins in viewport units, for example, lets text and objects resize automatically, therefore preserving a consistent look on several devices. This adaptability enhances the user experience by ensuring content remains readable and aesthetically pleasing, regardless of the site's display on a large desktop monitor or a small mobile screen. Viewport units let designers create adaptable layouts that move easily to fit the always-changing terrain of digital gadgets.

Here's an example of how to use vw to adjust font size based on viewport width:

body {
  font-family: 'Kyiv Sans';
}
@font-face {
  font-family: 'Kyiv Sans';
  src: url('/font/KyivTypeSans-VarGX.ttf');
  font-weight: 0 1000;
  font-display: swap;
}
h1 {
  color: #bd0c0c;
  height: 100vh;
  display: grid;
  place-content: center;
  margin: 0;
  text-align: center;
}
.variable-font {
  font-family: 'Kyiv Sans';
  font-size: 5vw; 
    /* Using viewport width for font size */
  line-height: 1.1;
  font-weight: 100;
  font-variation-settings:
   'wght' 100, 'CONT' 250, 'MIDL' 0;
  transition: font-variation-settings 500ms;
}
.variable-font:hover {
  font-weight: 1000;
  font-variation-settings:
    'wght' 1000, 'CONT' 250, 'MIDL' -1000;
}

/* Media Queries */
/* Small screens */
@media (max-width: 600px) {
  .variable-font {
    font-size: 8vw; 
      /* Larger font size for small screens */
    font-variation-settings:
     'wght' 100, 'CONT' 150, 'MIDL' 0;
  }
  .variable-font:hover {
    font-weight: 900;
    font-variation-settings:
      'wght' 900, 'CONT' 150, 'MIDL' -900;
  }
  h1 {
    font-size: 6vw; 
      /* Adjust h1 size for small screens */
  }
}
/* Medium screens */
@media (min-width: 601px) and (max-width: 1200px) {
  .variable-font {
    font-size: 6vw; 
      /* Adjust font size for medium screens */
    font-variation-settings:
     'wght' 100, 'CONT' 200, 'MIDL' 0;
  }

  .variable-font:hover {
    font-weight: 950;
    font-variation-settings:
      'wght' 950, 'CONT' 200, 'MIDL' -950;
  }

  h1 {
    font-size: 5vw; 
      /* Adjust h1 size for medium screens */
  }
}

/* Large screens */
@media (min-width: 1201px) {
  .variable-font {
    font-size: 5vw; 
      /* Adjust font size for large screens */
    font-variation-settings:
     'wght' 100, 'CONT' 250, 'MIDL' 0;
  }
  .variable-font:hover {
    font-weight: 1000;
    font-variation-settings:
      'wght' 1000, 'CONT' 250, 'MIDL' -1000;
  }
  h1 {
    font-size: 4vw; 
      /* Adjust h1 size for large screens */
  }
}

In this example, from the code above, the font-size property of .variable-font is set using viewport width vw units, making the text size responsive to the viewport's width.

We can combine media searches and viewport units with varying font characteristics to create truly responsive typography that elegantly fits every device or screen size. This enables us to provide an outstanding user experience, independent of the method of access someone chooses for our website.

Advanced Typographic Effects with Variable Fonts

Variable fonts enable designers to create highly customized and dynamic text styles by opening up a new field of complex typographic effects. Designers can now create seamless transitions and unusual visual effects that were previously difficult with stationary fonts by continuously adjusting characteristics such as weight, width, and custom axes. The weight, contrast, and midline dynamically can be changed by adjusting the font, offering complex control over the text look. This adaptability is very strong in responsive design, in which typefaces can easily adjust to various screen sizes and orientations. Moreover, interactive animations allow text to respond to user actions such as hovering or clicking, producing intriguing and immersive encounters. Viewport units, combined with varying font characteristics, ensure that typography remains fluid and scalable, improving readability and appearance on all kinds of devices. Using these sophisticated features, designers can create visually striking digital material by stretching the possibilities of conventional typography. Let's explore some fascinating methods for stretching the bounds of online typography:

Fluid Typography

Fluid typography is a design method whereby text scales dynamically with the viewport's size, therefore offering a smooth and responsive reading experience across many devices. Viewport units, media searches, and changeable fonts let fluid typography ensure that text stays intelligible and visually balanced, independent of screen size. This method eliminates the need for fixed font sizes and allows for seamless changes, thereby improving readability and appearance in a way that fits very different display conditions.

Here's an example:

/* Base font styles */
body {
  font-family: 'Kyiv Sans', sans-serif;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
  color: #333;
}

/* Fluid Typography for Heading and Body Text */
h1 {
  font-size: calc(2rem + 2vw); 
    /* Fluid font size that scales with viewport width */
  margin: 0;
  text-align: center;
  color: #bd0c0c;
}

h2 {
  font-size: calc(1.5rem + 1.5vw); 
    /* subheadings Fluid font size */
  margin: 1rem 0;
  color: #555;
}

p {
  font-size: calc(1rem + 0.5vw); 
    /* paragraphs Fluid font size */
  margin: 0 0 1rem 0;
  line-height: 1.6;
}

/* Fluid Typography for Variable Fonts */
.variable-font {
  font-family: 'Kyiv Sans';
  font-size: calc(1rem + 1vw); 
    /* Fluid font size */
  font-variation-settings:
    'wght' 400, 'CONT' 200, 'MIDL' 0;
  transition: font-variation-settings 500ms;
}

.variable-font:hover {
  font-variation-settings:
    'wght' 700, 'CONT' 250, 'MIDL' -100;
}

How it works:

calc() Function: This function generates a fluid scaling effect by combining relative units vw, with fixed values rem. font-size, for instance, calc(2rem + 2vw) reacts to the viewport width and assures a base size.

Fluid Typography for Various Elements: Many elements such as h1, h2, and p guarantee text scaled suitably across devices using fluid typeography. The calc() function provides a base size with a scaling factor that changes with the viewport width.

Variable Fonts: By combining fluid typography with changeable fonts, you can achieve dynamic changes in text attributes depending on viewport size.
This method guarantees that text stays aesthetically pleasing and readable across a large spectrum of devices and screen sizes.

By animating text, kinetic typography gives it life and generates interesting and dynamic visual effects that enthrall viewers. This method adds motion and interaction by changing text attributes using JavaScript and CSS animations. Using a :hover effect to animate the font weight in our example with the variable font, we demonstrated kinetic typography—that is, seamlessly from lighter to bolder weights. This not only emphasizes the content but also shows how, with fluid, real-time changes, varying fonts may improve user interactions. Kinetic typography allows designers to improve the visual attractiveness and usability of their text, enhancing its fundamental role in an interactive and interesting digital environment.

Example: Animating Weight on Hover

.variable-font {
  font-family: 'Kyiv Sans';
  font-size: 5rem;
  line-height: 1.1;
  font-weight: 100;
  font-variation-settings:
   'wght' 100, 'CONT' 250, 'MIDL' 0;
  transition: font-variation-settings 500ms;
}

.variable-font:hover {
  font-weight: 1000; 
    /* Animate the weight from light to bold on hover */
  font-variation-settings:
    'wght' 1000, 'CONT' 250, 'MIDL' -1000;
}

Here, we use a smooth transition to animate the weight of the .variable-font element from regular 100 to bold 1000 on :hover, creating a subtle yet impactful effect.

These are only a handful of the imaginative opportunities that different fonts offer. From dynamic animations to fluid layouts, there is ample opportunity for distinctive and intriguing typefaces. With a little inventiveness and CSS understanding, we can challenge web design norms and produce rather remarkable user experiences.

Conclusion

Variable fonts—best demonstrated by Kyiv Sans transform typography on the web by grouping several font styles into a single file. By lowering the number of HTTP queries, this invention simplifies processes, increases design flexibility, and boosts performance. Designers can fully utilize changeable fonts in CSS to produce responsive, dynamic typefaces that fit perfectly with various screen sizes and user interactions.
Designers can create visually appealing and easily accessible typographic experiences using attributes such as weight, middle layer effects, and contrast, as well as responsive approaches such as media queries and viewport units. Variable fonts are a necessary tool for contemporary web design since their fluidity enables new directions for artistic expression.

Resources

Check out the live preview hosted on Netlify
View Source code

References

Building Progressive Web Applications using SvelteKit

Katerina Braide — Fri, 02 Aug 2024 10:09:42 +0000

This article is all about simplifying your path to web development. We will build amazing websites with with SvelteKit, a tool akin to your coding friend. We will quickly set things up, create a basic site with little coding, and easily turn it into a Progressive Web App (PWA).

Introduction to SvelteKit for Building Progressive Web Applications (PWAs)

Svelte, a front-end JavaScript tool, enables the creation and management of user interfaces akin to React and Vue, while SvelteKit serves as a framework. It enhances this potential by offering a framework that enables the development of more comprehensive websites with features such as routing, server-side rendering, and presence of an API. Before its release, developers used a framework known as Sapper for similar purposes. It can thus be considered a consolidated and improved form of sapper. Making comparisons, one may relate SvelteKit to Svelte, Next.js to React, or Nuxt.js to Vue. Svelte primarily focuses on client-side rendering and UI updates in the browser, similar to React or Vue, but it combines server-side rendering with client-side rendering to build fast, high-performance dynamic websites, thereby matching the approach of Next.js and Nuxt.js with React or Vue.

Benefits of using SvelteKit

Using SvelteKit to create websites offers a multitude of benefits.

It makes use of both client-side and server-side rendering. As a result, you can receive an HTML page based on your first query to the server. Because it enables page access and full indexing, this is excellent for SEO.
The routing system is quite simple, as it utilizes its routing system for handling multiple pages and routing.
Since it handles the server side, you can use its API to work with the website's front end.
Just like other major JavaScript frameworks, it also makes use of code splitting. This can help increase your application's response time.

As you use most of the popular frameworks, such as React, Vue, or Svelte, while creating web applications, you will notice that most of the time, the result is a single-page application (SPA). This is due to the browser rendering only one HTML page. It could be a blank page. All of this is known as client-side rendering.

With SvelteKit, though, client-side rendering in the browser and server-side rendering mix together. Upon performing a first query to the server, it returns a pre-generated, fully constructed HTML page rather than a blank one. Search engines and site crawlers benefit from this server-side technique because the HTML page sent to the browser already contains content. When users move between pages on the site, Svelte detects requests for new pages, looks at the target pages, and deftly changes content in the browser without further HTML page requests.

These also include server-side rendering and a routing mechanism for pages and components, which improves the idea of a single-page application. Additionally, your application's front end can utilize a custom API to access your server-side logic. We build it on Vite, a front-end tool capable of compiling code and performing hot module replacement. This can allow for live updates in the browser during both code changes and previews.

Project Overview

In this article, we will work on a quote application. When you click a button, this application will randomly render each quote using an external API. We will also use service workers to cache the application and make it available offline for you or your users to use. We will utilize SvelteKit and the quotes API from API Ninjas.

Setting Up Your SvelteKit Project

Now that we have a clear understanding of the project, we can proceed to the primary phase, which involves the project setup. This will contain some installations and configurations. You can follow the steps below.

Installing SvelteKit and setting up a new project

To begin working on the project, you must install the necessary packages. You can use the command:



npm create svelt@latest

You can install the project with all the files and folders, and it will give you the most recent package version of Svelte. You can also follow the steps below to get started:

Open a new terminal.
Install the necessary packages, files, and folders by running the command: ```shell

npm generate svelt@latest

* Select the current directory.
* Choose the skeletal template.
* Choose JavaScript.
* Use the handy plugins `eslint` and `prettier`.
* Running `npm install` will help you negotiate into the project and install the necessary modules.
* After setting up the dependencies, use the following command to launch the application:
```shell


npm run dev

Visit http://localhost:your-port-number to access the running program on your browser.

Once we complete our project, we will have a wealth of mock code that we can modify to build our intended application.

Configuring SvelteKit for PWA development

Although SvelteKit projects are usually built with Vite and already include a vite.config.js file with appropriate plugins, configuring SvelteKit for PWA (Progressive Web App) development takes a few extra steps beyond the basic project setup with:



npm create svelt@latest

You can go as follows:

Create a custom service-worker.js file within your project's src directory.
Service Worker Registration will register the service worker automatically during the building process.
Ensure that you have configured your Svelte components to handle PWA features, such as installable app prompts, dynamic caching, and offline support.
As necessary, apply service worker registration and cache techniques to your Svelte parts.
Build your SvelteKit app using the command: ```shell

npm run build

Once configured, install it in your hosting environment.

Following these guidelines will help you set it up properly for PWA development, allowing features such as [offline capability](https://kit.svelte.dev/docs/service-workers) and better user experiences.

## Building the PWA Features
Acting as a background process inside the browser, a service worker essentially lets JavaScript run in a multi-threaded way. Service workers have many outstanding examples; among them are [Cloudflare workers](https://workers.cloudflare.com/). Cloudflare has turned the web standard for service workers into a JavaScript runtime environment. Tools like [PartyKit](https://www.partykit.io/), which use service workers to subtly load analytics in the background, may be recognizable to you. Service providers provide a wide spectrum of advantages and capabilities; in this case, we will use them to improve our Progressive Web App (PWA).

Create a file named [`+page.svelte`](https://kit.svelte.dev/docs/routing#page); within the file, you must write the code to develop the PWA. We would be building a JavaScript application with quote display capability. The project we will build will retrieve the quotes using an external API. By doing this, you will get many quotes and have a large data set to work with. In your project, all the user has to do is click a button that will fetch and display each quote randomly, making it enjoyable.

```javascript


<script>
    let name = 'World';
    const apiKey = import.meta.env.VITE_API_KEY;

    /**
     * @type {string | null}
     */
    let error = null;

    /**
     * @type {string }
     */
    let title = 'Please click on the button to get a quote.';

    /**
     * @type {boolean}
     */
    let isLoading = false;

    const fetchQuote = async () => {
        try {
            isLoading = true;

            const response = await fetch('https://api.api-ninjas.com/v1/quotes?', {
                headers: { 'x-api-key': apiKey }
            });

            if (!response.ok) {
                error = 'An error ocurred, failed to get quotes.';
                console.log(error);
                return;
            }

            const data = await response.json();
            title = data[0].quote || 'No quote available';
        } catch (err) {
            error = 'An error ocurred, failed to get quotes.';
            console.log(error);
        } finally {
            isLoading = false;
        }
    };
</script>

<div class="index">
    <h1>Hello, {name}</h1>
    <p>
        {#if error}
            {error}
        {:else}
            {title}
        {/if}
    </p>

    <button on:click={fetchQuote}>
        {#if isLoading}
            {'Fetching...'}
        {:else}
            {'Change Quote'}
        {/if}
    </button>
</div>

<style>
    div {
        text-align: center;
        padding: 1em;
        max-width: 240px;
        margin: 0 auto;
    }

    h1 {
        color: #ff3e00;
        text-transform: uppercase;
        font-size: 4em;
        font-weight: 100;
    }

    @media (min-width: 640px) {
        div {
            max-width: none;
        }
    }
</style>

In the code, we made use of an API that will give us data in real-time. The API keys are written in a .env file, so you have to make sure to create one in your project and get your API key, too.

Note: If you are managing your project using a version control system such as git, please do not track the .env file. To ensure that you don't unintentionally reveal your secrets to the public, add .env to your .gitignore file.

Implementing Service Workers for Offline Capabilities

Consider a service worker to be a middleman between your client and servers, capable of handling all requests passed between them. You might have come across mock service workers, which let you test through several situations. Service providers have enormous power that allows a broad spectrum of possibilities. To simplify the use of service workers, SvelteKit requires only the inclusion of a service-worker.js file in the source directory. It automatically handles the registration process, thereby eliminating the need for manual registration that is typically required with other systems. This simplified strategy replaces the need for outside libraries to support this process.

To establish a service worker, go to your project directory, specifically the src folder, and then create your service worker file under service-worker.js. Despite their initial complexity, service providers can simplify into three basic steps:

Firstly, you install the service worker, followed by its activation.
Secondly, you intercept traffic by listening for fetch events and then substituting the URL with content from the cache, enabling offline functionality.
Thirdly, you can enhance your service worker by allowing communication to notify users of updates, prompting them to reload the page.

Turning on offline mode lets your page run free from an internet connection. If a critical problem necessitates a restart, you can access storage to unregister your service providers. It becomes crucial to monitor the cache storage, as its use triggers the display of cached content.



/// <reference types="@sveltejs/kit" />
import { build, files, version } from '$service-worker';

// Create a unique cache name for this deployment
const CACHE = `cache-${version}`;

const ASSETS = [
    ...build, // the app itself
    ...files // everything in `static`
];

self.addEventListener('install', (event) => {
    // Create a new cache and add all files to it
    async function addFilesToCache() {
        const cache = await caches.open(CACHE);
        await cache.addAll(ASSETS);
    }

    console.log('installing service worker for version', version);
    console.log('caching assets', ASSETS);
    console.log('caching build', build);

    event.waitUntil(addFilesToCache());
});

self.addEventListener('activate', (event) => {
    // Remove previous cached data from disk
    async function deleteOldCaches() {
        for (const key of await caches.keys()) {
            if (key !== CACHE) await caches.delete(key);
        }
    }

    event.waitUntil(deleteOldCaches());
});

self.addEventListener('fetch', (event) => {
    // ignore POST requests etc
    if (event.request.method !== 'GET') return;

    async function respond() {
        const url = new URL(event.request.url);
        const cache = await caches.open(CACHE);

        // `build`/`files` can always be served from the cache
        if (ASSETS.includes(url.pathname)) {
            const response = await cache.match(url.pathname);

            if (response) {
                return response;
            }
        }

        // for everything else, try the network first, but
        // fall back to the cache if we're offline
        try {
            const response = await fetch(event.request);

            // if we're offline, fetch can return a value that is not a Response
            // instead of throwing - and we can't pass this non-Response to respondWith
            if (!(response instanceof Response)) {
                throw new Error('invalid response from fetch');
            }

            if (response.status === 200) {
                cache.put(event.request, response.clone());
            }

            return response;
        } catch (err) {
            const response = await cache.match(event.request);

            if (response) {
                console.log(`Returning from Cache`, event.request.url);
                return response;
            }

            // if there's no cache, then just error out
            // as there is nothing we can do to respond to this request
            throw err;
        }
    }

    event.respondWith(respond());
});

Adding manifest file

When we discuss the manifest, it refers to a document or file that encompasses all the metadata of related files. It includes the title, version, licensing data, and other parts of your project. When building and running projects, this file provides crucial information about the necessary files, assets, and pieces.

Following the steps below, you will be able to add a manifest file to your project.

Create a manifest.json file in your project's static directory.
Ensure the manifest file contains essential details such as icons, names, and shortcuts for your Progressive Web App (PWA).
Link the manifest.json file to your project's src/app.html file.
Confirm your service-worker.js file is in your src directory.

Svelte will register the service worker found in the root of the src folder automatically during the build process.
Following these rules will help you easily include a manifest file in your project, allowing PWA functionalities.



{
    "name": "QG",
    "description": "Quote Generator",
    "short_name": "quote",
    "display": "standalone",
    "start_url": "/",
    "background_color": "#808080",
    "theme_color": "#ff3f20",
    "icons": [
        {
            "src": "logo1.avif",
            "sizes": "512x512",
            "type": "image/png",
            "purpose": "any maskable"
        }
    ]
}

The manifest file, which contains the code above, provides information about the name, description, and icon of our project.

Enhancing the PWA with SvelteKit

Improving a Progressive Web App (PWA) means using the features of the framework to improve performance, user experience, and development process simplification. It provides capabilities for responsive design, flawless UI interactions, and effective routing, thereby allowing the creation of dynamic and aesthetically striking PWAs. Developers can improve the functionality and responsiveness of PWAs by using their features for server-side rendering, client-side rendering, and custom API integration, therefore guaranteeing a flawless and immersive experience over several devices. Furthermore, SvelteKit's capabilities include live updates, hot module replacement, and SEO optimization, which help to create high-performance PWAs.

Utilizing SvelteKit's features for responsive design and smooth UI interactions

The framework offers many features that can help improve the design of websites. These features can fit screen widths, providing users with a responsive design and improving their user experience. An important part is that you can also add animations and interactive elements to increase the user experience. This can help provide a user-friendly interface. Since we won't be looking at design in this article, check out this website. They explain how to use Svelte and SvelteKit to create responsive views.

Benefits of building PWAs with SvelteKit

SvelteKit enables one to design Progressive Web Apps (PWAs) with several benefits:

Improved Performance: By integrating both client-side and server-side rendering, you can improve the speed of your application.
Enhanced SEO: HTML pages being rendered first can help improve search engine optimization (SEO). This can make your project more visible and rank higher when hosted.
Adaptive Layouts: Its responsive features make it easier for developers to create responsive designs on different screen sizes.
Streamlined Routing Mechanism: Its routing mechanism makes routing straightforward and makes setting up multiple-page routing easier.
Personalized API Integration: It also includes the ability to create a custom API for backend logic. You can use this logic on the frontend.
Real-Time Updates and Hot Module Replacement: Built on Vue, it provides real-time updates and hot module replacements.

Each feature makes it simple for developers to create progressive web applications (PWAs), which, in turn, improves design, routing, SEO, routing, and workflows.

The GIF above shows an installable PWA.

Conclusion

This article shows the importance of Progressive Web Apps (PWAs), their comparisons to native apps, and the advantages of employing SvelteKit for PWA development. It is a framework based on Svelte for website construction and includes functionalities such as routing, server-side rendering, and API integration. Using SvelteKit enables one to design Progressive Web Apps (PWAs) with different benefits, such as combining client-side and server-side rendering speed, loading time, and improved performance. Hence, the first rendering phase becomes more user-friendly.

References

Exploring CSS Units

Katerina Braide — Fri, 03 May 2024 08:56:49 +0000

🚀 Big Announcement! 🚀

📝 Thrilled to unveil my newest article! Delve into Exploring CSS Units as I explore the different CSS units and their use cases. 💡 Ready for an insightful read? Dive in here! 👀

https://blog.openreplay.com/exploring-css-units/

A Tiny Peep into CSS Houdini

Katerina Braide — Sat, 13 Jan 2024 20:29:31 +0000

What is CSS Houdini

CSS Houdini is a set of low-level APIs (Application Programming Interfaces) that enable developers to access and interact with the CSS (Cascading Style Sheets) rendering engine. It allows developers to create and use their own custom CSS properties and values, as well as manipulate the styling and layout of a webpage in ways that were not previously possible with standard CSS.
CSS Houdini consists of several APIs, each serving a specific purpose. Some of the key APIs include: Paint Worklet API, Layout Worklet API, Animation Worklet API, Typed OM (Object Model) API, etc.
CSS Houdini is designed to enhance the extensibility of CSS, allowing developers to experiment with new layout and styling features. It enables the creation of more dynamic and interactive web experiences by giving developers greater control over the rendering process.

Brief Info on CSS Houdini and its core concept of extending CSS capabilities with JavaScript.

CSS Houdini is a set of powerful tools that allows web developers to use JavaScript to create and customize new features in CSS. It enables them to go beyond the standard capabilities of CSS, essentially extending the language with their own creative additions. With CSS Houdini, developers can use JavaScript to define new ways of drawing, layout, and animations on a webpage, providing more flexibility and control over the visual design. It's like adding magical abilities to CSS, making it a more dynamic and expressive tool for building engaging and interactive websites.

More Info.

CSS Houdini has the potential to bring groundbreaking effects and functionalities to web development by empowering developers to go beyond the limitations of traditional CSS. Some key areas where it can make a significant impact include:

1. Custom Effects: Developers can create unique and visually stunning effects that were previously difficult or impossible to achieve with standard CSS. This opens up new possibilities for creating immersive and engaging user interfaces.

2. Performance Optimization: With CSS Houdini, developers can offload certain tasks to separate threads, improving performance and making it possible to create smoother animations and transitions. This helps in delivering a better user experience, especially on complex and interactive web applications.

3. Layout Innovation: The Layout Worklet API allows developers to define custom layout behaviors, enabling them to break free from the constraints of traditional layout models. This can lead to innovative and responsive designs that adapt more seamlessly to various screen sizes and orientations.

4. Dynamic Styling: CSS Houdini enables dynamic styling changes based on user interactions or other events. This can be leveraged to create dynamic, personalized, and context-aware user interfaces, enhancing the overall user experience.

5. Cross-browser Consistency: By using JavaScript to define styling logic, developers can achieve more consistent visual results across different web browsers. This helps in reducing the challenges associated with browser compatibility and ensuring a uniform experience for users.

6. Community-driven Innovation: CSS Houdini encourages experimentation and sharing of custom CSS features within the development community. This fosters innovation, allowing developers to learn from each other and collectively push the boundaries of what is possible in web design.

It’s safe to say, CSS Houdini offers the potential for groundbreaking effects and functionalities by empowering developers to be more creative, optimize performance, and overcome the limitations of traditional CSS. It represents a significant step forward in making the web development process more dynamic, expressive, and adaptable to the ever-evolving demands of modern web applications.

Benefits and Challenges

CSS Houdini brings several advantages to web developers, offering enhanced flexibility, customization capabilities, and potential performance gains. Here are the key advantages:

1. Flexibility:

• Extensibility: Houdini allows developers to extend CSS with their own custom properties, values, and behaviors. This means they can create styling rules tailored to their specific needs, fostering innovation and creativity in web design.

• Dynamic Styling: Developers can use JavaScript to dynamically modify styles based on user interactions or other events, providing a more dynamic and personalized user experience.

2. Customization:

• Custom Paint Worklets: With the Paint API, developers can define custom paint worklets, enabling the creation of unique shapes, patterns, and visual effects that go beyond the capabilities of standard CSS. This level of customization was not possible before Houdini.

• Layout Control: The Layout API allows developers to define custom layout behaviors, giving them more control over how elements are positioned and sized. This customization is particularly valuable for creating responsive and adaptive layouts.

3. Performance Gains:

• Offloading to Worklets: CSS Houdini allows certain tasks, such as painting and animations, to be offloaded to separate threads using worklets. This can lead to significant performance gains by leveraging parallelism and making web pages more responsive.

• Optimized Animation: The Animation Worklet API enables developers to create highly performant animations by offloading animation logic to a separate thread. This can result in smoother animations and transitions, enhancing the overall user experience.

4. Consistent Cross-browser Results:

• Reduced Browser Compatibility Issues: Using Houdini, developers can achieve more consistent visual results across different browsers. This helps mitigate common challenges associated with browser compatibility, ensuring a uniform experience for users.

5. Community Collaboration:

• Open for Experimentation: CSS Houdini encourages developers to experiment with new features and share their creations with the community. This collaborative environment fosters innovation and allows the web development community to collectively explore the possibilities of enhanced styling capabilities.

Conclusion

CSS Houdini represents a transformative leap in web development, offering developers the ability to extend and customize CSS using JavaScript. With a suite of low-level APIs, CSS Houdini empowers developers to break free from traditional CSS constraints.
While the development of CSS Houdini was ongoing, browsers like Chrome led in adoption, and the web development community continued to explore and experiment with the new possibilities it brought. As CSS Houdini evolves, it holds the promise of driving further innovation, collaboration, and creativity in the realm of web design, enabling developers to craft more dynamic and engaging user interfaces.

The Impact and Necessity of Dark Mode on User Experience

Katerina Braide — Mon, 01 Jan 2024 07:34:12 +0000

Ever felt your eyes getting tired from staring at your screen for too long? It's a common issue—a consequence of how bright most screens have become. However, there is a solution to give your eyes a break, and that's where dark mode comes in.

In this article, we'll see how Dark Mode helps with eye strain, user accessibility, and in aesthetics interface. We'll keep it simple, discussing how it works and why you should consider using it in your next website project.

Light or Regular Mode

Light mode, also known as regular mode or default mode, refers to the standard appearance or theme of a user interface (UI) where the background is predominantly light or bright, and the text and other elements are typically displayed in darker colors.

Light mode is the traditional or default setting for many applications, websites, and operating systems. It is commonly associated with a clean and crisp aesthetic, and it's often favored in well-lit environments where high contrast and visibility are key considerations.

Dark Mode

Dark mode, at its core, is a design choice that flips the traditional color scheme. Instead of light backgrounds and dark text, dark mode opts for dark backgrounds with light or contrasting text. This shift isn't merely aesthetic; it's a strategic decision that impacts how users consume content and interact with digital interfaces.

Dark mode in web design has come a long way. It started as a preference for coding environments and late-night browsing but is now a popular trend in apps and websites. Knowing how and why this change happened helps us understand its effect on user experience.

Why you should consider using Dark mode

Reduced Eye Strain: Dark mode reduces the amount of light emitted by screens, which can help alleviate eye strain, particularly in low-light conditions. This is especially beneficial for users who spend extended periods in front of screens.
Improved Visibility in Low-Light Environments: In dimly lit or nighttime environments, dark mode enhances visibility and readability by minimizing glare. Users are less likely to be blinded or disturbed by the brightness of a light background.
Energy Efficiency for OLED Screens: Dark mode is more energy-efficient on devices with OLED screens. In this mode, individual pixels are turned off to display black, saving power and potentially extending battery life on devices.
Enhanced Focus on Content: Dark mode places emphasis on the content by reducing the prominence of UI elements. This can result in a more immersive and focused user experience as users engage more directly with the information or media.
Aesthetically Pleasing Design: Many users find dark mode visually appealing. The high contrast between text and background can create a sleek and modern look. This aesthetic preference has led many applications and websites to offer dark mode as an alternative.
Reduced Blue Light Exposure: Dark mode typically reduces the amount of blue light emitted by screens. Blue light exposure, especially during nighttime use, has been associated with disruptions in circadian rhythms and can affect sleep patterns. Dark mode mitigates these concerns.
Accessibility Improvements: For users with certain visual impairments or sensitivities, dark mode can enhance accessibility by providing better contrast and reducing eye strain. Customization options, such as text size and font choice, may also be more effective in dark mode.
Suitability for Certain Content Types: Dark mode can be particularly suitable for content consumption, such as watching videos or viewing images. The dark background allows the content to stand out, creating a more engaging and enjoyable experience.
Preservation of Night Vision: Dark mode can help users maintain their night vision when transitioning from a well-lit environment to a dark one. The eyes are less likely to experience discomfort or take longer to adjust when using dark mode in low-light conditions.
Trend and User Preference: Dark mode has become a popular design trend, and many users now expect applications and websites to offer it as an option. Meeting user expectations and preferences can contribute to a positive overall user experience.

Guidelines to Follow When Converting UI Designs to Dark Mode

Step 1: Understand Dark Mode Principles

Before diving into the transformation, get familiar with the principles of dark mode design. This includes the use of a dark color palette, optimized contrast, and strategic accent placements.

Step 2: Assess Existing Color Scheme

Evaluate the colors used in your regular UI design. Identify primary, secondary, and background colors. This assessment will guide your adjustments for dark mode.

Step 3: Choose a Dark Color Palette

Select a dark color palette that complements your existing design. Consider dark grays, blues, or blacks. Ensure there's enough contrast for readability.

Step 4: Adjust Background Elements

Update background elements like the main canvas, panels, and cards to reflect the chosen dark color scheme. Consistency across different sections is crucial.

Step 5: Modify Text Colors

Adjust text colors to maintain readability against the dark background. Ensure text has sufficient contrast and consider using lighter shades for better legibility.

Step 6: Refine Icons and UI Elements

Modify icons and UI elements to fit the dark mode aesthetics. Ensure they stand out clearly against the dark background. Adjust stroke weights and fill colors accordingly.

Step 7: Implement High Contrast

Leverage high contrast to highlight interactive elements. Make buttons, links, and actionable items pop against the dark background to guide users seamlessly.

Step 8: Optimize Imagery

If your UI includes images, optimize them for dark mode. Check their appearance against the dark background and adjust brightness, contrast, or apply color filters if necessary.

Step 9: Consider Adaptive Design

Implement adaptive design principles to allow for automatic switching between light and dark modes based on user preferences or environmental conditions.

Step 10: Test for Accessibility

Ensure your dark mode design is accessible. Test for readability, especially for users with visual impairments. Evaluate color contrast ratios and consider customization options for diverse needs.

Step 11: Iterate and Gather Feedback

Iterate on your dark mode design based on feedback. Conduct usability testing to identify issues or areas for improvement. User feedback is invaluable for refining the dark mode experience.

Step 12: Consider Platform Guidelines

If your UI is for a specific platform, adhere to platform-specific dark mode guidelines for a more cohesive user experience.

Use Case

Now, let's bring the benefits of dark mode into focus by exploring a real-world use case, i will be converting a testimonial card from a light mode to a dark mode step by step. lets get started!

Step 1: Change the background to a dark shade

Don't ever use plain black or #0000 in your dark mode except it's intentional and of necessity. For this design, lets use #13131A for the card background. it's not too dark but yet dark enough to contrast well with other shades of color.

We have;

Step 2: Brighten Up the elements within

From the look of things from the previous card design, only the avatar was contrasting well. so we need to brighten up the text elements for user accessibility. Also, it's not a good choice to use a plain white color to brighten up elements in a dark mode, any shade of white that fit best is more better. lets try #B0B0B0 for the body text and #E4E4E4 for the heading.

We have;

Final Touches

It's looking nice already, so to wrap things up. lets indicate an activeness for the navigating arrows below by adding a more brighter shade of white to the forward arrow. For this one, lets use the same shade of white we used for the header - #E4E4E4

And finally we have;

Additional Resources

For more hands on practice on how to convert your next light mode designs into dark mode, you can check out this resources.

For more understanding of the basis and principles behind dark modes, watch this
Designers: For quick conversion of your Figma UI into dark modes - watch this
Developers: To follow a simple tutorial on how to implement this - watch this

Conclusion

The adoption of dark mode goes beyond a mere stylistic choice; it actively contributes to a more comfortable, efficient, and inclusive user experience. By reducing eye strain, improving readability, and aligning with user preferences, dark mode has become a valuable tool for designers and developers seeking to elevate the overall digital experience for their audience.

As always, I would love to see what you have to say regarding this. lets chat about your experience with dark and light modes and which one you prefer in the comment box below 😊

Optimizing User Experience: Using Ajax for Dynamic Web Page Loading

Katerina Braide — Sun, 31 Dec 2023 01:04:53 +0000

Imagine browsing a website, and each click feels like a smooth dance between pages—no annoying loading screens. That's the power of Ajax, a game-changer in web development.

In this article, we're going to demystify Ajax. No complex jargon, no head-scratching. Just a simple guide to help you understand what Ajax is all about and why it's a big deal in web development. We'll be taking a hands-on approach, Prepare to wave goodbye to those annoying full-page reloads.

What is Ajax?

Ajax short form for Asynchronous JavaScript and XML (or JSON). The key here is "asynchronous." Unlike traditional web requests that reload the entire page, Ajax allows your web page to communicate with the server in the background, fetching or sending data without disrupting the user's experience.

Key Components of Ajax

XMLHttpRequest Think of this as Ajax's messenger. The XMLHttpRequest object is the bridge between your web page and the server, handling requests and responses behind the scenes.
Callback Functions Callback functions are the way Ajax keeps things in order. They're functions that get executed once a certain task, like fetching data from the server, is complete. This asynchronous nature is what makes Ajax so powerful.
Handling Server Responses Getting data is one thing; understanding what to do with it is another. We'll explore how Ajax handles server responses and how you can use that data to update your web page dynamically.

Why Ajax Matters

Every time a traditional web page reloads, it's like hitting a reset button. The entire page has to be loaded again, images, scripts, and all. This process not only disrupts the user's experience but can also be time-consuming, especially on slower internet connections.

Advantages of Ajax

Seamless User Experience Imagine clicking on a button, and only the relevant part of the page updates, all without a visible pause or reload. That's the magic of Ajax. Users can interact with your web page without interruptions, creating a more seamless and engaging experience.
Faster Page Loading By fetching and updating only the necessary data, Ajax significantly reduces the amount of information transferred between the user and the server. This results in faster loading times, making your web page feel more responsive and snappy.
Reduced Server Load Ajax minimizes the workload on the server. Instead of reloading the entire page, only the required data is exchanged, reducing server resources and improving overall efficiency.

Use Case: Loading Dynamic Content

A. Scenario: Building a News Feed
Let's put Ajax into action with a practical scenario. Picture this: you're creating a social media platform, and you want to implement a dynamic news feed. Users should be able to scroll through their feed without the page constantly refreshing.

Traditional Approach vs. Ajax Approach

Traditional Approach:

Clicking on "Load More" triggers a full-page reload.
Users experience a delay as the entire page reloads.
Not the most seamless or user-friendly experience.

Ajax Approach:

Clicking on "Load More" triggers an asynchronous request.
Only the new content is fetched from the server.
The page updates dynamically, maintaining a smooth user experience.

Step-by-Step Implementation

1. Setting Up the HTML Structure



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="news-feed">
      <h1>Greening Cities: The Rise of Urban Gardening</h1>
      <p>
        Urbanites worldwide are transforming limited spaces into green
        sanctuaries—balconies, rooftops, and community plots. From small-scale
        innovations like Sarah's balcony garden to citywide initiatives, urban
        gardening is reshaping city life. Embracing challenges with hydroponics
        and vertical solutions, this movement goes beyond a trend, fostering a
        connection with nature, promoting sustainability, and building
        communities in the heart of urban chaos. Join the flourishing green
        revolution urban gardening welcomes all, from seasoned gardeners to
        novices.
      </p>
    </div>
    <button id="load-more">Load More</button>
  </body>
  <script src="./script.js"></script>
</html>

2. Writing JavaScript for Ajax



document.getElementById('load-more').addEventListener('click', function () {
  // Create a new XMLHttpRequest object
  var xhr = new XMLHttpRequest();

  // Define the callback function to handle the server response
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
      // Check if the request was successful (status code 200)
      if (xhr.status === 200) {
        // Process the server response and update the news feed
        document.getElementById('news-feed').innerHTML += xhr.responseText;
      } else {
        // Handle errors gracefully (display an error message, log, etc.)
        console.error('Error loading more content. Status:', xhr.status);
      }
    }
  };

  // Open a GET request to the server endpoint
  xhr.open('GET', 'your-server-endpoint', true);

  // Send the request to the server
  xhr.send();
});

3. Handling Server Response

Now, let's dive into handling the server's response. In the previously defined callback function, we successfully appended the server's response to the news-feed element. However, let's enhance this process by ensuring we handle different response types appropriately.



// Define the callback function to handle the server response
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {
    // Check if the request was successful (status code 200)
    if (xhr.status === 200) {
      // Process the server response and update the news feed
      var response = JSON.parse(xhr.responseText); // Assuming the response is in JSON format

      // Check if the response is an array (adjust as per your server response structure)
      if (Array.isArray(response)) {
        // Loop through the response and append each item to the news feed
        response.forEach(function (item) {
          appendNewsFeedItem(item);
        });
      } else {
        console.error('Invalid server response format.');
      }
    } else {
      // Handle errors gracefully (display an error message, log, etc.)
      console.error('Error loading more content. Status:', xhr.status);
    }
  }
};

// Function to append a news feed item to the DOM
function appendNewsFeedItem(item) {
  // Create a new div element for the news feed item
  var newsFeedItem = document.createElement('div');

  // Assuming each item has a 'content' property (adjust as per your server response structure)
  newsFeedItem.textContent = item.content;

  // Append the news feed item to the 'news-feed' element
  document.getElementById('news-feed').appendChild(newsFeedItem);
}

Result

Challenges and Solutions

Ajax, while powerful, comes with its own set of challenges. Let's explore common issues and how to tackle them:

Cross-Origin Requests (CORS)

Challenge:
Browsers often restrict requests to a different domain for security reasons.

Solution:
Configure your server to include appropriate CORS headers to allow cross-origin requests. This ensures your Ajax requests can reach different domains.

Handling Errors

Challenge:
Errors during Ajax requests need to be handled gracefully to maintain a smooth user experience.

Solution:
Implement robust error-handling mechanisms. Display user-friendly error messages, log errors to the console, or use a combination of both to ensure issues don't go unnoticed.

SEO Concerns

Challenge:
Search engines may struggle to index dynamically loaded content, impacting your site's SEO.

Solution:
Consider server-side rendering or pre-rendering to provide search engines with static content. This ensures your dynamically loaded content doesn't get overlooked during indexing.

Best Practices for Overcoming Challenges

Cross-Origin Resource Sharing (CORS): Configure your server to include the appropriate headers for CORS.
Error Handling: Implement clear and user-friendly error messages. Log errors for developer insights.
SEO-Friendly Implementation: Combine dynamic loading with server-side rendering or pre-rendering for optimal SEO.

Conclusion

In a nutshell, Ajax can turn your web pages from static to dynamic, providing users with a more enjoyable experience. We've covered the basics, dabbled in some code, and even tackled a few challenges. Now it's your turn to shine as a web developer!
Get ready to make your web pages feel a little more lighter and user focused.

lemme know in the comment section if this is the first time you are reading of Ajax or have you been using this before now, share your experience too.

CSS Grid vs. Flexbox: Choosing the Right Layout Technique

Katerina Braide — Sat, 30 Dec 2023 21:42:38 +0000

The choice between CSS Grid and Flexbox is like choosing between pizza and tacos – they're both awesome, but you need the right one for the moment. It's a common challenge for web developers trying to create effective and responsive layouts.

After reading this article, you will know and understanding their strengths, use cases, and considerations associated with CSS Grid and Flexbox.

CSS Grid

CSS Grid is a powerful two-dimensional layout system for creating complex grid-based designs. It offers precise control over both rows and columns, making it ideal for organizing content in intricate layouts. With explicit column and row definitions, developers can easily achieve precise element placement, making it well-suited for designs that demand meticulous control.

Code sample

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

Flexbox

Flexbox, short for Flexible Box, is a one-dimensional layout system designed for handling content distribution in a single direction—either horizontally or vertically. Flexbox excels in creating flexible and dynamic layouts, especially useful for arranging items within a container, accommodating various screen sizes and devices. Its simplicity and powerful alignment capabilities make it an excellent choice for handling the challenges of responsive design.

code sample

.flex-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100vh;
}

Use Cases and Strengths

Understanding the use cases and strengths of CSS Grid and Flexbox is important in making informed layout decisions for web development projects.

CSS Grid:
- Ideal for complex layouts requiring precise control over both rows and columns.
- Suited for designs with a grid-based structure, such as card layouts, image galleries, and multi-column interfaces.
- Facilitates the creation of responsive layouts with minimal media queries due to its two-dimensional nature.
Flexbox:
- Perfect for one-dimensional layouts where content needs to be distributed along a single axis.
- Well-suited for arranging items in a row or column, such as navigation menus, form elements, and flexible content containers.
- Offers powerful alignment properties, making it easy to center content both vertically and horizontally.

Responsive Design Considerations

In the realm of responsive web design, the choice between CSS Grid and Flexbox plays a crucial role in creating layouts that adapt seamlessly to various screen sizes and devices.

CSS Grid:
- Excel in handling complex, multi-dimensional layouts for large screens.
- Allows for easy reordering of grid items, enhancing flexibility in adapting to different viewports.
- Enables the creation of responsive designs without excessive reliance on media queries.
Flexbox:
- Particularly effective for handling one-dimensional layouts that require flexibility in content distribution.
- Simplifies the creation of responsive designs for smaller screens by easily stacking or aligning items along a single axis.
- Provides an intuitive way to reorder and restructure content based on the available screen real estate.

Browser Compatibility and Support

While both CSS Grid and Flexbox are widely supported in modern browsers, it's essential for developers to consider compatibility when choosing a layout technique.

CSS Grid:
- Generally well-supported in modern browsers, including Chrome, Firefox, Safari, and Edge.
- Considerations for partial support in older versions of Internet Explorer may be necessary, depending on the project's target audience.
Flexbox:
- Widely supported in modern browsers, making it a reliable choice for most web projects.
- May require vendor prefixes for older versions of certain browsers, and developers should be mindful of potential quirks in Internet Explorer.

Which one is better?

The choice between CSS Grid and Flexbox depends on the specific requirements of your layout. Neither is inherently "better" than the other; they serve different purposes.

CSS Grid is well-suited for complex, two-dimensional layouts where precise control over rows and columns is necessary. It's great for grid-based designs and offers features like item placement and reordering.

Flexbox is more suitable for one-dimensional layouts, providing a simpler way to distribute space along a single axis. It's excellent for aligning items within a container and handling flexible content structures.

In many cases, projects use a combination of both CSS Grid and Flexbox to leverage the strengths of each in different parts of the layout. Understanding the requirements of your design and applying the appropriate technique based on those needs will lead to the most effective and efficient results.

Resources:

For hands on practices and deeper understanding of what you just read, you might consider

Reading this here
Or watching this

Conclusion

Both are perfect choice depending on what you want to achieve.

As I've explained, CSS Grid shines in scenarios demanding intricate two-dimensional layouts. Its explicit control over rows and columns makes it an excellent choice for projects with complex grid structures, reducing the need for extensive media queries. The ability to reorder grid items effortlessly enhances responsiveness across various screen sizes.

In contrast, Flexbox excels in handling one-dimensional layouts, providing an intuitive solution for content distribution along a single axis. Its simplicity and powerful alignment properties make it a go-to choice for responsive designs, allowing easy adaptation to different viewports by stacking or aligning items.

i love reading your comments and knowing what you think too, which one do you use frequently and why?

Secure Web Authentication with a Serverless API: A Quick Guide

Katerina Braide — Sun, 17 Dec 2023 17:59:54 +0000

Introduction

In the realm of web development, robust security measures are crucial, particularly when it comes to user authentication. This article will guide you through the process of implementing a secure web authentication system using a Serverless API.

By the end, you'll have the knowledge and tools to create a scalable and resilient authentication system for your web applications.

What Is Web Authentication?

Web authentication verifies the identity of users accessing a web application, ensuring that they are who they claim to be. Achieved through credentials like usernames and passwords, it often includes multi-factor authentication (MFA) for added security. The goal is to protect sensitive data and restrict access to authorized individuals.

Benefits of Web Authentication

Security: Web authentication provides a crucial layer of security by preventing unauthorized access to sensitive user data and application features.
Data Protection: By verifying user identities, web authentication safeguards personal and confidential information, protecting users from potential data breaches.
User Accountability: Authentication enables the tracking and accountability of user actions, helping administrators monitor and manage user activity within the application.
Trust and User Confidence: Robust authentication mechanisms build trust among users, enhancing their confidence in the application's ability to protect their data and privacy.
Compliance: Many regulatory frameworks and industry standards require robust authentication practices to ensure compliance with data protection and privacy regulations.
Customization of User Experience: Authentication allows for personalized user experiences, tailoring access and permissions based on user roles and responsibilities.

What Is an API?

An API, or Application Programming Interface, is a set of rules and tools that allows different software applications to communicate with each other. It defines the methods and data formats that applications can use to request and exchange information. APIs facilitate the integration of different systems, enabling them to work together seamlessly.

What Is a Serverless API?

A serverless API, also known as a serverless function or serverless endpoint, is a type of backend service that runs in a serverless computing environment. Unlike traditional server-based architectures, serverless APIs do not require the provisioning or management of servers. Instead, they automatically scale in response to demand and execute functions in ephemeral, stateless containers. Serverless APIs are event-driven, responding to triggers such as HTTP requests, database changes, or file uploads. Commonly hosted on cloud platforms, serverless APIs simplify infrastructure management, reduce costs, and allow developers to focus on code functionality rather than server maintenance.

Why Use a Serverless API?

Scalability: Serverless APIs automatically scale to handle varying workloads, ensuring optimal performance without manual intervention.
Cost Efficiency: With serverless, you pay only for the compute resources used during function execution, leading to potential cost savings compared to maintaining dedicated servers.
Simplified Deployment: Serverless APIs simplify deployment with rapid development cycles, automatic scaling, and effortless management of infrastructure.
Focus on Code: Developers can concentrate on writing code and building features without the burden of server provisioning, maintenance, or scaling concerns.
Event-Driven Architecture: Serverless APIs thrive on event-driven architectures, responding to specific events or triggers, making them well-suited for various use cases, including web authentication.
Reduced Operational Overhead: Serverless APIs abstract away infrastructure management tasks, reducing the operational overhead traditionally associated with maintaining servers.
Flexibility and Agility: Serverless architecture allows for quick development and deployment, fostering an agile development process and enabling faster time-to-market for applications.

A Step-by-Step Guide On How To Use One

Step 1: Define Authentication Requirements

Before diving into implementation, it's essential to clearly define your authentication requirements. Consider the following aspects:

User Roles and Access Levels: Identify different user roles and define their respective access levels. Consider the actions each role should be able to perform and the data they can access.
Authentication Methods: Choose the appropriate authentication methods for your application, such as Username/Password, OAuth, or JSON Web Tokens (JWT).
Security Requirements: Specify security measures, including secure password storage, token-based authentication, and the use of HTTPS to protect data in transit.

Step 2: Choose a Serverless Provider

Select a serverless provider that aligns with your application's needs. Let's use AWS Lambda for this example:

Install AWS SDK
npm install aws-sdk

Configure your AWS credentials:

// serverlessFunctions.js

const AWS = require('aws-sdk');
AWS.config.update({ region: 'your-region', accessKeyId: 'your-access-key', secretAccessKey: 'your-secret-key' });

Step 3: Set Up Serverless Functions

Create serverless functions to handle user registration, login, and token generation. Use Node.js and the AWS SDK:


// serverlessFunctions.js

const AWS = require('aws-sdk');
const bcrypt = require('bcrypt');
const jwt = require('jsonwebtoken');

const dynamoDB = new AWS.DynamoDB.DocumentClient();
const tableName = 'UsersTable';

// Function to register a new user
module.exports.registerUser = async (event) => {
  const { username, password } = JSON.parse(event.body);
  const hashedPassword = await bcrypt.hash(password, 10);

  const params = {
    TableName: tableName,
    Item: {
      username,
      password: hashedPassword,
    },
  };

  await dynamoDB.put(params).promise();

  return {
    statusCode: 200,
    body: JSON.stringify({ message: 'User registered successfully' }),
  };
};

// Function to authenticate and generate a JWT token
module.exports.login = async (event) => {
  const { username, password } = JSON.parse(event.body);
  const params = {
    TableName: tableName,
    Key: { username },
  };

  const userData = await dynamoDB.get(params).promise();

  if (!userData.Item || !(await bcrypt.compare(password, userData.Item.password))) {
    return {
      statusCode: 401,
      body: JSON.stringify({ message: 'Invalid username or password' }),
    };
  }

  const token = jwt.sign({ username }, 'your-secret-key', { expiresIn: '1h' });

  return {
    statusCode: 200,
    body: JSON.stringify({ token }),
  };
};

Step 4: Use a Database for User Management

Configure DynamoDB:


// serverlessFunctions.js

const AWS = require('aws-sdk');
AWS.config.update({ region: 'your-region', accessKeyId: 'your-access-key', secretAccessKey: 'your-secret-key' });

const dynamoDB = new AWS.DynamoDB.DocumentClient();
const tableName = 'UsersTable';

Step 5: Implement Secure Password Storage

Ensure secure password storage using bcrypt:

Install bcrypt library
npm install bcrypt

Integrate bcrypt into the registration function:


// serverlessFunctions.js

const bcrypt = require('bcrypt');

// ... 

// Function to register a new user
module.exports.registerUser = async (event) => {
  const { username, password } = JSON.parse(event.body);
  const hashedPassword = await bcrypt.hash(password, 10);

  // ... 
};

Step 6: Token-based Authentication with JWT

Implement JWT for token-based authentication:

Install jsonwebtoken library
npm install jsonwebtoken

Integrate JWT into the login function:


// serverlessFunctions.js

const jwt = require('jsonwebtoken');

// ... 

// Function to authenticate and generate a JWT token
module.exports.login = async (event) => {
  const { username, password } = JSON.parse(event.body);

  // ...

  const token = jwt.sign({ username }, 'your-secret-key', { expiresIn: '1h' });

  // ...
};

Step 7: Set Up API Gateway

Configure an API Gateway for communication:

Create an API in the AWS API Gateway.
Set up resource and method for each function (GET for login, POST for registration).
Secure the API using AWS Identity and Access Management (IAM) roles.

Step 8: Implement Secure HTTPS

Ensure secure communication by configuring the API Gateway to use HTTPS:

In the API Gateway console, select your API.
Under "Stages," select the desired stage (e.g., "prod").
In the "Settings" tab, enable "HTTPS Only.”

Step 9: Implement Multi-Factor Authentication (Optional)

Explore the implementation of MFA using services like Amazon Cognito or Auth0.

Multi-Factor Authentication (MFA) adds an extra layer of security by requiring users to verify their identity through multiple methods. This step is optional but highly recommended for applications that prioritize enhanced security. We'll explore the implementation of MFA using Amazon Cognito, a service that simplifies identity management.

1. Setting Up Amazon Cognito:

Go to the Amazon Cognito Console.
Create a new user pool, specifying settings like MFA and account recovery.
Note the User Pool ID and create an app client.
Integrate Cognito in Serverless Functions

Update your server-less functions to integrate with Amazon Cognito:


// serverlessFunctions.js

const AWS = require('aws-sdk');
const AmazonCognitoIdentity = require('amazon-cognito-identity-js');

const poolData = {
  UserPoolId: 'your-user-pool-id',
  ClientId: 'your-app-client-id',
};

const userPool = new AmazonCognitoIdentity.CognitoUserPool(poolData);

// Function to register a new user with MFA
module.exports.registerUserWithMFA = async (event) => {
  // ... 

  const attributeList = [
    new AmazonCognitoIdentity.CognitoUserAttribute({
      Name: 'email',
      Value: 'user@example.com',
    }),
  ];

  userPool.signUp(username, password, attributeList, null, (err, result) => {
    if (err) {
      return {
        statusCode: 500,
        body: JSON.stringify({ message: 'Error registering user', error: err.message }),
      };
    }

    const cognitoUser = result.user;
    console.log('User registered with ID ' + cognitoUser.getUsername());

    return {
      statusCode: 200,
      body: JSON.stringify({ message: 'User registered successfully with MFA' }),
    };
  });
};

// Function to authenticate and generate a JWT token with MFA
module.exports.loginWithMFA = async (event) => {
  // ... 

  const authenticationData = {
    Username: username,
    Password: password,
  };

  const authenticationDetails = new AmazonCognitoIdentity.AuthenticationDetails(authenticationData);

  const userData = {
    Username: username,
    Pool: userPool,
  };

  const cognitoUser = new AmazonCognitoIdentity.CognitoUser(userData);

  cognitoUser.authenticateUser(authenticationDetails, {
    onSuccess: (session) => {
      const token = session.getIdToken().getJwtToken();
      console.log('Authentication successful, JWT token:', token);

      return {
        statusCode: 200,
        body: JSON.stringify({ token }),
      };
    },
    onFailure: (err) => {
      console.error('Authentication failed:', err);
      return {
        statusCode: 401,
        body: JSON.stringify({ message: 'Invalid username or password' }),
      };
    },
    mfaRequired: (codeDeliveryDetails) => {
      console.log('MFA required, confirmation code sent to', codeDeliveryDetails.Destination);

      // Prompt user for MFA code and call cognitoUser.sendMFACode(code) to confirm MFA
      return {
        statusCode: 200,
        body: JSON.stringify({ message: 'MFA required' }),
      };
    },
  });
};

Step 10: Test and Monitor

Thoroughly test your authentication system using tools like Postman. Implement logging and monitoring for suspicious activities.

Additional Resources

Get AWS API Gateway tutorial here
Setting Up Amazon Cognito here
Token-based Authentication with JWT Look here

Conclusion

In summary, adhering to best practices and staying vigilant about security updates is crucial for maintaining the continuous protection of your web application. It's important to recognize that security is a dynamic field, and regular updates play a pivotal role in sustaining a robust authentication system.

TCP/IP Overview

Katerina Braide — Thu, 30 Dec 2021 11:36:39 +0000

TCP/IP model

Transmission Control Protocol and Internet Protocol (TCP/IP) is a network model using current internet architecture to standardize computer networking, just like the Open System Interconnection (OSI) model. OSI is widely referenced but TCP/IP is a more recommended model. The main idea of TCP/IP is to allow an application on a computer to send data packets or communicate to another application running on a different computer.

Layers of TCP/IP

4 Application layer
3 Transport layer
2 Internet layer
1 Data link and physical layer

These are the original layers numbered from the bottom up just like the OSI model. However the layers have been updated to:

5 Application layer
4 Transport layer
3 Network layer
2 Data link layer
1 Physical layer

One splitted layer and one renamed layer. The application, presentation and session layers of the OSI model are compressed to form just the application layer for the TCP/IP model.

Layer 5/Application: This is mainly used for data representation and application interface. Here we have application protocols such as Hypertext Transfer Protocol (HTTP), File Transfer Protocol (FTP) and Simple Mail Transfer Protocol (SMTP).

Layer 4/Transport: This s a process to process communication with the use of port addresses (source and destination) to identify services or applications. The two most common transport protocols are Transmission Control Protocol (TCP) and User Data-gram Protocol (UDP).

Layer 3/Network: This is a node to node communication with the help of IP address to identify devices on a network, routers operate on this layer.

Layer 2/Data link: This contains Ethernet and switches. Ethernet also has source and destination addresses but they’re physical addresses, that means they are burned addresses from the company that can’t be changed by user. This layer also helps with flow control and error control.

Layer 1/Physical: This is every device that we can felt and touched, like network interface cards and cables. Physical layer takes bits and produces a signal to carry them.

How the layers work.

As we send data, each layer will add it’s own bit of information, this is the encapsulation process, where the physical layer transmits the data over to the receiving device, the receiving device then starts to decapsulate the data.
Staring from the application layer which is simply the data, it is passed down to the next layer where the transport information is added, an example could be a TCP header, the data has now been transformed into a segment by breaking the data into pieces, then it moves to the network layer where the IP header is added, causing the segment to become a packet, then moves to the data link layer, Here it’s given a header and a trailer, The header contains mainly the source and destination MAC address and the trailer contains some error checking information to make sure the receiver receives the data correctly, and our packet has been made a frame. Lastly the physical layer, the data is then physically transmitted, thereby completing the encapsulation process.
The encapsulation process has been completed once the data has been transmitted to the receiving computer. To start the decapsulation process, It will check the destination MAC address for that frame and if the frame is correct it will process further to checks the IP information of the packets, again if the packet is correct it will process further to the transport information where it is read and the application data is sent to the receiving application.

How some protocols work efficiently well with the TCP/IP model:

Application protocol HTTP shows how web browsers can get contents of a web page from a web server, HTTP has the functionality to ask for contents of web pages by enabling the web browser to request files from the server and giving the server a way to return the contents of those files with the help of uniform resource locators (URL) or universal resource identifiers (URI). This HTTP header includes the request to get a file, the request typically contains the name of the file.

Transport protocol TCP is widely know for it’s feature of error recovery, it’s works as the error recovery service provided to application layer. TCP/IP needs a mechanism to guarantee successful delivery of data across a network. the TCP header shows a sequence number (SEQ) with each message the network has a problem and fails to deliver the TCP message called a segment with example sequence number7, message7 was lost, that realization by TCP logic causes TCP to send a TCP segment back to the server asking to resend message7.

Network protocol IP provides several features most importantly addressing and routing. Routers are networking devices that connect the parts of the TCP/IP network together for the purpose of routing IP packets to the correct destination. Routers receive IP packets on various physical interfaces, make decisions based on the IP address included with the packet and then physically forward the packet out to other network interfaces. The TCP/IP network layer using the IP protocol provides a service of forwarding IP packets from one device to another. Sending data back and forth to IP addresses is called IP routing.

Data link layer and physical layers define the protocols and hardware required to deliver data across some physical network. The physical layer defines the electrical signals that flow over the cables, rules and conventions exist when sending data over the cable however those rules exist in the data link layer, when a host or router’s IP process chooses to send an IP packet to another router or host, the host or router then uses data link layer details to send that packet to the next host/router.

Conclusion

TCP/IP is very modular, this makes it easy to add additional protocols and hardware when they are developed. TCP/IP was produced to make sure that data is reliable on the Internet because with ARPANET everything was very sensitive. This model shows a grand overview of how systems on a network behaves. It helps make everything user-friendly, It also avoids repeating work already done by some other standards body or vendor consortium by simply referring to standards or protocols created by those groups.
Layer 7, 6 and 5 of the OSI model are grouped in to produce PDU for the transport layer of the TCP/IP model called data. The PDU is mostly in the form of binary. PDU is the data that is broken into segments. We segment our data for security and multiplexing.

Basic OSI

Katerina Braide — Sun, 26 Dec 2021 21:31:16 +0000

What is OSI?

OSI stands for Open System Interconnection, it’s a conceptual framework for how application communicate over a network. The purpose of the OSI model is to facilitate communication between different systems without requiring changes to the logic of the underlying hardware and software. OSI has a stack of seven layers within the model and the layers are used to help user identify what is happening within a networking system.

What is OSI layer?

The OSI layer are typically described from the top layer down. With the help of layering we decompose the problem of building a network into manageable components (layers), these layers help with modular design and easy troubleshooting. Going down and up the stack is called encapsulating and decapsulating respectfully. The layers are:

7- Application
6- Presentation
5- Session
4- Transport
3- Network
2- Data link
1- Physical

These layers are provided by a mixture of network card drivers, application, operating system, and networking hardware that enable the transmission of signals over WI-fi, Ethernet, fiber optic, and other wireless protocols. We’ll describe the layer from the top down as the top layer is the application layer or layer 7.

Layer 7/Application: This is the layer that users interact with. The application layer provides protocols as network services to the end user, that work with the data the client is using. An example of these protocols may be Hypertext Transfer Protocol (HTTP) that is used with web browsers such as google chrome and internet explorer. Another example is Simple Mail Transfer Protocol (SMTP), a protocol for emails and such, All of those interactive application provide a set of services that allow the application layer to supply data to and receive data from the presentation layer.

Layer 6/Presentation: This performs the task of syntax processing or converting data from one format to another. For example, consider you are buying a concert ticket. These transactions are handled in a secure transmission which means that the data passing between the website application will transmit encrypted data to the presentation layer that will need to be decrypted and processed. This layer translates the data from the top layer, which is presented in application format, to network format and vice versa. After the presentation layer processes the data and changes it’s format from one to another, the information is then passed to the session layer or the application layer depending on if the data is transmitting or receiving.

Layer 5/Session: This is where the conclusion of connections between devices occur. This layer supports multiple types of connections as well as being responsible for authentication and re-connection when and if a network interruption occurs. After this session is established the data then passes to or from the transport layer.

Layer 4/Transport: This is responsible for the transmission of data across network connections. This layer coordinates how much data to send, speed of data, direction of data, and such. These services may be provided by Transmission Control Protocol (TCP) and User Data-gram Protocol (UDP), which are the most widely known protocols for internet applications. Other protocols may provide additional functionalities such as error recovery and re-transmission. Once the transport layer has completed it’s function, the data is then passed to or from the network layer.

Layer 3/Network: This handles the routing of the data. After the data gets to this layer, each frame of data is examined to check if the data has arrived at it’s ultimate target. The layer sends data to the correct destination on outgoing transmissions and receives incoming transmissions as well. The IP portion of TCP/IP is the commonly known network layer for the internet. This layer also manages the mapping between logical addresses and physical addresses, for IP addresses, this is accomplished through Address Resolution Protocol (ARP). The data is then passed to the next required layer.

Layer 2/Data link: This layer is often divided into sub-layers called Media Access Control (MAC) or Logical Link Control (LLC). The layer sets up links across the physical network. When this layer receives data from the physical layer, it checks for transmission errors and then packages the bits into data frames. From there, this layer manages the physical addressing methods for MAC or LLC layers. An example of MAC layer includes 802.11 wireless specifications as well as Ethernet. At the data link layer, the data passes to or from the final layer.

Layer 1/Physical: This is the electrical layer of the model. This layer includes all the network cables, wireless radio frequencies, receivers, repeaters, connectors, transceivers, pulses of light, electric voltages, power plugs, cable pin-outs, etc. When troubleshooting problems, this is the first place to start. Is the device plugged in? Is the wireless card working? At this layer, the model transmits the digital data bits from source or sending devices physical layer, over network communications media, which can be electrical, mechanical, or radio, to the receiving or destination devices physical layer.

Layer 7, 6 and 5 can be grouped in, the sole responsibility for the three of these is to produce protocol data unit (PDU) for the transport layer.

How the layers work!
Let’s say you send an email, the data travels through the OSI model, adding and processing data on each layer, this process is called encapsulation

step 1: Our work creates the data. the email you wrote, the email addresses, etc and gets ready to send it using Simple Mail Transfer Protocol (SMTP).
Step 2: The data is formatted in a way the receiving device will understand, in this example let’s say QsR3@4Fgg. This layer could also encrypt the data if needed.
step 3: A session with receiving mail server is started.
step 4: This is where it decides to use TCP or UDP. In this example we’ll use TCP to make sure every packet gets delivered also the source and destination port is added to the data.
step 5: The IP address of the mail server is added as the destination and the source IP address is also added to the data.
step 6: The MAC address of the router and the source MAC address of the host is added to the data.
step 7: The data is sent out on the network using Ethernet so when the data reaches the other side the receiving device will process the data in the same way but in reverse starting from the bottom up.

OSI helps with troubleshooting!
It’s easier to diagnose the problem with the network if you go through this model, checking every layer step by step for example, layer1: are all the cables plugs in? is the network card functioning?. Layer2: is the switch bad?. Layer3: is the route functioning? Do i have the correct address? And the process goes on and on from there

conclusion
The OSI model is more of a reference, a guideline for developers and vendors to smoothen the delegation of responsibilities to enable us understand what the communication process entails and the progress of developing communication products and software programs that will work in cooperation with a commonly established model. Once you understand the model, you can then understand which protocol and devices will be compatible with one another.