lmorchard - Pebbling Club 🐧🪨

jacktuck/unfurl: Metadata scraper with support for oEmbed, Twitter Cards and Open Graph Protocol for Node.js :zap:

github.com
2024-08-21T23:31:41.545Z
scraping webdev html imported:raindrop

Notes

Highlight:Unfurl (spread out from a furled state) will take a url and some options, fetch the url, extract the metadata we care about and format the result in a sane way. It supports all major metadata providers and expanding it to work for any others should be trivial. Metadata scraper with support for oEmbed, Twitter Cards and Open Graph Protocol for Node.js :zap: - jacktuck/unfurl

Unfurl

{ "failed": true, "failedAt": 1728192767113, "failedError": "TimeoutError: Promise timed out after 10000 milliseconds", "author": "jacktuck", "description": "Metadata scraper with support for oEmbed, Twitter Cards and Open Graph Protocol for Node.js :zap: - jacktuck/unfurl", "image": "https://opengraph.githubassets.com/9f032f4b6ab9857230d7733954d6273caa1a14c4304938ebf5a05b9d112c51d1/jacktuck/unfurl", "logo": "https://github.com/fluidicon.png", "publisher": "GitHub", "title": "GitHub - jacktuck/unfurl: Metadata scraper with support for oEmbed, Twitter Cards and Open Graph Protocol for Node.js :zap:", "url": "https://github.com/jacktuck/unfurl", "lang": "en", "cached": true, "cachedAt": 1728192774031 }
microlinkhq/metascraper: Get unified metadata from websites using Open Graph, Microdata, RDFa, Twitter Cards, JSON-LD, HTML, and more.

github.com
2024-08-21T23:30:30.031Z
scraping webdev html opengraph imported:raindrop

Notes

Highlight:The metascraper library allows you to easily scrape metadata from an article on the web using Open Graph metadata, regular HTML metadata, and series of fallbacks. Get unified metadata from websites using Open Graph, Microdata, RDFa, Twitter Cards, JSON-LD, HTML, and more. - microlinkhq/metascraper

Unfurl

{ "author": "microlinkhq", "description": "Get unified metadata from websites using Open Graph, Microdata, RDFa, Twitter Cards, JSON-LD, HTML, and more. - microlinkhq/metascraper", "image": "https://repository-images.githubusercontent.com/59617593/6d33d967-c4f7-4038-aad1-f9da4cbf623a", "logo": "https://github.com/fluidicon.png", "publisher": "GitHub", "title": "GitHub - microlinkhq/metascraper: Get unified metadata from websites using Open Graph, Microdata, RDFa, Twitter Cards, JSON-LD, HTML, and more.", "url": "https://github.com/microlinkhq/metascraper", "lang": "en", "failed": true, "failedAt": 1728192767114, "failedError": "TimeoutError: Promise timed out after 10000 milliseconds", "cached": true, "cachedAt": 1728192779646 }
wasmati: You should write your WebAssembly in TypeScript - ZKSECURITY

www.zksecurity.xyz
2023-06-09T22:33:52.000Z
wasm javascript webdev imported:pinboard

Notes

The solution is wasmati, a TypeScript library to write Wasm at the instruction level. The wasmati API looks exactly like Webassembly text format (WAT).

Unfurl

{ "description": "If you know about WebAssembly or Wasm, you might have heard a few different pitches for why you need it:\nIt’s a low level language for the web. So, it’s faster than JS. Use it to speed up things. It’s a build target. As such, it enables you to use languages other than JS on the web. You could write a web library in Rust or Go! You actually don’t use it on the web, but on the backend!", "image": "https://i.imgur.com/8jtmJSH.png", "logo": "https://t1.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=https://www.zksecurity.xyz/blog/posts/wasmati/&size=128", "publisher": "ZKSECURITY", "title": "wasmati: You should write your WebAssembly in TypeScript - ZKSECURITY", "url": "https://www.zksecurity.xyz/blog/posts/wasmati/", "failed": true, "failedAt": 1728192774817, "failedError": "TimeoutError: Promise timed out after 10000 milliseconds", "cached": true, "cachedAt": 1728192776111 }
Beyond microblogging with ActivityPub [LWN.net]

lwn.net
2023-06-04T04:55:06.000Z
activitypub fediverse webdev network imported:pinboard

Notes

ActivityPub-enabled microblogs are gaining popularity as a replacement for Twitter, but ActivityPub is for more than just microblogging

Feed

Unfurl

{ "date": "2022-12-20T12:00:00.000Z", "image": "https://static.lwn.net/images/logo/barepenguin-70.png", "logo": "https://static.lwn.net/images/favicon.png", "publisher": "LWN.net", "title": "Beyond microblogging with ActivityPub [LWN.net]", "url": "https://lwn.net/Articles/918224/", "feed": "https://lwn.net/headlines/rss", "lang": "en", "failed": true, "failedAt": 1728192775923, "failedError": "TimeoutError: Promise timed out after 10000 milliseconds", "cached": true, "cachedAt": 1728192777309, "expires": 1728363598966, "status": 200, "bodyLength": 42281, "duration": 2279 }
Server-side rendering (SSR) – Lit

lit.dev
2023-05-29T17:39:28.000Z
html webdev webcomponents lit javascript imported:pinboard

Notes

Lit supports server-side rendering through the Lit SSR package. Lit SSR renders Lit components and templates to static HTML markup in non-browser JavaScript environments like Node. It works without fully emulating the browser's DOM, and takes advantage of Lit's declarative template format to enable fast performance, achieve low time-to-first-byte, and support streaming.

Feed

Unfurl

{ "description": "Simple. Fast. Web Components.", "image": "https://lit.dev/images/logo-whitebg-padded-1600x800.png", "logo": "https://lit.dev/images/flame-favicon.svg", "publisher": "lit.dev", "title": "Server-side rendering (SSR) – Lit", "url": "https://lit.dev/docs/ssr/overview/", "feed": "https://lit.dev/blog/atom.xml", "lang": "en", "failed": true, "failedAt": 1728192775924, "failedError": "TimeoutError: Promise timed out after 10000 milliseconds", "cached": true, "cachedAt": 1728192777302, "expires": 1728363598966, "status": 200, "bodyLength": 167493, "duration": 1281 }
Date and Time with a Static Site Generator - Jim Nielsen’s Blog

blog.jim-nielsen.com
2023-05-21T17:56:15.000Z
webdev metablogging imported:pinboard

Notes

Do you have a static site generator? If so, how do you handle the date and time for when your posts are published?

Feed

Unfurl

