Skip to content

Instantly share code, notes, and snippets.

Evan Czaplicki evancz

Block or report user

Report or block evancz

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@evancz
evancz / data-interchange.md
Last active Jan 22, 2020
Why do I have to write JSON decoders in Elm?
View data-interchange.md

A vision for data interchange in Elm

How do you send information between clients and servers? What format should that information be in? What happens when the server changes the format, but the client has not been updated yet? What happens when the server changes the format, but the database cannot be updated?

These are difficult questions. It is not just about picking a format, but rather picking a format that can evolve as your application evolves.

Literature Review

By now there are many approaches to communicating between client and server. These approaches tend to be known within specific companies and language communities, but the techniques do not cross borders. I will outline JSON, ProtoBuf, and GraphQL here so we can learn from them all.

@evancz
evancz / Architecture.md
Last active Jan 15, 2020
Ideas and guidelines for architecting larger applications in Elm to be modular and extensible
View Architecture.md

Architecture in Elm

This document is a collection of concepts and strategies to make large Elm projects modular and extensible.

We will start by thinking about the structure of signals in our program. Broadly speaking, your application state should live in one big foldp. You will probably merge a bunch of input signals into a single stream of updates. This sounds a bit crazy at first, but it is in the same ballpark as Om or Facebook's Flux. There are a couple major benefits to having a centralized home for your application state:

  1. There is a single source of truth. Traditional approaches force you to write a decent amount of custom and error prone code to synchronize state between many different stateful components. (The state of this widget needs to be synced with the application state, which needs to be synced with some other widget, etc.) By placing all of your state in one location, you eliminate an entire class of bugs in which two components get into inconsistent states. We also think yo
@evancz
evancz / cron.md
Last active Nov 7, 2019
Cron job to remind myself to stretch
View cron.md

Type crontab -l to see your cron jobs. Type crontab -e to edit them. You have to use Vim apparently.

Add a line like this:

0,30	*	*	*	*	/Users/YOURNAME/Documents/scripts/stretch.sh

That is on every 0th and 30th minute of the hour. Make sure all the separators in there are tabs!

@evancz
evancz / recursive-values.md
Last active Oct 24, 2019
Recursive values in Elm
View recursive-values.md

Recursive Values

In a functional language, writing recursive functions is common, but it is also possible to write recursive values. Here is a simple example of a recursive value:

ones = 1 :: ones

This is an infinite loop. We just keep growing the ones list to infinity. So #873 logged folks running into this and made it an error. This was especially nice for cases like x = x + 1 where folks were expecting Elm to allow mutation.

@evancz
evancz / Preferences.sublime-settings
Created Aug 22, 2019
my settings for Sublime Text
View Preferences.sublime-settings
{
"color_scheme": "Monokai.sublime-color-scheme",
"ensure_newline_at_eof_on_save": true,
"fold_buttons": false,
"font_face": "Inconsolata",
"font_size": 16,
"ignored_packages":
[
"Vintage"
],
@evancz
evancz / Ports.js
Last active Mar 21, 2019
Example usage of Elm "ports" that uses signals, non-signals, records, and tuples. Build the Elm code with "elm --only-js Shanghai.elm" and include all of the JS in the HTML document.
View Ports.js
// initialize the Shanghai component which keeps track of
// shipping data in and out of the Port of Shanghai.
var shanghai = Elm.worker(Elm.Shanghai, {
coordinates:[0,0],
incomingShip: { name:"", capacity:0 },
outgoingShip: ""
});
function logger(x) { console.log(x) }
@evancz
evancz / font-face.md
Last active Mar 14, 2019
It seems really complicated to use custom fonts well. This explores some ideas of how to make it easier.
View font-face.md

Making it easier to load fonts

I have been doing a lot of work on making Elm assets really tiny. As part of some exploratory research I did ages ago, I read this document on font loading. It is a super helpful resource, but I was confused by all the different terms: FOIT, FOUT, FOFT, etc. It reminded me of the old "how do you center things?" blog posts from before flexbox. So my instinct was that probably lots of folks are confused about how to do it well, and maybe there is a better way!

So brainstormed some some ideas to:

  1. Save even more bits.
  2. Have an ideal visual experience.
  3. Be really easy to set up.
@evancz
evancz / Guidelines.md
Last active Oct 10, 2018
Some thoughts on how to have nicer discussions online
View Guidelines.md

Towards Discussion Guidelines

I personally like to have discussions in the spirit of the Socratic method. Instead of declaring my opinion, I ask a relevant question. How about this situation? What about this case? This has two possible outcomes.

  1. The other person explains to me how things work in that case. I realize that I misunderstood, and we both come out enriched and in agreement.
  2. The other person realizes that those situations are not covered. They realize they misunderstood, and we both come out enriched and in agreement.

In both cases, it could have been a conflict, egos crashing together. But by asking questions, it becomes a collaboration to find the best answer. Even the simple act of asking a question in the first place says, "I care what you have to say, we can agree on this." That said, I have noticed that it is definitely still possible for things to go wrong within this framework. How can this happen?

There was a passage from [The

View Spelling.elm
port module Spelling exposing (..)
import Html exposing (..)
import Html.App as App
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import String
main =
@evancz
evancz / Haskell-Style-Guide.md
Last active Aug 30, 2018
A style guide for Elm tools
View Haskell-Style-Guide.md

Haskell Style Guide for Elm

Goal: a consistent style throughout all Elm projects that is easy to read and produces clean diffs to make debugging easier. This means valuing regularity and simplicity over cleverness.

Line Length

Keep it under 80 characters. Going over is not the end of the world, but consider refactoring before you decide a line really must be longer.

Variables

You can’t perform that action at this time.