Recent articles in web development (page 1 of 5)
-
Mar 8, 2023
MelbJS March 2023 notes
Raw notes from the MelbJS meetup held at Culture Amp in Richmond on 8 March, 2023.
Fundamentals of Module Federation, Mathew Byrne
Permalink to Fundamentals of Module Federation, Mathew Byrne- Scaling build times
- Dependency versioning: Team A wants to upgrade React, Team B isn’t ready
- Deployments: slow builds means deploys back up
- In general, bottlenecks!
- Compromised user experience
- Hard to maintain client state across apps
- Scaling challenges still exist within each app
- Duplicate dependencies
- No on-demand loading of code. All dependencies must be available first.
- Manual juggling of those dependencies.
- Inflexible
- Performance: round-tripping of cascading requests for dependencies.
- Limited client support.
- Can’t use non-ESM dependencies.
- Host: The first webpack runtime to boot on the client
- Remote: A bundle that the host can dynamically load in when requested.
- These are not mutually exclusive.
ModuleFederationPlugin
that declares a remote forApp2
. App2’s webpack config has aModuleFederationPlugin
that declares that App2 is remote that can be loaded by a host. When App1 loads App2, App2 gets its react, etc. from App1. A bundle can be both a host and a remote, which enables some interesting configurations. The module federation project repo has dozens of examples. E.g. Bidirectional, two modules that can each act as a host, but load the other on demand. App Shell, a single host designed to load multiple remotes. MF first shipped with Webpack 5 in Oct 2020. Next 13, SSR support are now there. Delegate modules, a new feature like middleware for loading remotes (e.g. dynamic host selection, etc.), just landed. Further reading:- https://module-federation.github.io
- Follow Zack Jackson, @ScriptedAlchemy.
Standard Promises. Promise Standards, Franky
Permalink to Standard Promises. Promise Standards, Franky
How it works (according to the spec):const resolution = 'MelbJS!'; new Promise(function executor(resolve, reject) { const resolveIt = true; if (resolveIt) { resolve(resolution); } else { reject('Ew. JavaScript!'); } }) .then(function onFulfilled(result) { console.log(result); });
- Check that the
Promise
constructor was passed a function as an executor. - Create an internal promise object, using the Promise prototype, which includes all the promise features we’re used to (
then
, etc.). Creates some internal “slots” for information about the promise. - Create the
resolve
andreject
functions, which are passed into the executor later. - Call the executor function. If it completes successfully, it’s a normal completion. If it throws and exception, it’s an abrupt completion.
- Return the promise!
resolve
/reject
) work internally: Depending which is called, the promise will be fulfilled or rejected. Ifresolve
is called with another promise, that promise is used in turn to continue resolving. Otherwise, the promise is resolved straight away. How a promise is fulfilled:- [[PromiseState]]:
fulfilled
- [[PromiseValue]]:
'MelbJS!'
- [[PromiseIsHandled]]:
false
- [[PromiseFulfillReactions]]:
undefined
- [[PromiseRejectReactions]]:
undefined
then
method. The specification for this function is really, really long! For brevity, we’ll ignore all the parts that have to do with rejecting. This is where the HTML spec starts to come in. Thethen
method creates another promise, which operates just like the one we’ve been talking about. It’s a bit hidden, but it’s what lets us chain promises.then
takes a callback, which gets passed toHostMakeJobCallback
, and eventually is transformed into a fulfillReaction. Gets enqueued as a promise reaction job, which is sent to the browser engine – which takes it out of the JavaScript single-threaded execution environment! Its execution is controlled by the browser engine, not JavaScript itself. The Event loop processing model:- Event loop
- Task queue
- Microtask queue
- JavaScript runtime engine (heap and call stack)
HostEnqueuePromiseJob
schedules tasks on the high-priority microtask queue (defined in the HTML spec). Another example of how these two standards operate together:HostCallJobCallback
. Not covered for time (but equally interesting!): stuff like what happens ifresolve
is passed another promise. Opens up another can of worms. Also interesting, how browser APIs likefetch
work under the surface.Pyodide and JS: The One Language to Rule Them All, Hon Weng Chong
Permalink to Pyodide and JS: The One Language to Rule Them All, Hon Weng ChongtoJS
method to convert the return value of the Python program to JavaScript. Can also usepyodide.registerJsModule
to pass a JavaScript value into the Python runtime before running the Python program. Demo: a game of Pong implemented in Python, rendering its current state to a Canvas with JS. Pyodide is important because it will bring all of the machine learning and AI technologies (implemented in Python) into the Web, where we can give them a UI. -
Jan 21, 2023
Fix System Beep on Move Editor into Next Group in VS Code
In Visual Studio Code, I frequently want to split the window into two panes to view one file alongside another. The quickest way to do this without my hands leaving the keyboard is to use View: Move Editor into Next Group with the keyboard shortcut ^⌘→ (ctrl-cmd-right arrow).
You can find the command in the Command Palette "noop"
). Simply having these declared as valid keystrokes at the OS level eliminates the system beep that occurs even when a Chromium app accepts and handles the keystroke. In order to establish this, you need to create a ~/Library/KeyBindings/DefaultKeyBinding.dict file. Note that you’ll probably need to create the directory as well, and that the directory name is plural (Bindings), but the file name is singular (Binding). This should be in your user Library folder, not the /Library folder or the /System/Library folder. This should be a text file with these contents:{ "^@\UF701" = "noop"; "^@\UF702" = "noop"; "^@\UF703" = "noop"; }
^
means Ctrl,@
means Command, and\UF701
,\UF702
, and\UF703
are the codes for the three arrow keys. There’s a nice reference Gist for this file’s syntax here. You can download a copy of this file if that’s easier (but you’ll need to extract it from the ZIP archive): DefaultKeyBinding.dict.zip Once you have created this file, restart VS Code (or any other applications where you want to use these keystrokes), or just reboot your system. After that, you should find that the system beeps are gone. I have successfully applied this tweak since macOS Catalina (10.15.2) all the way up to the current macOS Ventura (13.1) to use the default keyboard shortcuts for the View: Move Editor into Next Group and View: Move Editor into Previous Group commands without hearing system beeps each time. -
Jan 11, 2023
Horizontal Scrolling
My new site design makes heavy use of horizontal scrolling on the home page, with scrollbars hidden. Horizontal scrolling can be accessible, but it takes some work to make it so. This article covers accessibility for keyboard and screen reader users, and users whose pointing devices simply don't support horizontal scrolling! It also breaks down several usability features I added to create a better experience than the native scrollbars they replace.
-
May 10, 2022
Web Directions Hover 2022 Day 2 notes
These are the live notes I took from Day 2 of the Web Directions Hover 2022 conference for our team internally at Culture Amp.
-
May 2, 2022
Web Directions Hover 2022 Day 1 notes
These are the live notes I took from Day 1 of the Web Directions Hover 2022 conference for our team internally at Culture Amp.