{ "author": "Jim Nielsen", "date": "2023-05-18T00:00:00.000Z", "description": "Writing about the big beautiful mess that is making things for the world wide web.", "image": "https://blog.jim-nielsen.com/assets/img/twitter-card.png", "logo": "https://blog.jim-nielsen.com/favicon.ico", "publisher": "Jim Nielsen’s Blog", "title": "Date and Time with a Static Site Generator", "url": "https://blog.jim-nielsen.com/2023/date-and-time-in-ssg/", "feed": "https://blog.jim-nielsen.com/feed.xml", "lang": "en", "failed": true, "failedAt": 1728157030427, "failedError": "TimeoutError: Promise timed out after 10000 milliseconds", "cached": true, "cachedAt": 1728192769929, "expires": 1728363598966, "status": 200, "bodyLength": 37740, "duration": 1592 }
Local-First Web Development

localfirstweb.dev
2023-02-26T08:16:34.000Z
web apps local webdev imported:pinboard

Notes

So, you want to build an app that has its data co-located with its UI? That works offline? That synchronizes between clients? And that lets its users own their data?

Unfurl

{ "description": "A fresh way to think about building web applications.", "image": "https://localfirstweb.dev/assets/images/logo.png", "logo": "https://localfirstweb.dev/assets/images/logo.svg", "title": "Local-First Software", "url": "https://localfirstweb.dev/", "lang": "en", "failed": true, "failedAt": 1728192779653, "failedError": "TimeoutError: Promise timed out after 10000 milliseconds", "cached": true, "cachedAt": 1728192778948, "expires": 1728363600255, "status": 200, "bodyLength": 22544, "duration": 2354 }
Learn HTML

web.dev
2023-02-21T17:20:02.000Z
html webdev imported:pinboard

Notes

This HTML course for web developers provides a solid overview for developers, from novice to expert level HTML.

Unfurl

{ "description": "This HTML course for web developers provides a solid overview for developers, from novice to expert level HTML.", "image": "https://web.dev/learn/html/card.png", "logo": "https://www.gstatic.com/devrel-devsite/prod/vfebef541c9fc0d1ace8dfdb0f441925a06e1d514c8d869e9f136cb4460077d33/web/images/favicon.png", "publisher": "web.dev", "title": "Learn HTML | web.dev", "url": "https://web.dev/learn/html", "lang": "en", "failed": true, "failedAt": 1728192781538, "failedError": "TimeoutError: Promise timed out after 10000 milliseconds", "cached": true, "cachedAt": 1728192799835, "expires": 1728363601353, "status": 200, "bodyLength": 113224, "duration": 7415 }
Provide Blog Metadata via JSON-LD - kiko.io

kiko.io
2023-02-13T04:30:47.000Z
webdev json-ld metablogging imported:pinboard

Notes

Centralization of a website's schema.org data in the HEAD instead of everywhere in the HTML

Feed

Unfurl

{ "author": "Kristof Zerbe", "date": "2023-02-09T23:00:00.000Z", "description": "Centralization of a website’s schema.org data in the HEAD instead of everywhere in the HTML", "image": "https://kiko.io/images/social-media/Provide-Blog-Metadata-via-JSON-LD.png", "logo": "https://kiko.io/images/icon-192x192.png", "publisher": "kiko.io", "title": "Provide Blog Metadata via JSON-LD - kiko.io", "url": "https://kiko.io/post/Provide-Blog-Metadata-via-JSON-LD/", "feed": "https://kiko.io/rss.xml", "lang": "en", "failed": true, "failedAt": 1728192784182, "failedError": "TimeoutError: Promise timed out after 10000 milliseconds", "cached": true, "cachedAt": 1728192788157, "expires": 1728363601660, "status": 200, "bodyLength": 75895, "duration": 2813 }
Using CSS to create a CRT

aleclownes.com
2023-02-10T21:21:51.000Z
crt retro css webdev imported:pinboard

Notes

I have attempted to assemble a set of CSS effects to replicate this look mainly by adding three things: screen-door effect, flicker, and color separation

Feed

Unfurl

{ "image": "http://aleclownes.com/images/hyperatompunk-screenshot.png", "logo": "http://aleclownes.com/images/alec.jpg", "title": "Using CSS to create a CRT", "url": "http://aleclownes.com/2017/02/01/crt-display.html", "feed": "http://aleclownes.com/feed.xml", "lang": "en", "cached": true, "cachedAt": 1728192780249, "expires": 1728363602018, "status": 200, "bodyLength": 69997, "duration": 2314 }
Embedding Our New React UI in Go | Flipt Blog

www.flipt.io
2023-01-27T06:46:01.000Z
go golang flipt webdev imported:pinboard

Notes

The UI is served over HTTP directly from the binary using Go’s fantastic http.FileServer implementation from the standard library. Sometime around February 2021 was the Go 1.16 release, which came with native embedding of files into Go binaries. Flipt quickly took advantage of this feature for bundling the static UI assets directly into the binary. Go has a handy wrapping function that adapts the embed.FS into the required http.FileSystem interface to integrate it seamlessly into an http.Server. You can find the current (v1.16.0) embed directive in Flipt here.

Feed

Unfurl

{ "description": "A journey embedding React in Go", "image": "https://blog.flipt.io/img/banner-og.png", "logo": "https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=https://www.flipt.io/blog/embedding-react-in-go&size=128", "publisher": "Flipt", "title": "Embedding Our New React UI in Go | Flipt Blog", "url": "https://blog.flipt.io/embedding-react-in-go", "feed": "https://www.flipt.io/rss/feed.xml", "lang": "en", "failed": true, "failedAt": 1728192782031, "failedError": "Error: socket hang up", "cached": true, "cachedAt": 1728193153277 }
How To Use an Emoji as a Favicon Easily | CSS-Tricks - CSS-Tricks

css-tricks.com
2023-01-19T05:37:31.000Z
webdev favicon imported:pinboard

Notes

Lea Verou had a dang genius idea to use an emoji as a favicon. The idea only recently possible as browsers have started supporting SVG for favicons. Chuck an emoji inside an SVG <text> element and use that as the favicon.

Feed

Embed

Unfurl

{ "author": "Chris Coyier", "date": "2022-01-03T16:02:39.000Z", "description": "With just a simple one-liner of code you can use any emoji as a favicon of your website. 😃", "image": "https://css-tricks.com/wp-json/social-image-generator/v1/image/305613", "logo": "https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/07/star.png?fit=180%2C180&ssl=1", "publisher": "CSS-Tricks", "title": "How To Use An Emoji As A Favicon Easily | CSS-Tricks", "url": "https://css-tricks.com/emoji-as-a-favicon/", "feed": "https://css-tricks.com/feed/", "iframe": "<blockquote class=\"wp-embedded-content\" data-secret=\"8BdrqO1CWV\"><a href=\"https://css-tricks.com/emoji-as-a-favicon/\">How To Use an Emoji as a Favicon Easily</a></blockquote><iframe sandbox=\"allow-scripts\" security=\"restricted\" src=\"https://css-tricks.com/emoji-as-a-favicon/embed/#?secret=8BdrqO1CWV\" width=\"600\" height=\"338\" title=\"“How To Use an Emoji as a Favicon Easily” — CSS-Tricks\" data-secret=\"8BdrqO1CWV\" 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": 1728192785414, "failedError": "TimeoutError: Promise timed out after 10000 milliseconds", "cached": true, "cachedAt": 1728192799838, "expires": 1728363604523, "status": 200, "bodyLength": 85353, "duration": 6907 }
Tree views in CSS

