Archive

You can email me at pradeep🌀btbytes.com.

---

More often than not, I choose btbytes as the username on any web services I use.

• github
• linkedin
• twitter
• exercism (coding exercises)
• filtra
• hacker rank
• ORCID is 0000-0002-3906-1041

Write complete web applications in Python without writing javascript. There are a large class of problems for which this is an excellent solution, without having to dip into the javascript tarpit.

The advantage of something like this over using templates is that you can think of "widgets" vs "templates".

Some frameworks are:

Reflex (formerly known as pynecone). Uses FastAPI + React.

NiceGUI. Uses FastAPI + Vue.js + Quasar, tailwind.

Pydantic/FastUI. Uses React. still early in development.

Gradio -- "Build & Share Delightful Machine Learning Apps"

Webcraft by Joodaloop. Personal home page design.

Things I care about: Typography, delightful minimalism, semantic HTML, information architecture, performance, progressive enhancement, silly details.

--

Simon Repp -- why should not be the front page a collage?

---

Devtools design of a faux-macOS window is nice. ^cb2493

---

A Website To End All Websites | Henry From Online

-- See also websites.

what is a common name for online services like stackblitz, vercel, railway.app, fly.io ?

( per ChatGPT4)

Online services like stackblitz, vercel, Railway.app, Fly.io, and others are commonly referred to as "Cloud Development Platforms" or "Serverless Platforms". They provide various functionalities such as real-time online coding environments, deployment, hosting, and scaling of web applications, among others.

These services essentially make it easier for developers to build, test, and deploy their applications, without worrying about the underlying infrastructure. As a result, they can focus more on writing the code and less on managing servers, hence the term "serverless".

Additionally, they could also be grouped under terms like "Continuous Deployment Services", "Cloud Application Platforms", or "Platform as a Service (PaaS)" depending on their specific features and functionalities.

• Netlify
• Heroku
• Firebase
• Render
• sst
• Koyeb; via @adii_kris, Apr 2024.

See also: PaaS, ServerlessHorrors

Phone formatted PDFs are a great option to provide reading material and courses in.

The Little Book of Deep Learning is where I first encountered "Phone formatted book". The LaTeX layout is in this git repository.

k2pdfopt  optimizes PDF/DJVU files for mobile e-readers (e.g. the Kindle) and smartphones via 🐥svat

Home page -- </> htmx - high power tools for html

Papers

[@10.1145/3648188.3675127]; PDF

Articles

• The philosophy behind htmx and hyperview and hyperscript -- Hypermedia Systems
• Chris James -HTMX is the Future
• HTMX for ASP.NET Core Developers - .NET Tools Guide -- A set of videos explaining what HTMX is, and how ASP.NET Core developers can use it to create rich client-side experiences.. 17 videos and posts!
• A little taste of HTMX (part 1/5), 2, 3, 4, 5
• Full-stack web development with HTMX and Bun, Part 2: Pug templating | InfoWorld
• Build your own HTMX

Presentations

• From React to htmx on a real-world SaaS product by David Guillot
• The Life & Death of htmx by Alexander Petros at Big Sky Dev Con 2024

Videos

• htmx in 100 seconds - YouTube

Resources

• rajasegar/awesome-htmx: Awesome things about htmx

Related

• Hyperlink maximalism | thesephist.com

See Also

• Unpoly: Unobtrusive JavaScript framework. Read the blogpost - We're breaking up with JavaScript frontends
• Hwy Framework
• htmz - a low power tool for html
• DATASTAR "Real-time hypermedia framework"

Golang

• ZEISS/fiber-htmx: 🔨Write HTML and HTMX applications in pure Go using ⚡️ fiber. And lot more ...
• quii/todo: spiking out a todo list with htmx
• Golang + HTMX - Creating a Go webserver / HTMX Integration / Template Fragments - YouTube
• 🤯 🏁infogulch/caddy-xtemplate: A html/template-oriented hypertext preprocessor as a Caddy module. Think PHP but the syntax looks like Go templates.
• blackfyre/wga: Jumping forward ~30 years

Python

Django

• EmilStenstrom/django-components: Create simple reusable template components in Django. from A Real World React -> htmx Port; also uses Stimulus: A modest JavaScript framework for the HTML you already have. from the Ruby Hotwired project.
• Django & HTMX - Template Fragments with django-render-block - YouTube
• Django, HTMX and Alpine.js: Modern websites, JavaScript optional

Elixir

• phoenix liveview

Ruby

• hotwired

Javascript

From the creator of Ahastack = Astro.js + HTML + Alpine.js

