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