iamkate.com
2023-01-07T21:50:39.000Z
webdev outlines css html design tree imported:pinboard

Notes

A tree view (collapsible list) can be created using only HTML and CSS, without the need for JavaScript. Accessibility software will see the tree view as lists nested inside disclosure widgets, and the standard keyboard interaction is supported automatically.

Unfurl

{ "description": "How to create a tree view (collapsible list) using only HTML and CSS", "image": "https://iamkate.com/avatar-128.webp", "logo": "https://iamkate.com/favicon.png", "title": "Tree views in CSS", "url": "https://iamkate.com/code/tree-views/", "lang": "en", "failed": true, "failedAt": 1728192785414, "failedError": "TimeoutError: Promise timed out after 10000 milliseconds", "cached": true, "cachedAt": 1728192789151, "expires": 1728363604639, "status": 200, "bodyLength": 58557, "duration": 3006 }
What does it look like for the web to lose? - Chris Coyier

chriscoyier.net
2023-01-04T21:01:39.000Z
webdev future web apple google open imported:pinboard

Notes

Better yet, let’s ditch the idea of native apps. All web! All web! All web!

Feed

Embed

Unfurl

{ "author": "Blake Watson", "date": "2023-01-07T00:38:33.000Z", "description": "There is always some degree of tension between “native apps” and “the web” as platforms. If you’re going to write a native app for Android devices, well, I’ll qu…", "image": "https://chriscoyier.net/wp-content/uploads/2023/01/kthxbye.jpg", "logo": "https://i0.wp.com/chriscoyier.net/wp-content/uploads/2021/07/IsUISvAq_400x400.jpg?fit=192%2C192&ssl=1", "publisher": "Chris Coyier", "title": "What does it look like for the web to lose?", "url": "https://chriscoyier.net/2023/01/04/what-does-it-look-like-for-the-web-to-lose/", "feed": "https://chriscoyier.net/feed/", "iframe": "<blockquote class=\"wp-embedded-content\" data-secret=\"x3ttsJB05M\"><a href=\"https://chriscoyier.net/2023/01/04/what-does-it-look-like-for-the-web-to-lose/\">What does it look like for the web to lose?</a></blockquote><iframe sandbox=\"allow-scripts\" security=\"restricted\" src=\"https://chriscoyier.net/2023/01/04/what-does-it-look-like-for-the-web-to-lose/embed/#?secret=x3ttsJB05M\" width=\"600\" height=\"338\" title=\"“What does it look like for the web to lose?” — Chris Coyier\" data-secret=\"x3ttsJB05M\" 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": 1728192785414, "failedError": "TimeoutError: Promise timed out after 10000 milliseconds", "cached": true, "cachedAt": 1728192795759, "expires": 1728363604648, "status": 200, "bodyLength": 65867, "duration": 8308 }
Creating a 2D physics engine from scratch in Javascript – AILEF

ailef.tech
2022-11-27T20:15:49.000Z
gamedev webdev js javascript imported:pinboard

Notes

In this article, we will implement a toy 2d physics engine that supports basic forces, collisions and constraints (joints) for circle-shaped objects.

Feed

Embed

Unfurl

{ "failed": true, "failedAt": 1728107161922, "failedError": "TimeoutError: Promise timed out after 10000 milliseconds", "author": "AILEF", "date": "2022-11-12T08:54:36.000Z", "image": "https://ailef.tech/wp-content/ql-cache/quicklatex.com-de1f057103bbad5a1e0d40ecc984106c_l3.png", "logo": "https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=https://ailef.tech/2022/11/12/creating-a-2d-physics-engine-from-scratch-in-javascript/&size=128", "title": "Creating a 2D physics engine from scratch in Javascript – AILEF", "url": "https://ailef.tech/2022/11/12/creating-a-2d-physics-engine-from-scratch-in-javascript/", "feed": "https://ailef.tech/feed/", "iframe": "<blockquote class=\"wp-embedded-content\" data-secret=\"z9ZIxtOhrI\"><a href=\"https://ailef.tech/2022/11/12/creating-a-2d-physics-engine-from-scratch-in-javascript/\">Creating a 2D physics engine from scratch in Javascript</a></blockquote><iframe sandbox=\"allow-scripts\" security=\"restricted\" src=\"https://ailef.tech/2022/11/12/creating-a-2d-physics-engine-from-scratch-in-javascript/embed/#?secret=z9ZIxtOhrI\" width=\"600\" height=\"338\" title=\"“Creating a 2D physics engine from scratch in Javascript” — AILEF\" data-secret=\"z9ZIxtOhrI\" 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", "cached": true, "cachedAt": 1728192831058, "expires": 1728363612568, "status": 200, "bodyLength": 97278, "duration": 9100 }
Displaying Favicons For Any Domain - Jim Nielsen’s Blog

blog.jim-nielsen.com
2021-06-17T20:43:46.000Z
webdev favicons imported:pinboard

Notes

Herein I detail what I discovered attempting to display favicons for any site on the web.

Feed

Unfurl

{ "author": "Jim Nielsen", "date": "2021-06-14T00:00:00.000Z", "description": "Writing about the big beautiful mess that is making things for the world wide web.", "image": "https://blog.jim-nielsen.com/assets/img/twitter-card.png", "logo": "https://blog.jim-nielsen.com/favicon.ico", "publisher": "Jim Nielsen’s Blog", "title": "Displaying Favicons For Any Domain", "url": "https://blog.jim-nielsen.com/2021/displaying-favicons-for-any-domain/", "feed": "https://blog.jim-nielsen.com/feed.xml", "lang": "en", "failed": true, "failedAt": 1728192844751, "failedError": "TimeoutError: Promise timed out after 10000 milliseconds", "cached": true, "cachedAt": 1728192845626, "expires": 1728363638351, "status": 200, "bodyLength": 42985, "duration": 3456 }
ESP32 Web Server (WebSocket) with Multiple Sliders PWM | Random Nerd Tutorials

randomnerdtutorials.com
2021-05-30T03:13:10.000Z
diy esp32 hardware hacks webdev imported:pinboard

Notes

This tutorial shows how to build an ESP32 web server that displays a web page with multiple sliders. The sliders control the duty cycle of different PWM channels to control the brightness of multiple LEDs.

Feed

Embed

Unfurl

