Stop using icon fonts

From the Author: Webpack is a JavaScript module bundler that transforms web resources such as HTML, CSS, JavaScript, and SVG files and bundles them into a smaller group of files.  Webpack also helps with chunking (splitting into smaller chunks) and managing code dependencies to ensure that the code that needs to be loaded first does this.  How webpack works In this article, we'll go over some of the new features to look out for in webpack in 2021, but first we'll look at what's new in webpack in 2020.  webpack V4 - V5: Important Changes In October 2020, a newer version of webpack was released: webpack 5. This version removes all deprecated elements in V4 and fixes critical bugs to bring the webpack architecture up to par for future improvements.  JavaScript.  Quick Start Learn the basics of JavaScript with a hands-on example of building a web application Learn more Other interesting features in version 5: Long-Term Caching Support - New algorithms to support long-term caching are enabled by default in production mode.  The real hash of the content - previously only the hash of the internal structure was used in webpack.  Webpack 5 will use the real hash of the file content when used [contenthash], which will have a positive effect on long-term caching when only small changes are made to the file.  Modular structure - webpack 5 came with a new feature that allows multiple webpack builds to work together.  See here for the complete changelog.  While 2020 has been a big year for webpack, there is still a lot more to come, which we'll talk about in the following sections.  Please note that these updates are subject to change based on the ever-changing world of web developers.  Webpack roadmap 2021 Improved ESM support Since the ECMAScript Module (ESM) was introduced in 2015, it has become the standard mechanism for code reuse in highly fragmented JavaScript applications.  To improve ESM support, the webpack team is planning to make some important updates.  Self-executing snippets One of the most interesting features of webpack is code splitting.  This feature allows you to split your code into multiple packages that you can download on demand or in parallel.  At the moment, dynamically loaded fragments in webpack usually serve as a container for modules and never execute module code directly.  For example, writing: JavaScript import ("./ module") 1 import ("./ module") Will compile like this: JavaScript __webpack_load_chunk __ ("chunk-containing-module.js"). Then (() => __webpack_require __ (" ./module ")) 1 __webpack_load_chunk __ (" chunk-containing-module.js "). then (() => __webpack_require __ (" ./ module ")) In most cases this cannot be changed, but the webpack command considers some cases where webpack could generate a block that directly executes the contained module.  This can result in less code generated.  ESM imports and exports While there is already a plugin for generating ESM exports, the webpack team is considering adding built-in support for this feature, which may be useful when you decide to integrate webpack packages into ESM boot environments or inline scripts.  JavaScript.  Quick Start Learn the basics of JavaScript with a hands-on example of building a web application Learn More The command also takes absolute URLs into account when importing.  This is very useful when using external services that offer their APIs as EcmaScript modules.  Here's an example: JavaScript import {event} from "https://analytics.company.com/api/v1.js" // Changes to: import ("https://analytics.company.com/api/v1.js" ) 12345 import {event} from "https://analytics.company.com/api/v1.js" // Changes to: import ("https://analytics.company.com/api/v1.js") Such the function will help to gracefully handle errors with external dependencies.  ESM Library The webpack team will also try to improve the bundling using the ESM libraries and will add a special mode that does not apply chunking, but instead generates rendered modules that can be plugged in via ESM imports and exports.  This means that as long as loaders, graphics modules, and resource optimizers are running, no fragment graphs will be created.  Instead, each module in the modules graph will be released as a separate file.  Strict Mode Caveats Sooner or later, the webpack team plans to ensure that all contained code is put into strict mode when the ESM package is created.  While this may not be a problem for many modules, there are a few older packages that may have problems with different interpretations, so it would be nice to see warnings for them.  SourceMap Performance SourceMap provides a way to map code in a compressed file back to its original position in the original file.  In other words, it links the minified version of the resource (CSS or JavaScript) to the original authoring version.  This utility helps you debug applications even after resources have been compressed / optimized.  Using SourceMap in webpack is currently quite expensive due to performance issues, so the webpack team will be looking to improve this in 2021.  They will also be looking to update / improve the terser plugin, which is the default webpack minifier in webpack 5. Package.json export / import field Node.js v14 came with support for an export field in package.json.  This feature allows you to directly define entry points for a package, or conditionally define entry points for each environment or JavaScript flavor (TypeScript, Elm, CoffeeScript, etc.).  In a later release, private imports were also supported in Node.js (similar to the export field in package.json).  For now, webpack 5 only supports the export function, even with additional conditions such as specifying production / development.  Import fields for private imports are another feature to look out for in 2021.  HMR for Modular Design Hot Module Replacement (HMR) works by replacing, adding, or removing modules while the application is still running, without the need for a complete reboot.  This can significantly speed up development by preserving application state that would have been lost on a hard reboot.  Plus, it instantly refreshes the page when changes are made to the source code, much like changing styles directly in the browser developer tools.  Webpack 5 ships with a new feature called “Module Federation”.  This feature allows you to integrate multiple assemblies together at runtime.  HMR currently only supports one assembly at a time and updates cannot move between assemblies.  The webpack team will work to improve the HMR updates to move between different builds, making it easier to develop federation apps.  Hint System To monitor errors and warnings, the webpack team is considering adding another category for the user: hint.  Similar to displaying errors and warnings, a tooltip notifies the user of information that may be of value to him.  However, unlike the previous categories, the prompt will identify optimization opportunities or tricks, not problems.  An example hint might look something like: "Did you know that when you add X a change to file Y, you can clean it up?";  or "Easy to encode the space with the space function."  WebAssembly According to the official documentation, WebAssembly (abbreviated Wasm) is "a binary instruction format for a stack-based virtual machine."  This means that you can build your software with programming languages ​​like Rust, C ++ and Python and provide it to the end user in a browser with near-native performance.  In the current version of webpack, WebAssembly is experimental and not enabled by default.  The default support is what the webpack team will hopefully add this year.  Conclusion There are big changes coming to webpack in 2021, and while this list may not be final, we can look forward to new features and capabilities that will make webpack easier and more efficient.  Author: Elijah Asaolu Source: blog.logrocket.com Editorial: The webformyself team.  JavaScript.  Quick Start Learn the basics of JavaScript with a hands-on example of building a web application Learn More Webpack.  The Basics Watch the Webpack Video!  Look

