View Transition API

Introducing the View Transition API: Your DOM’s New Best Friend!

Lawrence Chabela CSS & HTML, Design, Development Technologies, JavaScript 2 Comments

Tired of clunky transitions and tangled web states? Meet the View Transition API, your secret weapon for silky-smooth DOM transformations. Say hello to elegant animations and goodbye to the confusion of overlapping states. Your web pages are about to get a serious upgrade!

Think about it, page transitions aren’t all about the looks. They’re like guides, leading users through your content. And they’re not just about appearances, these transitions can also increase the perceived speed of how responsive your site feels, especially during async running tasks…

:Has Selector

Exploring the New :has Pseudo Selector and Its Uses

Lawrence Chabela CSS & HTML, Design, Development Technologies Leave a Comment

Through the years, we were told a parent selector would be an engineering feat that could not be achieved due to the way browsers render a page and apply computed styles to elements as a stream, one element after the other. When the browser paints a parent and inevitably its children, reevaluating this already-painted DOM to evaluate parents for children containing a particular context would be too expensive of a task.

As the years moved on, we all applied different hacks or strategies, either reworking our DOM to avoid the issue altogether or using various JavaScript techniques to select parents and add CSS classes to use instead. We were just waiting for something to save us…

Preventing Layout Shift

Using CSS Grid to Prevent Page Jank

Lawrence Chabela CSS & HTML, Design, JavaScript, Programming, Tutorial Leave a Comment

Layout shifts, or page jank as I like to call it, rears its ugly head when a visible element changes position or dimensions, causing the position or dimensions of content around it to be changed.

There are too many possible reasons behind a layout shift to cover in one post, so I’ve narrowed it down to one in particular for the sake of brevity. In this article, we will discuss this scenario: a component changing its height due to its state being changed from user interaction.

I know that this is a relatively isolated example, especially in the grand scheme of things. However, I think this proves an important point. Solving a layout shift doesn’t always have to be a tedious and complicated process to fix. Sometimes, scenarios like this can easily be solved using the CSS we already have at our disposal.

CSS Grid with CSS Math means no media queries

CSS Grid + CSS Math Expressions = Look Ma No Media Queries

Lawrence Chabela CSS & HTML, Design, Development Technologies, JavaScript Leave a Comment

CSS Grid has been the new, cool kid on the block for a few years now. Grid, with its layout algorithm, has given us so many more capabilities in how we can layout and arrange content in our applications.

CSS Grid allows us to define layout patterns in concise and refined ways. That being said, we simply cannot look at CSS Grid by itself without knowing how other key features of modern CSS (like Math expressions) work with CSS Grid. This can allow us to push the boundaries and create more efficient layouts.

These new layout superpowers enable us to start to move past the constraints and limitations that media queries have.

A Retrospective of React

A Reactrospective: A React Retrospective

James Bradley Angular, Development Technologies, HTML5, JavaScript, React Leave a Comment

Most, if not all, of my experience has been with .NET and .NET Core. I’ve also worked with most of the front-ends throughout history including Classic ASP, Code Behind, Model View Presenter, MVC, Backbone, and, over the last few years, Angular 1… Angular 6… not Angular 2…AngularJS. To me, AngularJS is that old t-shirt that you put on to sleep in; comfortable.

At first, most of us on the team were a bit apprehensive about moving to React. AngularJS was very familiar and Angular 2 seemed like the natural next step. I could learn TypeScript, and as primarily C#-based developer, I really liked the idea of a little typing. I like shiny new things, and I’m always game to learn, so challenge accepted. Since then I’ve had a hand in writing three applications in React and have learned more than a few lessons. These are their stories… dun dun.