Skip to content

Instantly share code, notes, and snippets.

@jannesiera
jannesiera / factoring_event_handlers.js
Last active February 20, 2022 05:44
Breaking down Event Handlers: Decoupling AppState updating and View updating
// IMAGINE:
// There is one screen. On this screen there are two counters displayed: "counterA" and "counterB"
// There are also two buttons: "buttonA" and "buttonAB"
// Desired behaviour:
// Clicking on buttonA will increment counterA by 1.
// Clicking on buttonAB will increment both counterA by 1 and counterB by 1.
// The code here starts with a 'basic' implementation of one would go about this and
// then proceeds to try and factor the event handlers to a more reusable and maintainable structure.
// Inspired by : https://docs.microsoft.com/en-us/dotnet/standard/io/how-to-copy-directories
// Currently does NOT YET replace files (throws exception if file already exists, should instead remove existing file and overwrite, but be able to recover if something goes wrong during the process)
/// Copy and replace the contents from one directory to another. Including subdirectories.
let rec copyAndReplaceDirectory sourcePath targetPath : Result<unit list, string list> =
let sourceDir = new DirectoryInfo(sourcePath)
let targetDir = new DirectoryInfo(targetPath)
match sourceDir.Exists, targetDir.Exists with
| true, true ->
module rec StateMachine =
/// No safe transitions ///
type ButtonState =
| Invalid // Show red and disabled button
| Valid // Show green and enabled button
| Loading // Show a greyed out disabled button, with a loading animation
@jannesiera
jannesiera / FlattenNestedLists.fsx
Created April 4, 2020 14:20
Flatten arbitrarily nested lists of integers
// Data structures
type Node =
| Int of int
| Nodes of Node list
// Behavior
module Node =
// TODO use .flat() or .flatten() instead, but not in this version of JS yet?
flatten(arrays) {
return [].concat.apply([], arrays);
}
isScorable(posAllStars: number [] [], colors: number []) {
const starColor = colors[0];
// Check for every star and collect the results
return this.flatten(
@jannesiera
jannesiera / vuex_orm_graph.js
Last active May 19, 2018 09:54
Example API for an ORM for Vuex (graph-like/inspired)
/* New test relational (graph-like) db */
// NOTE: Relationships are like *arrows* from one entity to another, they are directed (the relationship is defined on the target entity)
// and *always* many-to-many. If you want a one-to-many relationship, make sure you just add one *arrow* and always take the first().
// Demo Structure of state
const s = {
db: {
posts: {
const acceptor = (predicate, mutation) => ({
predicate: predicate,
mutation: mutation
});
export const createModel = update => {
const acceptors = [
acceptor(
proposal => proposal.name === `precipitations`,
proposal => update(model => {
/* DESCRIPTION
In this file are two code samples. They both implement the exact same functional requirements but in a different way.
Your challenge? Write a description of what this piece of software does.
Why? I would like to know which piece of code you find easier to grasp. What can you tell me about each snippet?
*/
/* SNIPPET 1 */
// VIEW
var view = {