Posted on

CSS Layers Tutorial: Real CSS Encapsulation

Just around the corner, a new feature is rearing its head and it's getting frontend developers excited. That feature is CSS layers. With layers, we'll finally be able to fully encapsulate our CSS for import. That means modules, scripts, or anything else imported into your projects can have CSS that is entirely separate from your own, putting to bed the age-old problem of styles overriding each other. It will also let us be more agile with the CSS we add to our pages with custom import statements.

Let's take a deep dive into CSS layers, and how they will work when they land in a browser near you.

Posted on

CSS Transitions Generator

CSS transitions give us the ability to smoothly transition from one set of styles to another. Without them, your hover, click and transform effects can look janky and sudden. 

To illustrate a CSS transition, below are two emojis. Click on them to see the difference:

Posted on

Future Javascript: Javascript Pipeline Operators

Pipeline operators are an upcoming feature to Javascript which gives us another way to pass values through a series of transformations. It gives more context to what developers were trying to achieve when they wrote their code and allows us to do some cool things to boot. Here, we'll take a quick look at pipeline operators, how they work, and how you can use them today.

Javascript Pipeline Operators: Support

Currently, no browser or server-side ECMAScript implementation (like Node.JS) supports pipeline operators. You can, however, get them to work using Babel 7.15. You can learn more about installing Babel here, but suffice to say this will allow you to add pipeline operators into your code.

Posted on

iOS Crystalline Blurred Backgrounds with CSS Backdrop Filters

iOS is full of cool crystalline glass effects. This effect has long been easy to do when you have easy access to graphic shaders since these can do most of the heavy lifting in terms of calculating what is underneath the layer, and blurring it into the foreground. However, for a long time, it hasn't been possible in CSS... until now.

In more recent specifications of CSS, we have finally gotten backdrop-filter. Mostly meant for modals, it also has applications on stylized dropdowns which are common across the web.

Posted on

Express JS Conditional Routing: How to Route Multiple Payment Gateways

A payment gateway is a commercial service offered by an e-commerce application provider that allows e-business credit cards, online retailing, traditional brick, clicks, and mortar payment processing. A payment gateway may also be provided by banks to its customers and may be supplied by an independent specialist financial service provider such as PayPal, square, stripe, etc.

A payment gateway enables the exchange of payment information between the gateway and the front-end processor (such as a website, mobile phone, or interactive voice response system) or the acquiring bank.