Every feature I add to a new webapp I'm building with Astro + Alpine + htmx + Tailwind + Pocketbase just brings me joy in how simple this stuff can really be. It's delightful. via

Plainweb is a framework using HTMX, SQLite and TypeScript.

plainweb learned from and is heavily inspired by the Grug Brained Developer, SQLite, HTMX, PocketBase, Remix, Litestream and some of the Go proverbs.

dotnet

HTMX for ASP.NET Core Developers - JetBrains Guide

CSS

Franken/UI -- HTML-first, framework-agnostic implementation of shadcn/ui - franken/ui.

What to keep in mind while making websites -- Rediscovering the Small Web - Neustadt.fr

What should a personal website be? - ratfactor

100 things you can do on your personal website | James' Coffee Blog

• [ ] Joodaloop's recipe for making websites - covers Principles, Stack, Inspiration, Type, Javascript and Analytics.

• ROCA: Resource-oriented Client Architecture

• https://mmm.page

• BuiltWith Technology Lookup -- find out what technology is being used to build a given website. eg: for this website

• Microfeatures I Love in Blogs and Personal Websites

  • table of contents
  • show page progress
  • easily linkable headings
  • grouping series of posts
  • dialogues
  • code blocks with origin
  • code blocks with clickable links
  • markers for external links
  • different markers for different destinations
  • link preview
  • rss feeds
  • links to other sites

About

• Why WASM?
• A WebAssembly Deep Dive 🔎 - How Wasm works under the hood - YouTube by Fermyon that provides wasm hosting services.
• The JVM vs WebAssembly: An In Depth Comparative Analysis By Shivansh Vij - YouTube

Ecosystem

WasmEdge is a lightweight webassembly runtime for cloud native, edge and decentralized applications. It can be used to power serverless apps, embedded functions, microservices, smart contracts, and IOT devices.

Wasmer - The Universal WebAssembly Runtime "run any code on any client" with webassembly and wasmer.

2023-05-30: Announcing WASIX

WASIX is the long term stabilization and support of the existing WASI ABI _plus_additional non-invasive syscall extensions that complete the missing gaps sufficiently enough to enable real, practical and useful applications to be compiled and used now. It aims to speed up the ecosystem around WASI so that the Wasm’ification of code bases around the world can really start _today!_And it does so without any breaking changes to wasi_preview1.

WASIX:

• It’s a toolchain:
  • Rust
  • C (upcoming support for Zig!)
  • AssemblyScript (expect upstream support soon!)
• It's a specification: https://wasix.org/docs/api-reference
• Runtime support: starting with Wasmer, but we expect more runtimes joining the initiative soon!
• Is fully runnable in browsers

Projects using WASM

• Pretzel, source

Runtimes

Chicory, a JVM native WebAssembly runtime, which allows you to do things like:

WasmModule module = Parser.parse(new File("./factorial.wasm"));
Instance instance = Instance.builder(module).build();

My CSS Hacks

• GitHub - btbytes/natty.css: all natural css; Aug 2025
• webgarden -- The idea behind these pages is that they are "semantic HTML" pages with no extra div or CSSclass, and see how we can markup "plain" HTML pages to look good/different.
• Semantic CSS for Pandoc -- same idea but applied to HTML generated by pandoc, and also pandoc+missing.
• zettelake.surge.sh -- css experiments that started with zettelkasten and index, but also includes some visualization experiments involving card DAGs. July-Aug 2025
• the-monotyper-manifesto; July-Aug 2025

Learn

• The CSS Cascade Or, How browsers resolve competing CSS styles.
• Modern CSS Explained For Dinosaurs – Actualize – Medium; Feb 2018 (refers to BEM etc.,).
• CSS Variables [Mar 2018]
• 30 CSS Selectors
• 30 Seconds of CSS - "A curated collection of useful CSS snippets you can understand in 30 seconds or less."; HN
• BEM — Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development. Uses naming convention.
• CSS Grid Track Options | Geddski

Learning CSS by playing

• My own Web Garden
• Grid Garden - A game for learning CSS grid
• Flexbox Froggy - A game for learning CSS flexbox
• Flexbox Defense
• CSS Diner - Where we feast on CSS Selectors!

Frameworks

• Libraries — Lighten the Web

There are lightweight alternatives to commonly-used libraries. Some do away with compatibility with old browsers, some are less bloated, and some just do less.

• bulma -- A modern CSS framework based on Flexbox
• Picnic CSS ; this is very clean.
• U.S. Web Design Standards is very thorough and nicely done.
• Spectre.css - a Lightweight, Responsive and Modern CSS Framework. Use sprecre-css, a maintained fork instead.
• NES.css - NES-style CSS Framework
• Vanilla documentation ChatGPT recommended this framework when I asked for css frameworks similar to Bulma. This is from Ubuntu, the linux vendor. Looks extensive, and well used for large sites producing lots of text-y documentation. #css-framework
• Duet Design System

Functional CSS

Programming history leading resulting in "functional" CSS -- CSS Utility Classes and "Separation of Concerns"

In defense of Functional CSS | Mike Crittenden's Blog

Functional CSS frameworks

• TACHYONS - Css Toolkit is a "functional CSS" framework. looks very low-level. composable things. Probabaly not suitable for quick and easy copy-pasting.
• Tailwind CSS - A Utility-First CSS Framework for Rapid UI Development. See Tailwind Builder via HN . See tailwind
• Basscss

Javascript

StyleX is a JavaScript syntax and compiler for styling web apps.

StyleX combines the strengths and avoids the weaknesses of both inline styles and static CSS. Defining and using styles requires only local knowledge within a component, and avoids specificity issues while retaining features like Media Queries. StyleX builds optimized styles using collision-free atomic CSS which is superior to what could be authored and maintained by hand.

Tools

• CSS Grid Layout Interface Builder | LayoutIt! .

• stylelint -- "A mighty, modern linter that helps you avoid errors and enforce conventions in your styles."

CSS Variables

• Pollen is a highly configurable, responsive library of style-agnostic CSS variables for your next design system.
• Utopia an approach to Fluid Responsive Design. Youtube Video
• Open Props: sub-atomic styles

Colors

OKLCH Color Picker & Converter; OKLCH in CSS: why we moved from RGB and HSL

Typography

use Modern Font Stacks -- use the System font stack "The fastest fonts available. No downloading, no layout shifts, no flashes — just instant renders."

Markdown

ReMarkdown — HTML that looks like Markdown text

Flexbox

• Holy Grail Layout — Solved by Flexbox — Cleaner, hack-free CSS
• From "Modern CSS explined for dinosaurs"

Semantic css

My favorites in particular order are: water.css, pico.css, mvp, though matcha looks excellent (May 2024), and I'm going to try it going forward.

• matcha.css | Drop-in semantic styling library in pure CSS; the site also has a "preview website" feature - which, given a URL, will apply the semantic CSS and let you preview the site. It also has a custom build feature that allows you to select exactly which elements you want to apply these styles + customize colors. Excellent library and website!
• missing.css -- The goal of missing.css is to reduce needed intervention in HTML. It lets authors
  • start with a good out-of-the-box experience,
  • customize it easily, even create multiple themes,
  • build common components using plain, semantic HTML,
  • create unique sites by applying utility classes as needed.
• Carpetsmoker/hello-css: A CSS template focused on readability
• Water.css -- is a just-add-css collection of styles to make simple websites like this just a little bit nicer..

• CSS Bed is a collection of "classless css themes" to use as starting points in web development.
• tacit
• Basic.css - Classless CSS Starter File -- Carrer Blog: Don’t use CSS Reset use CSS Set
• Pico CSS • Minimal CSS Framework for semantic HTML
• Simple.css Simple.css is mostly classless, which means that you can integrate Simple.css with plain HTML and your site will look great.

• Writ; ref page -- too bare bones, I recommend ones above.
• swyxio/spark-joy a list of semantic, and minimal CSS frameworks.

Minimal CSS

• Comparison of "Drop-in Minimal CSS". "Dropin-minimal-CSS"
• 58 bytes of css to look great nearly everywhere -- main {max-width: 38rem;padding: 2rem;margin: auto;}
• Element CSS
• ungrid - the simplest responsive css grid (58 bytes). @media (min-width: 30em) {.row { width: 100%; display: table; table-layout: fixed; }.col { display: table-cell; }}
• MVP.css - Minimalist stylesheet for HTML elements
• PaperCSS • the less formal CSS framework Kind of a hand drawn look to it.
• Terminal CSS
• Simple.css - A classless CSS framework
• Bolt CSS Basic styles for HTML Elements. Providing a mostly-reasonable set of styles without classes.

Javascript styling system

StyleX "JavaScript syntax and compiler for styling web apps." by Meta.

StyleX combines the strengths and avoids the weaknesses of both inline styles and static CSS. Defining and using styles requires only local knowledge within a component, and avoids specificity issues while retaining features like Media Queries. StyleX builds optimized styles using collision-free atomic CSS which is superior to what could be authored and maintained by hand.

Cool stuff / experiments

• Chinese Window Lattice And CSS
• The Simpsons in CSS
• All monospace-web; Final output; some more monospace pages
• CSS Holographic Masks inspired by Holograms, light-leaks and how to build CSS-only shaders - Robb Owen

