Top 7 CSS Trends in 2019

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: over time, web design has become more and more innovative. Rather than simply displaying information, websites are works of art with complex animations, unique layouts, and micro-interactions. Many of these things are possible through CSS.

CSS gives style to ordinary, boring web pages and gives you the chance to create beautiful interactions. The current year is opening up a lot of new web design opportunities, and these 7 CSS 2019 trends will define the year.

CSS Grid

Top 7 CSS Trends in 2019

CSS Grid Generator

Flexbox has been the predominant standard for grid-based layouts. In fact, at the end of 2018, almost 83% of pages loaded on Chrome were using Flexbox. But a new rival entered the ring.

JavaScript. Fast start

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

Learn more

This new contender is Grid. Still young and used on only about 2.25% of pages loaded, it is still rapidly gaining popularity, at the beginning of 2018 it was used on only 0.25% of page loads.

Grid is proclaimed to be better than Flexbox. Flexbox gives you control over vertical or horizontal alignment, but not both. Grid does exactly that.

CSS experts attribute the lack of popularity to the fact that most major websites don’t use it. After all, this data is based on pageviews, not the number of pages using the Grid. It’s only very recently that large sites have adopted Flexbox, so it makes sense that they don’t want to change it yet.

However, the Grid will definitely rise in popularity in 2019 as it opens up a degree of creative freedom that other options don’t offer.

CSS Writing Mode

Top 7 CSS Trends in 2019

Not all languages ​​are written and read from left to right. For languages ​​that are written in other directions, you can use the writing-mode CSS property.

Pass text from top to bottom or right to left and adjust horizontal and vertical values. You can even display text vertically, rotate text for specific designs, and mix scripts.

Mobile animations

Animation as a tool for engagement is becoming more and more popular. Websites will use more and more animated loading icons, limited design loading pages, and more to keep the user’s attention.

An example of this is the popular YouTube site. Open the YouTube mobile app and scroll through the video. If you pause for a second, the video will play automatically with muted and title displayed.

Animations are also used as indicators for actions or tasks. Animated buttons and lists are becoming commonplace too.

Popular frameworks (Bulma, Tailwind, Bootstrap 4, etc.)

Top 7 CSS Trends in 2019

CSS frameworks have been around for a long time, but their popularity has only grown in recent years. Awwwards defines a framework as: “A framework is a standardized set of concepts, practices and criteria for solving common problems that can be used as a reference to help us solve new problems of a similar nature.”

As we move to a more mobile web, frameworks are adjusting to fit this. Style and design are changing, animation and action are becoming more common, and the focus on simplicity and end-user experience is more important than ever!

In 2019, many frameworks have become industry leaders and have helped developers and designers work faster than ever. Here are some of the more popular frameworks used on the web in 2019:

Foundation is a flexible, mobile-friendly environment used as an enterprise solution;

Bootstrap 4 – Bootstrap is one of the largest CSS frameworks in the world, version 4 comes with new features for color schemes and utility classes;

Materialize is a popular framework focused on material design styles;

JavaScript. Fast start

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

Learn more

Separate pages, experimental navigation

Top 7 CSS Trends in 2019

As owning a website becomes almost synonymous with a personal social media profile, more and more users are turning to simpler, one-page solutions and options to redirect traffic elsewhere.

Common examples:

Linktree – A simple page with links to social networks, products, etc.

Carrd – Simple, free, fully responsive one page sites for just about anything;

About.me – A more professionally oriented portfolio site similar to LinkedIn but allowing for creativity.

Instapage is a popular landing page builder for businesses and startups;

One-page websites like these are being further developed through the creative use of CSS and styles to enhance the user experience. Next Web singled out “Large and Experimental Navigation Systems” as one of “10 Exciting Web Design Trends You Can’t Avoid in 2019.” So why are people switching to these interesting layouts?

Because of the action. With targeted large buttons and navigation, users are instantly directed to the right place. Whether it’s a store, an info page with opening hours / information, or just a new video / song.

More and more websites are opting for similar solutions that direct traffic and then distribute it. Musicians use Linktree and other services to share their new songs across all streaming platforms while earning affiliate income in parallel.

Variable fonts

Top 7 CSS Trends in 2019

Carrie Cousins ​​in Top 17 Web Design and UI Trends of 2019 defines variable fonts as a “set of master styles, with one default central“ master ”(usually a standard font style) and multiple“ axes ”registered. »That connect the central master with others. For example, the Thickness axis can associate the Light master style with the default style and the Bold master style. The individual styles that can be positioned along this axis are called “instances”.

This means fonts are becoming more flexible across all devices and platforms. You can more easily scale the weight, size, and other aspects of a font without going from one font width to another or completely switching fonts.

Check out an example of the variable typeface “Amstelvar” on GitHub. Also check out the full analysis of variable fonts and find out from Google how they will change the web.

Scroll anchor

Top 7 CSS Trends in 2019

Last but not least, scroll anchoring is a relatively new technique used to bind users to specific scroll points. Instead of moving smoothly down the page or from left to right, you can scroll the page in increments. Popular uses for this are flipping through products on a page, scrolling / reading a book, and moving around a page with blocks of information highlighted.

CSS Tricks has a great tutorial on how to practically implement CSS scroll anchors.

It contains information about browser support, best practices, and properties that you should use to ensure proper scroll binding. Want to know how scroll anchor works? Check out these examples on Webkit.

The present and future of CSS

These are the 7 top CSS trends for 2019. What’s your favorite?

Author: Mike moloney

Source: //1stwebdesigner.com

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

Practice of site layout on CSS Grid from scratch

Watch

Leave a Reply

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