skullface

Here’s what I learned at Rustbelt Refresh 2019: “Next Steps with CSS Layout” with Rachel Andrew~!

---

📓 Reference

• Rachel Andrews’ workshop pens masterlist ⭐️
• MDN: CSS Grid Layout Guides and Properties
• CSS Tricks: A Complete Guide to Grid
• Codrops: CSS Reference: Concept: CSS Grid

robertgonzales

class Frame extends Component {
  componentDidMount() {
    this.iframeHead = this.node.contentDocument.head
    this.iframeRoot = this.node.contentDocument.body
    this.forceUpdate()
  }

  render() {
    const { children, head, ...rest } = this.props
    return (

toolness

Converting CALC from JQuery to React/Redux

At the end of 2016, the [CALC][] team experimented with converting the single-page app on its front page, referred to as the [Data Explorer][], from JQuery to React + Redux.

Rationale

We inherited the [1350-line explorer.js][explorer-1] from a previous team. This code was written under different project and time constraints,

caseywatts

Short link to this page: caseywatts.com/quicktime

Other gists & tricks: http://caseywatts.com/gists-and-tricks

Unrelated update: my book is out! Debugging Your Brain is an applied psychology / self-help book

Quicktime + Hangouts Recording

Scenario: You want to talk with someone over google hangouts (like for a user study), and you want to record BOTH:

max-mapper

{"help": "https://catalog.data.gov/api/3/action/help_show?name=package_search", "success": true, "result": {"count": 48, "sort": "views_recent desc", "facets": {}, "results": [{"license_title": "License not specified", "maintainer": "New Media", "relationships_as_object": [], "private": false, "maintainer_email": "newmedia@whitehouse.gov", "num_tags": 5, "id": "59694770-b6b6-4ae0-a4b9-4ae69c0be2f6", "metadata_created": "2016-07-02T10:06:26.199575", "metadata_modified": "2016-07-02T10:06:26.199575", "author": null, "author_email": null, "state": "active", "version": null, "creator_user_id": "47303a9e-1187-4290-85a3-1fc02dc49e4a", "type": "dataset", "resources": [{"cache_last_updated": null, "package_id": "59694770-b6b6-4ae0-a4b9-4ae69c0be2f6", "webstore_last_updated": null, "id": "3a8a0ad1-19e7-4153-bb2f-d70cf88aaaf8", "size": null, "state": "active", "hash": "", "description": "", "format": "CSV", "tracking_summary": {"total": 32, "recent": 1}, "last_modified": null, "url_type": null, "no_real_name": "True", 

toolness

Reflections on Docker-based development

Note that these reflections are specifically tailored to a conversation about Docker we're having at 18F, and as such they have a few assumptions:

• All developers use OS X.
• Production deployments will be done via cloud.gov.
• Developers have access to AWS sandbox accounts.

Advantages

caged

ndjson-join 'true' <(cat oregon.json) <(shp2json -n data/shp/arc_reference/ned_1arcsec_g.shp) \
  | ndjson-filter -r jsts 'function(d) { var r = new jsts.io.GeoJSONReader(), g1 = r.read(d[0].geometry), g2 = r.read(d[1].geometry); return !g1.intersection(g2).isEmpty() }.call(this, d)' \
  | ndjson-map 'd[1]'

nolanlawson

Why we dropped Lerna from PouchDB

We dropped Lerna from our monorepo architecture in PouchDB 6.0.0. I got a question about this from @reconbot, so I thought I'd explain our reasoning.

First off, I don't want this post to be read as "Lerna sucks, don't use Lerna." We started out using Lerna, but eventually outgrew it because we wrote our own custom thing. Lerna is still a great idea if you're getting started with monorepos (monorepi?).

Backstory:

• https://pouchdb.com/2016/01/13/pouchdb-5.2.0-a-better-build-system-with-rollup.html

ascott1

Show me the code! Do you prefer seeing how something works instead of instructions? If so, check out this pull request to the Amortize module. Each instruction below lives as its own commit. cfpb/amortize#11

1. Add an .npmrc file.

The contents of the file should be:

save-exact=true

1wheel

//creates new point 
function P(x, y, color){
  var rv
  if (x.map){
    rv = {x: x[0], y: x[1], color: 'black'}
  } else{
    rv = {x: x, y: y, color: color || 'black'}
  }
  rv.toString = function(){ return rv.x + ',' + rv.y }
  rv.type = 'point'