Classic CSS

• The Sinorcaish Stylesheet the original inspiration for www.btbytes.com as you can see from the Archive Page

Good CSS examples

• Good layout for reading text from sapiens.org

Tips and tricks

• Hardest Problem in Computer Science: Centering Things @ tonsky.me

Typographic CSS

Introducing TODS – a typographic and OpenType default stylesheet | Clagnut by Richard Rutter

Trying to collect websites that are intersting, free-standing, with a bit (or a lot) of personality. Preference given to "hand-made" websites. And to do so, all you may need is HTML.

The art of building "personal" websites is a thing of the 90s, it appears.. (See also the idea of IndieWeb).

Why have a personal website?

• A Website To End All Websites | Henry From Online
• 95 reasons for having your own website

---

• Joe Roberts
• For What It's Worth [Offline]
• George Hart
• Peter Norvig -- needs no introduction for anyone familiar with computer science.
• Dubno.com -- a family website.
• Mark Irons’ Home Page -- a huge inspiration for this page. I made a note of his passing here.
• Zuckershack -- friend of MLI mentioned above.
• Boston
• kirk.is|archive by month
• HomePage for Brian Harvey (bh at cs.Berkeley.EDU) author of Simply Scheme: Introducing Computer Science
• https://blog.plover.com/
• http://www.thattommyhall.com/ creator of SICP distilled. also see his "101 Goals in 1001 days" project.
• Patterns — Gordon Brander
• Thorsten Ball -- good frontpage for developer
• Laurence Tratt -- good frontpage for developer
• The Murgia Hack System -- good use of simple, multiple column layout.
• Jason Goldstein | Developer uses Matthew Butterick's Equity Text typeface for body. nice.
• Jordan Vincent | UX Designer & Software Engineer
• kevinlynagh.com -- very readable, text first website design.
• Gwern.net -- in depth articles. in his own words -- "psychology, statistics, and technology; I am best known for my writings on the darknet markets & Bitcoin, blinded self-experiments & Quantified Self analyses, dual n-back & spaced repetition ... ". Built using Hakyll.
• Dan Luu in depth articles on hardware and software engineering. (eg: Do programmers need math?, HN: the good parts)
• byuu | byuu.net -- game emulator resources.
• ~hl -- “an online dustbin where you leave your collected written thoughts” — someone describing this website. Programming and stuff. Arrived there via XML is almost always misused.

• Jeff Kaufman
• Fabulous Text Only Websites, 2018 Edition
• Peter Schaffter; the creator of mom groff macros.
• Evan Jones - Software Engineer | Computer Scientist
• Minid.net – Diego Martin Lafuente's personal website & blog
• Cal Paterson, programming essays. See How a SQL database works.
• Kragen Javier Sitaker’s home page -- programmer, long essay writer. Worked with him for short duration (few emails?) in 2008, when I was working for Aaron Swartz.
• John Salvatier ai and machine learning researcher. See: Reality has a surprising amount of detail
• Simplifier -- diy website. plenty of projects on the homepage. hosted on neocities. really cool. This is one of the best examples of a "High Signal/ Low Ceremony" websites you can find. Even the webpages appear to be written "by hand". Amazing. The fact that the creator did not even put a name on it makes it even more impressive.
• Piero Scaruffi's knowledge base; over 6000 colorful pages. whew.
• JMNCO Home Page (Flounder)
• Org-mode, Emacs, and Getting Things Done hand built site of various stuff. search for his root of the website http://members.optusnet.com.au/~charles57/ in google to see more pages. the root of his website shows a default page.
• Tom Murphy 7's Invincible Web Page -- CS person. Interesting '90s looking design. programming languages, games, art stuff.
• Codex 99 -- about art, design and history
• Words and buttons online — a growing collection of interactive tutorials, demos, and quizzes about maths, algorithms, and programming.
• Graham Duncan -- via david_perell; see also Miikka Koskinen, which has long been an inspiration for this site. I am yet to incorporate the "portfolio" aspects of either site.
• Dmitry.GR -- electronics projects.

