lmorchard - Pebbling Club 🐧🪨

HTML5 Drag and Drop Avatar Changer with Resizing and Cropping | CSS-Tricks

css-tricks.com
2014-11-17T03:43:15.000Z
html webdev html5 social avatar imported:pinboard

Notes

Let's create a page where a user can update their avatar with as little friction as possible: they just drop an image anywhere on the page and it's done.

Feed

Embed

Unfurl

{ "author": "Chris Coyier", "date": "2013-07-22T14:26:19.000Z", "description": "In any app that has user avatars, users should be able to change those avatars. Anything to make that easier is desirable. Many apps start with a user’s", "image": "https://css-tricks.com/wp-json/social-image-generator/v1/image/19845", "logo": "https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/07/star.png?fit=180%2C180&ssl=1", "publisher": "CSS-Tricks", "title": "HTML5 Drag And Drop Avatar Changer With Resizing And Cropping | CSS-Tricks", "url": "https://css-tricks.com/html5-drag-and-drop-avatar-changer-with-resizing-and-cropping/", "feed": "https://css-tricks.com/feed/", "iframe": "<blockquote class=\"wp-embedded-content\" data-secret=\"ahYoC3ffUe\"><a href=\"https://css-tricks.com/html5-drag-and-drop-avatar-changer-with-resizing-and-cropping/\">HTML5 Drag and Drop Avatar Changer with Resizing and Cropping</a></blockquote><iframe sandbox=\"allow-scripts\" security=\"restricted\" src=\"https://css-tricks.com/html5-drag-and-drop-avatar-changer-with-resizing-and-cropping/embed/#?secret=ahYoC3ffUe\" width=\"600\" height=\"338\" title=\"“HTML5 Drag and Drop Avatar Changer with Resizing and Cropping” — CSS-Tricks\" data-secret=\"ahYoC3ffUe\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" class=\"wp-embedded-content\"></iframe><script type=\"text/javascript\">\n/* <![CDATA[ */\n/*! This file is auto-generated */\n!function(d,l){\"use strict\";l.querySelector&&d.addEventListener&&\"undefined\"!=typeof URL&&(d.wp=d.wp||{},d.wp.receiveEmbedMessage||(d.wp.receiveEmbedMessage=function(e){var t=e.data;if((t||t.secret||t.message||t.value)&&!/[^a-zA-Z0-9]/.test(t.secret)){for(var s,r,n,a=l.querySelectorAll('iframe[data-secret=\"'+t.secret+'\"]'),o=l.querySelectorAll('blockquote[data-secret=\"'+t.secret+'\"]'),c=new RegExp(\"^https?:$\",\"i\"),i=0;i<o.length;i++)o[i].style.display=\"none\";for(i=0;i<a.length;i++)s=a[i],e.source===s.contentWindow&&(s.removeAttribute(\"style\"),\"height\"===t.message?(1e3<(r=parseInt(t.value,10))?r=1e3:~~r<200&&(r=200),s.height=r):\"link\"===t.message&&(r=new URL(s.getAttribute(\"src\")),n=new URL(t.value),c.test(n.protocol))&&n.host===r.host&&l.activeElement===s&&(d.top.location.href=t.value))}},d.addEventListener(\"message\",d.wp.receiveEmbedMessage,!1),l.addEventListener(\"DOMContentLoaded\",function(){for(var e,t,s=l.querySelectorAll(\"iframe.wp-embedded-content\"),r=0;r<s.length;r++)(t=(e=s[r]).getAttribute(\"data-secret\"))||(t=Math.random().toString(36).substring(2,12),e.src+=\"#?secret=\"+t,e.setAttribute(\"data-secret\",t)),e.contentWindow.postMessage({message:\"ready\",secret:t},\"*\")},!1)))}(window,document);\n/* ]]> */\n</script>\n", "lang": "en", "failed": true, "failedAt": 1728193715474, "failedError": "TimeoutError: Promise timed out after 10000 milliseconds", "cached": true, "cachedAt": 1728193719370 }
RoboHash

robohash.org
2012-04-26T01:20:25.000Z
nifty webdev apis images keen robot avatar imported:pinboard

Notes

Robohash is a easy web service that makes it easy to provide unique, robot/alien/monster/whatever images for any text. Put in any text, such as IP address, email, filename, userid, or whatever else you like, and get back a pretty image for your site.

Unfurl

{ "image": "http://robohash.org/static/img/top_logo.png", "logo": "https://robohash.org/favicon.ico", "title": "RoboHash", "url": "http://robohash.org/", "expires": 1728364776343, "status": 200, "bodyLength": 23858, "duration": 4880 }
Audiences experience 'Avatar' blues - CNN.com

www.cnn.com
2010-01-12T23:48:13.000Z
avatar really depression crazies imported:pinboard

Notes

"James Cameron's completely immersive spectacle "Avatar" may have been a little too real for some fans who say they have experienced depression and suicidal thoughts after seeing the film because they long to enjoy the beauty of the alien world Pandora."

Unfurl

{ "failed": true, "failedAt": 1728195497396, "failedError": "TimeoutError: Promise timed out after 10000 milliseconds" }
Weep For The Future: Avatar Machine Further Distances You From Reality - Gizmodo

gizmodo.com
2007-07-13T17:12:35.000Z
funny video thirdperson gaming avatar imported:pinboard

Notes

"Do you play so many videogames that you feel weird walking around without being able to see yourself from a third-person perspective?"

Unfurl

{ "failed": true, "failedAt": 1728195637447, "failedError": "TimeoutError: Promise timed out after 10000 milliseconds" }

0 - 50 of 4 items

10 25 50 100 250