Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save anton-karlovskiy/44d143bb7be5e03bf1db53d54f4874fa to your computer and use it in GitHub Desktop.
Save anton-karlovskiy/44d143bb7be5e03bf1db53d54f4874fa to your computer and use it in GitHub Desktop.

Re: selfies project written in CRA and PWA

@anton-karlovskiy
Copy link
Author

anton-karlovskiy commented Jul 13, 2020

I should have my own Linting set up to cover my JS code standard (originated from AirBnb JS style guide but has some deviations).

@anton-karlovskiy
Copy link
Author

I can improve the draft with the content from https://github.com/thedaviddias/Front-End-Checklist.

@anton-karlovskiy
Copy link
Author

anton-karlovskiy commented Jul 16, 2020

(Potential) Set up performance budgets.

I could use this package https://github.com/siddharthkp/bundlesize to threshold the bundlesize.

@anton-karlovskiy
Copy link
Author

Use consistent coding style.

AirBnb JS code standard vs. Google's one https://github.com/google/eslint-config-google

@anton-karlovskiy
Copy link
Author

@anton-karlovskiy
Copy link
Author

anton-karlovskiy commented Jul 22, 2020

@anton-karlovskiy
Copy link
Author

anton-karlovskiy commented Aug 31, 2020

State management between React Context API, Redux, React Query vs. SWR, Apollo Client.
Re: https://dev.to/g_abud/why-i-quit-redux-1knl

@anton-karlovskiy
Copy link
Author

Must utilize Design Systems and Storybook.

@anton-karlovskiy
Copy link
Author

anton-karlovskiy commented Sep 2, 2020

@anton-karlovskiy
Copy link
Author

anton-karlovskiy commented Sep 8, 2020

VS Code extensions

Primary

  • ESLint
  • Git lens
  • Import Cost
  • Code Spell Checker

Secondary

  • TODO Highlight
  • Bookmarks
  • Bracket pair colorizer
  • Auto Rename Tag
  • Path Intelligence

I should google at Instagram & dev.to and update it.

@anton-karlovskiy
Copy link
Author

anton-karlovskiy commented Sep 8, 2020

@anton-karlovskiy
Copy link
Author

I should write down component building approaches.

@anton-karlovskiy
Copy link
Author

I should add the PRPL pattern approach.

@anton-karlovskiy
Copy link
Author

Must set up Lighthouse CI using GitHub actions. https://web.dev/lighthouse-ci/

@anton-karlovskiy
Copy link
Author

anton-karlovskiy commented Feb 24, 2021

The general development approach (regardless of frontend or backend) must be based on Optimize for Deletion: Speed Up Development Without Adding Risk for striking a healthy balance of moving fast, delivering quickly, and not creating maintenance nightmares for ourselves.
To put it in one word, it's the combination of Single Source of Truth, KISS, Robust, and Single Responsibility design principles.

@anton-karlovskiy
Copy link
Author

Make local storage usage as small as possible for performance, user experience, and small persisted data (Re: Storage for the web & Storage for the web).

@anton-karlovskiy
Copy link
Author

Never use // eslint-disable-next-line react-hooks/exhaustive-deps.

@anton-karlovskiy
Copy link
Author

@anton-karlovskiy
Copy link
Author

@anton-karlovskiy
Copy link
Author

Should follow best practices in setting up fonts for browser compatibility, performance, and maintainability (Re: Using @font-face, Multiple font-weights, one @font-face query, Typography for Developers).

@anton-karlovskiy
Copy link
Author

anton-karlovskiy commented Apr 6, 2021

@anton-karlovskiy
Copy link
Author

Please don't import SVGs as JSX. It's the most expensive form of sprite sheet: costs a minimum of 3x more than other techniques, and hurts both runtime (rendering) performance and memory usage.
This bundle from a popular site is almost 50% SVG icons (250kb), and most are unused.

https://twitter.com/_developit/status/1382838799420514317

@anton-karlovskiy
Copy link
Author

@anton-karlovskiy
Copy link
Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment