An HTML implementation of refrigerator magnets, with an extra Twitter feed. #complete http://www.elfsternberg.com/2012/03/27/project-fridgemagnets-poetry/
Elf M. Sternberg
141a7c0461
This was a learning experience. The transform controls `rotate`, `scale`, and `translate` have independent CSS names now, so I don't have to memorize the transformation pattern needed to make them go as expected. On the other hand, `transition` is still how you describe the speed and easing. And even though they're not officially transformations, `transitionend` is how you detect when one has completed. All of the various different techniques for figuring out where something is on the page with respect to another element can be terribly confusing. Ultimately, I went with offsets-from-viewport, as that seems to be the most common way of doing the calculations. Separating `pointermove` from the animation frames used to update the page is a very nifty technique that I learned from the Svelte guys. `pointermove` only updates an (x,y) coordinate pair that you keep in memory; as long as you're "tracking a drag," you just update on every available animation frame, using the last (x,y) pair that it saved. This gives you much smoother animations. |
||
|---|---|---|
| .husky | ||
| .storybook | ||
| .wireit | ||
| assets | ||
| media | ||
| src | ||
| stories | ||
| test | ||
| .editorconfig | ||
| .gitignore | ||
| LICENSE.md | ||
| README.md | ||
| index.html | ||
| mute.png | ||
| package-lock.json | ||
| package.json | ||
| pingbg.png | ||
| rollup.config.js | ||
| tsconfig.json | ||
| tweetthis.png | ||
| unmute.png | ||
| web-dev-server.config.js | ||
| web-test-runner.config.js | ||
README.md
Open-wc Starter App
Quickstart
To get started:
npm init @open-wc
# requires node 10 & npm 6 or higher
Scripts
startruns your app for development, reloading on file changesstart:buildruns your app after it has been built using the build commandbuildbuilds your app and outputs it in yourdistdirectorytestruns your test suite with Web Test Runnerlintruns the linter for your project
Tooling configs
For most of the tools, the configuration is in the package.json to reduce the amount of files in your project.
If you customize the configuration a lot, you can consider moving them to individual files.