From the author: just a year before the first web page was launched in 1991, Microsoft began shipping what is arguably the most famous icon font, Wingdings. However, it took almost 22 years before icon fonts became a design trend on the Internet.

The introduction of the @ font-face CSS rule allowed web designers to specify their own fonts for displaying text. By 2011, it was supported by all major browsers. This gave rise to the idea that icon fonts such as Wingdings could be used in place of bitmaps on the Internet. Given that real SVG support in all major browsers was not stable until early 2020, icon fonts were actually the way to add vector icons to your website.

But icon fonts on the Internet were fundamentally flawed from the start. Now that we have full SVG support at our disposal, it’s time to end their use once and for all.

Incorrect icon fonts

Flash Unstyled Content (FOUC)

When using @ font-face, you tell the browser to make an HTTP request for the required font file. This request is also not sent immediately. When the browser starts to parse the HTML and all associated files specified in the markup, it builds the Document Object Model (DOM) in real time. When the associated font is found, the request is triggered. The time it takes to retrieve a font may vary depending on the font resource size, network conditions, and user equipment.

While waiting for the font resource, the browser will choose to display the HTML text content before actually receiving it. This results in unstyled content (FOUC). These outbreaks can be very annoying for your visitors. Icon fonts typically assign their glyphs to code points outside the normal range in which most regular fonts work. However, if they don’t, it is possible that random characters or glyphs will appear in place of your icons before the font is fully loaded.

JavaScript. Fast start

Learn JavaScript basics with a hands-on example of building a web application

Learn more

Note. You can use newer directives like preload for font resources to avoid FOUC. However, this does not resolve the other issues described in this article and is not recommended.

Availability

Icon fonts are notoriously poorly available and can be frustrating for those who rely on assistive technology.

Processing as text. The browser treats fonts as text because that is what fonts are supposed to be. Screen readers have gotten smarter over the years, but they still find it difficult to distinguish between legible text and pictogram. Most screen readers will read aloud text inserted with CSS, so when they encounter icons, they may sound “unpronounceable” or skip the text altogether.

Style sheet overrides. Visually impaired people often use custom style sheets to override the default styles for the websites they visit to make them easier to use. This can include changing color schemes, increasing the font size, or even completely changing the font style. If your site uses icons in a non-contextual way, someone using a supporting font (like OpenDyslexic) will make your icons disappear completely, potentially rendering your website unusable.

Failure to provide metadata. The process of embedding an icon font on the Internet requires the use of the :: before or :: after pseudo-elements. Semantically, the :: before and :: after pseudo-elements are intended to add decorative content to an existing element. For an icon font, this makes sense if the icon is used in context with another element. However, in many cases, the icon is used as the main element. For example, “x” for “close” or “house” to return to the main page. By themselves, these icons do not provide any semantic information about their content; you cannot label them or describe them directly.

Size and maintainability

Icon fonts are a costly asset. Every time a visitor downloads your font, they download all the icons that you intend to use anywhere on your site, whether they see them all or not. This fact alone makes working with icon fonts difficult and rather annoying. If your font contains 200 icons, and you use 10 of them, you are forcing visitors to download 190 icons that they will never see. This will degrade the visitor experience due to increased load times and increased FOUC.

