TIL

major.minor.patch version (also known as breaking.feature.fix): ^ instructs npm to install the newest version of the package with the same major version; Use ~ to have both the major and minor version match.
__dirname and __filename: running node example.js from /Users/mjr, __dirname is /Users/mjr and __filename is /Users/mjr/example.js. __dirname returns the directory name of the directory containing the JavaScript source code file, while process.cwd() returns the current working directory in which you invoked the node command. However __dirname can’t be used in ESM projects. The equivalent way is to use something like fileURLToPath(import.meta.url) to get __filename and fileURLToPath(new URL('.', import.meta.url)) to get __dirname, which ensures a cross-platform valid absolute path string. (import.meta.dirname and import.meta.filename are available in Node v20.11.0 LTS.)
path.resolve() and path.join(): path.resolve creates absoulte path from right to left until an absolute path is constructed, whereas path.join simply concatenates every parameter from left to right whether they have / or not. TypeError is thrown if any of the arguments is not a string.
- path.resolve('/a', '/b', 'c') returns: /b/c
- path.join('/a', '/b', 'c') returns: /a/b/c
- path.join('/foo', 'bar', 'baz/asdf', 'quux', '..') returns: /foo/bar/baz/asdf
Quickly browse the history of a file in the repo: Go to a file in GitHub (or GitLab, or Bitbucket), replace github.com with github.githistory.xyz.
One second to read GitHub code with VS Code online. Just add 1s after github (github1s.com) in browser address bar for any repository you want to read. Another one, open a GitHub repo, press ., then VS Code opens up in your browser. You can also change github.com to github.dev in the URL in order to achieve the same effect.
Cmd + Shift + . toggles hidden files in Mac.
After Cmd + h to hide the window, there is no shortcut to bring the window back, because the app loses focus when hidden. The easiest way to do is using task switcher Cmd + Tab to display it normally.
Open VSCode in terminal: Cmd + Shift + P -> type Shell Command: Install ‘code’ command in PATH -> restart the terminal for the new $PATH value to take effect, and type code . to open VS Code.
Open settings.json file in VSCode: Cmd + Shift + P, type “open settings” and you can choose Open User Settings (JSON). Another way is Cmd + , to open Settings UI and there is a button on the top-right corner which can be used to switch between JSON and graphical view.
In VS Code, you can use up and down keys in the search box to access your search history. Use Ctrl + G to navigate to a specific line. Also, Cmd + X to delete a line, Cmd + L to select a line, Opt + Up/Down to move a line.
Drag the file tab from VS Code into the terminal to get the absolute path for that file.
Ever struggled with some forgotten processes taking over a port you’re trying to use? Just run npx kill-port [port-number].
Type env or printenv in the terminal to list all the default environment variables.
Install tldr-pages npm install -g tldr which simplify the man pages with practical examples, e.g. try to run tldr tar or tldr git branch.
m-cli is a macOS command line tool (Swiss Army Knife for macOS) that lets you interact with utilities and applications entirely in Terminal. Run m to display all the available commands.
Short link react.new, vue.new, ng.new, js.new, csb.new to create a new codeSandbox project. Stackblitz is another similar platform and might be the most exciting in-browser IDE (try vite.new, remix.new, node.new). All code execution in StackBlitz happens within the browser security sandbox and cannot break out to your local machine.
Use if (typeof window === 'undefined') to execute code only in the server-side. We can’t do it using if (window === undefined) because we’d get a “window is not defined” runtime error.
du command is used to display disk usage statistics. It calculate and print the disk space used by files or directories. -a option means display an entry for each file; -s will summarize and show only the total size of the directory; -h for human-readable output.
You can set the parameters of the function passed to setInterval and setTimeout by specifying extra arguments in the call, e.g. setTimeout(console.log, 1000, 'hello');
Conditionally add a member to an object: const item = {...true && {bar: 'bar'}, ...false && {falsy: 'falsy'}};, and the item will be {bar: "bar"}
GNU (GNU’s Not Unix, it is pronounced g’noo) is a collection of programs which help to create a fully functional operating system. GNU’s goal was to create a fully free, open source replacement of Unix. Linux functions as an operating system kernel but the Linux kernel alone does not form a working operating system. When Linux was created, there were many GNU components already created but GNU lacked a kernel, so Linux was used with GNU components to create a complete operating system. We prefer to use the term “GNU/Linux” to refer to systems that many people casually refer to as “Linux”.
If you want to distinguish zsh script files, then you can change the script’s file extension from .sh to .zsh. But the file extension will have no effect on which interpreter will be used to run the script. That is determined by the shebang, the extension only provides a visible clue in the Finder or Terminal.
All shells originate from the Bourne Shell, called sh. Bash means Bourne Again SHell. sh was proprietary and not open source, but Bash is created as a free alternative for the GNU project. It offers functional improvements over sh for both programming and interactive use.
Terminal in the software sense can take input and pass it on. It’s good at displaying textual output, but the Terminal doesn’t actually process your input. Technically Console is a device (has screen and keyboard) and Terminal is the software program inside the Console. In the software world a Terminal and a Console are synonymous. A shell is the program that the Terminal sends user’s input to. The shell generates output and passes it back to the Terminal for display. Your choice of shell doesn’t and shouldn’t dictate your choice of terminal application. (Shell: bash, fish, zsh, PowerShell, cmd; Console/Terminal: Hyper, cmder, MinTTY, Windows Terminal, VSCode includes a Terminal).
A local shell variable can be declared using = sign (should not be any spaces between a variable’s name, = and its value) and its value can be retrieved using the $ sign. Because using $ to identify variables, you need to escape it if you want to remove a file whose name contains a $ , like rm -r \$RECYCLE.BIN.
In Bash scripts, positional parameter $0 is the script’s name, and $1 … $9 are parameter list elements from 1 to 9. If you execute ./script.sh Hello World, it will make $0 = ./script.sh, $1 = Hello, $2 = World. And $# means the number of positional parameters of your script, which is typically used to ensure a parameter is passed.
Using exit and a number is a handy way of signalling the outcome of your script. Non-zero exit indicates an error (exit 1). Zero indicates success (exit 0). $? returns the exit value of the last executed command.
By defualt, bash will continue after errors. To exit the script as soon as one of the commands failed, add set -e at the beginning.
The javascript void operator evaluates the given expression and then returns undefined. It is often used merely to obtain the undefined primitive value, usually using void(0) (which is equivalent to void 0). Arrow functions with a short-hand braceless syntax will return an expression. This can cause unintended side effects by returning the result of a function that previously returned nothing. To be safe, when the return value is not intended to be used, it can be passed to the void operator.
Browser sync local server: npx browser-sync start --server --files ".". It watches all files in the current folder (and all subfolders) for changes and launches a web server on port 3000. Any time you change a file, the browser will refresh. Run browser-sync start --help for more information.
http-server is a simple static HTTP server: npx http-server. Serving defaults to ./public if the folder exists, and ./ otherwise. index.html will be served as the default file to any directory requests.
Use JSON Placeholder, DummyJSON or JSON Server to get a full fake REST API when a quick back-end is needed for prototyping and mocking.
GitHub pages is a free way to host projects. It has two types of pages: User pages or Project pages. User pages is for hosting a personal website or a portfolio. You can only have one user page attached to your GitHub account and the URL will be yourusername.github.io. Project pages is used to host a project and you can create multiple project pages per account. Github uses gh-pages branch to get files to build and publish from. The URL for this page will be yourusername.github.io/projectname.
With an interpreter, the “translation” happens pretty much line-by-line, on the fly. But the con of using an interpreter comes when you’re running the same code more than once. JavaScript started out slow (using interpreter, i.e., if you’re in a loop, you have to do the same translation over and over again), but then got faster thanks to JIT. It makes JavaScript run faster by monitoring the code as it’s running it and sending hot code paths to be optimized. If the same lines of code are run a lot, the JIT will send it off to be compiled and store that compilation.
Babel compiles JSX <div>Hi</div> to a function call React.createElement('div', null, 'hi'). If you have a comment like /** @jsx cool */, Babel will transpile the JSX using the function cool you defined instead of React.createElement, so you can have a function const cool = (el, props, ...children) => {}, which could be totally not related to React.
Ever tried debugging an element (e.g. input dropdown) that keeps disappearing when it loses focus once you start using devtools? Cmd + Shift + P, then type “Emulate a focused page”. Another way to freeze UI, open up the devtools source panel and use Cmd + \ to pause script execution. The third solution is to run setTimeout(() => { debugger } , 2000). (Note that here debugger is a statement rather than an expression, so we need wrap it in a function.)
Take screenshots using devtools: Cmd + Shift + P, then type “screenshots”. You can choose an area screenshot (drag to select), a full website screenshot, an HTML node screenshot (need to select an element first) or a current viewport screenshot.
Hacks for playing html video: $0 to get the element you inspected, and if it’s a <video>, change playback speed $0.playbackRate = 2 or show picture-in-picture mode $0.requestPictureInPicture().
You could type document.designMode = 'on' in devtools console to make your whole website editable, which great to test different texts.
In devtools console, you can use $ and $$ as shortcuts for document.querySelector() and document.querySelectorAll() respectively ($$ returns a true array instead of an array-like NodeList). Furthermore, $0 gives you the reference to the currently selected element. $1 is the previously selected element. That goes all the way to $4. Use $_ to get the result of the last evaluated expression in the console. What’s more, getEventListeners($0) returns the event listeners registered on the specified object.
copy(anything) is a handy utility in the console that allows you to put anything into the system clipboard. Furthermore, If you have debug(function) in the console, when the specified function is called, the debugger is invoked and breaks inside the function on the Sources panel.
The <a> tag has the ping attribute, which specifies a URL that will be called when the link is clicked. The URL would get a POST message with the content “PING” (literally) and the ping-to request header holds the link’s destination, which can be used for tracking purposes and providing stats and information about how the visitors used the site.
Why I don’t need to clean up my downloads folder in macOS? There’s the /tmp directory (symlinking to /private/tmp). This directory is used for temporary operating system files, and it’s automatically cleaned up after you reboot your machine. I configure the browser to store downloads by default in /private/tmp.
process.argv (full form is argument vector) returns an array containing the command-line arguments passed when the Node.js process was launched. The first element will be the ‘node’ executable, the second element will be the name of the js file. The next elements will be any additional command line arguments.
If you open so many tabs, I just discovered that Chrome offers a UI (chrome://discards) to discard tabs (put them to sleep) to free up system resources.
Either with window.open() or by navigating a link with a target attribute, if noreferrer is set, the browser will omit the Referer header, as well as set noopener to true. noopener means the new window will not have access to the originating window via window.opener and returns null. All major browsers (i.e. Chrome 88) implicitly set rel="noopener" for any target="_blank" link by default.
Shell executes command by checking if the first token is aliased, checks if the command is builtin, searchs in the PATH env if the command is not builtin (ls is found in /bin/ls), and creates a new process to execute it by using system call. If you are curious to know where the program is stored, which command will help you to identify the path and add -a option (which -a ls) to display all the paths for that specified command.
file command is used to determine the file type/encoding (file xyz.txt or file *), but note that it reads only part of the file and takes a best guess with the help of a magic file that contains all the patterns to recognize a file type.
Ctrl-C sends a SIGINT (Signal interrupt) to the foreground process, which by default translates into terminating the application. Ctrl-D sends an EOF character, which bash interprets as a desire to exit.
dig command (Domain Information Groper, replacement for nslookup) is used to gather DNS information. Type dig xxx.com to perform a DNS lookup. The most important section is the ANSWER section which displays the IP address associated with the domain name. By default dig requests the A record and uses the local configuration listed in /etc/resolv.conf to decide which name server to query. To specify a name server against which the query will be executed, use dig xxx.com @8.8.8.8. To find the alias domain name, use the cname option dig xxx.com cname.
A 32 bit IPv4 address is an A record. The AAAA record is similar to the A record, but it allows you to specify the IPv6 address of the server. IPv6 is four times the size – 128 bits – so it ended up being a quad-A record. You can use dig to determine the AAAA record associated with a domain name dig AAAA example.com.
All DNS records actually end with the period character (.) which represents the root of the DNS hierarchy, but it’s rarely printed and is usually just assumed. A domain name that includes the trailing period character is said to be a fully-qualified (unambiguous) DNS domain name.
whois command to find out information about a domain, such as the owner of the domain, the owner’s contact information, and the nameservers that the domain is using.
Node process.platform returns a string identifying the operating system platform on which the Node.js process is running: darwin, linux, win32. Darwin is the part of OS X that is the actual operating system, which forms the core set of components upon which Mac OS X and iOS are based. To give an analogy, Darwin would be the equivalent of Linux while Mac OS X would be the equivalent of Ubuntu or another distribution.
btoa() “binary to ASCII” method creates a Base64-encoded ASCII string from a binary string (a String object in which each character is treated as a byte of binary data). atob() “ASCII to binary” decodes a string of data which has been encoded using Base64 encoding. atob() throws error if encodedData is not valid base64. Note that Base64 is commonly used to encode binary data so it can be safely stored or transferred over systems that are designed to handle only text, especially ASCII.
If you want to hide resources loaded by browser extensions in the Network panel, type -scheme:chrome-extension in the filter input box (putting a - in front means to negate the search, or use the invert checkbox next to it). Chrome 117 has a new filter called “Hide extension URLs” that does the same thing. Similarly use status-code:404 to find all requests that ended up in a 404 error.
Zero Width Joiner (ZWJ, pronounced “zwidge”) is a Unicode character that joins two or more other characters together in sequence to create a new emoji. This is an invisible character when used alone and the code point is U+200D. When a ZWJ is placed between two emoji characters, it can result in a single glyph being shown, such as the family emoji 👨‍👨‍👦 👨‍👩‍👧‍👦, made up of two adult emoji and one or two child emoji.
A software license is a legal instrument spelling out what can and can’t be done with software. MIT is probably the one you’ve seen the most and is one of the most permissive licenses you can place on software. It pretty much says that you can do anything you want with the software without any issues, the only thing asked of you is to include a copy of the original copyright and license notice with every copy of the software. A lot of famous software use this license such as Node.js, Vuejs, Ruby on Rails. The ISC and MIT are nearly identical, but the ISC license is a bit simpler and cleaner.
Every test you write will include selectors for elements. Targeting a element by tag, class or id is very volatile and highly subject to change. Instead, adding data-test, data-testid, or data-cy (using Cypress) attribute to the element gives us a targeted selector that’s only used for testing, which isolate them from CSS or JS changes.
You can type cal 2022 or cal june 2022 in Terminal and get the calendar right in your Terminal.
On Mac you can check the clipboard to see what’s stored there by opening Finder and then choosing Edit > Show Clipboard. But Mac clipboard is only designed to hold one item at a time.
Use cmd-shift-4 and then press the spacebar to screenshot the whole application window. To exclude the window’s shadow from the screenshot, press and hold the Option key while you click. If you see a thumbnail in the corner of your screen, click it to edit the screenshot.
Mac by default uses PNG as the format for screenshots, and the size of some screenshots is huge. Run the command defaults write com.apple.screencapture type jpg, followed by killall SystemUIServer. This will make the screenshots use JPG for the format, which will be much more lightweight.
<input type="file" capture="user" accept="image/*"> has an attribute to open the camera of mobile devices to capture images. This is done with the capture attribute which can take two values: user for the front camera and environment for the back camera.
Install es6-string-html from vscode extensions, and simply insert the comment /*html*/ before the string to enable syntax highlighting in es6 multiline strings.
The most efficient way to store JSON in the URL’s query string is to use JSONCrush, so they can be shared and bookmarked easily. If used in a url you must call encodeURIComponent() to escape any special characters.
There is no better way to craft multi-line terminal commands than Composer in iTerm2. Cmd + Shift + . to open a Composer, and type some multi-line command, then Shift + Return to execute.
In order to increase the buffer history in iTerm2, there is an option “unlimited scrollback buffer” which you can find under Preferences > Profiles > Terminal or you can just pump up number of lines that you want to have in history in the same place.
CR and LF are control characters and used to mark a line break in a text file. Unix systems like Linux and macOS use LF, the line feed character (\n), which moves the cursor down to the next line without returning to the beginning of the line. Windows, on the other hand, uses CRLF, carriage return AND line feed character (\r\n). It moves the cursor both down to the next line and to the beginning of that line.
wc command is used to find out number of lines, word count, byte and characters count in the files specified in the file arguments. wc -l <filename> tells it to count lines. wc -w <filename> tells the number of words in each input file. ls | wc -l counts the number of files in a directory (ls does ls -1, one entry per line, if the output is a pipe.)
cloc parses your code file to counts the lines of code in many programming languages.
In Q3 of 2021, Chrome started to shorten the release cycle and ship a new version to the stable channel every four weeks, down from the six-week cycle. Chrome 94 was the first release on the four-week schedule.
The <mark> HTML element represents text which is marked or highlighted. It even comes with built-in styles. This might be used, for example, to indicate the words that matched a search operation.
Both SHA256 and MD5 are hashing algorithms. They take your input data and output a 256/128-bit number. This number is a checksum. There is no encryption taking place because an infinite number of inputs can result in the same hash value, although in reality collisions are rare. Hashing is different from encryption. Whereas encryption is a two step process used to first encrypt and then decrypt a message (two-way), hashing condenses a message into an irreversible fixed-length value (one-way).
crypto.randomUUID() is a method built into the browser (it’s not a third-party package) that returns a randomly generated, 36 character long v4 UUID. It’s available in Node.js 14.17+ and all major browser.
Xterm.js is a front-end component that lets applications bring fully-featured terminals to their users in the browser. It’s used by popular projects such as VS Code and Hyper. Note that Xterm.js is not a terminal application.
The advent of WebAssembly made it possible to write a WebAssembly-based operating system to run Node.js, entirely inside your browser. Stackblitz’s @webcontainer/api is a browser-based runtime for executing Node.js applications and operating system commands. These environments are not running on remote servers. Together with Xterm.js, you can build a working terminal inside the browser. The tutorial shows how to hook up your terminal to the shell running in the WebContainer process.
The difference between performance.now() and Date.now() is that Date.now() returns a timestamp in relation to the Unix epoch. JavaScript gets the time from the system clock. But since the system clock lives in our machine, it can be adjusted manually or programmatically, therefore, time precision cannot be guaranteed. In this situation, performance.now() is more reliable. It depends neither on a specific point in history nor on our system because it returns the number of milliseconds that have passed since the beginning of the document’s lifetime (the time when navigation has started in window contexts).
The DevOps Research and Assessment (DORA) team has identified four key metrics that indicate the performance of software delivery. Key metrics include: Deployment frequency (how frequently an organization releases new software), Lead time for changes (the time taken from when a change is requested or initiated to when it is deployed), Mean time to recovery (the average time it takes to recover from a failure), Change failure rate (the percentage of changes that result in a failure).
Browsers doesn’t natively support the displaying of WebVTT text tracks that are associated with an <audio> element; They all completely ignore any <track> content. One possible solution could be to use a <video> element to play our audio. Yep, the <video> element will also accept audio files in its <source> elements.
When entering text, press Option + Shift + K to insert an Apple logo.
PowerShell is a cross-platform task automation solution made up of a command-line shell, a scripting language, and a configuration management framework. PowerShell runs on Windows, Linux, and macOS. PowerShell commands follow a Verb-Noun semantic with a set of parameters. For example, Get-Process will display all the running processes on your system. If you are new to PowerShell and would like to learn more, we recommend reviewing the getting started documentation.
The chrome://predictors page shows some cool stats about the characters you’ve typed in the omnibox and the URLs you’ve selected. For example, if you usually type “y”, Chrome autocompletes the URL to youtube.com and you press Enter, you’ll find this association in the table. There are 3 values: hit count (how often you type those characters), miss count (how often you pick a different suggestion) and confidence score equals hit_count / (hit_count + miss_count). Green entries have a 1 confidence score, which means that the text is always associated with the URL.
There are other browsers available on iOS like Chrome and Firefox, but due to Apple’s App Store rules every browser in the App Store is simply a UI wrapper around the Safari rendering engine and JavaScript engine. Apps that browse the web must use the appropriate WebKit framework and WebKit JavaScript. If a bug exists on iOS Safari, it also exists in iOS Chrome, iOS Firefox, etc.
UnJs is a library all about universal JavaScript (zero dependency, work in node and browser and you can use anywhere). It’s created out of Nuxt, creating utilities that we were using internally, but we didn’t want them to be Nuxt only. Nitro, from the UnJS ecosystem, is an intuitive framework to create type-safe and performant universal web servers, with zero-config compatibility with multiple platforms. NuxtJS is built upon Nitro, which is built upon H3.
Open Graph (OG) is a standard allowing developers to specify an image and other metadata to be displayed when sharing links on the web through platforms like Twitter, Facebook, Slack, and even text messages. To assist with generating dynamic OG images, you can use the @vercel/og library to compute and generate social card images using Vercel Edge Functions.
JSX.Element and React.ReactElement are functionally the same type. They can be used interchangeably. They represent the thing that a JSX expression creates. They can’t be used to represent all the things that React can render, like strings and numbers. For that, use React.ReactNode. In everyday use, you should use React.ReactNode. You rarely need to use the more specific type of JSX.Element.
If there are three setCount(count + 1) in a click event handler in React, it will only increment the count by 1, despite the three calls. React state updates are async and batched so it will re-render only once. All three setCount are looking at the state of count on the same loop, so all of them see that count is 0 and all of them change it to 1. You’re just setting it to 1 three times. If it was setCount(c => c + 1) then the result is 3. The function form update guarantees you get the latest state value.
A lot of browser functionalities, like DOM manipulations (DOMParser), are not available natively in Node because that is not a typical server task to access the DOM - you’ll have to use an external library to do that. You can use jsdom or cheerio to parse HTML content in Node environment.
A .gitkeep file is a special file that you can use to add empty directories to a Git repository. Git does not track empty directories by default. People who want to track empty directories in Git have created the convention of putting files called .gitkeep in these directories. .gitkeep is just a placeholder. The file could be called anything; Git assigns no special significance to this name.
If you renamed a file from File.jpg to file.jpg, it didn’t trigger any changes in the git repo, which means that you wasn’t able to deploy it. You need to use git mv File.jpg file.jpg to rename the file in the git repo as well.
The file type can be specified by the server with a Content-Type header. application/octet-stream is the most generic type, and it tells the browser that the file is just arbitrary data - at which point the only thing the browser can do is download it. When a Content-Type is not specified by the server, the browser can perform what is known as sniffing to try to guess the type by reading the file and looking for patterns.
Browsers send an Accept-Encoding: gzip, deflate, br HTTP header when requesting text files. This tells the server that it understands data compressed in either Gzip, Deflate, or Brotli. Gzip has been around since 1992 and is very widely supported. However, the Brotli algorithm that was released in 2013 built by Google provides better compression and should be used whenever possible. Note that Gzip or Brotli don’t help when transferring images. That’s because image formats already contain compression algorithms that are optimized specifically for images. Facebook’s zStandard compression is another new method which aims to serve smaller payloads compared to gzip while also being faster. zStandard was added to the HTTP content encodings with an identifier of “zstd”.
localStorage is usually limited to 5MB. lz-string was designed to fulfill the need of storing large amounts of data in localStorage, specifically on mobile devices. It started out from an LZW implementation (a universal lossless data compression algorithm). Try to use with LZString.compress() and LZString.decompress().
BlurHash or ThumbHash is a compact representation of a placeholder for an image. The algorithm encodes your image into a short string (only 20-30 characters), ready to save in a database. When you send data to your client, you send both the URL to the image, and the BlurHash string. Your client then takes the string, and decodes it into a small image that is rendered on to a canvas while the real image is loading over the network.
A labeled statement is any statement that is prefixed with an identifier. You can use a label to identify a statement, and later refer to it using a break or continue statement. For example, we have a loop1: for (let i = 0; i < 3; i++) {} with a labeled break. When break loop1 is encountered, the execution of the loop1 is terminated.
The “Idle” state in Performance tab of Chrome DevTools is the time when nothing has happened (so I’m not sure why you would want to reduce it). Go to about:blank page, and get a new CPU profile. The result is probably the value for idle close to 100%. The “Idle” state should not be confused with the “Loading” state.
Voice activity detector (VAD) is the detection of the presence or absence of human speech, used in speech processing. vad-web provides an accurate, user-friendly VAD that runs in the browser. You can start recording audio and send segments of audio with speech to your server. Under the hood, it runs pre-trained VAD algorithm using ONNX Runtime Web (Open Neural Network Exchange, cross-platform machine-learning model accelerator).
Back in 2017, Chrome 59 introduced the so-called Headless mode, which lets you run the browser without any visible UI. Headless mode is a popular choice for browser automation (UI testing, taking screenshots, creating a PDF) through projects like Puppeteer (A Node library developed by the Chrome team, which provides a high-level API to control headless/full Chrome. It can be used to crawl SPAs). Technically, it’s important to know that the old Headless was a separate, alternate browser implementation that happened to be shipped as part of the same Chrome binary. It doesn’t share any of the Chrome browser code. In Chrome 112, the new Headless mode (passing --headless=new flag) is available that unifies Headless and headful modes.
What does 2>&1 mean? The N> syntax in Bash means to redirect a file descriptor to somewhere else. 2 is the file descriptor of stderr; 1 means stdout. So 2>&1 will redirect stderr to stdout. (& is only interpreted to mean “file descriptor” in the context of redirections.)
Jina AI Reader converts any URL into Markdown content suitable for piping into an LLM, by simply adding r.jina.ai to the front of a URL to get back Markdown of that page. It’s written in TypeScript and uses Puppeteer to run Readability.js (extract content from web pages) and Turndown (HTML to Markdown converter) against the scraped page.
Similar to Jina Reader, Firecrawl is an API service that takes a URL, crawls it, and converts it into clean markdown or structured data. They crawl all accessible subpages and give you clean data for each. Start exploring with the playground and the free plan includes 500 pages.
Leaflet Maps are divided into a grid of small images called tiles. This allows for efficient loading and displaying of large maps. Leaflet only loads the tiles visible in the current viewport. As you move around or zoom, it requests new tiles as needed. At zoom level 0, the entire world fits in a single tile. At zoom level z, the world is divided into 2^z tiles horizontally and vertically. Leaflet also supports a wide range of tile providers like OpenStreetMap and Mapbox.
Circuit breaker is a design pattern to create resilient microservices by limiting the impact of service failures and latencies. You wrap a protected function call in a circuit breaker object, which monitors for failures. Once the failures reach a certain threshold, the circuit breaker trips, and all further calls to the circuit breaker return with an error, without the protected call being made at all.
For Chromium browsers, use the --app='https://app.example' parameter with Chromium-based browsers to launch a website in “app mode”. This mode launches the website without the typical browser interface, such as tabs, the address bar, or navigation buttons, making the website look and feel more like a standalone application. (e.g., in macOS /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --app='https://example.com')
Claude Artifacts default to writing code in React in a way that’s difficult to reuse outside of Artifacts. claude-artifact-runner provides a skeleton of a React app that reflects the Artifacts environment - libraries such as Shadcn UI, Tailwind CSS, Lucide icons and Recharts that are included in that environment by default. You can clone the repo, copy and paste Artifacts directly from Claude into the src/artifact-component.tsx file and have them rendered instantly.
The Apple Network Responsiveness test measures the responsiveness of a network. Join the Wi-Fi network that you want to test on your Mac, and enter networkQuality in Terminal. For more information about this command, enter man networkQuality. The results use a measure called Round-trips Per Minute (RPM). The RPM is the number of sequential round-trips, or transactions, a network can do in one minute under normal working conditions.
IPinfo is the trusted source for IP address data. You can open terminal and type in: curl ipinfo.io, or visit https://ipinfo.io/json in browser.
Use gitingest to quickly turn a GitHub repository into text for LLMs. Replace “hub” with “ingest” in any GitHub URL for a text version of the codebase.
You can take a GitHub profile URL, append a .png to it (github.com/<github_username>.png), and you will have access to the profile picture of the account of you choice.
Let’s say you’re trying to test a new OAuth connection on your local machine with something like Google but they require the redirect URL to have a domain with an approved TLD. You can use a RedirectMeTo url to redirect to your localhost. It is a simple web service that redirects users from one URL to another by placing the destination URL after “redirectmeto.com/”. It works through a CloudFlare worker that extracts the pathname from the incoming request and issues a 307 temporary redirect response to that location.
In the Activity Monitor app, choose Window > GPU History, then you can see how hard the GPU in your Mac has been working. If your Mac feels hot or the battery drains quickly, check the GPU activity. If you see many tall blue bars packed tightly together, consider using an external GPU to handle some of the workload.
If you’re using Google to actually find websites rather than get answers, add URL parameter udm=14——you can get directly to the Web results in a search. There is a udm14.com to easy access to an AI-overview-free Google search.
WebAssembly has two representations: textual and binary. The textual representation is based on S-expressions and commonly uses the file extension .wat (for WebAssembly text format). If you really wanted to, you could write it by hand. The binary format that uses the file extension .wasm is not meant for human consumption, let alone human creation. Neither .wat nor .wasm are particularly very human-friendly. This is where a compiler like Emscripten comes into play. It lets you compile from higher-level languages like C and C++.
The name “workerd” (pronounced “worker dee”) comes from the Unix tradition of naming servers with a “-d” suffix standing for “daemon”. A daemon is a background, non-interactive program. It is detached from the keyboard and display of any interactive user. The name is not capitalized because it is a program name, which are traditionally lower-case in Unix-like environments.

Kexi's blog

blog/notes/digital garden

Kexi's blog

Congradulations,
you find the Easter egg

TIL