Raphaël Saunier raphaelsaunier

TodoMVC, with a twist! — Electric Clojure

it's multiplayer! 0 LOC cost
state is durable! (server side database) 0 LOC cost
See those pending spinners? We've added a server delay to demonstrate managed load states.

20220817.todomvc.mp4

Electric is a "multi tier" Clojure/Script dialect for full-stack web application development. It uses macros to let you interweave client and server code in a single .CLJC file, so you can define a full-stack frontend/backend webapp all in one place. Electric is designed for rich dynamic applications with reactive user interfaces and complex frontend/backend data sync requirements.

Setting up shadow-cljs cljs REPL in Cursive

See

in shadow-cljs.edn:

,,,

Say you define a composite tuple like so:

#:db{:ident :foo,
     :valueType :db.type/tuple,
     :unique :db.unique/identity,
     :tupleAttrs [:bar :baz],
     :cardinality :db.cardinality/one}

Now suppose you want to change [:bar :baz] to [:bar :quux]. The [Datomic

Query basics

{:db/ident       :meta/tag
 :db/valueType   :db.type/tuple
 :db/tupleAttrs  [:meta/tag-namespace :meta/tag-key :meta/tag-value] ;; all unique strings
 :db/cardinality :db.cardinality/one
 :db/unique      :db.unique/identity}

Then

purgecss is a tool for removing unused css classes from source files. It's particularly useful for functional css frameworks like tachyons, where it's normal to only use a tiny fraction of available classes. This gist contains example code you could use to add purgecss to a shadow-cljs build.

make sure to yarn add purgecss first
usage is (hooks/purge-css {:css-source __ :js-globs __ :out-dir __})
- :css-source is the path to the original, bloated CSS file (from project root). This is ideally in a source directory, or node_modules as in this example. This cannot be the public path where the css is ultimately read.
:js-globs is a string / vector of strings, indicating which files to read as input. These should be all of your compiled javascript bundles which contain your views. purgecss does a brute-force parse of all these files, extracting all the strings to figure out which clas

10 Things You Are Doing Wrong in your Web Components

Web Components enable custom element creation and sharing on a whole new level that has not really been seen to date but is so desperately needed. Developers of everything from simple webpages to complex applications are using Web Components to deliver new functionality, new behaviors, and new designs. Web Components are a big part of the future of the web.

There are lots of articles detailing how to build a basic Web Component, but almost no article details how to solve some of the gotchas once you start down that road. That's what this article serves to do; point out some of the things every Web Component developer is overlooking and to which they should probably be giving more consideration.

1). Not Using a Web Component Framework

The APIs which make up the Web Components standards (Custom Elements, ShadowDOM, etc) are intentionally low level APIs. As such they are not always the most clear or concise in their understandability. Additionally,

	#_( ;; Allow this script to be executed directly
	"exec" "bb" -o "--classpath" "." "$0" "$@"
	)

	;; Copyright © 2020, Malcolm Sparks

	;; Permission is hereby granted, free of charge, to any person obtaining a copy
	;; of this software and associated documentation files (the “Software”), to deal
	;; in the Software without restriction, including without limitation the rights
	;; to use, copy, modify, merge, publish, distribute, sublicense, and/or sell

	var shell = require("shelljs");
	var nextjsConfig = require("../next.config");
	var distDir = nextjsConfig.distDir \|\| ".next";
	var BUILD_ID = shell.cat(`${distDir}/BUILD_ID`);

	function hoistPages(fileExt, outputPath) {
	console.log(
	`${distDir}/server/static/${BUILD_ID}/pages/*/${fileExt} -> ${outputPath}/`
	);
	shell.mkdir("-p", outputPath);

	;; Accept-Charset = ( "," OWS ) ( ( charset / "" ) [ weight ] ) *( OWS
	;; "," [ OWS ( ( charset / "*" ) [ weight ] ) ] )
	(let [parser
	(let [charset-with-weight
	(p/sequence-group
	(p/alternatives
	(p/pattern-parser
	(re-pattern charset))
	(p/pattern-parser
	(re-pattern (re/re-str \*))))

	AWS_ACCESS_KEY_ID=
	AWS_DEFAULT_REGION=
	AWS_SECRET_ACCESS_KEY=
	AWS_SESSION_TOKEN=
	DATOMIC_SYSTEM=