Maintaining icon font means adding and removing icons as needed to minimize font size and subsequent style sheets. This also means that every time you update the font, you need to invalidate the cache of visitors and force them to re-download the font.

Deterioration in visual quality

All modern browsers and operating systems use text anti-aliasing to one degree or another. Text anti-aliasing is independent of whether your font is composed of letters and numbers or icons. This can have negative side effects in terms of visual quality, especially if you stack glyphs to create multi-colored icons. Your icons may look blurry or misaligned.

Styling / positioning difficulties

Icon fonts are fonts first and icons second. This means your icons inherit CSS rules like font-size, letter-spacing, line-height, etc. This can make positioning the icon more difficult and less consistent. Additionally, icon font glyphs are monochrome, which means that any stylistic changes you make will affect the entire glyph.

SVGs to the Rescue!

With the release of the Chromium-based version of Microsoft Edge in early 2020, scalable vector graphics (SVG) are fully supported in all major browsers. Even before that, SVG has been supported in all browsers since 2012, albeit with some caveats regarding scaling from Internet Explorer to Chromium Edge. And guess what? SVGs are awesome web icon solution!

Icons just work

SVG image data is stored directly in the HTML document. As soon as the browser processes it, it displays it. You don’t have to wait for other HTTP requests to complete, as is the case with icon fonts.

Better availability

SVGs have accessibility features built in that give them an edge over icon fonts.

They are semantically elements of an image.

Providing metadata is easy. Just provide a title or desc element in the SVG container. And since SVGs are just HTML elements, you can easily use ARIA attributes like aria-labelledby.

Maintainability

On a one-to-one basis, the collection of 100 SVGs is larger than WOFF2’s 100 icons. However, the benefits of SVG easily outweigh the implementation of icon fonts.

JavaScript. Fast start

Learn JavaScript basics with a hands-on example of building a web application

Learn more

By using SVG, you will include only the icons required for that single page directly into your code. The most efficient way to do this is to use the defs element to define icons once, and then refer to them with this use element. You can also directly inline SVG icons, however, if you use the same icon multiple times on the same page, you simply increase the overall page weight.

Note. If you are building a Single Page Application (SPA), be sure to learn proper code splitting techniques to reduce package sizes.

Another benefit is that you don’t need to maintain the font and its supporting CSS files outside of the site. It is common practice for those using icon fonts to select the icons they want and restore to a smaller font that includes only those icons. Using SVG icons allows you to do this in your codebase without having to create font resources in external tools.

Sharp images

SVGs are straight vector images. The anti-aliasing techniques your browser or operating system uses for text will not affect SVG and your icons will be noticeably sharper.

Full CSS control

With SVG, you have access to all of the same CSS controls you would with a font, and more! You can directly specify specific parts of a multi-part icon and apply a different style to each of them. You can also use SVG-specific CSS controls like the stroke property. Also, SVG is not affected by CSS text rules.

Other considerations

To fully support the use of SVG on your site, make sure you follow these guidelines:

Optimize your SVG images – Run SVG images through the optimizer to reduce size. (Most, if not all icon libraries that offer SVG packages do so by default.)

Enable Compression – Configure the server to send all text resources (HTML, JS, CSS) using Brotli (or GZIP).

Efficient Caching – Set cache headers appropriately so visitors only download files as they change. Since your SVG files will be part of your HTML and / or JS files, you only need your visitors to download them again if they change.

Get Started with SVG Icons

Most of the major icon libraries offer SVG library packages. Two popular icon libraries, Material Design Icons and Font Awesome, have packages that can be installed via npm.

If you’re using a framework, many of the major icon libraries have released packages as well, so you can get started pretty quickly. For example, if you are using React, there are simple solutions for Material Design and Font Awesome icons:

Material Design icons- @ mdi / react & @ mdi / js

Font Awesome – @ fortawesome / react-fontawesome & @ fortawesome / free-solid-svg-icons

Conclusion

Continued use of icon fonts is detrimental to your visitors’ interests and wastes your time. By replacing the existing implementation of icon fonts with SVG, you are helping people use assistive technologies, improving the quality, legibility, and reliability of icons, and reducing the time it takes to maintain legacy assets. And if you stumbled upon this article by accident while trying to determine whether you should use an icon font or not, I hope the answer is now clear.

Author: Michael Irigoyen

A source: www.irigoyen.dev

Editorial staff: Webformyself team.

JavaScript. Fast start

Learn JavaScript basics with a hands-on example of building a web application

Learn more

PSD to HTML

Layout of the site in HTML5 and CSS3 from scratch

Look

Leave a Reply

Your email address will not be published. Required fields are marked *