• Beyond the Frame -- development blog, clojure etc. uses Tufte CSS, pleasing design.
• A Universe of Sorts -- math, chapellang, and clojure blog.
• Developer Roadmaps - roadmap.sh
• Felix' Blog #programming #blog
• Arne Bahlo #programming #blog
• Beej's Web Page, Brian "Beej Jorgensen" Hall, creator of many popular networking, and programming guides. He is using pandoc for his newer books.
• ajkprojects of asnewman
• ~hl/Hugo Landau - “an online dustbin where you leave your collected written thoughts” — someone describing this website
• Chip Huyen; well put together front page and an informative website. An excellent personal website.
• John Jacobson -- programming and visual arts.
• josh avanier - code, photos, draw, generative art.
• XXIIVV — about -- another member? of the 100 rabbits collective found via avanier's page
• Brad Woods Digital Garden -- Notes about creative coding on the Web; see 7GUIs
• Interactive Storytelling Tools for Writers | Chris Crawford "This website has been in operation since 1996. It is older than Google, Netflix, Facebook, and Amazon. It still runs on a server using vacuum tubes."
• LukeW Ideation + Design | Digital Product Strategy & Design, esp AI related
• Ordinary Abundance -- Edward Bellamy once imagined that music on demand would be "the limit of human felicity." A modern apartment is full of things that once drew the same kind of awe.

Meta

• Tiny Awards "a small prize to celebrate interesting, small, craft-y internet projects and spaces which basically make the web a more fun place to be."
• Sumit Khanna -- A History of Personal and Professional Websites -- nice recollection of his websites '90s to now.
• Show your personal websites | Lobsters Jan 2020. Interesting collection of websites, mostly static (expected, considering its a lobste.rs user).
• HN

• www.marginalia.nu @ marginalia.nu -- search engine (" DIY search engine that focuses on non-commercial content, and attempts to show you sites you perhaps weren't aware of in favor of the sort of sites you probably already knew existed."), encyclopedia("This is a what-if experiment in web design: What if we designed web-sites according to print principles, an experiment in web design, a high-readability, low-distraction encyclopedia with design choices such as narrow column widths, high line-spacing and a consistent typeface."), website explorer("This is a game where you explore more or less random and obscure websites around the Internet, based on the database of the Marginalia Search Engine.")
• twitter thread "Reply with a link to the best web dev portfolio you've seen"
• Webring by Avanier; see also applianceri.ng - Appliance Ring
• What to keep in mind while making websites -- Rediscovering the Small Web - Neustadt.fr by Parimal Satyal.
• Protoweb --  a community-driven public service that hosts historical Internet websites to demonstrate the Internet in its early days. Its goal is to rebuild and restore early Internet services to offer a seamless browsing experience.
• neugierig.org, site of Evan Martin, who blogs about programming and technical topics ( Chrome, Jujutsu etc.,)
• Aman Bhargava (amah.bh) form Bengaluru; blogs on design, data and code. See How Bangalore Uses The Metro

Related

• Search engine for searching people’s personal websites: https://wiby.me/
• Text-only websites by Sijmen J. Mulder
• Into the Personal-Website-Verse · Matthias Ott – User Experience Designer

Portals

• Zoroastrianism portal.

---

See also:

• my-websites

Gist -- http://gist.github.com/ is a small code hosting service provided by github. It is a convenient place to store:

• one-off scripts
• snippets of code that is reusable.
• Short HOW-TO notes that can save you time the next time around
• Funny, memorable, poignant texts that you got as a forward etc.,

See my Gist Index and this is a better index (gist.aviperl.me), to see rendered files.

By others -- vsouza/awesome-gists: A collection of amazing gists

gist hostby simon willison is a tool that lets you see a browser-rendered version of an HTML page that you have saved to a Gist.

Sublime text

I use sublimetext's gist package to paste, edit and manage the gists directly from inside the sublime text editor. This is a very nifty thing I found out in Dec 2018.

Databases

• Exporting to CSV from MySQL.
• Given a CSV file with a header row, and at-least one row of data, output a SQL CREATE TABLE statement by guessing the data type of the columns.

Shell

• Get date to set date. useful when you want to "copy" time from one system to another.
• Simple module for getting amount of memory used by a specified user's processes on a UNIX system.
• Correct way to rsync a local dir to remote server.
• Kickstart a new Jekyll post from the command line.

Python

• Programming in Python using Unicode Kannada. A simple hello world.
• Search using PyTyrant (tokyo tyrant).
• Extract title and metadata from a reStructuredText documentI fixed up the original program to make it work with Python3.6

C

• GMT Time

Web

• Minimal HTML5 template.
• Using favicons in HTML header (a fork).

Gist related projects

• GLSL.io -- Open Collection of GLSL Transitions
• Gistbox
• Opengist "Self-hosted pastebin powered by Git, open-source alternative to Github Gist."

Others gists

• John Daily's gists have a good collection of links to papers related to distributed computing, erlang etc.. Erlang resources
• Principles of Adult Behavior by John Perry Barlow, ca 2013
• Twitter mute words