Matthew Oden Potter matthewoden

CSS in 2016

So this is roughly how I handle CSS these days. As much as I'd like to use CSSModules for everything, I work on a lot of different projects, for a lot of different clients. They can't all be a SPA.

Some of this seems blindingly obvious. But until I stop cleaning up messy, repetitive CSS, I figure it all merits being said.

Create a Baseline

I use one file to style HTML. This creates a baseline for the body, defines my box model, sets global typography rules, etc. If I need to style an HTML element, I style it globally. Otherwise, I give an element a class, and only style that class.

Setting up Erlang and Elixir from precompiled binaries.

Itching to write Elixir? Are you not allowed, don't want to use homebrew? Too lazy to compile from source? Here's step-by step instructions to get Elixir and Erlang up and running on your mac, using precompiled binaries.

Setting up Erlang

Download a precompiled version of Erlang from here.
Run that thing.
When complete, type erl in your terminal to test that erlang has been appropriately added to your path.

Setting up Elixir

Download the precompiled zip from latest, unzip, rename the folder to elixir.

AWS Remote Git Setup

Get a local git repo up on an EC2 Instance.

Add youself to SSH Authentication:

Add yourself to the ssh auth agent, if you haven't already.

ssh-add path/to/your/EC2.pem

Set up destination directory:

Gunshots or Fireworks

I'm working on a little app that crowdsources the answer to "was that gunshots? or were those fireworks?", roughly 2-5 minutes after the sound was heard.

It's hard to tell in the city sometimes.

Anyway, it does this by checking the public call logs for all St. Louis Metro Police department "calls for service" (so 911 calls, non-emergency calls, etc). The call logs can be found here: http://www.slmpd.org/cfs.aspx

It runs this check every two minutes, and parses the result. After a little data padding (geocoding results and intersections, ISO formatting timestamps, etc), it adds it to a MapSet, so there's exactly one record per result.

####david.antaramian in @elixir-lang slack, #beginners [2:11 PM]

Just in case you need it for reference in the future, this is the problem we normally see people run into: People will sometimes have called the environment variable during a module attribute assignment. Like the following:

defmodule MyAPP.APIClient do
  @api_key System.get_env("API_KEY")
end

	/*
	So the above file here is my Full page react file. I do a couple things here:
	- In the head, I inject my important CSS inline.
	- In the body, I link to my commons chunk (with react, react-router, and anything that's going to be on every single page).
	- Beneath that is the app entry file.
	- Beneath that is a dynamically generated chunkfile, based on the current route.

	Each of these are cachebusted with a hash, pulled from the webpack stats file.
	*/

	/*
	This is a real simple pattern that allows you to
	maintain a syntax similar to classnames, but use
	CSS Module mode in webpack.
	(solving the problem of cleanly using object properies as keys)
	*/


	function use(result, conditions){
	/*

	### Keybase proof

	I hereby claim:

	* I am matthewoden on github.
	* I am matthewoden (https://keybase.io/matthewoden) on keybase.
	* I have a public key whose fingerprint is F6F6 2057 3940 2832 DE5A 2CEA 8C29 6376 B13A 3DD4

	To claim this, I am signing this object:

	Resources:
	sslSecurityGroupIngress:
	Type: AWS::EC2::SecurityGroupIngress
	Properties:
	GroupId: {"Fn::GetAtt" : ["AWSEBSecurityGroup", "GroupId"]}
	IpProtocol: tcp
	ToPort: 443
	FromPort: 443
	CidrIp: 0.0.0.0/0

	#!/usr/bin/env bash

	# Created by Matthew Potter, March 2020
	# Publish a branch to the upstream origin, then open the url.
	#
	# git alias example (note - not a bash alias):
	# publish = "!git push -u origin $(git rev-parse --abbrev-ref HEAD) && ~/path/to/script/POST_PUSH"
	# usage:
	# git publish