Content :
Some questions about frontend development that might be in your next job interview. The questions were formulated by @mauvieira, a super senior fullstack developer
-
What are the strategies we can use to optimize the performance of web applications?
- CDNs, GraphQL (maybe) to reduce overfetching, improve backend performance, use SSR and/or SSG, lazy loading for loading assets only when it's needed, minimize and compress HTML, CSS and JS files, and optimize images by compressing and resizing them.
-
What are Web Vitals (LCP, FID, CLS)? And how are they applied in the real world?
As discussed here: brave/brave-browser#695
Thanks to the excellent answer by @Redsandro I was able to do this on Windows, which I'll document below because my future self will inevitably find this via Google a few years from now. Since it's using SQLite it should not be too hard to adapt for Macos and Linux.
Edit: this method still worked as of 9/3/2023. :)
Free to read online: exploringjs.com/impatient-js/
- The exercises now run as native ESM modules on Node.js. Previously, they were run via the
esm
package. - Material on new ES2021 features:
String.prototype.replaceAll()
Promise.any()
- Logical assignment operators
- Underscores (
_
) as separators in number literals and bigint literals
javascript:(function(){ | |
// Author: Ross Jacobs | |
// Purpose: Use as a browser bookmarklet to bulk delete notion pages in trash | |
// License: Apache 2.0 | |
async function getSpaceId() { | |
resp = await fetch("https://www.notion.so/api/v3/loadUserContent", {"credentials":"include","headers":{"accept":"*/*","cache-control":"no-cache","content-type":"application/json","pragma":"no-cache","sec-fetch-mode":"cors","sec-fetch-site":"same-origin"},"referrerPolicy":"same-origin","body":"{}","method":"POST","mode":"cors"}); | |
json = await resp.json(); | |
spaceId = Object.keys(json.recordMap.space)[0]; | |
return spaceId; | |
} |
import webbrowser | |
areaCode = input("What is the area code of the phone number? ") | |
middle3 = input("What are the middle 3 digits? ") | |
last4 = input("What are the last 4 digits? ") | |
phoneNumber = str(areaCode) + str(middle3) + str(last4) | |
fourOneOne = "https://www.411.com/phone/" + "1-" + str(areaCode) + "-" + str(middle3) + "-" + str(last4) | |
webbrowser.open(fourOneOne) |
const WEBGL_RENDERERS = ['ANGLE (NVIDIA Quadro 2000M Direct3D11 vs_5_0 ps_5_0)', 'ANGLE (NVIDIA Quadro K420 Direct3D9Ex vs_3_0 ps_3_0)', 'ANGLE (NVIDIA Quadro 2000M Direct3D9Ex vs_3_0 ps_3_0)', 'ANGLE (NVIDIA Quadro K2000M Direct3D11 vs_5_0 ps_5_0)', 'ANGLE (Intel(R) HD Graphics Direct3D9Ex vs_3_0 ps_3_0)', 'ANGLE (Intel(R) HD Graphics Family Direct3D9Ex vs_3_0 ps_3_0)', 'ANGLE (ATI Radeon HD 3800 Series Direct3D9Ex vs_3_0 ps_3_0)', 'ANGLE (Intel(R) HD Graphics 4000 Direct3D11 vs_5_0 ps_5_0)', 'ANGLE (Intel(R) HD Graphics 4000 Direct3D11 vs_5_0 ps_5_0)', 'ANGLE (AMD Radeon R9 200 Series Direct3D11 vs_5_0 ps_5_0)', 'ANGLE (Intel(R) HD Graphics Direct3D9Ex vs_3_0 ps_3_0)', 'ANGLE (Intel(R) HD Graphics Family Direct3D9Ex vs_3_0 ps_3_0)', 'ANGLE (Intel(R) HD Graphics Direct3D9Ex vs_3_0 ps_3_0)', 'ANGLE (Intel(R) HD Graphics Family Direct3D9Ex vs_3_0 ps_3_0)', 'ANGLE (Intel(R) HD Graphics 4000 Direct3D9Ex vs_3_0 ps_3_0)', 'ANGLE (Intel(R) HD Graphics 3000 Direct3D9Ex vs_3_0 ps_3_0)', 'ANGLE (Mobile Intel(R) 4 Seri |
Charts are from different sources and thus colors are inconsistent, please carefully read the chart's legends.
Like this? Check React Native vs Flutter: https://gist.github.com/tkrotoff/93f5278a4e8df7e5f6928eff98684979
