a list of things to remember
hosts
- fleek -- ipfs and http
- vercel -- http
- hashbase -- dat & http
- render -- http + some backend stuff
- fission
- surge -- http
- netlify -- http
- heroku
- pinata -- ipfs
- concordant -- "More power to your edge app"
- bunny fonts -- GDPR ok font CDN
- fly.io
static frameworks
cryptography
- End-to-End Encryption in the Browser -- This is how wormhole works. Put the secret key after the
#
in the URL, so it is never sent to the server.
CMS
dom stuff
- hyperx
- hyperxify
- lit-html
- nanoHTML
- uhtml
- hyperapp
- mutant
- tonic
- remix.run
- htm-ssr gist
- htm + vhtml
- htm demos & examples
- HTML with Superpowers -- An Introduction to Web Components
- HTML with Superpowers: The Guidebook
- Virtual DOM is pure overhead
- Components Are Pure Overhead
state containers
- nanostores
- wtw.dev/51-nanostores -- a little video
- observ
- teaful
- preact/signals ⭐
- redux-zero
- developit/unistore
- nichoth/preact-pull-stream -- my own thing
css
- bulma -- css
- stitches.dev -- CSS in JS
- How does Apple make that awesome frosted glass effect on their site header in CSS?
tl;dr
backdrop-filter: blur(20px) saturate(180%)
tl;dr
.carousel {
scroll-snap-type: x mandatory;
}
.carousel .item {
scroll-snap-align: start;
}
- Speedy CSS Tip! Turn your images into Polaroid™ + codepen link
- How Apple makes their beautiful hamburger menu in pure CSS (no JS!) + see codepen
- see ssc-server
- steve on youtube
- How http://github.com makes such beautiful text gradient effects in CSS + see example
- How does Tesla make that beautifully smooth full page swipe effect on their homepage? + see codepen
- Create a nice background pattern with 4 conic-gradient + see codepen
- nextUI dropdown
- Use calc && scoped custom properties to create a pure CSS expanding gallery view + see codepen
- radix ui
- vmin unit -- the lesser of
vw
andvh
- fluid typography
- auto-fill vs auto-fit
- Do you know we can adjust the space between an element and its outline?
- Master the art of CSS box-shadow: a comprehensive cheatsheet
- Speedy CSS Tip! ⚡️ Create this neat card hover effect with a custom property switch + codepen demo
- The Guide To CSS Animation: Principles and Examples
- A shaded blur behind a logo is simple but beautiful affect. Let's see how @vite_js does it. + codepen
- An Interactive Guide to Flexbox
- UI design tip -- I’ve been doing buttons wrong!
- Need a rainbow gradient? Let
<hue-interpolation>
do the work - Everything you didn't know you need to know about buttons + blog post
- Here is how I implemented dark mode on my website
- If you're not using border-image in CSS, you are missing out on a very cool effect!
- be sure to optimize and prioritize your images
- Create a nice 3D Zig-Zag edge + codepen demo
- select the first and last element with a specific class -- codepen demo
- Use @counter-style to customize your
<ol>
list -- codepen - Serving less data to users with the
prefers-reduced-data
media query - CSS Text balancing with text-wrap:balance
- Use modern CSS tricks to create fancy range sliders + see demo code here
- the “frosted glass” effect
radio buttons
- Pure CSS Custom Styled Radio Buttons
- Accessible Toggles
- Simplifying Form Styles With accent-color
- css-tricks -- Zero Trickery Custom Radios and Checkboxes
scroll snap
- css-tricks
- Josh W. Comeau -- CSS scroll snapping is SO nice.
- How do Nike and Apple make such smooth and touch friendly carousels with pure CSS? -- js fiddle
- CSS only snap scroll is pretty cool -- codepen
- Addy Osmani -- CSS Scroll Snap -- web.dev
- ishadeed.com -- via smashing magazine
design
- https://2020.webconf.asia/
- https://kristen.dev/
- https://www.cassie.codes/ -- see the button
- https://increment.com/
- https://telephone.unlimited.pizza/
- http://broccolini.net/
- https://vvorkvvorkvvork.com/shop
- https://56.digital/
- https://georgefrancis.dev/
- https://www.shawnbinder.com/
- https://www.snaplet.dev/
- https://offseasoncreative.com/
- https://www.siteinspire.com/websites/5116-nice-and-serious
- https://niceandserious.com/
- https://www.siteinspire.com/websites/9564-off-season-creative
fonts
- noe display
- seen here
- noe display
- work sans font
- freight big
- inter
- sen -- seen here
- see fonts of robinsloan.com
hyper
- https://github.com/hypercore-protocol/hypercore
- https://www.datprotocol.com/
- hypergraph
- dat store
- hypercore-protocol.org
- hypertrie -- Distributed single writer key/value store
- dat sdk
- hyperswarm
- dat-store
- https://github.com/jimpick/hyper-graph-db-playground
- hyper graph db
- hyperdiscovery
- hyperDB
- hyperbeam
- hyp cli
- hyperlog -- Merkle DAG that replicates based on scuttlebutt logs and causal linking
- hyperbee -- An append-only Btree running on a Hypercore
- merkle tree stream
misc
- the wet codebase
- recoil -- react state management
- Functional lenses for contemporary frameworks - Andre Staltz
- find-my-way -- http router
- Learn more about Threads and the Powergate from the IPFS Pinning Summit
- CS 253 Web Security
- textile hub
- zx -- script writing thing
- secure database games -- the rumplestiltskin story
- ctzn -- A hybrid p2p/federated social network mad science experiment. WIP.
'p2p'
- orbitDB
- polkadot
- ceramic
- idx
- textile
- fission
- 3box
- moonbeam
- pinata -- ipfs
- moderator.rocks
- atacama -- related to moderator
- p2panda
leveldb
db.createReadStream({
gte: 'user'
lte: 'user~'
})
- dominic's weird idea
- https://github.com/dominictarr/cyphernet
- https://github.com/dominictarr/level-merkle
- https://github.com/dominictarr/level-scuttlebutt
- https://github.com/dominictarr/ltgt
html
you can nest the
<input>
directly inside the<label>
, in which case thefor
andid
attributes are not needed because the association is implicit
- Cache serverless responses with Cache-Control headers
- HTML tips you won't see in most tutorials
- markodenic.com/html-tips
- HTMLInputElement showPicker()
- I didn't realize the native HTML date picker had gotten so good
- https://whitep4nth3r.com/blog/html-is-all-you-need-to-make-a-website/
- Bulletproof Sessions with HttpOnly Cookies
- TIL, there are
new-password
andcurrent-password
autocomplete values - Cumulative Layout Shift + images & the link
- Building an effective Image Component
- How to get the best image performance (Updated 2021)
- Image quality & performance video
- HTML is a living language in constant evolution. The latest addition has been a new semantic element for searching/filtering operations
- search role
images
- bholmes.dev -- image optimization for any web framework
- bholmes.dev -- using-11ty-image-with-any-framework
- A Guide to the Responsive Images Syntax in HTML
- "Blur Up" technique
javascript
- A comprehensive production-grade TypeScript training
- Everything You Need to Know About JavaScript Import Maps
- Just learned you can use underscores as separators in JavaScript numbers.
- 4 ways to handle multiple promises
- JSON.stringify maps
- typescript reset + github link
- just -- utility library
- state machines -- bholmes.dev
- The offline cookbook
db
- kappa-architecture.com
- https://github.com/kappa-db
- kappa-core
- https://github.com/kappa-db/kappa-core/blob/master/intro.md
- planetscale db -- "The database for developers"
- supabase -- The Open Source Firebase Alternative
- upstash
- kappa db
- vaxine
- harperDB
- cockroach DB
- hasura
- How SQLite Helps You Do ACID
- Things You Should Know About Databases
- wunderbase
- DefraDB -- a Peer-to-Peer Edge Database
- Cozo -- a general-purpose, transactional, relational database
- Relational Databases Explained
- Building a database in the 2020s
fancy local-first DBs
- replicache
- dolt
- riffle
- riffle / Building data-centric apps with a reactive relational database -- an essay
- litestream -- Fully-replicated database with no pain and little cost
- ditto
- instantDB
- ccorcos/tuple-database
- triplit see also -- github repo
to read
- Photo Gallery & code
- How to enable Gatsby Functions on Netlify
- Build your own shop with the Shopify Storefront API, Eleventy, and serverless functions
- Dive into the new Glitch data starter apps
money
- rechargepayments.com
- swell -- seen in a video about vercel + ecommerce
- medusa
- Build a SaaS Platform with Stripe
- Cart and Theme Storage
more misc
- State of libp2p
- Hyper Hyper Space: In-browser p2p applications
- fly.io -- global image service article
- hydrogen / shopify
- Setup and run Pi-Hole on a Raspberry Pi
- Faculty Best Practices
- Ever wondered how the Kademlia DHT works?
- How NAT traversal works
- Proof of X -- "At their core, social networks are primarily about one thing: Building social capital through signaling."
- The offline cookbook
- Convert images to AVIF for free, fast
- avif.io source code -- use Rust with wasm-pack to compile a converter library into WASM and call the Rust code in the browser, from a WebWorker.
video misc
sailing + bicycles
- earthstar hyperloop metaphor
- Hold Fast -- Moxie documentary video
- Hundred Rabbits -- a presentation
- Local-first software - Peter Van Hardenberg -- bicycle vs aircraft carrier
storage
- min.io -- Multi-Cloud Object Storage
- webiny -- Build Serverless Solutions in Minutes
- cloudinary -- media server
- web3.storage -- free stuff
- storj
- backblaze -- used by wormhole app
- imgix
new things
- Introducing Quiet - Encrypted P2P team chat without servers, just Tor - Holmes Wilson
- IPFS, orbitDB, Tor
- Check out this speed run where our Applied Researcher Jess builds a decentralized Flickr clone in under 10 minutes
- lynn and tonic
- HOW TO MAKE A WEBSITE
- The offline cookbook
- Bring Your Own Client -- choose your favorite application to interact with some data