{"ancestors":[],"descendants":[{"id":"111959286604741972","created_at":"2024-02-19T17:18:57.888Z","in_reply_to_id":"111958975972766285","in_reply_to_account_id":"12021","sensitive":false,"spoiler_text":"","visibility":"public","language":"en","uri":"https://mastodon.design/users/DavidDarnes/statuses/111959286604741972","url":"https://mastodon.design/@DavidDarnes/111959286604741972","replies_count":0,"reblogs_count":0,"favourites_count":4,"quotes_count":0,"edited_at":null,"content":"\u003cp\u003eMade a quick demo for someone who wanted a static fallback. It\u0026#39;s effectively a static HTML copy of the Mastodon post but the Web Component grabs the link to the post and “hydrates\u0026quot; into having the current data:\u003cbr /\u003e\u003ca href=\"https://codepen.io/daviddarnes/pen/dyrrBRp?editors=1100\" target=\"_blank\" rel=\"nofollow noopener\" translate=\"no\"\u003e\u003cspan class=\"invisible\"\u003ehttps://\u003c/span\u003e\u003cspan class=\"ellipsis\"\u003ecodepen.io/daviddarnes/pen/dyr\u003c/span\u003e\u003cspan class=\"invisible\"\u003erBRp?editors=1100\u003c/span\u003e\u003c/a\u003e\u003c/p\u003e","reblog":null,"application":{"name":"Ivory for Mac","website":"https://tapbots.com/"},"account":{"id":"12021","username":"DavidDarnes","acct":"DavidDarnes","display_name":"Dave 🧱 :cursor_pointer:","locked":false,"bot":false,"discoverable":true,"indexable":true,"group":false,"created_at":"2018-08-21T00:00:00.000Z","note":"\u003cp\u003eSenior Engineer working on Polaris at Shopify.\u003c/p\u003e\u003cp\u003ePreviously: zeroheight, Nordhealth, Ghost, Stackbit.\u003cbr /\u003eClients: Google, Buffer and Netlify.\u003cbr /\u003e[he/him]\u003c/p\u003e","url":"https://mastodon.design/@DavidDarnes","uri":"https://mastodon.design/users/DavidDarnes","avatar":"https://cdn.masto.host/mastodondesign/accounts/avatars/000/012/021/original/5fa9e01a2ed5afca.jpg","avatar_static":"https://cdn.masto.host/mastodondesign/accounts/avatars/000/012/021/original/5fa9e01a2ed5afca.jpg","header":"https://cdn.masto.host/mastodondesign/accounts/headers/000/012/021/original/f66b383b8f303fe4.jpeg","header_static":"https://cdn.masto.host/mastodondesign/accounts/headers/000/012/021/original/f66b383b8f303fe4.jpeg","followers_count":1781,"following_count":373,"statuses_count":9725,"last_status_at":"2026-04-19","hide_collections":false,"noindex":false,"emojis":[{"shortcode":"cursor_pointer","url":"https://cdn.masto.host/mastodondesign/custom_emojis/images/000/107/547/original/724a291744a13ad3.png","static_url":"https://cdn.masto.host/mastodondesign/custom_emojis/images/000/107/547/static/724a291744a13ad3.png","visible_in_picker":true}],"roles":[],"fields":[{"name":"Website","value":"\u003ca href=\"https://darn.es\" target=\"_blank\" rel=\"nofollow noopener me\" translate=\"no\"\u003e\u003cspan class=\"invisible\"\u003ehttps://\u003c/span\u003e\u003cspan class=\"\"\u003edarn.es\u003c/span\u003e\u003cspan class=\"invisible\"\u003e\u003c/span\u003e\u003c/a\u003e","verified_at":"2022-07-07T08:39:14.416+00:00"},{"name":"GitHub","value":"\u003ca href=\"https://github.com/daviddarnes\" target=\"_blank\" rel=\"nofollow noopener me\" translate=\"no\"\u003e\u003cspan class=\"invisible\"\u003ehttps://\u003c/span\u003e\u003cspan class=\"\"\u003egithub.com/daviddarnes\u003c/span\u003e\u003cspan class=\"invisible\"\u003e\u003c/span\u003e\u003c/a\u003e","verified_at":"2023-02-03T13:13:04.158+00:00"},{"name":"CodePen","value":"\u003ca href=\"https://codepen.io/DavidDarnes\" target=\"_blank\" rel=\"nofollow noopener me\" translate=\"no\"\u003e\u003cspan class=\"invisible\"\u003ehttps://\u003c/span\u003e\u003cspan class=\"\"\u003ecodepen.io/DavidDarnes\u003c/span\u003e\u003cspan class=\"invisible\"\u003e\u003c/span\u003e\u003c/a\u003e","verified_at":"2023-02-03T13:13:04.531+00:00"},{"name":"Twitter","value":"\u003ca href=\"https://twitter.com/daviddarnes\" target=\"_blank\" rel=\"nofollow noopener me\" translate=\"no\"\u003e\u003cspan class=\"invisible\"\u003ehttps://\u003c/span\u003e\u003cspan class=\"\"\u003etwitter.com/daviddarnes\u003c/span\u003e\u003cspan class=\"invisible\"\u003e\u003c/span\u003e\u003c/a\u003e","verified_at":null}]},"media_attachments":[],"mentions":[],"tags":[],"emojis":[],"quote":null,"card":{"url":"https://codepen.io/daviddarnes/details/dyrrBRp","title":"Static to enhanced \u003cmastodon-post\u003e Web Component usage","description":"...","language":"en","type":"link","author_name":"","author_url":"","provider_name":"","provider_url":"","html":"","width":800,"height":450,"image":null,"image_description":"","embed_url":"","blurhash":"U1TI,a9GIVt89F4oM{WC4n9GRkogIVD*j]xu","published_at":null,"authors":[]},"poll":null,"quote_approval":{"automatic":[],"manual":[],"current_user":"denied"}}]}