HTML Custom Elements

HTML Custom Elements (part of the Web Components standard) allow you to create your own custom HTML elements with encapsulated functionality and styling. This technology enables developers to build reusable components that seamlessly integrate with existing frameworks or can stand alone. By encapsulating your component's HTML, CSS, and JavaScript, you can achieve cleaner code and promote modular design, ultimately enhancing the maintainability and scalability of your projects.

Custom Elements vs. React/Vue/Angular

When it comes to building web applications, the choice between using HTML Custom Elements and adopting popular frontend libraries and frameworks like React, Vue, or Angular involves considering factors such as development workflow, flexibility, performance, and the complexity of your project. Let's compare HTML Custom Elements with them to help you make an informed decision based on your specific needs.

HTML Custom Elements are native to the browser, allowing you to create custom components using standard HTML, CSS, and JavaScript. This provides a familiar syntax and avoids the need for external dependencies.

Custom Elements promote encapsulation, helping you create self-contained components with their own styles and behavior. This can lead to modular and maintainable code. However, while modern browsers support Custom Elements, older browsers may require polyfills for compatibility, potentially increasing the overall bundle size.

On the other hand, Frameworks like React, Vue, and Angular provide higher-level abstractions that streamline component-based development. They offer features like virtual DOM (in React), reactive data binding (in Vue), and dependency injection (in Angular), which can enhance productivity. Aside from these, all of these popular frameworks offer advanced state management solutions, making it easier to manage complex application states and data flows. Furthermore, frameworks provide development tools, debugging extensions, and hot module replacement, enhancing the developer experience and facilitating efficient development iterations.

When to use Custom Elements?

Choosing between HTML Custom Elements and frontend frameworks/libraries depends on your project's scope, goals, and your team's familiarity with the technologies. HTML Custom Elements provide a lightweight and native approach for building custom components with encapsulation and modularity, making them suitable for simpler projects or specific use cases.

Frontend frameworks and libraries offer a more comprehensive solution with efficient abstractions, performance optimizations, and a rich ecosystem of tools. They are particularly advantageous for larger and more complex applications where developer productivity and performance are paramount.

Ultimately, the choice depends on finding the right balance between the simplicity and performance of HTML Custom Elements and the efficiency and convenience of frontend frameworks and libraries.

The <dialog> element

Modal dialogs have emerged as a popular solution to achieve present information, gather input, and engage users. Traditionally, developers have relied on a variety of methods and libraries to create modal dialogs, each with its own set of advantages and limitations.

However, with the introduction of the <dialog> element in HTML5, a native solution has emerged that challenges the status quo of modal creation, offering a more streamlined and accessible approach.

Developers also often resort to custom scripting to create modals, which can lead to code complexity and maintenance challenges. The <dialog> element abstracts much of the scripting required for modal behavior, reducing the likelihood of errors and making the development process for the modal more consistent.

One of the most significant advantages of the <dialog> element is its built-in support for accessibility features. It automatically manages focus, ensuring that users interact with the dialog before returning to the main content. This feature is crucial for users who rely on screen readers or keyboard navigation.

The implementation is quite simple:

<button id="openDialog">Open Dialog</button>
<dialog id="modalDialog">
  <p>This is a modal dialog.</p>
  <button id="closeDialog">Close</button>
</dialog>


<script>
  const openDialogButton = document.getElementById('openDialog');
  const closeDialogButton = document.getElementById('closeDialog');
  const myDialog = document.getElementById('modalDialog');

  openDialogButton.addEventListener('click', () => {
    myDialog.showModal();
  });


  closeDialogButton.addEventListener('click', () => {
    myDialog.close();
  });
</script>

The <dialog> element represents a paradigm shift in the creation of modal dialogs. By providing a native, accessible, and user-friendly solution, it challenges current practices that often rely on third-party libraries or custom scripting. The benefits of <dialog> extend beyond streamlined implementation; they encompass enhanced accessibility, consistency, and a simplified development process. As developers strive to create more efficient and engaging user experiences, the <dialog> element stands as a testament to the power of HTML5's evolution and its ability to shape the future of web development practices.

