Let's make sure our Express app has the required base modules:
# within root of API
npm install --save express pg knex bcrypt
npm install --save-dev nodemon| import babel from '@babel/core' | |
| import styled from 'babel-plugin-styled-components' | |
| import fs from 'node:fs' | |
| export default { | |
| name: "styled-components", | |
| setup({ onLoad }) { | |
| const root = process.cwd(); | |
| onLoad({ filter: /\.[tj]sx$/ }, async (args) => { | |
| let code = await fs.promises.readFile(args.path, "utf8"); |
| // | |
| // MIT License | |
| // | |
| // Copyright (c) 2018 Ali Sharif | |
| // | |
| // Permission is hereby granted, free of charge, to any person obtaining a copy | |
| // of this software and associated documentation files (the "Software"), to deal | |
| // in the Software without restriction, including without limitation the rights | |
| // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | |
| // copies of the Software, and to permit persons to whom the Software is |
| { | |
| "extends": [ | |
| "airbnb", | |
| "prettier", | |
| "prettier/react" | |
| ], | |
| "parser": "babel-eslint", | |
| "parserOptions": { | |
| "ecmaVersion": 8, | |
| "ecmaFeatures": { |
| # Created by https://www.gitignore.io/api/node,bower,osx,linux,windows,dropbox,sass,less,grunt,sublimetext,code | |
| ### Node ### | |
| # Logs | |
| logs | |
| *.log | |
| npm-debug.log* | |
| # Runtime data |
All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.
Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.
elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent