Need help with Material Design

#design #css #materialdesign

Hi...
I am trying to learn Material Design & ReactJS. I could just use Material-UI React component library and get going. But, wanted to understand more by reading docs at material.io, where content is organized into 4 categories like web, android, flutter & ios. I started out with Web.

Now, here's the PROBLEM I AM FACING: In the button component documentation styles part, it is mentioned...

@use @material/button"; @include button.core-styles;

To understand this, I started following the first Material Design Web Google Codelab (there are 5 of'em, go here--> "https://codelabs.developers.google.com/?cat=Web" and type MDC in search box) to see how the styles are actually used. There are 5 steps in total, in fourth step where styles for text-field/button component are imported like this

@import "@material/button/mdc-button;

which is different from what is mentioned in its documentation & I couldn't understand & relate to.

What am I missing while reading the component docs? Can someone please explain the differences between styles usage in a particular component docs vs its actual usage shown in codelab?

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.