Recent content on stereobooster
Integration of Playwright and PollyJS. Idea : Ability to create snapshots for network the same way as Playwright provides snapshots and screenshots. By default it will capture snapshot once on the initial run and replay after. Later one would need to use special command to update snapshots: npx playwright test --update-snapshots Key code to aproximate this behavious is: const info = test . info…
What is test coverage? Test coverage shows how much of your code is being executed during tests run. But what does it mean “how much of code”? How dooes one measure it? There are options: lines (lines of code or LoC) statements functions branches For example, // comment export function comp ( a , b ) { if ( a === b ) { return 0 ; } else if ( a > b ) { return 1 ; } else { return - 1 ; }…
JS I think that this whole trend (of UI components) started with React. Even so there were components before, like jQuery UI and in desktop and mobile applications, it is still fair to say that only with React concept got mainstream (in web development). All JS UI components first of all meant for client-side. But all modern frameworks (React, Solid, Qwik etc.) support server-side rendering. See…
Classical approach Classical Rails view (V from MVC) approach is: ERB plus helpers . Which conceptually it the same as PHP4 . And it’s understandable - when Rails were invented it was the only way. There are alternatives to ERB, like: HAML , Slim , liquid . But this is essentially the same approach New approach There are different opinions about React, somebody loves it, somebody hates it.…
Speed up Ruby yjit asdf is “The Multiple Runtime Version Manager”. Instead of rbenv , rvm , nvm etc. asdf plugin-add rust asdf install rust latest asdf global rust latest RUBY_CONFIGURE_OPTS=--enable-yjit asdf install ruby 3.3.0 Alternatives are mise , spack , ubi , nix . Note: if Ruby comes with yjit , but it’s disabled by default. You can enable it with RUBYOPT="--yjit" .…
There are several types of static site generators (SSG). General purpose. For example: Next.js Gatsby Nuxt Astro Blogs - they rather started as blogs, but slowly evolve into more general purpose. For example: Hugo Jekyll Second brain, digital garden. For example: Quartz And documentation generators. This is the post about the last category Generators This is not an exhaustive list Generator…
Unsorted notes about components in web development Headless components Headless, aka un-styled, but (and it’s important) with a11y React Vue Svelte Solid Qwik Angular Preact Radix UI Radix Vue Melt UI kobalte Qwik UI ? ? Headless UI Headless UI terracotta React Aria Ark Ark Ark Notes : I didn’t metnion some libraries: Radix Angular Qwik-React - allows to use any (?) React library in…
Task : add support for diagrams to Astro. Ideally : it would be rendered as SVG on the server side so no JS required on the client-side people can use Cmd + F to search text style it with CSS-variables (or CSS-classes) so it would be possible to implement dark mode without JS optionally add small JS to implement pan/zoom/drag Most popular (at the moment) option for diagrams is Mermaid . There are…
Unsorted notes about key-value stores in JavaScript. Basic Object.create(null) , Map , WeakMap Can be persisted to the disc keyv Level alternative runtimes (Deno, BUN) SQLite: great.db compression snappy zstd LRU small flru fast lru-native2 benchmark bench-lru (Outdated) data structure mnemonist/lru-map javascript-algorithms/lru-cache related js-sdsl scl.js hashing algorithm fast @node-rs/xxhash…
Faceted search is a parametric search with the difference that user can judge about distribution of results by different cataegories (facets) upfront. One more improvement is when the system sugests most relevant facets depending on the type of search. For example, if user searches: for screen - resolution and diagonal are relvant parameters for fridge - volume and energy efficiency are relevant…
Digital garden aka Second brain , Zettelkasten , personal wiki, personal knowledge management. There are different aspects of a digital garden. It can be seen as a way to take notes just for yourself, but for me, it’s more interesting as a way to organize knowledge and publish it as a (static) website. There are different editors (note-taking applications): Obsidian , Foam , Roam Research to…
Why? If you need to generate an image on the server side. At first, I thought it was impossible. There is cytosnap that uses Puppeteer (headless browser). Then, for fun, I rewrote it with Tauri . But later, I though, what if it would be possible to run it with Node.js. And, indeed, it’s possible. Solution Add polyfils for the browser (it also includes canvas): class XMLSerializer {…
I created image components a couple of times before: Responsive images for Hugo react-ideal-image But browsers keep improving - now almost all modern browsers support: loading=lazy srcset picture webp I checked existing solutions - they either don’t do what I want or are complicated (for my taste): Hugo Images Module lazyimg DFD Hugo image handling module Features What I expect from an…
Tauri and Puppeteer/Playwright have different use cases. So it seems nothing to compare. But there is (at least) one use case where you may try to use Tuari instead of a headless browser - “snapshots”. For example: react-snap - HTML snapshot, uses Puppeteer mermaid-cli - SVG/image snapshot, uses Puppeteer cytosnap - image snapshot, uses Puppeteer Why? Because Tauri uses provided by OS…
Let’s say you need to distribute binary in npm. I’m not talking about node extensions (node-gyp, napi, etc.). I’m talking about standalone executables, like CLI applications. We have options. How to distribute binary : host executables on some server, for example, GitHub releases, and download appropriate (e.g. for given OS and architecture) binary on installation put all…
This list is about tools beyond static hosting and static website generators . There are already enough list about that. Analytics In old times there was basically one default choice: Google analytics. What is bad about GA: JS size (about 49kb). There alternative clients though, like this one Blocked by default by some browsers and adblockers no GDPR compliance (e.g. you always need to provide…
Where can be used validate http request from client (at server side) validate http response from server (at client side) validate data from untyped storage, for example localStorage, JSON columns in DB, etc. validate env variables validate CLI arguments validate configuration files Bonus: one can generate JSON Schema from validator and use it for autocomplete in IDE. For example,…
aka relative links, local links, file path links. Software supports portable markdown links if for content like this: [ test ]( folder/test.md ) For editor : user can Cmd + Click the link and editor will jump to that file For static website generator : file pahts are replaced by URLs according generation scheme, for example: [test](folder/test.md) → <a href="/folder/test/">test</a> Example…
So you have folder with markdown files. It can be static website, it can be Obsidian vault, second brain, digital garden, zettelkasten, notes… And you want to do something with it. There are a lot tools for that: “second brain” editors: Obsidian, Foam, Roam Research, etc. static website generators: Hugo, Astro, etc. And everything in between: Language servers: VSCode Markdown…
aka diagrams as code I dreamt about it for a long time . Idea is to allow to express diagrams with a text, this way you can draw diagram while you are writing you markdown file. Without need to switch to another tool. And this diagram becomes part of the document and can be stored in git. Now when Hugo supports render hooks for code blocks and in MDX you can do this too (to use with Astro, etc.)…
Basic idea - navigating between pages is slow, because: browser waits for network response it is expensive to redraw the whole page from scratch. Much faster would be to replace innerHTML of the document. At least this is common belief, but there are nuances to that . History First solution appeared in 2010. See defunkt/jquery-pjax Around 2015 “olympic torch” was taken over by…
JS micromark used by mdast-util-from-markdown used by remark-parse used by prettier mdx , which is used by Next.js Gatsby Docusaurus etc. mdc , which is used by Nuxt Astro markdown-it used by 11ty vuepress vitepress showdown used by (based on what they say) GoogleCloudPlatform Meteor Stackexchange - forked as PageDown remarkable used by Docusaurus marked used by Hexo docsify markup-it used by…
Headless and accessible aka unstyled, renderless Main idea is to provide all the logic for component (often accessibility) without forcing any visual appearance. Reach UI Radix primitives headlessui ariakit not a component library, but worth to mention React Spectrum Based on a design system Main idea it is based on thoroughly documented design-system, so it gives more than just components. There…
style prop < div style = {{ color : "red" }} /> style prop it the most basic CSS-in-JS solution. But it doesn’t support: mediaqueries pseudo-classes pseudo-elements global styles @font-face @keyframes * { box-sizing: border-box; } vendor-prefixes theming but you can still do it with CSS variables styled function const Box = styled . div ` color: red; ` ; < Box />; or const Box = styled (…
Introduction Typical problem: you want to distribute React (Solid, Vue, etc.) component in npm package. Most likely it will need some kind of styles and maybe assets (images, svg, fonts). How you’re gonna do it. Two options: distribute CSS files CSS-in-JS Distributing CSS has following issues: You need explicitly include those files (dependency) You may need to process them (with…
react-native-web itself doesn’t require any tricky configuration to work with Vite. import { defineConfig } from "vite" ; import react from "@vitejs/plugin-react" ; // https://vitejs.dev/config/ export default defineConfig ({ plugins : [ react ()], alias : { "react-native" : "react-native-web" , }, }); But in order to use any library for react-native or react-native-web this would be not…
To illustrate ideas from my previous article . Let’s take a look at heylinda-app . No hard feelings - it was first open-source ReactNative app compiled to PWA, that I found. ReactNative was built specifically for mobile platforms, so it was interesting for me to see how it works for PWA. Feature yes/no Installable yes AppShell kind of Bottom navigation yes Offline support no Splash-screen no…
Modern PWAs are very powerful - they can use/do: geolocation, notifications, file system, payment, bluetooth, camera, microphone, etc. See full list here . Plus there is WebAssembly , WebGL, etc. Introduction Let’s assume we want to build native-like PWA for mobile platform that will be on separate domain. We don’t need to take into account desktop. With this approach priorities would…
WCAG Initially I was confused by WCAG, WAI-ARIA and other standards. I took time to figure out things. WAI (Web accessibility initiative) produces several standards (recommendations, guides). WCAG (Web Content Accessibility Guidelines) is the “main” one. WCAG 2.0 is also an ISO standard. WCAG 2.x serves as the basis for a lot of laws, regulations, etc. - requiring AA compliance. WCAG…
Imagine you have a list (or a table) with checkboxes, for example, to do list, mail inbox, or “back-office” page. Checkboxes are used to select items for batch actions, for example, delete or archive, etc. Code can look like this: const { selected , change } = useSelected ([] as Array < Item >); return ( < ul > { items . map (( item ) => ( < li key = { item . id }> < label > < input…
Stop choosing DX over UX. – Devon Govett (@devongovett) By no means I want to dunk on Devon. This is just an example of sentiment flowing around the internet. So you, reader, would understand where I coming from. DX - developer experience. UX - user experience, usability. Let’s talk about button Using <button> instead of <div> for a clickable elements is a good for UX (and…
Inspired by Braid Dialog : It’s recommended that you connect the Dialog’s open state to your router so that it can be closed via the browser’s back button. When I saw this sentence - I thought what a cool idea. It was tricky to implement hook to capture all use-cases. Basic example: const [ showModal , setShowModal ] = useState ( false ) < Button onClick = {() => setShowModal ( true )}> Open…
Based on: Theory of Computation (CS3102), Spring 2017 , videos are here It’s Time for a New Old Language, 2017 , talk by Guy L. Steele Jr. Parsing with Derivatives, 2011 by Matthew Might, David Darais, Daniel Spiewak, video . History of notation All material I have read on the subject use slightly different notation. Apparently, there is some history behind it. Slide 21 from Guy L. Steele Jr.…
Why do we need parsers? The first obvious use case is computer languages. (I use the term computer language because not everybody considers HTML a programming language). This includes: compilers interpreters syntax highlighting static analysis tools, like linters and language servers But also: network protocols serialization and deserialization configuration files command-line arguments natural…
In my first post I didn’t mention “parser combinators”. Parser combinator is the way to construct recursive descent parsers in functional programming using functions. Higher-order functions can be used to combine parsers, to represent sequencing, choice, and repetition. Recursive descent parsers were known since the 60’s - the main innovation is that parser can be directly…
What is accessibility? Definition of accessible 1a : capable of being reached a remote region accessible by rail also : being within reach fashions at accessible prices 2 : capable of being used or seen : available information that should be accessible to everyone 3 : capable of being understood or appreciated the author’s most accessible stories an accessible film 5 : easily used or…
List of random notes about naming conventions (for my small research). Send more examples along the way. Multiple-word identifiers Historical note Letter case (or just case) is the distinction between the letters that are in larger uppercase or capitals (or more formally majuscule) and smaller lowercase (or more formally minuscule) in the written representation of certain languages. These terms…