Power to the Native CSS

CSS continues to evolve as a dynamic and essential tool for modern web design. The new features not only enhance the aesthetic appeal of websites but also improve performance, responsiveness, and user engagement. As designers and developers embrace these cutting-edge CSS capabilities, they pave the way for a more immersive and visually striking digital experience that adapts seamlessly to the ever-changing demands of the digital world.

Responsiveness with clamp()

clamp() function is a versatile CSS feature that offers an elegant solution to achieving responsive typography with precision and flexibility. Introduced in CSS as part of the CSS Values and Units Level 4 specification, the clamp() function allows you to set a value within a specific range. It takes three parameters: a minimum value, a preferred value, and a maximum value. The browser calculates the optimal value between the minimum and maximum, based on available space:

p {
  font-size: clamp(16px, 3vw, 24px;
  /* clamp(minimum, preffered, maximum) will never return a value outside the range of minimum and maximum. */
}

Whether it's smartphones, tablets, laptops, or desktop monitors, clamp() ensures that typography responds intelligently to varying screen dimensions, optimizing user experience. Breakpoints become less rigid, as font sizes gradually adjust within the specified range. This contributes to smoother transitions between different screen sizes. Furthermore, the clamp() function can also be used to set values of other CSS properties, like margins and paddings. The clamp() support is currently around 95% and can be used right away on your new and old web projects.

Container Queries

The concept of responsive web design has revolutionized the way we approach building websites, enabling content to adapt gracefully across various screen sizes and devices. However, traditional media queries have limitations when it comes to adapting components based on their own dimensions or the dimensions of their containing elements. This is where CSS container queries come in - a groundbreaking feature that is set to reshape the way we create responsive and flexible layouts.

CSS container queries are an evolution of media queries, focusing on adapting elements within their containing elements, rather than the viewport dimensions. This allows for more precise control over how components respond to changes in their own context. With container queries, developers can define styles that adjust based on the available space within a particular container.

Furthermore, with container queries, you can prevent layout shifts caused by components that change size or layout as a result of viewport changes. This results in a smoother user experience and helps maintain the integrity of the design. Here is the example of container queries:

/* Default heading styles for the card title */

.card h2 {
  font-size: 1em;
}


/* If the container (parent element) is larger than 700px */

@container (min-width: 700px) {
  .card h2 {
    font-size: 2em;
  }
}

Container Query Units

With new way of defining responsiveness, a new units also emerge, called container query units. These are used to define lengths relative to the dimensions of a container. The units provide a way to create more flexible and adaptive components within container query contexts. The units are:

cqw: 1% of a query container's width
cqh: 1% of a query container's height
cqi: 1% of a query container's inline size
cqb: 1% of a query container's block size
cqmin: The smaller value of either cqi or cqb
cqmax: The larger value of either cqi or cqb

Here is an example of clamp() function combined with container query unit:

@container (min-width: 700px) {
  .card h2 {
    font-size: clamp(1.5rem, 10cqw, 2rem);
    /* font size will be 10% of the container width, but will not exceed 2rem or be smaller than 1.5rem. */
  }
}

CSS container queries represent an exciting leap forward in responsive web design, offering the potential to create more adaptable, context-aware, and dynamic layouts. While the feature is still evolving and browser support is being developed, its promise of scoped responsiveness has the potential to streamline design workflows, enhance user experiences, and enable developers to craft truly responsive components that seamlessly adjust to their environments.

Nesting Selectors in CSS

CSS Nesting Rules, is a proposed feature for cascading style sheets (CSS) that aims to simplify the way we write and organize our styles by allowing us to nest selectors and declarations within each other. This feature is intended to improve the readability and maintainability of CSS code, especially for complex and deeply nested structures.

.card {
  /* some styles for card */

  h1 {
    /* some styles for h1 */
  }
}

For those who use SCSS, they know how nesting of selectors reduces code repetition, provides a level of encapsulation, and makes it easier to understand the relationships between elements and their styles. Finally, this feature is coming to the native CSS, making SCSS more obsolete. At the moment, the support for CSS nesting is around 73%, with Firefox having it hidden until the upcoming version.

JavaScript is Better with Modules

Aside from having HTML Custom Elements, JavaScript has been modular for some time already. JavaScript modules (or just JSM) are a standardized way to organize and share code in a modular and maintainable manner. They provide a means to break down large programs into smaller, reusable pieces, improving code organization, encapsulation, and reusability. The support for JSM is over 95%, making it compatible enough to be used commonly.

JavaScript modules have become an integral part of modern web development and are supported in all major web browsers. There are different formats for defining and using JavaScript modules. Some of the common module formats include ESM, CommonJS, AMD and UMD. We will dive into ESM in this article.

ESM

ESM is the native module system introduced in ECMAScript 6 (ES6) and is supported by modern browsers and newer versions of Node.js. It provides a standardized and more powerful way to define, import, and export modules in JavaScript.

// math.js

export function sum(a, b) {
  return a + b;
}

// import.js

import { sum } from './math.js';
console.log(sum(2, 5));

Some key features of ESM are:

Syntax: ESM uses the import and export keywords to define and import modules.
Named Exports and Default Exports: ESM supports both named exports (multiple exports per module) and default exports (single default export per module).
Module Level Scope: Variables and functions declared in a module are scoped to that module, avoiding polluting the global scope.
Asynchronous Imports: ESM supports asynchronous module loading, allowing you to use dynamic imports to load modules on-demand.
Static Analysis: ESM allows static analysis, which means tools can determine dependencies at build time, leading to better optimizations.

Bonus: JavaScript Import Maps Feature

How many <script> tags with src attribute do you have in your last JS project? If you were using a lot of 3rd-party scripts, or you were just trying to organize your JS into smaller files, we are sure there are a lot of them. Fortunately, the import of these files does not need to look ugly anymore, thanks to the new Import Maps feature:

<script type="importmap">

{
  "imports": {
    "math": "./module/math.js",
    "helper": "./module/helper.js",
    "aos": "https://unpkg.com/aos@2.3.1/dist/aos.js"
  }
}

</script>

JavaScript Import Maps represent an attempt to address certain challenges in managing module dependencies by providing a more declarative and centralized approach to mapping module specifiers to URLs. While Import Maps have the potential to offer benefits in terms of flexibility and configurability, the support for the feature is below 85%, making it still considered an experimental feature.

New & Old Media Formats

The choice of media file formats plays a pivotal role in shaping the user experience and, more importantly, optimizing the performance of your web applications. As technology evolves, new formats emerge while old ones persist, each with their own advantages and considerations.

AVIF: Because WebP was not enough

WebP has emerged as a modern image format designed to revolutionize image compression on the web. Developed by Google, WebP employs advanced techniques to reduce image file sizes without compromising quality. Its support for both lossy and lossless compression makes it an attractive choice for optimizing website load times and enhancing visual appeal.

Although being a well-developed image format compared to the formats like JPEG and PNG, only 8.9% of the websites use the WebP (according to “Usage statistics of WebP for websites” by W3Techs), most of them are ones with a high traffic.

In the meantime, a new image format emerged. AVIF (short for “AV1 Image File Format”) is a newcomer designed to deliver superior image quality with exceptional compression. Harnessing the power of the AV1 video codec, AVIF achieves impressive file size reduction while retaining remarkable image fidelity. As browsers adopt AVIF support, integrating this format can lead to stunning visuals and accelerated website performance. Since this is a relatively new image format, AVIF is being used on only 0.1% of the websites (according to “Usage statistics of AVIF for websites” by W3Techs) and it is still not supported by Microsoft Edge.

WebP and AVIF represent a new era in image compression, offering compelling reasons to embrace these formats over traditional alternatives. WebP introduces a balanced blend of compression and quality, providing smaller file sizes without compromising visual fidelity. With widespread browser support, WebP seamlessly integrates into diverse web environments, ensuring faster load times and a smoother user experience. On the other hand, AVIF emerges as a game-changer with its remarkable compression capabilities driven by the potent AV1 codec. It excels in preserving intricate details and colors, making it an ideal choice for high-quality images and artwork.

As the technology evolves and browser support expands, the adoption of WebP and AVIF brings a progressive shift in frontend development. By choosing these formats, developers can create web applications that load faster, conserve bandwidth, and captivate users with visually stunning content, all while bidding farewell to the limitations of traditional image formats.

WebM: Frontend’s Go-To for Videos

WebM is an open and royalty-free video format currently maintained and developed by Google. The format makes waves as a high-performance alternative for embedding videos on the web. Leveraging the VP9 video codec, WebM offers efficient compression, allowing for high-quality video content with reduced file sizes.

Furthermore, the WebM seamlessly integrates with responsive web design principles. Its flexible format adjusts to different screen sizes and orientations, ensuring that videos look and perform optimally on various devices, from large desktop monitors to small mobile screens - WebM has you covered!

To conclude, the WebM format brings a multitude of benefits to the forefront of frontend development - from faster loading and responsive design to seamless compatibility and high-quality visuals. By leveraging WebM's strengths, developers can create web applications that deliver engaging, buffer-free video content, enhancing user satisfaction and driving the success of their projects.

Video formats: United to Kill a Bloated GIF

The reign of the GIF, marked by its charm and simplicity, has been accompanied by a notorious downside: bloated file sizes that hinder web performance. The first bigger step in conquering the GIF was GIFV - an intermediary solution. Right now, this format stands at a crossroads. While GIFV achieved improved performance through video compression, its legacy of bloated sizes lingers.

Another good approach to ditching GIFs is converting them to videos. It is a strategic move that aligns with the goals of frontend optimization and user engagement. Videos load faster, conserve bandwidth, and offer a canvas for creative expression. As HTML5 video elements gain widespread support across modern browsers, videos join the alliance as dynamic envoys, reinforcing the mission to bid farewell to the era of the bloated GIF.

As it goes for the static images, AVIF plays a huge role in animated ones, too! By using the power of AV1 video codec, AVIF ushers in a new era of animations that dazzle with clarity and detail, all while drastically reducing file sizes. The days of sacrificing quality for efficiency are over, as AVIF introduces animations that load swiftly, engage deeply, and captivate effortlessly.

LottieFiles: Elevating Dynamic Visuals in Web Development

In the modern-day frontend, creating captivating animations and interactive visual experiences is a constant pursuit. This is where LottieFiles (or just Lottie) jumps in.

Lottie emerges as a revolutionary solution for incorporating complex animations seamlessly into web applications. Born from the realm of Adobe After Effects, Lottie harnesses the power of JSON-based animations. This magical format enables designers and developers to create intricate, dynamic animations that effortlessly adapt to various screen sizes and orientations. The true brilliance of Lottie lies in its ability to bridge the gap between design and implementation, allowing animations to be realized exactly as intended. By eliminating the need for intricate code or custom scripting, Lottie democratizes animation creation, making it accessible to a wider spectrum of developers. Its compatibility with both web and mobile environments further positions Lottie as an essential tool for modern web development.

Complementing Lottie's wizardry is the Web Animations API, a native browser feature that empowers developers with fine-grained control over animations. This API provides a standardized way to manipulate and animate DOM elements, offering a programmatic approach to creating stunning visual effects. Developers can craft animations with precision, applying transformations, keyframes, and timing functions—all while enjoying optimal browser performance. The Web Animations API is designed for both simplicity and sophistication, accommodating developers of varying skill levels and catering to complex animations as well as simple interactions. By enabling animations to be natively controlled, synchronized, and sequenced, the API introduces a new level of interactivity and responsiveness to web applications.

Exciting new things you can use in frontend right now (or soon)