DEV Community: Late Night Coder

Extending our CSS-in-JS to support style-component syntax

Late Night Coder — Wed, 24 Aug 2022 07:11:00 +0000

In the previous post, we made our css emotion like function and in this blog post, we are going to extend our css function to support the following style-components syntax.

const Button = styled('button')(
  {
    backgroundColor:  "blue",
    color: "white"
  }
)

A few things to note when exploring the API are:

// On breaking into parts: 
const Button = // <-- Part: 3
styled('button') // <-- Part: 1
({ backgroundColor: 'blue' }) // <-- Part: 2

Part 1: The styled function takes the tagName that has to be created i.e

 styled('button') <-- 1

// is equivalent to

<button>

Part 2: The styled(tagName) returns a function that accepts style-object which will be used to style this tagName element.

({ backgroundColor: "blue" }) <-- Part 2

// is converted to 

css({ backgroundColor: "blue" }) 

// and passed to the component as

<button className={css(...)} />

The complete call returns a React component Button that renders a button with a given style.

From the above points, we can write a rough husk of our styled function

// Part 1: styled('button'): element of type tagName to render
function styled(tagName) { 
  // Part 2: style('button')({ color: 'white' }) takes in the style object and applies these styles to `tagName=button` component

  return function applyStyles(styleObject) { 
      // Part 3: `Button` react component 
      return function Component(props) { 
          // ...styling and element creation... 
          // Mark: 1
      }
  }
}

Now in place Mark: 1 we need to do the following:

Create an element using React.createElement of type tagName
Pass style-object into css function to generate name, as props may already contain some className so compose these className together.

// continue from Mark: 1

const clonedProps = clone(props);
// a copy of props is required as by default react makes props immutable
// and if we want to modify any props we need to make a copy for our use

// compute a className for styleObject
const generatedClassName = css(styleObject);

// compose className 
const className = generatedClassName + props.className ? + ` ${props.className}` : '';

// reassign composed className
clonedProps.className = className;

// create element of type `tagName` with props = `clonedProps` and `style=generateClassName`
const element = React.createElement(tagName, clonedProps);

// The `element` is of type `tagName` and of `styles=styleObject` this is one we want to render

return element;

That is what the style-components version of our CSS-in-JS library looks like. clone function can be as simple as:

const clone = (obj) => Object.assign({}, obj);

Role-based Authentication in Node Js

Late Night Coder — Mon, 15 Aug 2022 11:19:53 +0000

Part 1:What is role and rights?

Role rights implementation is an important part of any software. Role is a position of responsibility and every responsibility enjoys some rights given to them. There may be some common rights between a few roles and some rights may strictly belong to a specific role.

Rights are Urls that a role is authorized to access. It is thus necessary to create a collection in DB storing information of rights to a role. We have role collection schema as

const mongoose = require('mongoose');  
const Schema = mongoose.Schema;  
const RoleSchema = new Schema({  
roleId:{  
type:String,  
unique:true,  
required:[true,"Role Id required"]  
},  
type:{  
type:String,  
unique:true,  
required:[true,"Role type is required"]  
},  
rights:[{  
name: String,  
path: String,  
url: String  
}]  
});  
module.exports = Role = mongoose.model('role',RoleSchema);

Now, remember every role that is supposed to exist is in Role collection and of above schema type.

In schema rights array of the object we see the object has keys:

name(for the name of URL like “set-username”)
path(for base path hit “/users/”)
url(requested URL or complete path “/users/set-username”)

Thus if a user with role user has right to change username then he can hit URL /users/set-username.However a wanderer will not be able to access this url. A higher role like admin & superadmin should logically have access to all lower role rights(URLs).

Role in real application are:-

Wanderer (Someone who is just visiting our site. He should be able to access all public routes. Simple URLs/Public URLs accessible to all thus need not make a separate role for this as it is not any authenticated right.)
Guest (Someone who has registered but not verified say email not verified).
User (Someone who has his verified email)
Admin (Made an Admin by SuperAdmin after verifying.he enjoy most of the rights)
Superadmin (Master of application.He enjoy some more sophisticated rights.More rights then admin)

Till now we have understood what exactly is right and how it is mapped to a role.

Part 1.5: Registered Urls/Config Urls

Here we have a file called registeredUrls.js which is like:

module.exports = {  
    // globally accessible 
    simple: {  
        "/":[""],  
        '/users/':["login","register"],  
    },  
    auth:{  
        //admin level enpoint

        '/admin/':   ['load-users' , 'set-new-password', 'delete-user'],  
        '/teacher/':  ["add-teacher", "delete-teacher", "edit-teacher"],  
        '/student/':  [
            "add-student", 
            "delete-student", 
            "edit-student", 
            "test-result"
        ],

       // common user enpoint

        '/test/':  ["view-test", "submit-test"],  
        '/profile/': [
            'change-username', 
            'update-profile-data',  
            'set-new-password', 
            'upload-pic', 
            'update-social-links'
         ],  
        '/teacher/':['load-teacher'],  
        '/student/':['load-student']
}

Similarly confgUrls.js

const configUrls= {  
    '/roles/': [
        'get-rights', 
        'create', 
        'update-rights', 
        'load', 
        'delete', 
        'assign'
     ]  
}  
module.exports = configUrls;

Part 2:Creating SuperAdmin

This is the most essential part of the application. Whenever the server starts for the first time or restarts/reboots this step occurs. In config/init.js follow the procedure:

Load All simple URLs(public) and Auth Urls(admin & users) & super-admin-specific URLs into superAdminRights[].
Then run a function to create a user with role superadmin if doesn’t exist.
Get a Role of type:”superadmin” if found:replace its rights with new rights(superAdminRights).else:create Role of type :”superadmin” and then fill its rights(superAdminRights).

At the end of this function call, we are always sure that we have a superadmin in application with all its sophisticated URLs/rights initialized.

Part 3:Super-Admin-Specific-URLs

These are rights that are enjoyed by super admin only and must be maintained in a separate file in parallel to the registered URL file. These include URL rights which map routes used only by superadmin. Here we have routes to create role, load roles, get-rights for a roleId, update-rights for roleId/role type, assign-role to a user, delete a role.

For each user in code, we need to change their role from guest to the user(say after email verification). Or guest/user to admin by superadmin using assign-role URL. Then updating admin rights using route update-rights.

The process ensures that every role has A collection Document and filled rights there.

Part 4:Authenticator Middleware

This heart of our RBACS logic. Here we use a middleware which follows the process:

// get all the URLs/endpoints in the system


const URLS = require("./registeredUrls");
// special endpoints
const CONFIG_URLS = require("./configUrls");

// create array of all endpoints and separate them by auth flows

// simple urls doesn't need any auth flow
const SIMPLE_URLS = [];

// AUTH_URL and SUPER_URL need auth flow
const AUTH_URLS = [];
const SUPER_URLS = [];

// the data-structure is { [rootURL]: [...subURLs..] }

// traverse all registered paths of simple URLs
// and make complete paths i.e `rootURL/subURL`
for (const rootURL in URLS.simple) {
  const subURLs = URLS.simple[rootURL];
  for (const subURL of subURLs) {
    // register all these in SIMPLE_URLS
      SIMPLE_URLS.push([rootURL, subURL].join("/"));
  }
}

// same with AUTH...register as AUTH_URLS
for (const rootURL in URLS.auth) {
  const subURLs = URLS.auth[rootURL];
  for (const subURL of subURLs) {
      AUTH_URLS.push([rootURL, subURL].join("/"));
  }
}

// same with CONFIG_URLS...register as SUPER_URLS
for (const rootURL in CONFIG_URLS) {
  const subURLs = CONFIG_URLS[rootURL];
  for (const subURL of subURLs) {
      SUPER_URLS.push([rootURL, subURL].join("/"));
      // push super URLS in AUTH_URLS also as they need auth flow
      AUTH_URLS.push([rootURL, subURL].join("/"));
  }
}


// By now we have an array of URLs
// 1. Simple URLs don't need authentication flow SIMPLE_URLS
// 2. Authentication required URLs need auth-token
// 3. Config URLs are the highest roles URLs typically super admin
// and have the same flow as Auth URL

// in the node.js middleware callback
const middleware = (req, res, next) => {
  // URL or endpoint or path requested
  const reqURL = req.url;

  // check where URL is
  const isAuthURL = AUTH_URLS.includes(reqURL);
  const isSimpleURL = SIMPLE_URLS.includes(reqURL);

  // auth URLs need auth flows

  if (isAuthURL) {

    // get token from header
    const token = getToken(req);

    // validate 
    const isValidJWTToken = validateJWT(token);
    if (!token || !isValidJWTToken) {
      // send failed authentication response
      // !token missing token required login
      // !isValidJWTToken token is invalid or expired
      return;
    }

   // token is valid but we have to check if the session exists in DB
   const user_session = getUserSessionData(token);

   // If no session in DB means this token may be mischievously generated
    if (!user_session) {
      // the user token might be compromised
      return;
    } 

   // now check if user_session.rights [] has requested URL
   // if requested URL is assigned is in array means 
   // it is assigned that right/path 

     const hasRightToPath = user_session.rights.includes(reqURL);
    if (!hasRightToPath) {
      // user doesn't have access to this path
      return;
    }
    // user has right to this path/endpoint/URL so let them do the thing
    return next();
  }

  if (isSimpleURL) {
    return next(); // simple URL doesn't need any flow simply pass it down
  }

  // if it matched none means it isn't a registered path in the system
  return;
}

Expo Barcode Scanner

Late Night Coder — Mon, 15 Aug 2022 09:40:00 +0000

Before we start we will update our node, npm and expo cli. Just to use all the latest features. Now create a new expo project. Choose the project with everything previously setup. We choose this app to get quickly started.

nvm use 12 // install version 12 - latest@2019  
npm install -g expo-cli // install expo cli globally  
expo init // create a project  
// choose the javascript project with navigation setup

Final product demo

Scanner Screen

In the app, as I am using the minimal setup project I am using the default HomeScreen as ScannerScreen. We are using a React class component you may simply use functional components with hooks for state management.

The Scanner screen is a class-based component. The state has two important properties one hasCameraPermissions for if the screen has permission to access the camera and the second property isisScanned for if something has been scanned or not. Initially, the state of ScannerScreen for hasCameraPermissions is null. Null means that we are requesting for permission. And state isScanned is false means nothing is scanned as of now.

As the scanner requires camera permission thus we need to ask for camera permission from the user.

Permission is an asynchronous task and we must ask for permission as soon as this component is mounted so componentDidMount seems like a good place to start. Note Permission asking is asynchronous so we have to make componentDidMount a async function. If Camera permission is given then hasCameraPermissions is set to true and we may successfully render our barcode scanner and open camera else if permission is declined *hasCameraPermissions* is set to false and we render declined permission message.

Next, we have a function for handling a successfully scanned barcode. If the bar code is scanned this function will be called. Our function *handleBarCodeScanned* is passed as callback to *onBarCodeScanned* prop on *BarCodeScanner* component. In *handleBarCodeScanned* function we receive a scan object as an argument which has two important properties, one is the *type* which means what type of bar code was scanned and the other is *data* which is the encrypted data in our barcode. We will destructure these properties as others are irrelevant to us. In our case of *handleBarCodeScanned* function, we are just navigating to the *DecodeScreen* passing code data as params. The DecodeScreen then displays the data.

import React from 'react';


import { Container, Spinner, TextH3 } from "../UI";

import * as Permissions from 'expo-permissions';

import { BarCodeScanner } from 'expo-barcode-scanner';

import {window} from "../constants/Layout";

class ScannerScreen extends React.Component{
  static navigationOptions = {
    header: null
  }
  // Component State
  state = {
    hasCameraPermission: null, // if app has permissions to acess camera
    isScanned: false // scanned
  }
  async componentDidMount() {
    // ask for camera permission
    const { status } = await Permissions.askAsync(Permissions.CAMERA);
    console.log(status);
    this.setState({ hasCameraPermission: status === "granted" ? true : false });
  }


  handleBarCodeScanned = ({ type, data }) => {
      // Do something here
      this.props.navigation.navigate('Decode', {
        data: data 
      });
  }
  render(){
    const { hasCameraPermission, isScanned } = this.state;
    if(hasCameraPermission === null){
      // requesting permission
      return (
        <Spinner />
      );
    }
    if(hasCameraPermission === false){
        //permission denied
      return ( 
        <Container>
         <TextH3>Please grant Camera permission</TextH3>
        </Container> 
      )
    }
    if(hasCameraPermission === true && !isScanned && this.props.navigation.isFocused() ){
      // we have permission and this screen is under focus
      return <Container style = {{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center'

      }}>
        <TextH3>Scan code inside window</TextH3>
        <BarCodeScanner
          onBarCodeScanned = { isScanned ? undefined : this.handleBarCodeScanned }
          style = {{
            height:  window.height / 2,
            width: window.height,
          }}
        >
        </BarCodeScanner>
      </Container>
    }
    else{
      return <Spinner />;
    }
  }
}
export default ScannerScreen;

Github Repo: vtechguys/medium/under folder RN_bar_code_scanner

UI vs UX

Late Night Coder — Mon, 15 Aug 2022 09:25:05 +0000

I have seen a lot of confusion between these two terms among the developers. The developers tend to mix these two and for a matter of fact, these are written as UI/UX which makes it more confusing to people.

User Interface

It is the elements on screen that you see like button, spinner, progress bar, slider, etc. UI deals with how the look their color, their shape, etc. The UI is the first thing people see on your website and it is a foremost important thing as its the first impression. Richer the UI greater is the impression.

User Experience

It is the flow of elements on your screen eg. a button leading to navigation is the flow of the app. UX people connect the parts of UI to make an experience for the user that is easy to use the system. The flow of information between screens and tasks are logical to understand.

Wrap Up

User Interface is all about the look and feel of the app. How creatively information can be displayed it takes a lot of creativity to make a great UI.

User experience is determined by how easy or difficult it is to interact with the user interface elements that the UI designers have created.

UX designer decides how the user interface works while the UI designer decides how the user interface looks. This is a very collaborative process, and the two design teams tend to work closely together. As the UX team is working out the flow of the app, how all of the buttons navigate you through your tasks, and how the interface efficiently serves up the information user’s need, the UI team is working on how all of these interface elements will appear on screen.

Correct meme from Patrix Hansen.

Allow to enter particular characters only

Late Night Coder — Mon, 15 Aug 2022 09:21:29 +0000

Sometimes we want to make validations on an input box for characters that user can type. And other characters will not be entertained in the input box.

Question: Make a input box that accepts digits and spaces only. Also, care for copy-paste (Ctrl +V ) of invalid characters.

The first step is to register an event on the input tag. But what event type? 🤔 We are typing characters into it so keypress the event looks fine.

<input type="text" id="input"/>

const input = document.getElementById('input');  
var currentInputValue = '';  
input.addEventListener('keypress', function inputKeypressHandler(e) {  
    // keypress event on input box is listened here and this function is triggered  
    // which key is pressed, keyPressed = e.which || e.keyCode;   
    const key = e.which || e.keyCode;  
    // key code corresponds to digits 0-9 or space then okay👍🏼  
    // 0-9 key code is 48-57  
    // space keycode is 32  
    const SPACE = 32; // May be just stored somewhere  
    const ZERO = 48;  
    const NINE = 57;  
    // valid digit is b/w 0-9 thus invalid will be lt 0 or gt 9  
    const isNotValidDigit = key < ZERO || key > NINE;  
    // if key is not a space or not a digit prevent this event  
    if (key != SPACE || ( isNotValidDigit ) ) {  
        e.preventDefault();  
    }  
});

This is a pretty good solution but this doesn’t prevent paste cheats. And that is because the keypress event only records key pressed inside the input box. A better event type is required. input it runs on all input ways including copy paste and drag.

var currentInputValue = '';  
input.addEventListener('input', function inputInputEventHandler(e) {  
    // use target of event to get value of input  
    const target = e.target;  
    // we can use regex to check if current input value  
    // is valid input  
    const DIGITS_SPACE_REGEX = /^[0-9\s]*$/;  
    // test if target.value or value of input box now is valid.  
    // if value is valid then update currentInputValue   
    // target.value else its is not value and we will  
    // ignore this target.value and replace it with   
    // previously valid value currentInputValue  
    DIGITS_SPACE_REGEX.test(target.value)   
        ? ( currentInputValue = target.value )   
        : ( target.value = currentInputValue );  
});

This solves our problem of paste but there is one problem here. Say you paste something Ctrl/Cmd + V your current cursor position will be lost and moved to starting. This must not happen and you must be able to retain cursor position.

// Track cursor position  
// cursor position is changed when you type something  
const cursorState = {};  
input.addEventListener('keydown', function inputKeydownHandler(e) {  
    const target = e.target;  
    // record the start and end  
    cursorState.selectionStart = target.selectionStart;  
    cursorState.selectionEnd = target.selectionEnd;  
});

now in input handler

// modify  
DIGITS_SPACE_REGEX.test(target.value)   
        ? ( currentInputValue = target.value )   
        : ( target.value = currentInputValue );  
 // to  
 if (DIGITS_SPACE_REGEX.test(target.value)) {  
     currentValue = target.value;  
 }  
 else {  
    target.value = current.value;  
    // restore cursor state  
    target.setSelectionRange(  
        cursorState.selectionStart,  
        cursorState.selectionEnd  
    );  
 }

Demo 👨‍💻

Methods of primitive

Late Night Coder — Mon, 15 Aug 2022 09:20:07 +0000

Let’s start with a piece of code:

const name = "aniket";
name.toUpperCase(); // ANIKET

The name is a primitive but we are able to access a method on it as if it were some sort of object. But we know that primitive isn’t an object.

What is the story here?🧐

Primitive are simple values stored in memory, those are lightweight and extremely fast. Whereas an object is a collection of the key, value pairs, it is heavy but it allows to access some utility properties associated with the object that is very useful. The javascript people faced the dilemma where they wanted to put primitive for being lightweight and fast but also wanted to allow access useful methods on primitives.

The solution the came up with was:

As soon as the engine reaches line 2 it sees that you are trying to do property access on primitive, but as primitive itself doesn’t have methods on them. It momentarily wraps the primitive value into a corresponding type wrapper object that has these methods on them and that object exposes us the properties which we can use, as soon as the method is done executing it returns the result of the operation in a new memory space and deletes this wrapper object.

Constructors function

The constructor function String, Number, Boolean is for internal use only. Languages like Java allows us to explicitly creates a wrapper object that is also possible with JavaScript but those are not recommended and are for internal use only. A lot of things can go crazy if we use those.

// Insane Use 🙅‍♂️ Not recommended
const age = new Number(22);
typeof age; // "object" 😱
// Sane Use 😍
const age = Number("22");
// explicit type conversion

Recap with a question

Explain the console output in strict and non-strict mode?

const name = "Aniket";
name.last = "Jha";
console.log(name.last);

In strict mode on line 2, the engine sees that we are trying to create a property on internal momentarily created internal wrapper object so there occurs an error. For a non-strict mode the engine on line 2, allows you to create a property on momentarily created wrapper object but this object is thrown out of memory as soon as line 2 is done executing. On line 3 a new wrapper object is created momentarily but as this is different from previous it doesn't have thelastproperty and thus undefined is the output.

Conclusions

The primitive is indeed a simple value but the engine treats primitive especially if it sees there is property access on it by wrapping it in wrapper object and exposing us with useful methods and properties.

Loadables - a simple way to load data in React

Late Night Coder — Mon, 15 Aug 2022 09:18:15 +0000

The real-world app involves data loading via some API and showing UI based on the states of the API. For example, while data is loading, you may show a loader animation, but on error, you may show an error UI. This fairly simple-looking task ends up getting complex super fast and is more difficult to maintain with all the spaghetti code for UI synchronization. So here I propose the loadable pattern to simplify data loading and synchronize the UI with it.

In this example, we are going to load a list of todos. Here we are using react-redux as a state management solution. Below we will see how to create a store and reducer with react-redux. However, you can directly skip to "loadables" if you familiar with react-redux-context store.

Create react-redux context store

Let's start by creating a react-redux-context-store for storing our todos. The following sample is taken from react-redux.

// [filename: todo.store.jsx]

import React from 'react'
import {
  Provider,
  createStoreHook,
  createDispatchHook,
  createSelectorHook,
 from "react-redux";
import { createStore } from "redux";
// reducer for the state
import { reducer } from "./store.reducer"

// react context store
const TodoContext = React.createContext(null)

// create redux state selector and dispatch from context
export const useTodoStore = createStoreHook(TodoContext)
export const useTodoDispatch = createDispatchHook(TodoContext)
export const useTodoSelector = createSelectorHook(TodoContext)

// create redux store from the reducer
const todoStore = createStore(reducer)

// create store provider wrap subtree
export function TodoStoreProvider({ children }) {
  return (
    <Provider context={TodoContext} store={todoStore}>
      {children}
    </Provider>
  )
}

After creating a store provider we are going to create store.reducer.js where we define the reducer and actions for the store.

// [filename: todo.reducer.js]

export const loadNext = () => ({ type: 'load_next' });
export const addTodos = ({ todos, total }) => ({ type: 'add_todos', payload: { todos, total } });
export const setLoading = (loading) => ({ type: 'set_loading', payload: { loading }  });

const InitState = {
 status: 'idle', // idle | pending | resolve | reject 
 todos: [],
 total: 0,
 skip: 0,
 limit: 10
};

export const reducer = (state = InitState, action) => {
  switch (action.type) {
    case 'load_next': {
       if (state.todos.length < state.total && state.status !== 'pending') {
          return {
             ...state,
             status:  'pending'
          };
       }
       return state;
    }
    case 'add_todos': {
      return {
          ...state,
          status: 'resolve',
          todos: [...state.todos, ...action.payload.todos],
          total: state.total + action.payload.todos.length 
      };
    }
    case 'set_loading': {
      return {
          ...state,
          status: action.payload.loading
      };
    }
    default: {
      return state;
    }
  }
};

Loadable

Loadables are react components that wrap all data loading logic in it and update the store.

// [filename: App.js]

const App = () => (
  <div>
    <TodoStoreProvider>
      {/* Loadable holds all data loading logic*/}
      <TodoLoadable>
        {/* Render todos */}
      </TodoLoadable>
     </TodoStoreProvider>
   </div>
 );

Now let's create a loadable:

// [filename: Todo.loadable.js]

function TodoLoadable(props) {
  // react-redux state slice selector
  const skip = useTodoSelector((state) => state.skip);
  const limit = useTodoSelector((state) => state.limit);
  const todoDispatch = useTodoDispatch();
  // load data
  useEffect(() => {
    todoDispatch(setLoading('pending'));
    api({ skip, limit })
      .then((res) => todoDispatch({ todos: res.todos, total: res.total }))
      .catch((e) => todoDispatch(setLoading('reject')));
  }, [skip, limit]);
  // render child
  return <>{props.children}</>
}

The point to note here is that the loading logic is completely placed inside the loadable and the children can utilize the store to sync UI state accordingly. IsVisible is a utility component that can be used to render things conditionally.

// [filename: IsVisible.utility.jsx]

function IsVisible({ visible, unmountOnExit, ...props }) {   
  if (unmountOnExit && !visible) {
    return null;
  }
  return <div {...props} style={{  ...props.style, display: visible ? 'flex' : 'none'  }} />
}

We can use the IsVisible utility component to create state synced UI.

// [filename: Todo.jsx]

const Error = () => <div><h1>Error</h1></div>;
const Loader = () => <CircularProgress size="small" />
const Todos = () => {
  const todos = useTodoSelector((state) => state.todos);
  return <div>{todos.map((todo) => <h1>{todo}</h1>)}</div>
}

function IsErrorVisible(props) {
  const isError = useTodoSelector((state) => state.status === 'reject');
  return <IsVisible {...props} visible={isError} />
}

....more IsVisible for all API status 'reject' | 'resolve' | 'pending' | 'idle'

Now with the help of this IsVisible, we can render UI according to the state of API.

// [filename: App.js]

const App = () => (
  <div>
    <TodoStoreProvider>
      {/* Loadable holds all data loading logic*/}
      <TodoLoadable>
        <IsErrorVisible><ErrorUI /></IsErrorVisible>
        <IsTodoVisible><Todos /></IsTodoVisible>
        <IsLoaderVisible><Loader /></IsLoaderVisible>
      </TodoLoadable>
     </TodoStoreProvider>
   </div>
 );

This is how loadable along with IsVisible utility makes it super easy to load data in react and make a code simple to write and understand. Here is a link to demo Codesandbox.

Javascript: Array Methods | Mutating vs Non-Mutating

Late Night Coder — Mon, 15 Aug 2022 09:15:51 +0000

In this article, we are going to look at a few common array operations in their mutable and non-mutable versions. Add, Delete, and Replace are the most common operations, and we will take a look at those operations.

In this article, we will exploit methods like array.map() to produce non-mutating versions. This is not an exhaustive listing, we will keep ourselves limited to basic manipulations.

I will assign array to const to show non-mutating aspect and let as mutating.

Though you can always mutate array assign to const but I like to it that way keep for developer indication.

Add: Mutating

The easiest way to add an item to array is array.push() and array.unshift().

// Note: using `let` here to indicate that this array will be mutated.

let array = [1, 2, 3, 4, 5];  
array.push(6); // [1, 2, 3, 4, 5, 6];  
array.unshift(10);// [10, 1, 2, 3, 4, 5, 6];

array.push() adds an item to the end and array.unshift() adds an item to the front of the array.

Add: Non-Mutating

There are two ways to do so array.concat() and …array spread operator.

// Note use `const` to indicate that this will not be mutated  
// concat
const array1 = [1, 2, 3, 4, 5];  
const array2 = array.concat(6);  // [1, 2, 3, 4, 5, 6];
// spread
const array3 = [...array1, 6]; // [1, 2, 3, 4, 5, 6];  
const array4 = [10, ...array1]; // [10, 1, 2, 3, 4, 5];

array1.concat(item1, item2, …) the concat method will merge all items from array1 and items passed as params and create a new array with them. While the … spread operator will essentially take all items out from array and place them in a new array context.

Remove: Mutating

There are two methods array.pop() and array.shift()

let array = [1, 2, 3, 4, 5];  
array.pop();  // [1, 2, 3, 4] > delete from end and return deleted item  
array.shift();  // [2, 3, 4]  > delete from front and return deleted item

array.pop() delete an item from the end and return deleted item. array.shift() delete an item from the front and return deleted item.

There is one important method to manipulate array i.e array.splice(). It mutates the array. splice() takes 2 important params, first being the starting index and second being the number of items to be removed. splice will remove items from array directly. for eg. splice(0, 2) will remove two items starting from index 0.

let array = [1, 2, 3, 4, 5];  
array.splice(0, 2); // [3, 4, 5];

Remove: Non-Mutating

The removing or any type of filtering is done by array.filter(), the filter() is among the coolest non-mutating method on the array. It takes a function that is called over each item in the array during that it has to do some filtering where if it returns true then the item will be included in new array and return false if items has to be thrown away.

const array1 = [1, 2, 3, 4, 5];  
const array2 = array1.filter((item) => item !== 5);   
// will filter any item i.e not equal to 5

Another very important method is array.slice(). Remember this is not array.splice(), they are different array.slice() will return new array i.e its is not mutating. It is very similar to slice for how its is used. It takes 2 important params, the first is starting index where copying should begin and second is end index where copy should end, it is not inclusive. It copy items between those index and returned them in a new array.

const array1 = [1, 2, 3, 4, 5];  
const array2 = array1.slice(0, 2); // [1,2];  
// if no args provided ti  will copy the whole array

Replace: Mutating

Array splice method is very interesting method because not only it can remove items but also add items to the array directly. The third parameters and onwards basically mean items that need to be inserted to array.

let array = [1, 2, 3, 4, 5];  
array.splice(2, 1, 10, 12); // [1, 2, 10, 12, 4, 5];

splice will remove 1 item starting index 2 and then insert 10 and 12 from the same position.

Replace | Transform: Non-mutating

The mighty method array.map() is very useful as it can transform array. Map method takes a function that is called on each item of the array and it must return an item that has to be put into the new array.



const array1 = [1, 2, 3, 4, 5];  
const array2 = array1.map((item) => {  
  if (item === 3) {  
    return 10;    
  }  
  return item;  
}); // [1, 2, 10, 4, 5];

// Map as transformation  
const mutilpliedByTwo = array1.map((item) => item \* 2);   
// [2, 4, 6, 8, 10];

CSS: Isolation vs Abstraction

Late Night Coder — Mon, 15 Aug 2022 09:12:49 +0000

Total Isolation

This comes as the result of the global nature of CSS where things are leaky and thus component-based UI architectures find it difficult as cascading and global CSS causes leaks in styles across the components. For example:

<!-- Heading1: Component file; applies styles inside itself. -->
<h1>Some heading</h1>
<style>
    h1 {
        font-size: 32px;
        font-weight: bold;
    }
</style>
<!-- 
 The style inside of Heading1.component.js leaks out to global affecting
 all the h1 tags.
-->

Due to the global nature of CSS, h1 which may be inside the Heading1 component has its own style but due to the global scope of CSS, it leaks out to all h1 on the page. The component style is not scoped to the component itself thus giving birth to solutions like BEM, CSS-in-JS, and CSS Modules, which try to solve this problem by applying styles to scoped class names. For example:

<!-- With BEM Naming convention makes sure that styles are scoped -->
<div class="card">
    <div class="card__title">Title</div>
    <div class="card_actions card__actions--hover">actions</div>
</div>
<style>
    .card {
        width: 100%;
        padding: 16px 24px;
        display: flex;
        flex-direction: column;
    }
    .card__title {
        font-size: 16px;
        font-weight: 600;
    }
    .card_actions {
        display: none;
    }
    .card_actions--hover:hover {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
    }
</style>

Other solutions like CSS-in-JS solve issues by creating a unique class name, you can read more about it here in “Why CSS-in-JS?” With any such solution made for isolation, there are repetitions of rules seen that do add to size but it also ensures that scope styles and prevents unintentional leaking and we should be assured that modern bundlers are smart and will only ship styles required by the page. Be mindful that CSS growth does happen in a total isolation approach.

Total abstraction

This embraces the global nature of CSS by creating generic, global, and reusable classes called utility or atomic classes. The solutions like tailwind focus on using utility classes for styling and has their own build system for mitigating bundling and order issues. Each utility class remains in code forever and the smart bundlers shake off unused utility classes at build time, this makes sure the rise of CSS in the code is slow as their are utility classes covering most of the declarations and making it reusable so the growth of CSS is slow. For example:

<div class="w-full py-4 px-6 flex flex-col">
    <div class="text-base font-semibold">Title</div>
    <div class="hidden hover:flex hover:justify-end">actions</div>
</div>
<style>
    <!-- utility classes -->
    .w-full { width: 100%; }
    .px-6 { padding-left: 24px; padding-right: 24px; }
    .py-4 { padding-top: 16px; padding-bottom: 16px; }
    .flex { display: flex; }
    .flex-col { flex-direction: column; }
    .text-base { font-size: 16px; }
    .font-semibold { font-weight: 600; }
    .hidden { display: none; }
    <!-- hover:flex is written as .hover\:flex -->
    .hover\:flex:hover { display: flex; }
    .hover\:justify-content { justify-content: flex-end; }
</style>

The above example shows how utility classes are small declarations of a rule that can be composed in an infinite number of ways to achieve many different styles without causing repetitions.

Middle ground

The hard truth is that there is no middle ground, these two are on the opposite sides of the same axis and you cannot choose a middle ground for them. Even if you try your best you will not be able to achieve a middle ground; as the team grows there is always some dev there that will break your well-defined architecture and cause a leak or your CSS will grow or specificity wars will.

We should be hopeful though as efforts are being made to have a middle ground, one such effort is by stylex a Facebook which they presented in React conf and I’m waiting for it to be made open-source to enjoy best of the both worlds.

Why CSS-in-JS?

Late Night Coder — Mon, 15 Aug 2022 09:10:55 +0000

Global and cascading nature of CSS

CSS is global by design! It is that way because we want to bring consistency across the website.

html {
    font-family: Roboto, sans-serif;
}

By writing the above code every text on your website has a font-family set. And this is by design instead of setting font-family on each item.

This very nature of being global and cascading creates problems when styles in parents cascade into children. The problem doesn’t end there the devil called “specificity” in CSS is always there to bring you surprises.

<style>
    #wrapper {
        background-color: green;
    }

    .background-red {
        background-color: red;
    }

    .background-orange {
        background-color: orange;
    }

</style>
// case 1
<div id="wrapper" class="background-orange">
    Box 1
</div>
// case 2
<div  class="background-orange background-red">
    Box 2
</div>

As the id has higher specificity over class the background color is green.
As the occurrence of background-orange is later in the style so it will override even though in class attribute background-red is used later.

Scoping of CSS per component should solve the global issue of CSS. The scoping CSS problem is solved differently by different technologies.

Web components provide scoping CSS into shadow dom which doesn’t leak anything outside and also doesn’t let other things affect it i.e scoping it into the component and closing at the same time. Frameworks like Vue also have scoped style solutions in place. The web components provide a very strict boundary and sometimes we don’t need such a strict boundary.

The architecture naming of CSS classes using BEM i.e .block_element--modifier tries to solve the issue by following naming conventions but this isn’t absolute there are ways in which scope leaks can happen.

A framework like Vue and Angular has its own way of scoping styles to elements/components built in.

What CSS-in-JS does do for you?

It scopes all the styles into a unique class-name thereby solving the problem of global scope. Now each item has its CSS scoped to a unique class-name.

import { css } from "css-in-js";

function Flex(props) {
    return (
        <div className={css({ display: "flex" })}>
            {props.children}
        </div>
    );
}

In the above code:

The css function from the CSS-in-js lib takes in style-object
A style-object is nothing but a way of writing CSS with javascript objects.

.text-center 
// following is how css is declartion is written in a .css file -- 1
{
    text-align: center;
}

// the same object as style-object in javascript is written as -- 2
{
    textAlign: 'center' // split on changed casing then joined by "-" and lowercased
}

The style-object is converted into a valid CSS declaration and is scoped to a unique class-name and css function then returns that unique class-name.

const uniqClassName = css({ textAlign: 'center' });
// is converted as 
// .css-123 { text-align: center; }

console.log(css({ textAlign: 'center' });  // css-123

The class-name is cached for the given style-object and whenever the same style is passed { textAlign: 'center' } to css function it will always yield css-123 , this is an optimization step.
On the problem of specificity, it cannot solve for case-1 because using id for styling indicates poor CSS architecture. For the later case-2 it will solve it as:

css([ 
    { display: 'flex', backgroundColor: 'red' }, 
    // conflicting declarations backgroundColor
    { flexDirection: 'column', backgroundColor: 'orange' } 
])

// styles objects in [] are merged and thus resultant style object is

/*

    {
        display: 'flex',
        flexDirection: 'column',
        backgroundColor: 'orange'
    }

*/

The above solves the specificity by applying the last declaration overriding others that came before it.

Problems with CSS-in-JS

Repetition of styles. Even though the two style-object vary by a very small bit there is an entirely new class-name for two.

css({ display: 'flex', flexDirection: 'row' })
// .css-1234 {
//   display: flex; // <-- same declaration for display
//   flex-direction: row;         
// }
css({ display: 'flex', flexDirection: 'column' })
// .css-9876 {
//   display: flex; // <-- same declaration for display
//   flex-direction: column;         
// }

If you notice, the two declarations vary only in values of flexDirection values but they will have entire different class-name, this is not a problem as it is by design to have all styles scoped uniquely under a unique class-name but the fact that the property display is repeated means something better can be done.

We generate a unique class-name for a style-object and as the same structured style-object always returns the same class-name.

const styleObject1 = {
    textAlign: 'center'
};

const styleObject2 = {
    textAlign: 'center'
};

styleObject1 === styleObject2 // false: object ref is diff

css(styleObject1) === css(styleObject2) // true: class-name is same

This can be only achieved by when there is a phase of stringifying the style object followed by hashing to generate a unique name.

JSON.stringify(styleObject1) === JSON.stringify(styleObject2); 
// true: same stringified object value for the same structured object
// now hashing will return the same output as the input 
// JSON.stringify(styleObject1), JSON.stringify(styleObject2) are same

Depending on the logic of stringifying the object the complexity & time may vary.

const object1 = { a: 1, b: 2 }; 
const object2 = { b: 2, a: 1 }; // <-- looks same but structerly different

JSON.stringify(object1) === JSON.stringify(object2) // false: diff structure

And so, depending on the logic of stringifying algorithm we can make object1 and object2 string representations look the same. It may or may not be a concern for lib to output the same class-name for same looking object and that will require some work! Most of the time it won’t be a concern as repeating a few class-name doesn’t matter much, but do note that there is always a hashing step involved usually these are quick and insecure hashing algorithms to optimize for speed.

When using React with CSS-in-JS there is a cost of injecting styles on every render along with the phase of stringifying to generate a class-name that will happen on every render. The new libraries like stitches and vanilla-extract-css are looking promising by making everything build time process so this is not going to be a problem in future. A framework like tailwind with atomic-css is something that is missing in CSS-in-JS world. I’m hopeful for stylex a Facebook internal atomic CSS-in-JS to provide the best of both world.
Love for preprocessors and pure CSS is not going to die that easily and it shouldn’t for the fact that CSS-in-JS is not needed for every website or it is just hard for UI-dev to wrap their minds around CSS-in-JS or view-encapsulation may just not be a problem for your project or you CSS architecture (or even using BEM naming convention) may just not have a need for it.
Also, CSS itself is evolving and I'm hopeful for a future where scoping will be built into CSS.

Conclusion

The CSS-in-JS library solves problems of global nature of CSS and of specificity by providing scoping in a unique class-name. It has some cost attached to it i.e run-time which is being solved by order libs vanilla-extract-css. I'm a big fan of tailwind and I honestly believe it is enough for your project. If you also need dynamic styles then CSS-in-JS is better over tailwind, though there are solutions like twind which provide a flavor of tailwind with the CSS-in-JS approach they do have all cons of any CSS-in-
JS libraries. I'm very excited about styles by Facebook and waiting for the day it will be open-sourced or CSS itself evolves to me provide scoping and be more modular, until that day comes I'm betting on CSS-in-JS with stitches and vanilla-extract-css.

Build your own emotion like CSS-in-JS library.

Late Night Coder — Mon, 15 Aug 2022 09:06:00 +0000

In this blog post, we will try to understand CSS-in-JS by creating our own version of emotion.js. Emotion is one of the most popular CSS-in-JS solutions out there.

There are some brilliant minds working on emotion, we aren't going to recreate emotion with all its complexities and optimization just that we are trying to develop a better understanding of such CSS-in-JS libraries by building one on our own.

Let us start by exploring API and see what emotion does for us.

So the emotion package exports a function called css which takes style-object as an argument and returns a unique className which is used by ourdiv to apply some style.

Another overload signature css function can also take an array of style-object as an argument. For example:

css(
  [  // <-- array of 
    { padding: '32px', backgrounColor: 'orange' }, // <-- style object 1
    { fontSize: '24px', borderRadius: '4px' } // <-- style object 2
  ]
)

In the DOM css function injects a <style> in the document.head where it keeps the compiled CSS created from calling css function on the style-object.

Summarising emotion css function:

css function takes an object or array of objects as an argument.
These objects are called style-object which is a way of writing CSS with JavaScript objects.
It returns a unique className for the given style-object.
It compiles the style-object into valid CSS and injects a style tag containing our compiled CSS into the document.head

The `css` Function

Let's break it down is a series of programmatic steps:

Convert to a valid style-object.
Generate a unique className for the style-object.
Parse the style-object to generate valid CSS styles and attach them to className.
Inject the parsed CSS into a stylesheet in DOM.

Following our programmatic steps our css function should look like:

function css(styles) {

  // 1. convert to valid style-object
  const _style_object_ = getValidStyleObject(styles);

  // 2. generate unique className
  const className = getClassName(_style_object_);

  // 3. Parse the style-object to generate valid CSS styles and attach them to className
  const CSS = parseStyles(_styles_object_, className);

  // 4. Create or update the stylesheet in DOM
  injectStyles(CSS);

  // return className to be applied on element
  return className;
}```



### Step 1: Convert to a valid  `style-object`

The `css` function can accept a `style-object` or an array of `style-object`. In the case of the array of `style-object` we must merge those to generate a single style object.



```js
function getValidStyleObject(styles) {
  let style_object = styles;

  if (Array.isArray(styles)) {
    style_object = merge(styles);
  }

  return style_object;
}

function merge(styles) {
  // (*) shallow merge
  return styles.reduce((acc, style) => Object.assign(acc, style), {}); 
}

It should be noted that this is a shallow merge which will simply replace the properties of the former one with a later one, for the nested properties simple replacement may cause an issue so we out for deep-merge if required.

Step 2: Generate a unique className for the `style-object`

After step 1 we have received a valid style-object and now we can process this object to generate unique className for it.

Generating a unique className is required makes sure that there are no naming conflicts anywhere in the application;
Unique className eliminates the need for any naming conventions like BEM, which makes the life of the dev easier.
For generating names we should make sure that we always come up with the same name for the same structured style object.

const styleObject1 = {
  fontSize: '16px',
  fontWeight: 600
};

const styleObject2 = {
  fontSize: '16px',
  fontWeight: 600
};

styleObject1 === styleObject2; // false: reference is different
getClassName(styleObject) === getClassName(styleObject2); // true: Pure and Idempotent nature

For maintaining Pure and Idempotent nature of getClassName function we will hash style-object so that it always returns the same output className for the same structured style-object. The hashing function needs input to be a string so we need to convert our style-object into a string. I will simply use JSON.stringify for our case. But there is a catch see below.

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 2, a: 1 };

obj1 == obj2; // false: diff references

// an ideal stringifying function
stringify(obj1) === stringify(obj2) // true: '{ "a": 1, "b": 2 }'

// our JSON.stringify 
JSON.strinfigy(obj1) === JSON.stringify(obj2) // false
// '{ "a": 1, "b": 2 }' === '{ "b": 2, "a": 1 }' // false

JSON.stringify is not an ideal stringifying utility as for same looking object it gives different string output. So If we plan to use JSON.stringify our hashes will also vary.

// it is a cache map of "serialized-style-object" to "hashed-style-object"
const style_classname_cache = {};

function getClassName(styleObject) {
  const stringified = stringify(styleObject);

  // pick the cached className to optimize and skip hashing every time
  let className = style_classname_cache[stringified];

  // if there is not an entry for this stringified style means it is new
  // so generate a hashed className and register and entry of style

  if (!className) {

    // use any quick hashing algorithm
    // example: https://gist.github.com/jlevy/c246006675becc446360a798e2b2d781

    const hashed = hash(stringified);
    // prefix some string to indicate it is generated from lib
    // it also makes sure that className is valid
    const _class_name_ = `css-${hashed}`;

    // hashing is costly so make an entry for the generated className
    style_classname_cache[stringified] = _class_name_;

    className = style_classname_cache[stringified];
  }

  return className;
}

Now let's proceed to next step where we will parse the style-object to generate CSS string.

// it is a map of "stringified-style-object" to "hashed-classname"
const style_classname_cache = {};

// inside css function
// ...
const className = getClassName(....);

let CSS = classname_css_cache[className];

if (!CSS) {
  CSS = parseStyles(_style_object_, className); // <-- Step 3
  classname_css_cache[classname] = CSS;
}

Step 3: Parse the `style-object` to generate valid CSS styles and attach them to className

This is the toughest part where we process the style-object and generate valid CSS rule declations from them. Before we proceed let's take an example:

  // style-object
  const styles = { 
    width: '600px',
    fontSize: '16px', // style-rule 1
    fontWeight: 600, // style-rule 2,
    color: 'red',
    '&:hover, &:active': {
        color: 'green',
    },
    '&[data-type="checkbox"]': {
      border: '1px solid black'
    },
    '@media(max-width: 1200px)': {
       width: '200px'
    }
   };

  css(styles)

  // compiled CSS from `style-object`
  .css-123 { 
    font-size: 16px;
    font-weight: 600px;
  }

  // ! NOTE !

  // 1) .css-123 is selector name or class-name here
  // 2) { and } marks style blocks/bound for this selector, each 
  //      block need to be parsed
  // 3) font-size: 16px is processed CSS for`fontSize: '16px'`
  // 4) `&:hover, &:active' are two blocks ideally joined by a `,`
  //      i.e '&:hover' and '&:active'
  // 5)  '&:hover' block is read as `css-123:hover` where
  //      `&` is replaced by current selector name
  // 6) `&[data-type="checkbox"]` attributes based styling is also possible
  // 7) @ rules are specific rule ex: @media screen size rules 
  //      so it should be processed early
  // 8) each nested style (ex: &:hover) need to be parsed 
  //      i.e recursive calling

From the above-gathered notes, we can write our parseStyles as

function parseStyles(style_object, selector) {
  // This collects `@import` rules  which are independent of any selector
  let outer = "";

  // This is for block rules collected
  let blocks = "";
  2;

  // This is for the currently processed style-rule
  let current = "";

  // each property of style_object can be a rule (3)
  // or a nested styling 7, 8
  for (const key in style_object) {
    const value = style_object[key];

    // @ rules are specific and may be further nested
    // @media rules are essentially redefining styles on-screen breakpoints
    // so they need to be processed first
    const isAtRule = key[0] === "@";

    if (isAtRule) {
      // There are 4 main at-rules
      // 1. @import
      // 2. @font-face
      // 3. @keyframe
      // 4. @media

      const isImportRule = key[1] === "i";
      const isFontFaceRule = key[1] === "f";
      const isKeyframeRule = key[1] === "k";

      if (isImportRule) {
        // import is an outer rule declaration
        outer += key + " " + value; // @import nav.css
      } else if (isFontFaceRule) {
        // font face rules are global block rules but don't need a bound selector
        blocks += parseStyles(value, key);
      } else if (isKeyframeRule) {
        // keyframe rule are processed differently by our `css` function
        // which we should see implementation at a later point
        blocks += key + "{" + parseStyles(value, "") + "}";
      } else {
        // @media rules are essentially redefining CSS on breakpoints
        // they are nested rules and are bound to selector
        blocks += key + "{" + parseStyles(value, selector) + "}";
      }
    }
    // beside the At-Rules there are other nested rules
    // 4, 5, 6
    else if (typeof value === "object") {
      // the nested rule can be simple as "&:hover"
      // or a group of selectors like "&:hover, &:active" or
      // "&:hover .wrapper"
      // "&:hover [data-toggled]"
      // many such complex selector we will have to break them into simple selectors
      // "&:active, &:hover" should be simplified to "&:hover" and "&:active"
      // finally removing self-references (&) with class-name(root-binding `selector`)
      const selectors = selector
        ? // replace multiple selectors
          selector.replace(/([^,])+/g, (_seletr) => {
            // check the key for '&:hover' like

            return key.replace(/(^:.*)|([^,])+/g, (v) => {
              // replace self-references '&' with '_seletr'

              if (/&/.test(v)) return v.replace(/&/g, _seletr);

              return _seletr ? _seletr + " " + v : v;
            });
          })
        : key;
      // each of these nested selectors create their own blocks
      // &:hover {} has its own block
      blocks += parseStyles(value, selectors);
    }
    // now that we have dealt with object `value`
    // it means we are a simple style-rules (3)
    // style-rule values should not be undefined or null
    else if (value !== undefined) {
      // in JavaScript object keys are camelCased by default
      // i.e "textAlign" but it is not a valid CSS property
      // so we should convert it to valid CSS-property i.e "text-align"

      // Note: the key can be a CSS variable that starts from "--"
      // which need to remain as it is as they will be referred by value in code somewhere.
      const isVariable = key.startsWith("--")

      // prop value as per CSS "text-align" not "textAlign"
      const cssProp = isVariable
        ? key
        : key.replace(/[A-Z]/g, "-$&").toLowerCase();

      // css prop is written as "<prop>:<value>;"
      current += cssProp + ":" + value + ";";
    }
  }

  return (
    // outer are independent rules
    // and it is most likely to be the @import rule so it goes first
    outer +
    // if there are any current rules (style-rule)(3)
    // attach them to selector-block if any else attach them there
    (selector && current ? selector + "{" + current + "}" : current) +
    // all block-level CSS goes next
    blocks
  );
}

At this point, we have compiled CSS from style_object and all that is left is to inject it into the DOM.

Step 4: Inject the parsed CSS into a stylesheet in DOM

For this step, we will create a <style> tag using document.createElement and inside of that style tag, we will append our styles in thetextNode.

Create a <style id="css-in-js"> element if doesn't already exist;
Get the text-node i.e stylesheet.firstChild and append CSS string from parseStyles in it.

// in case the process isn't running in a browser instance 
// so we fake stylesheet-text-node behavior 
const fake_sheet = {
  data: ''
};

// keep track of all styles inserted so that we don't insert the same styles again
const inserted_styles_cache = {};

function injectStyles(css_string) {
  // create and get the style-tag; return the text node directly
  const stylesheet = getStyleSheet();

  // if already inserted style in the sheet we might ignore this call
  const hasInsertedInSheet = inserted_styles_cache[css_string];
  // these styles need to be inserted
  if (!hasInsertedInSheet) {
    stylesheet.data += css_string; // <-- inserted style in sheet
    inserted_styles_cache[css_string] = true; // <-- mark the insertion
  }
}

function  getStyleSheet() {
  // we aren't in the browser env so our fake_sheet will work
  if (typeof window === "undefined") {
      return fake_sheet;
  }

  const style = document.head.querySelector('#css-in-js');

  if (style) {
    return style.firstChild; // <-- text-node containing styles
  }

  // style doesn't already exist create a style-element
  const styleTag = document.createElement('style');

  styleTag.setAttribute('id', 'css-in-js');
  styleTag.innerHTML = ' ';

  document.head.appendChild(styleTag);

  return styleTag.firstChild; // <-- text-node containing styles
}

🎉*** Congratulations with that in place we have created our own CSS-in-JS library.*** 🎉

As for the keyframes, we can use our css function but with little modifications.
Let's see the API and how its use first.

const growAnimationName = keyframes({ // <-- argument is called keyframe-style-object
  from: { transform: 'scale(1)' }, 
  to: { transform: 'scale(2)' },
}); // <-- call to keyframe with style-object returns animation-name. eg: (css-987)

// used as
css({  width: '100px', height: '100px',  animation: `${growAnimationName} 2s ease infinite` });

// compiled as
//  @keyframe css-987 {  
//     from: { transform: scale(1) };
//     to: { transform: scale(2) };
//  }

Keyframes have a similar API where it takes a keyframe-style-object.
Keyframes return to the animation name; they are not bound to a class/selector scope.
The css function only needs an animation name to apply styling which means keyframes need not be in css function style object definition.
Keyframes are global where keyframe-style-object is stringified and hashed to generate animation name same as in the case generating className from any style-object.
These names are the only scope of keyframes it is global.
If you note carefully we never write the @keyframes keyword in the keyframes function call so that is something added internally along with the animation-name.
This conversion from a keyframe-style-object to style-object can look something like:

// keyframe-style-object
{   
  from: { transform: 'scale(1)' }, 
  to: { transform: 'scale(2)' }
}

// converted style-object
{

}```



Adding keyframes support to `css` function can be done simply by telling `css` function to treat this `css` call as a `keyframe` function call and do the above conversion before parsing the `style-object`.



```js
// adding one more parameter called `options` 
// this can be used to change the behavior of `css` function and
// it should be an optional parameter.
// changing the name to _css_ to indicate this is not exported and passing
// different values of options can yield different variations of _css_ functions
// to suit different requirements example keyframes

function _css_(styles, options) {
  // ...same no change...

  // in the parsing of the style function call

  parseStyles(
    // style-object
    options.hasKeyframes 
      ? 
        // convertion to valid style-object from a keyframe-style-object
        { [`@keyframe ${className}`]: _style_object_ }
     : 
        _style_object_,
    // selector
    className
  )

  // ...same no change...
}

// final exported function from library
export const css = (style_object) => _css_(style_object, {});
export const keyframes = (style_object) => _css_(style_object, { hasKeyframes: true });

With keyframes in place, we have successfully coded our CSS-in-JS library. So as promised we have created our emotion like library; Note that emotion is way more complex and handles many different edge cases with far better optimizations.

Summary of `css` function

css function takes style-object or an array of style-object.
It stringifies this style-object and generates a unique hashed representational string for it, eg:css-123.
For the keyframe we convert keyframe-style-object to valid a style-object representation of @keyframe keyword.
These styles are then parsed. Each property in style-object may be on the of the following At(@) rules, &:hoveri.e multiple nested selector rules or fontSize: '16px' simple CSS properties. Each is dealt with differently as some can be block-scoped while others are global. Self-references using & are also handled here. After the correct parsing, we generate a valid CSS string representation of our style-object.
This CSS string is added into a stylesheet in DOM and appended to document.head.

And now as for naming this library, I will like to call it - Styler

Proxy and Reflect in Javascript | Part 2

Late Night Coder — Tue, 08 Feb 2022 16:29:54 +0000

In the previous post, we discussed Proxy in detail. In this post, we will build upon that knowledge and learn some more.

Reflect helps in the creation of Proxy and somewhat allows us to play with internal methods [[Get]] and [[Set]]. Below are some reflect methods:

Let us look at a code example:

let user = {};

Relect.set(user, 'name', 'Aniket Jha'); // [[Set]]

console.log(user.name); // Aniket Jha

Reflect allow us to call operators as functions also there is a reflect method for any proxy traps having the same name and arguments.

let user = {};

user = new Proxy(user, {
  get(target, prop, receiver) {
    console.log(`GET Trap > Target: ${target} Prop ${prop} Receiver ${receiver}`);
    return Reflect.get(target, prop, receiver);
  },
  set(target, prop, value, receiver) {
    console.log(`SET Trap > Target ${traget} Prop ${prop} Value ${value} Receiver ${receiver}`);
    return Relect.set(target, prop, value, receiver);
  },
});

The Reflect methods work nicely with proxy to ensure that traps output and what we expected is the same. Following is an example:

let user = {
  _name: 'User',
  get name() {
    return this._name;
  }
};
let proxyUserObj = new Proxy(user, {
  get(target, prop) {
    return target[prop]; // Note we didn't used reflect here.
  },
});
let admin = {
  __proto__: proxyUserObj,
  _name: 'Admin'
};
console.log(admin.name); // Admin or User 🤔 
// admin.name ?
// `name` is not found on admin obj
// so it will go up in prototype chain
// Note prototype chain is proxyfied object `proxyUserObj`
// it finds `name` property(getter property) on `proxyUserObj`
// resolving for name property trigger proxy `get trap`
// the arguments that are passed to proxy get trap
// target => user
// prop => 'name'
// as trap return traget[prop] i.e user['name'] so `this === user`
// and returned value is `User` 😱 which was not expected
// to prevent it from happening `receiver` argument is requried
// and we can leave it to `Reflect.get(target, props, receiver)` to
// correctly resolve properties for us.

We saw an example of how Reflect is useful for dealing with this Proxy gotcha. I always writereturn Reflect.get(…arguments); 😎. Reflect is awesome to enhance proxy and use it correctly. More on proxy on MDN.