dancwilson’s Twitter Archive

Popular Tweets

A list of popular tweets by retweets and favorites.

1. The Basics of Handwriting SVG Paths (Part 1): <path d="M 40,20 L 180,280" /> M: Move the cursor to the following x,y coordinate without drawing anything L: draw a straight Line from the previous coordinate to the following x,y coordinate #CssMotionPath
   Permalink On twitter.com ♻️ 203 Retweets ❤️ 1,092 Favorites 2020 Jan 6 Mood +1 🙂
2. Independent transform properties are now also supported in Firefox 72! developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/72 So, for example, you can use translate: 20px 20px and animate/transition separately from any rotation, scaling, and everything in the transform function list
   Permalink On twitter.com ♻️ 98 Retweets ❤️ 432 Favorites 2020 Jan 7 Mood +2 🙂
3. OH: I'm a mobile web developer, so I basically spend all day getting requests for content to stick to the top after some scrolling
   Permalink On twitter.com ♻️ 55 Retweets ❤️ 92 Favorites 2014 Sep 16 Mood +2 🙂
4. In CSS Motion Path in Chrome Canary news: offset-path is now animatable itself, in addition to offset-distance: codepen.io/danwilson/pen/vxQKvm
   Permalink On twitter.com ♻️ 48 Retweets ❤️ 145 Favorites 2017 Oct 27 Mood 0
5. Important thing to remember with the new CSS Motion Path & independent transform properties: They all get applied in a specific order in addition to the original transform property: 1. translate 2. rotate 3. scale 4. offset-path (& friends) 5. transform codepen.io/danwilson/full/abzGPmG
   Permalink On twitter.com ♻️ 39 Retweets ❤️ 169 Favorites 2020 Jan 13 Mood +2 🙂
6. All CSS transformations (transform, independent translate/scale/rotate, motion path) are affected by transform-origin. This example also highlights that an independent ‘rotate’ is applied before an offset path whereas ‘transform:rotate’ is after. codepen.io/danwilson/full/KKwXXqN
   Permalink On twitter.com ♻️ 36 Retweets ❤️ 151 Favorites 2020 Jan 17 Mood -1 🙁
7. The only thing worse than "Design by committee" is "Design by I saw it in this other unrelated app once"
   Permalink On twitter.com ♻️ 32 Retweets ❤️ 114 Favorites 2017 Aug 4 Mood -3 🙁
8. Just realized that CSS variables can let you rather easily transition each component of a transform individually codepen.io/danwilson/pen/QdRGEG
   Permalink On twitter.com ♻️ 31 Retweets ❤️ 117 Favorites 2017 Feb 17 Mood 0
9. I try. I do. Just can't stop thinking about the potential of CSS Custom Properties. Latest thoughts on CSS Tricks(!) css-tricks.com/making-custom-properties-css-variables-dynamic/
   Permalink On twitter.com ♻️ 26 Retweets ❤️ 53 Favorites 2017 May 10 Mood +1 🙂
10. Realized last year that I've made a tree or wreath every winter since 2015 on @CodePen ... so here's one for this year: codepen.io/danwilson/full/LYRPYpv
    Permalink On twitter.com ♻️ 21 Retweets ❤️ 153 Favorites 2020 Nov 29 Mood 0
11. In What's New with Firefox and CSS Motion Path news: offset-distance is now supported in Firefox Nightly 69 in addition to offset-path: path(): codepen.io/danwilson/pen/PQddxe
    Permalink On twitter.com ♻️ 19 Retweets ❤️ 120 Favorites 2019 Jul 6 Mood +2 🙂
12. Continuing a series of Visual References on @CodePen about CSS Transforms: Explaining coordinate systems codepen.io/danwilson/pen/eEYdgo?editors=0100
    Permalink On twitter.com ♻️ 18 Retweets ❤️ 80 Favorites 2017 Aug 21 Mood 0
13. With Firefox likely having CSS Motion Path support next week (and Edge the following week), I’m prepping some materials to share. Here’s a shape revealer on @CodePen with the latest syntax (needs Chrome / Opera or the beta builds of Firefox / Edge for now) codepen.io/danwilson/pen/rNaGrGo
    Permalink On twitter.com ♻️ 17 Retweets ❤️ 62 Favorites 2020 Jan 2 Mood +3 🙂
14. Great discussion on what really is a PWA from @amberleyjohanna. I had a similar discussion with 5 coworkers just last week who all did research on their own and all came back with *very* different answers... I like this conclusion: medium.com/@amberleyjohanna/seriously-though-what-is-a-progressive-web-app-56130600a093
    Permalink On twitter.com ♻️ 16 Retweets ❤️ 36 Favorites 2018 Aug 7 Mood +5 🙂
15. Stranger Things Episode Title sequence on @CodePen. Because everyone else is focusing on the main credits… codepen.io/danwilson/full/EyRbwJ/
    Permalink On twitter.com ♻️ 14 Retweets ❤️ 25 Favorites 2016 Aug 19 Mood 0
16. ✨ new post about illuuuuusions ✨ Creating CSS-driven scenes for use with red/cyan 3D Glasses or Google Cardboard using: - 3D Transforms - Blend modes - Vanishing points Multiple @CodePen examples in this one danielcwilson.com/blog/2019/04/optical-fun-3d-glasses/
    Permalink On twitter.com ♻️ 9 Retweets ❤️ 67 Favorites 2019 Apr 15 Mood +2 🙂
17. …in reply to @dancwilson
    The Basics of Handwriting SVG Paths (Part 2): <path d="M 40,20 C 20,280 280,280 260,20" /> C: add three coordinate pairs to draw a Cubic Bézier from the previous point. The curve uses the first two coordinates as control points and ends at the third. #CssMotionPath
    Permalink On twitter.com ♻️ 3 Retweets ❤️ 56 Favorites 2020 Jan 6 Mood 0