maullerz

poweruser@bdx-cc-01:/rest/u/apps/sfk-apps-interactive$ cat /etc/nginx/sites-enabled/sfk*
server {
  listen 17100 default_server deferred;
  root /rest/u/apps/sfk-apps-interactive/current/public;
  access_log /var/log/nginx/sfk-apps-interactive-static-access.log;
  error_log /var/log/nginx/sfk-apps-interactive-errors.log;
  gzip on;
  gzip_comp_level 3;
  gzip_proxied expired no-cache no-store private auth;
  gzip_disable msie6;

maullerz

This is no longer needed as Emmet supports JSX - you just need to turn it all on. Did a quick tutorial: http://wesbos.com/emmet-react-jsx-sublime/

Thanks, @wesbos

Problem

• Using emmet in jsx files
• Emmet expands text when js autocomplete needed

maullerz

ESLint Rule - No .bind() or Arrow Functions in JSX Props

1. Standard

  <... onClick={this.handler.bind(this)} .../>

2. Arrow function

 <... onClick={() => this.handler()} .../>

maullerz

Код на React и TypeScript, который работает быстро

React

• Документация по React.memo: https://reactjs.org/docs/react-api.html#reactmemo
• Документация по useState: https://reactjs.org/docs/hooks-reference.html#usestate
• Исходный код ReactFiberBeginWork: https://github.com/facebook/react/blob/56e9feead0f91075ba0a4f725c9e4e343bca1c67/packages/react-reconciler/src/ReactFiberBeginWork.new.js#L3219
• React.js pure render performance anti-pattern: https://medium.com/@esamatti/react-js-pure-render-performance-anti-pattern-fb88c101332f
• Avoiding unnecessary renders with React context: https://frontarm.com/james-k-nelson/react-context-performance/
• The Secret parts of React New Context API: https://medium.com/@koba04/a-secret-parts-of-react-new-context-api-e9506a4578aa
• Why Did You Render: https://www.npmjs.com/package/@welldone-software/why-did-you-render

maullerz

Here’s how to make api.my-app.com available under my-app.com/api, using CloudFront or Cloudflare.

CloudFront

If both my-app.com and api.my-app.com are hosted in AWS, you can route requests to these instances using the CloudFront CDN.

Here’s what you’ll need to do:

1. Create a CloudFront distribution

maullerz

# Based on https://steveholgado.com/nginx-for-nextjs/

# - /var/cache/nginx sets a directory to store the cached assets
# - levels=1:2 sets up a two‑level directory hierarchy as file access speed can be reduced when too many files are in a single directory
# - keys_zone=STATIC:10m defines a shared memory zone for cache keys named “STATIC” and with a size limit of 10MB (which should be more than enough unless you have thousands of files)
# - inactive=7d is the time that items will remain cached without being accessed (7 days), after which they will be removed
# - use_temp_path=off tells NGINX to write files directly to the cache directory and avoid unnecessary copying of data to a temporary storage area first
proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=STATIC:10m inactive=7d use_temp_path=off;

upstream nextjs_upstream {

maullerz

Pure ESM package

The package that linked you here is now pure ESM. It cannot be require()'d from CommonJS.

This means you have the following choices:

1. Use ESM yourself. (preferred)
   Use import foo from 'foo' instead of const foo = require('foo') to import the package. You also need to put "type": "module" in your package.json and more. Follow the below guide.
2. If the package is used in an async context, you could use await import(…) from CommonJS instead of require(…).
3. Stay on the existing version of the package until you can move to ESM.