{ "author": "Mario Basque", "date": "2024-06-13T10:23:08.000Z", "description": "Build an ESP32 Web Server that displays a web page with multiple sliders to control the brightness of multiple LEDs using WebSocket protocol using Arduino IDE.", "image": "https://randomnerdtutorials.com/wp-content/uploads/2021/05/ESP32-Multiple-Sliders-Web-Server-PWM-LEDs.jpg", "logo": "https://i0.wp.com/randomnerdtutorials.com/wp-content/uploads/2018/03/n-favicon-2018.png?fit=16%2C16&quality=100&strip=all&ssl=1", "publisher": "Random Nerd Tutorials", "title": "ESP32 Web Server (WebSocket) with Multiple Sliders PWM | Random Nerd Tutorials", "url": "https://randomnerdtutorials.com/esp32-web-server-websocket-sliders/", "feed": "https://randomnerdtutorials.com/feed/", "iframe": "<blockquote class=\"wp-embedded-content\" data-secret=\"C7FamvsJUW\"><a href=\"https://randomnerdtutorials.com/esp32-web-server-websocket-sliders/\">ESP32 Web Server (WebSocket) with Multiple Sliders: Control LEDs Brightness (PWM)</a></blockquote><iframe sandbox=\"allow-scripts\" security=\"restricted\" src=\"https://randomnerdtutorials.com/esp32-web-server-websocket-sliders/embed/#?secret=C7FamvsJUW\" width=\"600\" height=\"338\" title=\"“ESP32 Web Server (WebSocket) with Multiple Sliders: Control LEDs Brightness (PWM)” — Random Nerd Tutorials\" data-secret=\"C7FamvsJUW\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" class=\"wp-embedded-content\"></iframe><script>\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</script>\n", "lang": "en", "failed": true, "failedAt": 1728192844752, "failedError": "TimeoutError: Promise timed out after 10000 milliseconds", "cached": true, "cachedAt": 1728192871649 }
Another 100 CSS loaders for your next project - DEV Community 👩‍💻👨‍💻

dev.to
2021-05-26T16:56:55.000Z
css webdev ui ux imported:pinboard

Notes

Ready for the second set of loaders? Yes, it's again me with another collection of 100 CSS loaders. Now you have a total of 200 different loaders!

Unfurl

{ "author": "Temani Afif", "date": "2023-08-28T01:04:52.000Z", "description": "Ready for the second set of loaders? Yes, it’s again me with another collection of 100 CSS loaders.…", "image": "https://media.dev.to/dynamic/image/width=1000,height=500,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fiqbjwrds4640uwn9b443.gif", "logo": "https://media.dev.to/dynamic/image/width=192,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png", "publisher": "DEV Community", "title": "Another 100 CSS loaders for your next project", "url": "https://dev.to/afif/another-100-css-loaders-for-your-next-project-352l", "lang": "en", "failed": true, "failedAt": 1728192844752, "failedError": "TimeoutError: Promise timed out after 10000 milliseconds", "cached": true, "cachedAt": 1728192871422 }
Hosting SQLite databases on Github Pages - (or any static file hoster) - phiresky's blog

phiresky.github.io
2021-05-02T22:47:26.000Z
http sqlite webdev database static imported:pinboard

Notes

"so I implemented a virtual file system that fetches chunks of the database with HTTP Range requests when SQLite tries to read from the filesystem"

Feed

Unfurl

{ "date": "2021-04-17T00:00:00.000Z", "description": "I was writing a tiny website to display statistics of how much sponsored content a Youtube creator has over time when I noticed that I often write a small tool as a website that queries some data from a database and then displays it in a graph, a table, or similar. But if you want to use a", "logo": "https://t0.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=https://github.io/blog/2021/hosting-sqlite-databases-on-github-pages/&size=128", "publisher": "phiresky's blog", "title": "Hosting SQLite databases on Github Pages - (or IPFS or any static file hoster) - phiresky’s blog", "url": "https://phiresky.github.io/blog/2021/hosting-sqlite-databases-on-github-pages/", "feed": "https://phiresky.github.io/blog/rss.xml", "failed": true, "failedAt": 1728192844754, "failedError": "TimeoutError: Promise timed out after 10000 milliseconds", "cached": true, "cachedAt": 1728192861520 }
Your Front-End Does Not Have To Be Rich

www.apress.com
2019-03-11T21:27:36.000Z
webdev facepalm imported:pinboard

Notes

So, when you embark on your next project, take a moment to remember all the choices out there - it’s not just React vs Angular, but leaving most of your business logic server-side could be the right choice for your website.

Unfurl

{ "date": "2019-03-11T12:00:00.000Z", "description": "Read our blog", "image": "https://resource-cms.springernature.com/springer-cms/rest/v1/content/16537448/data/v5", "publisher": "www.apress.com", "title": "Your Front-End Does Not Have To Be Rich", "url": "https://www.apress.com/us/blog/all-blog-posts/your-front-end-does-not-have-to-be-rich/16537718", "lang": "en", "failed": true, "failedAt": 1728193220298, "failedError": "TimeoutError: Promise timed out after 10000 milliseconds", "cached": true, "cachedAt": 1728193224932 }
DRY Switching with CSS Variables: The Difference of One Declaration | CSS-Tricks

css-tricks.com
2019-03-10T00:46:25.000Z
css webdev imported:pinboard

Notes

This is the first post of a two-part series that looks into the way CSS variables can be used to make the code for complex layouts and interactions less difficult to write and a lot easier to maintain. This first installment walks through various use cases where this technique applies.

Feed

Embed

Unfurl

{ "author": "Ana Tudor", "date": "2018-12-06T15:26:54.000Z", "description": "This is the first post of a two-part series that looks into the way CSS variables can be used to make the code for complex layouts and interactions less", "image": "https://css-tricks.com/wp-json/social-image-generator/v1/image/274807", "logo": "https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/07/star.png?fit=180%2C180&ssl=1", "publisher": "CSS-Tricks", "title": "DRY Switching With CSS Variables: The Difference Of One Declaration | CSS-Tricks", "url": "https://css-tricks.com/dry-switching-with-css-variables-the-difference-of-one-declaration/", "feed": "https://css-tricks.com/feed/", "iframe": "<blockquote class=\"wp-embedded-content\" data-secret=\"8G79UxhWoG\"><a href=\"https://css-tricks.com/dry-switching-with-css-variables-the-difference-of-one-declaration/\">DRY Switching with CSS Variables: The Difference of One Declaration</a></blockquote><iframe sandbox=\"allow-scripts\" security=\"restricted\" src=\"https://css-tricks.com/dry-switching-with-css-variables-the-difference-of-one-declaration/embed/#?secret=8G79UxhWoG\" width=\"600\" height=\"338\" title=\"“DRY Switching with CSS Variables: The Difference of One Declaration” — CSS-Tricks\" data-secret=\"8G79UxhWoG\" 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", "cached": true, "cachedAt": 1728193218667 }
Testing native ES modules using Mocha and esm. – Alex Gibson

