Skip to content

Instantly share code, notes, and snippets.

@adrianbonnici

adrianbonnici/ama-resources.md

Created December 14, 2021 01:01
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save adrianbonnici/d9c4aa681d9db6c3dfa952bedcf4f15c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save adrianbonnici/d9c4aa681d9db6c3dfa952bedcf4f15c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Adrian Bonnici created this gist Dec 14, 2021.
    155 changes: 155 additions & 0 deletions ama-resources.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,155 @@
    # Learning Notes
    - 📖 [Things I Don’t Know as of 2018 — Overreacted](https://overreacted.io/things-i-dont-know-as-of-2018/)
    - 📖 [The “Bug-O” Notation — Overreacted](https://overreacted.io/the-bug-o-notation/)
    - 📖 [The Elements of UI Engineering — Overreacted](https://overreacted.io/the-elements-of-ui-engineering/)
    - 📖 [Fix Like No One’s Watching — Overreacted](https://overreacted.io/fix-like-no-ones-watching/)
    - 📖 [Coping with Feedback — Overreacted](https://overreacted.io/coping-with-feedback/)
    - 📖 [Name It, and They Will Come — Overreacted](https://overreacted.io/name-it-and-they-will-come/)
    - 📖 [My Decade in Review — Overreacted](https://overreacted.io/my-decade-in-review/)
    - 📖 [Goodbye, Clean Code — Overreacted](https://overreacted.io/goodbye-clean-code/)
    - 📖 [The WET Codebase — Overreacted](https://overreacted.io/the-wet-codebase/)
    - 📖 [Increment: Software Architecture](https://increment.com/software-architecture/)
    - 📖 [Increment: APIs](https://increment.com/apis/)
    - 📖 [The EverestEngineering Manifesto. We want our company… | by Sebastian Luehr | EverestEngineering | Medium](https://medium.com/everestengineering/manifesto-63d477287dc6)
    - 📖 [Software Engineering at Google](https://docs.google.com/document/d/1F8sV0geesBwOc6LouJi9lX-4UCtoFk23jhalqPHdhVk/edit#heading=h.xu2gexukxzv6)
    - 📖 [Turn the Ship Around!](https://www.audible.com/pd/Turn-the-Ship-Around-Audiobook/B00CQ9O36A)
    - 📖 [1x Engineer](https://1x.engineer/)
    - 📖 [GitHub - jbranchaud/til: Today I Learned](https://github.com/jbranchaud/til)

    # Browser
    * 📖 [Inside look at modern web browser (part 1)  |  Web  |  Google Developers](https://developers.google.com/web/updates/2018/09/inside-browser-part1) (Part 1 - 4)
    * 📖 [Processes and Threads - Computer Science Wiki](https://computersciencewiki.org/index.php/Processes_and_Threads)
    * 📖 [web.dev/learn](https://web.dev/learn/)

    ## 1. Loading Performance
    - 📖 [User-centric performance metrics](https://web.dev/user-centric-performance-metrics/)
    - 📖 [Understanding Low Bandwidth and High Latency  |  Web Fundamentals](https://developers.google.com/web/fundamentals/performance/poor-connectivity)
    - 📖 [Optimizing Content Efficiency  |  Web Fundamentals  |  Google Developers](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency)
    - 📖 [Reduce JavaScript Payloads with Tree Shaking  |  Web Fundamentals](https://developers.google.com/web/fundamentals/performance/optimizing-javascript/tree-shaking)
    - 📖 [The Offline Cookbook  |  Web Fundamentals  |  Google Developers](https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook)
    - 📖 [web.dev](https://web.dev/fast/) (Lazy Loading Resources)
    - 📖 [Apply instant loading with the PRPL pattern](https://web.dev/apply-instant-loading-with-prpl/)
    - 📖 [Resource Prioritization – Getting the Browser to Help You](https://developers.google.com/web/fundamentals/performance/resource-prioritization)
    - 📖 [Introduction  |  Web Fundamentals  |  Google Developers](https://developers.google.com/web/fundamentals/performance/webpack)
    - 📖 [It’s time to lazy-load offscreen iframes!](https://web.dev/iframe-lazy-loading/)
    - 📖 [Choose the best build tool for your project with tooling.report](https://web.dev/introducing-tooling-report/)
    - 📖 [Prevent layout shifting and flashes of invisibile text (FOIT) by preloading optional fonts](https://web.dev/preload-optional-fonts/)
    - 📖 [Native image lazy-loading for the web](https://web.dev/native-lazy-loading/)
    - 📖 [Extract critical CSS](https://web.dev/extract-critical-css/)

    ### Performance Profile Report
    * 📖 [Summary of Optimizations for Coupang (Lotus)](https://docs.google.com/spreadsheets/d/1uC8NtTiJlDt2opuxIEkkpc93tHR1gBHmzOR-sCgAa3I/edit#gid=693925356)
    * 📖 [Analysing Runtime Performance](https://docs.google.com/presentation/d/11EKujUPGxuLExjXu1PRv9SkFkt6NhhjUKQcW2cxDTso/edit)

    ## 2. Render Performance
    - 📖 [Rendering Performance  |  Web Fundamentals  |  Google Developers](https://developers.google.com/web/fundamentals/performance/rendering)
    - 📖 [Layers, layers, layers… Be careful! | by Mariola Moreno González | MásMóvil Engineering | Medium](https://medium.com/masmovil-engineering/layers-layers-layers-be-careful-6838d59c07fa)
    - 📖 [content-visibility: the new CSS property that boosts your rendering performance](https://web.dev/content-visibility/)
    - 📖 [Optimize Largest Contentful Paint](https://web.dev/optimize-lcp/)
    - 📖 [Optimize First Input Delay](https://web.dev/optimize-fid/)
    - 📖 [Optimize Cumulative Layout Shift](https://web.dev/optimize-cls/)
    - 📖 [Monitor your web page’s total memory usage with measureMemory()](https://web.dev/monitor-total-page-memory-usage/)
    - 📖 [Fixing layout instability](https://web.dev/fixing-layout-instability/)
    - 📖 [Are long JavaScript tasks delaying your Time to Interactive?](https://web.dev/long-tasks-devtools/)
    - 📖 [What should you measure to improve performance?](https://web.dev/what-should-you-measure-to-improve-performance/)

    ## 3. Chrome DevTools
    - 📖 [Chrome DevTools  |  Google Developers](https://developers.google.com/web/tools/chrome-devtools)

    ## 4. V8 Engine
    - 📖 [Features · V8](https://v8.dev/features)
    - 📖 [Blog · V8](https://v8.dev/blog)

    ## 5. RAIL Model
    - 📖 [Measure performance with the RAIL model](https://web.dev/rail/)

    ## 6. Security
    - 📖 [Security](https://developers.google.com/web/fundamentals/security)
    - 📖 [Why you need “cross-origin isolated” for powerful features](https://web.dev/why-coop-coep/)
    - 📖 [Know your code health with the ReportingObserver API](https://web.dev/reporting-observer/)

    ## 7. DOM & CSS
    - 📖 [Cascade and inheritance - Learn web development | MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)
    - 📖 [Introduction to the DOM - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction)
    - 📖 [CSS Basic Box Model - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model)
    - 📖 [ResizeObserver: it’s like document.onresize for elements](https://web.dev/resize-observer/)

    # JavaScript
    - 📖 “Mental Models: Javascript” by Dan Abramov
    - 📖 [What Is JavaScript Made Of? — Overreacted](https://overreacted.io/what-is-javascript-made-of/)
    - 📖 [On let vs const — Overreacted](https://overreacted.io/on-let-vs-const/)
    - 📖 [Trampolines in JavaScript](https://raganwald.com/2013/03/28/trampolines-in-javascript.html)
    - 📖 [Meta programming - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Meta_programming)
    - 📖 [Proxy pattern - Wikipedia](https://en.wikipedia.org/wiki/Proxy_pattern#:~:text=In%20computer%20programming%2C%20the%20proxy,an%20interface%20to%20something%20else.)
    - 📖 [Proxy - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)
    - 📖 [GitHub - anvaka/set-vs-object: What is faster Set or Object?](https://github.com/anvaka/set-vs-object)
    - 📖 [javascript promises, the event loop, and the job queue - Stack Overflow](https://stackoverflow.com/questions/55676922/javascript-promises-the-event-loop-and-the-job-queue?rq=1)
    - 📖 [Understanding Event Loop, Call Stack, Event & Job Queue in Javascript](https://medium.com/@Rahulx1/understanding-event-loop-call-stack-event-job-queue-in-javascript-63dcd2c71ecd)
    - 📖 [Underscore.js | _.defer() - GeeksforGeeks](https://www.geeksforgeeks.org/underscore-js-_-defer/)
    - 📖 [Efficiently iterate on Javascript arrays](https://blog.kuzzle.io/efficiently-iterate-on-javascript-arrays)
    - 📖 [arrays - What is the difference between ( for… in ) and ( for… of ) statements in JavaScript? - Stack Overflow](https://stackoverflow.com/questions/29285897/what-is-the-difference-between-for-in-and-for-of-statements-in-jav#:~:text=Difference%20for..in%20and%20for,values%20of%20an%20iterable%20object.)
    - 📖 [Performance of Object.keys vs Object.values for getting the number of props of an object · GitHub](https://gist.github.com/flekschas/5aad97d1c2520db7af0a9623deec005f)
    - 📖 [Benchmark: isArray - MeasureThat.net](https://www.measurethat.net/Benchmarks/Show/2872/0/isarray)
    - 📖 [Monkey patching in JavaScript - Aurelio De Rosa blog](https://www.audero.it/blog/2016/12/05/monkey-patching-javascript/#:~:text=Monkey%20patching%20is%20a%20technique,that%20were%20missing%20in%20JavaScript.)
    - 📖 [JavaScript - Implicit Return | javascript Tutorial](https://riptutorial.com/javascript/example/17665/implicit-return)
    - 📖 [The shortest way to conditional insert properties into an object literal - DEV Community](https://dev.to/jfet97/the-shortest-way-to-conditional-insert-properties-into-an-object-literal-4ag7)
    - 📖 [AggregateError - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/AggregateError)
    - 📖 [Guide to Web Authentication](https://webauthn.guide/)

    ## 1. Code review tips

    This section is meant to serve as an example on how I personally keep track of feedback from various code reviews.

    ### Examples
    1. Wrap `console.log` or `throw new Error()` for development related error messages in a: `process.env.NODE_ENV !== ‘production’` condition.

    2. Alphabetise imports.

    3. You could use the following pattern so the reduce has a single return point:

    ```js
    const _fields = this.get('ticketFieldViews').reduce(
    (acc, fieldView) => {
    if (!fieldView.get('isDestroyed')) {
    ...
    }

    return acc;
    }
    )
    ```

    4. Optimisation: You should define a single callback function outside of the reduce instead of creating one for each field:

    ```js
    const isReactContainerViewEnabledCallback = () => false;
    ```

    5. You might want to move the declaration of `allowList` in the global space at the top of the file (as a constant) so JS does not have to reprocess it every time the setter is built.

    6. Those VOICE constants as well the array `[VOICE_HOLD, VOICE_INBOUND, VOICE_OUTBOUND]` should be defined at the global scope so we don't reprocess it every time:

    ```js
    const VOICE_ACTIVE_STATUSES = ['voice_hold', 'voice_inbound', 'voice_outbound'];
    ```

    7. No need to call `Object.prototype.hasOwnProperty.call()`, use the function available on the object instead:

    ```
    ticketTab && ticketTab.hasOwnProperty('omnitabData');
    ```

    8. Please move `Object.keys(eventChannelTypes)` outside of the reduce loop.

    9. Keep a collection intuitive and also applying memoization / lazy invoking to expensive regex computation.

    10. Put parameters with a default value at the end of the parameter list in a function’s parameters list.

    11. Add a `isDevelopment` flag to indicate which code to be run in development mode only.

    12. Here’s another clever trick (not that I’d particularly recommend using this one 😆)

    ```js
    const myArray = [1, 2, 3];
    const {length, [length - 1]: lastItem} = myArray;
    ```