You should rename the master
branch to main
in git, and on GitHub. Here's how!
...with one click on github.com/:owner/:repo
:
const variables = require('stylelint-config-primer/plugins/variables') | |
const {DEFAULT_RULES} = variables | |
const variableRules = {} | |
for (const rule of Object.keys(DEFAULT_RULES)) { | |
variableRules[rule] = false | |
} | |
module.exports = { | |
plugins: [variables], |
This is an attempt to get Leaflet working with D3's Albers USA projection.
This first stab works deceptively well: the coordinates are at least self-consistent, so centering, panning and zooming work as expected. There are some problems, though:
d3.geo.albersUsa()
projection appears to return null
for coordinates that don't fall within its parallels, which Leaflet doesn't like.NaN
s and fails.scale(.25)
is a stab in the dark that makes the US approximately the right size at zoom 3, but is most certainly wrong.In general, it's not clear whether we should be transforming D3's projection (which, according to the docs, doesn't support translation anyway) or Leaflet's transformation (currently a noop).
<sticky-element class="top-0" stuck-class="top-0 bg-white" stuck-style="height: 64px"> | |
<h1 class="h1" stuck-class="h2"> | |
I stick to the top | |
</h1> | |
</sticky-element> |
@keyframes glow { | |
0% { color: yellow; } | |
100% { color: red; } | |
} | |
@keyframes grow { | |
from { transform: scale(0.1); } | |
to { transform: scale(1); } | |
} |
This gist shows how to restrict d3's zoom behavior so that users can't pan outside of a rectangular bounding box. Use your scroll wheel to zoom in and out of the field of circles, and click and drag to move when zoomed in. Note how when you zoom back out (by scrolling up) the view snaps to the original extent at zoom 1.
This is an example of what you should be able to do once the major browsers implement some seriously cool features in the CSS3 draft spec as of April, 2016:
--name: value
assignment and var(--name)
accessor syntax. (Already implemented by Chrome, Firefox, and Webkit!)px
or em
from a percentage. (Partially implemented in Chrome, Firefox, and Safari.)attr(attr-name units)
. (Not yet implemented in any major browser.)Together, these features would enable us to use HTML element attribute values as the basis for calculated values in CSS on a per-element basis, and define (then change) which property the values are applied to. This would open up possibilities for more data-driven design entirely in CSS, without the need for JavaScript.
Note: I've
export default function extend(Component, extensions = {}) { | |
const {fixedProps, ...otherExtensions} = extensions | |
const Extended = fixedProps | |
? props => <Component {...props} {...fixedProps} /> | |
: props => <Component {...props} /> | |
return Object.assign(Extended, Component, otherExtensions) | |
} |
{ | |
"private": true, | |
"scripts": { | |
"test": "jest" | |
}, | |
"dependencies": { | |
"babel-preset-env": "1.7.0", | |
"jest": "23.4.1", | |
"styled-system": "3.0.2" | |
}, |
const resolveIdRefs = require('resolve-id-refs') | |
class RemoteSummary extends HTMLElement { | |
clicking = false | |
onToggle = event => { | |
if (this.clicking) { | |
return | |
} | |
const {target} = event |