alxgbsn.co.uk
2019-02-25T16:11:33.000Z
dev webdev es6 javascript imported:pinboard

Notes

Turns out, many JavaScript testing frameworks don’t yet support native ES modules out of the box, and I was struggling to find an easy solution that didn’t require transpiling my code back to ES5.

Unfurl

{ "failed": true, "failedAt": 1728194720360, "failedError": "AxiosError: Request failed with status code 404" }
Enabling CORS in Synology WebDav

github.com
2018-12-26T20:02:23.000Z
synology webdav cors webdev imported:pinboard

Notes

ssh ip-synology cd /var/packages/WebDAVServer/target/etc/httpd/ sudo vim conf/httpd.conf-webdav add LoadModule rewrite_module modules/mod_rewrite.so sudo vim conf/extra/httpd-ssl.conf-webdav add : Header always set Access-Control-Allow-Origin "*" Header always set Access-Control-Allow-Headers "origin, content-type, cache-control, accept, authorization, if-match, destination, overwrite" Header always set Access-Control-Expose-Headers "ETag" Header always set Access-Control-Allow-Methods "GET, HEAD, POST, PUT, OPTIONS, MOVE, DELETE, COPY, LOCK, UNLOCK" Header always set Access-Control-Allow-Credentials "true" RewriteEngine on RewriteCond %{REQUEST_METHOD} OPTIONS RewriteRule ^(.*)$ blank.html [R=200,L,E=HTTP_ORIGIN:%{HTTP:ORIGIN}] cd /var/packages/WebDAVServer/target/tools sudo ./start_stop.sh start restart

Unfurl

{ "author": "keeweb", "date": "2017-08-01T12:00:00.000Z", "description": "Hello ! For use Keeweb on webdav, CORS must be enable. On Synology devices this is a problem because its disable. I have achieved with a lot of config to enable this but next week, with the first D…", "image": "https://opengraph.githubassets.com/d2451995dd3e5b633746a0cdf743263e0edbfc7b12415c8a51a3c9fd31ce91e6/keeweb/keeweb/issues/703", "logo": "https://github.com/fluidicon.png", "publisher": "GitHub", "title": "[Feature request] Synology Cloudstation support · Issue #703 · keeweb/keeweb", "url": "https://github.com/keeweb/keeweb/issues/703", "lang": "en", "failed": true, "failedAt": 1728193240737, "failedError": "TimeoutError: Promise timed out after 10000 milliseconds", "cached": true, "cachedAt": 1728193263809 }
Underrun – Making Of - PhobosLab

phoboslab.org
2018-09-23T23:17:53.000Z
gaming javascript webdev webgl js imported:pinboard

Notes

I participated in this year's js13kGames, a JavaScript game development competition with a file size limit of 13kb, including code, assets and everything else. My entry was Underrun, a twin stick shooter using WebGL.

Feed

Unfurl

{ "image": "https://phoboslab.org/content/assets/underrun.png", "logo": "https://phoboslab.org/media/phoboslab.ico", "title": "PhobosLab", "url": "https://phoboslab.org/log/2018/09/underrun-making-of", "feed": "https://phoboslab.org/log/feed", "lang": "en", "cached": true, "cachedAt": 1728193244653 }
We Need Open Hosting Platforms

www.ianbicking.org
2018-08-21T21:35:15.000Z
webdev openweb oss hosting imported:pinboard

Notes

I don’t want to be an entrepreneur! Hell, that’s even more of a pain in the ass than giving stuff away.

Unfurl

{ "failed": true, "failedAt": 1728194735933, "failedError": "TimeoutError: Promise timed out after 10000 milliseconds" }
Taft Test - Web Dev Placeholder Image Generater

tafttest.com
2016-01-07T18:49:47.000Z
programming webdev imported:pinboard

Notes

Does your page design improve when you replace every image with William Howard Taft?

Unfurl

{ "failed": true, "failedAt": 1728194753168, "failedError": "TimeoutError: Promise timed out after 10000 milliseconds" }
The Fall and Rise of SVG

blog.siliconpublishing.com
2015-12-05T17:02:49.000Z
webdev svg graphics imported:pinboard

Notes

Now that SVG is widely supported and native to browsers, the art of using it is more connected to the surrounding web technologies that it can now interoperate with in HTML5

Unfurl

{ "date": "2024-08-07T16:15:51.000Z", "description": "The Silicon Publishing Blog, posts about publishing technology from the world experts at InDesign Server automation.", "image": "https://www.siliconpublishing.com/wp-content/uploads/2024/07/header-image-main.jpg", "logo": "https://www.siliconpublishing.com/wp-content/uploads/2022/07/cropped-favicon-192x192.jpg", "publisher": "Silicon Publishing", "title": "Silicon Publishing Blog", "url": "https://www.siliconpublishing.com/blog/", "lang": "en", "cached": true, "cachedAt": 1728193555863, "expires": 1728364146556, "status": 200, "bodyLength": 57591, "duration": 9281 }
Aerotwist - FLIP Your Animations

aerotwist.com
2015-11-25T22:04:58.000Z
webdev css animations performance javascript imported:pinboard

Notes

What we’re trying and do is to turn animations on their head (flip, see? Gosh darnit, I’m so funneh) and, instead of animating “straight ahead” and potentially doing expensive calculations on every single frame we precalculate the animation dynamically and let it play out cheaply.

Feed

Unfurl

{ "author": "Paul Lewis", "date": "2015-02-11T12:00:00.000Z", "description": "Animations in your web app should run at 60fps. Not always easy to achieve that,and it really depends on what you’re trying to do, but I’m here to help. With FLIP.", "image": "https://aerotwist.com/static/blog/flip-your-animations/window.jpg", "logo": "https://aerotwist.com/images/icon@192x192.png", "publisher": "FLIP Your Animations", "title": "FLIP Your Animations", "url": "https://aerotwist.com/blog/flip-your-animations/", "feed": "https://aerotwist.com/blog/feed/", "cached": true, "cachedAt": 1728193553209, "expires": 1728364147078, "status": 200, "bodyLength": 31880, "duration": 7406 }
ES6 Promises in Depth

ponyfoo.com
2015-10-01T16:56:36.000Z
promises es6 javascript webdev imported:pinboard

Notes

Promises are a very involved paradigm, so we’ll take it slow.

Feed

Unfurl

{ "author": "Nicolás Bevacqua", "date": "2018-12-19T20:57:41.454Z", "description": "Welcome back to ES6 – “Dude, we already had those!” – in Depth series. If you’ve never been around here before, start with A Brief …", "image": "https://i.imgur.com/AJCnopB.png", "logo": "https://ponyfoo.com/favicon-194x194.png", "publisher": "Pony Foo", "title": "ES6 Promises in Depth", "url": "https://ponyfoo.com/articles/es6-promises-in-depth", "feed": "https://feeds.feedburner.com/ponyfoo", "lang": "en", "failed": true, "failedAt": 1728193566970, "failedError": "TimeoutError: Promise timed out after 10000 milliseconds", "cached": true, "cachedAt": 1728193568185 }
The Wrong Debate About Native And Web. - otsukare

www.otsukare.info
2015-08-05T04:04:49.000Z
web webdev native imported:pinboard

Feed

Unfurl

{ "author": "Karl Dubost", "date": "2015-08-05T06:42:00.000Z", "description": "<p>People like dichotomies and they will do everything to have their story fits the imaginary gap.</p>", "publisher": "otsukare", "title": "The Wrong Debate About Native And Web.", "url": "http://www.otsukare.info/2015/08/05/native-mobile-wrong-debate", "feed": "https://www.otsukare.info/feeds/atom.xml", "lang": "en", "failed": true, "failedAt": 1728193577594, "failedError": "TimeoutError: Promise timed out after 10000 milliseconds", "cached": true, "cachedAt": 1728193599823 }
GitHub tip: easily sync your master to GitHub Pages - BrettTerpstra.com

brettterpstra.com
2015-07-26T20:29:36.000Z
github dev webdev imported:pinboard

Notes

[remote "origin"] fetch = +refs/heads/*:refs/remotes/origin/* url = git@github.com:user/repo.git push = +refs/heads/master:refs/heads/gh-pages push = +refs/heads/master:refs/heads/master

Feed

Unfurl

{ "author": "503440548", "date": "2012-09-26T12:00:00.000Z", "description": "On the occasion that you’re working on a web-related project using GitHub, you may want to simply mirror your demo pages or entire branch over to the Github Pages for your project to make them…", "image": "https://cdn3.brettterpstra.com/uploads/2024/09/default-thumb-rb_fb.jpg", "logo": "https://brettterpstra.com/favicon-192.png", "publisher": "BrettTerpstra.com", "title": "GitHub tip: easily sync your master to GitHub Pages - BrettTerpstra.com", "url": "https://brettterpstra.com/2012/09/26/github-tip-easily-sync-your-master-to-github-pages/", "feed": "http://brett.trpstra.net/brettterpstra?format=json", "lang": "en", "failed": true, "failedAt": 1728193577594, "failedError": "TimeoutError: Promise timed out after 10000 milliseconds", "cached": true, "cachedAt": 1728193585797 }
The Web is not Poor Man’s Native | in progress

cwilso.com
2015-06-25T18:36:22.000Z
webdev native apps imported:pinboard

Notes

I agree quite strongly that the web does not need to emulate native to provide a powerful, vibrant app ecosystem.

Feed

Embed

Unfurl

{ "author": "cwilso", "date": "2015-05-29T21:12:53.000Z", "description": "I read PPK’s “Web vs. native: let’s concede defeat” article with great interest. I agree quite strongly that the web does not need to emulate native to provide a powerful, vibrant app ecosystem. If…", "image": "https://s0.wp.com/i/blank.jpg", "logo": "https://s2.wp.com/i/webclip.png", "publisher": "in progress", "title": "The Web is not Poor Man’s Native", "url": "https://cwilso.com/2015/05/29/the-web-is-not-poor-mans-native/", "feed": "https://cwilso.com/feed/", "iframe": "<blockquote class=\"wp-embedded-content\" data-secret=\"pbHTvjd0yH\"><a href=\"https://cwilso.com/2015/05/29/the-web-is-not-poor-mans-native/\">The Web is not Poor Man’s Native</a></blockquote><iframe sandbox=\"allow-scripts\" security=\"restricted\" src=\"https://cwilso.com/2015/05/29/the-web-is-not-poor-mans-native/embed/#?secret=pbHTvjd0yH\" width=\"440\" height=\"248\" title=\"“The Web is not Poor Man’s Native” — in progress\" data-secret=\"pbHTvjd0yH\" 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": 1728193583302, "failedError": "TimeoutError: Promise timed out after 10000 milliseconds", "cached": true, "cachedAt": 1728193597217 }
Progressive Apps: Escaping Tabs Without Losing Our Soul – Infrequently Noted

infrequently.org
2015-06-21T16:07:33.000Z
webdev apps web imported:pinboard

Notes

These apps aren’t packaged and deployed through stores, they’re just websites that took all the right vitamins.

Feed

Unfurl

{ "author": "Alex Russell", "date": "2015-06-15T16:04:52.000Z", "description": "Progressive Web Apps are aren’t packaged and deployed through stores, they’re just websites that took all the right vitamins.", "image": "https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/add-to-home-screen.gif", "logo": "https://infrequently.org/assets/images/favicons/ino-dark-opt-192x192.png", "publisher": "Alex Russell", "title": "Progressive Web Apps: Escaping Tabs Without Losing Our Soul - Infrequently Noted", "url": "https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/", "feed": "https://infrequently.org/feed/", "lang": "en", "failed": true, "failedAt": 1728193583302, "failedError": "TimeoutError: Promise timed out after 10000 milliseconds", "cached": true, "cachedAt": 1728193591117 }
Unit testing React components without a DOM – simonsmith.io – Portfolio and blog of a London based front-end web developer

simonsmith.io
2015-06-18T01:53:05.000Z
react webdev apps testing imported:pinboard

Notes

the idea of shallow rendering is to instantiate a component and get the result of its render method, which is a ReactElement. From here you can do things like check its props and children and verify it works as expected.

Unfurl

{ "description": "Update 12/04/17 Airbnb’s Enzyme library\noffers the best solution for shallow rendering Update 04/01/16 Added better examples of skin-deep…", "logo": "https://www.simonsmith.io/icons/icon-512x512.png?v=c061e275622a7099a1451eceffbefa3f", "publisher": "simonsmith.io", "title": "Unit testing React components without a DOM", "url": "http://simonsmith.io/unit-testing-react-components-without-a-dom/?imm_mid=0d3af7&cmp=em-web-na-na-newsltr_20150617", "lang": "en", "failed": true, "failedAt": 1728193583302, "failedError": "TimeoutError: Promise timed out after 10000 milliseconds", "cached": true, "cachedAt": 1728193596724 }
Lazymorphic Apps: Bringing back the static web | &yet Blog

blog.andyet.com
2015-06-18T01:51:04.000Z
webdev lazymorphic static apps imported:pinboard

Notes

We’ve come long way from the simple static sites of the early web, yet somehow, I really miss it.

Feed

Unfurl

{ "description": "The blog of &yet, a design and web software company that strengthens your customer relationships through creative technology.", "logo": "https://blog.andyet.com/images/ampersand.png", "publisher": "&yet", "title": "Lazymorphic Apps: Bringing back the static web | &yet blog", "url": "https://blog.andyet.com/2015/05/18/lazymorphic-apps-bringing-back-static-web?imm_mid=0d3af7&cmp=em-web-na-na-newsltr_20150617", "feed": "https://blog.andyet.com/feeds/all.atom.xml", "failed": true, "failedAt": 1728194753531, "failedError": "TimeoutError: Promise timed out after 10000 milliseconds" }
Heroku | Heroku Review Apps Beta

blog.heroku.com
2015-06-01T16:17:29.000Z
github dev webdev heroku imported:pinboard

Notes

With Review Apps enabled, Heroku will spin up temporary test apps for every pull request that’s opened on GitHub, complete with fresh add-ons and other config required to make the app run

Feed

Unfurl

{ "author": "Michael Friis", "date": "2016-09-08T14:09:30.000Z", "description": "Today we’re announcing a feature that is going to change the way teams test and evaluate code changes. Continuous delivery works best when all team members", "image": "https://www.herokucdn.com/images/og.png", "logo": "https://www.herokucdn.com/favicons/favicon.ico", "publisher": "Heroku", "title": "Heroku Review Apps Beta", "url": "https://blog.heroku.com/heroku_review_apps_beta", "feed": "https://blog.heroku.com/feed", "lang": "en", "cached": true, "cachedAt": 1728193627555 }
Deploying a Jekyll Site on GitHub, Travis CI, and Amazon S3 | ThinkShout

thinkshout.com
2015-05-06T16:57:45.000Z
jekyl webdev s3 github travis imported:pinboard

Unfurl

{ "failed": true, "failedAt": 1728194758864, "failedError": "TimeoutError: Promise timed out after 10000 milliseconds" }
Simplify: move code into database functions | Derek Sivers

sivers.org
2015-05-03T16:16:40.000Z
webdev postgres dev imported:pinboard

Notes

If you are a web or API developer, programming code that uses an SQL database, this is for you.

Feed

Unfurl

{ "image": "https://sivers.org/images/postgresql.png", "logo": "https://sive.rs/favicon.ico", "publisher": "Derek Sivers", "title": "Simplify: move code into database functions | Derek Sivers", "url": "https://sivers.org/pg", "feed": "https://sivers.org/en.atom", "lang": "en", "cached": true, "cachedAt": 1728193627789 }
draft-nottingham-json-home-02 - Home Documents for HTTP APIs

tools.ietf.org
2015-03-06T15:59:04.000Z
json webdev rest imported:pinboard

Notes

This document proposes a "home document" format for non-browser HTTP clients.

Feed

Unfurl

{ "author": "Mark Nottingham", "description": "This document proposes a “home document” format for non-browser HTTP clients. Note to Readers This draft should be discussed on the apps-discuss mailing list [1].", "logo": "https://static.ietf.org/dt/12.25.0/ietf/images/ietf-logo-nor-180.png", "publisher": "IETF Datatracker", "title": "Home Documents for HTTP APIs", "url": "https://datatracker.ietf.org/doc/html/draft-nottingham-json-home-02", "feed": "http://tools.ietf.org/feed/document-changes/draft-nottingham-json-home/", "lang": "en", "failed": true, "failedAt": 1728193644483, "failedError": "TimeoutError: Promise timed out after 10000 milliseconds", "cached": true, "cachedAt": 1728193643475 }
Fill Murray

www.fillmurray.com
2015-02-04T16:52:18.000Z
css html images webdev imported:pinboard

Notes

The internet was missing the ability to provide custom-sized placeholder images of Bill Murray. Now it can.

Unfurl

{ "failed": true, "failedAt": 1728194759084, "failedError": "TimeoutError: Promise timed out after 10000 milliseconds" }
ifttt-webhook · Abhay Rana

captnemo.in
2014-12-31T19:48:55.000Z
hacks ifttt webdev imported:pinboard

Notes

A webhook middleware for the ifttt.com service

Feed

Unfurl

{ "author": "Nemo", "description": "Nemo’s Home", "image": "https://captnemo.in/img/favicon.png", "logo": "https://captnemo.in/img/favicon.png", "publisher": "Nemo's Home", "title": "ifttt-webhook", "url": "https://captnemo.in/ifttt-webhook/", "feed": "https://captnemo.in/atom.xml", "lang": "en", "cached": true, "cachedAt": 1728193644596, "expires": 1728364253155, "status": 200, "bodyLength": 6703, "duration": 3797 }
How to Use npm as a Build Tool

blog.keithcirkel.co.uk
2014-12-17T17:15:52.000Z
javascript npm grunt gulp webdev imported:pinboard

Notes

I suggested we should start uing npm instead. npm's scripts directive can do everything that these build tools can, more succinctly, more elegantly, with less package dependencies and less maintainence overhead.

Unfurl

{ "failed": true, "failedAt": 1728194759090, "failedError": "TimeoutError: Promise timed out after 10000 milliseconds" }
ES6 Modules, AMD and CommonJS — Medium

medium.com
2014-12-12T16:44:58.000Z
webdev javascript imported:pinboard

Notes

This article shares some techniques and tools for building web apps using future friendly ES6 module syntax.

Unfurl

{ "author": "xnoɹǝʃ uɐıɹq", "date": "2018-06-06T08:23:03.241Z", "description": "JavaScript and the end of civilization as we know it.", "image": "https://miro.medium.com/v2/da:true/resize:fit:800/1*1_4vyYCWNlZKsnd2AbcVvA.gif", "logo": "https://miro.medium.com/v2/resize:fill:304:304/10fd5c419ac61637245384e7099e131627900034828f4f386bdaa47a74eae156", "publisher": "Medium", "title": "ES6 Modules, AMD and CommonJS", "url": "https://medium.com/@brianleroux/es6-modules-amd-and-commonjs-c1acefbe6fc0", "lang": "en", "cached": true, "cachedAt": 1728193650017 }
SQL on Khan Academy enabled by SQLite, sqljs, asm.js and Emscripten

www.brianbondy.com
2014-11-26T17:09:02.000Z
to:twitter webdev learning khan sql imported:pinboard

Notes

Our implementation of SQL is based off of SQLite which is compiled down to asm.js by Emscripten packaged into sqljs.

Unfurl

{ "failed": true, "failedAt": 1728194759109, "failedError": "TimeoutError: Promise timed out after 10000 milliseconds" }
Contributing to FirefoxOS Cordova initiative

blog.rodms.com
2014-11-18T19:14:14.000Z
cordova mobile webdev firefoxos mozilla imported:pinboard

Notes

This post will focus on how to get started writing the Firefox OS platform and plugins.

Unfurl

{ "failed": true, "failedAt": 1728194759127, "failedError": "TimeoutError: Promise timed out after 10000 milliseconds" }
The Web Is Dying; Apps Are Killing It - WSJ

online.wsj.com
2014-11-18T17:19:56.000Z
webdev web internet open imported:pinboard

Notes

Everything about apps feels like a win for users—they are faster and easier to use than what came before. But underneath all that convenience is something sinister: the end of the very openness that allowed Internet companies to grow into some of the most powerful or important companies of the 21st century.

Unfurl

{ "failed": true, "failedAt": 1728194759128, "failedError": "TimeoutError: Promise timed out after 10000 milliseconds" }
Dexie.js - Minimalistic IndexedDB Wrapper

www.dexie.org
2014-11-17T16:59:03.000Z
javascript database webdev imported:pinboard

Notes

A Minimalistic Wrapper for IndexedDB

Unfurl

{ "description": "The easiest way to use IndexedDB. A lightweight, minimalistic wrapper that provides a straightforward API for developers using IndexedDB.", "image": "http://www.dexie.org/assets/images/ukraine-flag.png", "logo": "https://dexie.org/assets/images/favicon-yuri.png", "publisher": "Minimalistic IndexedDB Wrapper", "title": "Dexie.js - Minimalistic IndexedDB Wrapper", "url": "http://www.dexie.org/", "cached": true, "cachedAt": 1728193710281 }
Seth Ladd's Blog: Minification is not enough, you need tree shaking

blog.sethladd.com
2014-11-17T16:58:31.000Z
webdev javascript imported:pinboard

Notes

I believe that web developers need a better workflow that automates tree shaking, dead code elimination, minification, and more. Stop caring how big a library is, and instead let a tool or build step produce the smallest output possible for you, ideally by tree shaking the application.

Feed

Unfurl

{ "author": "Unknown", "date": "2013-01-29T18:41:29.000Z", "description": "In which the virtues of automated mechanical arboreal pruning are extolled over quaint manual labor, as applied to web development build pr…", "image": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQsay_mIGJZBTg-AwhseRjemiwHLq_Pa64D2O3IoyODoM2I0CLrqT15Hf2cpJpGv8EJFO7alqjVZjfU40hyzECG6UduPIQp-Ir5bKuUo80PNVXgszCdjcsYnh5c7mJz9QRXCuTPCODFrTK/w1200-h630-p-k-no-nu/Screenshot_1_28_13_11_43_PM.png", "logo": "http://blog.sethladd.com/favicon.ico", "publisher": "Blogger", "title": "Minification is not enough, you need tree shaking", "url": "http://blog.sethladd.com/2013/01/minification-is-not-enough-you-need.html", "feed": "http://blog.sethladd.com/feeds/posts/default?alt=rss", "lang": "en", "cached": true, "cachedAt": 1728193707128, "expires": 1728364263284, "status": 200, "bodyLength": 136071, "duration": 8061 }
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 }
Firefox 1.0 Launch Day | Mitchell's Blog

blog.lizardwrangler.com
2014-11-14T19:04:22.000Z
mozilla launch firefox webdev history imported:pinboard

Notes

Launch day here was quite a day, and I thought I would describe my view of it.

Feed

Embed

Unfurl

{ "date": "2005-01-21T12:00:00.000Z", "description": "Launch day here was quite a day, and I thought I would describe my view of it. We knew it would be a long day, since the launch was schedule for 1 a.m. Monday night/Tuesday morning. On Monday most of us started rolling into the office about 10 a.m. or so. A number of us […]", "image": "http://blog.lizardwrangler.com/wp-content/uploads/2005/01/Fx1.0webpage.png", "logo": "https://blog.lizardwrangler.com/wp-content/themes/LizardWrangler/favicon.ico", "publisher": "Mitchell's Blog", "title": "Firefox 1.0 Launch Day | Mitchell’s Blog", "url": "https://blog.lizardwrangler.com/2005/01/21/firefox-10-launch-day/", "feed": "https://blog.lizardwrangler.com/feed/", "iframe": "<blockquote class=\"wp-embedded-content\" data-secret=\"L4x3KICTyt\"><a href=\"https://blog.lizardwrangler.com/2005/01/21/firefox-10-launch-day/\">Firefox 1.0 Launch Day</a></blockquote><iframe sandbox=\"allow-scripts\" security=\"restricted\" src=\"https://blog.lizardwrangler.com/2005/01/21/firefox-10-launch-day/embed/#?secret=L4x3KICTyt\" width=\"600\" height=\"338\" title=\"“Firefox 1.0 Launch Day” — Mitchell's Blog\" data-secret=\"L4x3KICTyt\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" class=\"wp-embedded-content\"></iframe><script type=\"text/javascript\">\n/*! This file is auto-generated */\n!function(c,d){\"use strict\";var e=!1,o=!1;if(d.querySelector)if(c.addEventListener)e=!0;if(c.wp=c.wp||{},c.wp.receiveEmbedMessage);else if(c.wp.receiveEmbedMessage=function(e){var t=e.data;if(!t);else if(!(t.secret||t.message||t.value));else if(/[^a-zA-Z0-9]/.test(t.secret));else{for(var r,s,a,i=d.querySelectorAll('iframe[data-secret=\"'+t.secret+'\"]'),n=d.querySelectorAll('blockquote[data-secret=\"'+t.secret+'\"]'),o=new RegExp(\"^https?:$\",\"i\"),l=0;l<n.length;l++)n[l].style.display=\"none\";for(l=0;l<i.length;l++)if(r=i[l],e.source!==r.contentWindow);else{if(r.removeAttribute(\"style\"),\"height\"===t.message){if(1e3<(s=parseInt(t.value,10)))s=1e3;else if(~~s<200)s=200;r.height=s}if(\"link\"===t.message)if(s=d.createElement(\"a\"),a=d.createElement(\"a\"),s.href=r.getAttribute(\"src\"),a.href=t.value,!o.test(a.protocol));else if(a.host===s.host)if(d.activeElement===r)c.top.location.href=t.value}}},e)c.addEventListener(\"message\",c.wp.receiveEmbedMessage,!1),d.addEventListener(\"DOMContentLoaded\",t,!1),c.addEventListener(\"load\",t,!1);function t(){if(o);else{o=!0;for(var e,t,r,s=-1!==navigator.appVersion.indexOf(\"MSIE 10\"),a=!!navigator.userAgent.match(/Trident.*rv:11\\./),i=d.querySelectorAll(\"iframe.wp-embedded-content\"),n=0;n<i.length;n++){if(!(r=(t=i[n]).getAttribute(\"data-secret\")))r=Math.random().toString(36).substr(2,10),t.src+=\"#?secret=\"+r,t.setAttribute(\"data-secret\",r);if(s||a)(e=t.cloneNode(!0)).removeAttribute(\"security\"),t.parentNode.replaceChild(e,t);t.contentWindow.postMessage({message:\"ready\",secret:r},\"*\")}}}}(window,document);\n</script>\n", "lang": "en", "failed": true, "failedAt": 1728193715474, "failedError": "TimeoutError: Promise timed out after 10000 milliseconds", "cached": true, "cachedAt": 1728193716164 }

previous 150 - 200 of 2006 items next

10 25 50 100 250