{"id":3386,"date":"2015-05-09T07:17:55","date_gmt":"2015-05-09T12:17:55","guid":{"rendered":"http:\/\/rud.is\/b\/?p=3386"},"modified":"2018-03-07T16:43:48","modified_gmt":"2018-03-07T21:43:48","slug":"quotebox-an-npr-like-embedded-twitter-quote-generator","status":"publish","type":"post","link":"https:\/\/rud.is\/b\/2015\/05\/09\/quotebox-an-npr-like-embedded-twitter-quote-generator\/","title":{"rendered":"quotebox &#8211; An NPR-like Embedded Twitter Quote Generator"},"content":{"rendered":"<p>I&#8217;m an avid NPR listener also follow a number of their programs and people on Twitter. I really dig their [quotable](https:\/\/github.com\/nprapps\/quotable) tweets. Here&#8217;s a sample of a recent one:<\/p>\n<blockquote class=\"twitter-tweet\" lang=\"en\">\n<p lang=\"en\" dir=\"ltr\">Minn. state senators cannot look other senators in the eye during floor debate. <a href=\"https:\/\/mobile.twitter.com\/ailsachang\">@ailsachang<\/a> <a href=\"http:\/\/t.co\/SfQBq4yyHQ\">http:\/\/t.co\/SfQBq4yyHQ<\/a> <a href=\"http:\/\/t.co\/DNHGEiVA9j\">pic.twitter.com\/DNHGEiVA9j<\/a><\/p>\n<p>&mdash; NPR News (@nprnews) <a href=\"https:\/\/mobile.twitter.com\/NPR\/status\/596647777700052992\">May 8, 2015<\/a><\/p><\/blockquote>\n<p><script async src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<p>I asked @brianboyer &#038; @alykat (two member of the _awesome_ NPR Visuals team) if they had a workflow for this (they publish quite a bit of open source tools) and, well [of course they did](https:\/\/twitter.com\/hrbrmstr\/status\/596656939720962048). <\/p>\n<p>After poking around a bit, I determined that the workflow would be great for something like NPR but was a bit overkill for me and also did not meet all of my requirements. I really only needed something that would:<\/p>\n<p>&#8211; work from the command-line (on OS X)<br \/>\n&#8211; take a JSON file for the quote<br \/>\n&#8211; generate an SVG (for blogging) and PNG (for tweeting)<\/p>\n<p>Thus, [quotebox](http:\/\/github.com\/hrbrmstr\/quotebox) was born.<\/p>\n<p>For the time being, `quotebox` is a python script that lets you pass in a JSON config file with quote components and spits out some files to use in blog posts &#038; tweets. I can see it morphing into more, but for now you can create a quote file like:<\/p>\n<pre lang=\"javascript\">{\r\n  \"quote\" : \"Making these quotes by hand is fine &amp; NPR Visuals web app is cool, but this has some advantages, too.\",\r\n  \"source\" : \"Data-Driven Security co-author Bob Rudis on making \u201cNPR-like quoteboxes\u201d at the command-line.\", \r\n  \"logo\" : \"ddsec.png\"\r\n}<\/pre>\n<p>which will generate:<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"3389\" data-permalink=\"https:\/\/rud.is\/b\/2015\/05\/09\/quotebox-an-npr-like-embedded-twitter-quote-generator\/test-2\/\" data-orig-file=\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2015\/05\/test.png?fit=640%2C360&amp;ssl=1\" data-orig-size=\"640,360\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"test\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2015\/05\/test.png?fit=510%2C287&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2015\/05\/test.png?resize=510%2C287&#038;ssl=1\" alt=\"test\" width=\"510\" height=\"287\" class=\"aligncenter size-full wp-image-3389\" \/><\/p>\n<p>or (SVG version):<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/rud.is\/dl\/test.svg\" alt=\"test\" width=\"640\" height=\"360\" class=\"aligncenter size-full\" \/><\/p>\n<p>The script auto-adds &#8220;smart&#8221; quotes and an em-dash plus base64 encodes the logo file to a data URI so you can easily use the SVG file without needing to bring along the associated logo asset. The SVG itself has a couple (at least to me) interesting components. First, it uses the [Lato](https:\/\/www.google.com\/fonts\/specimen\/Lato) font from Google Fonts via `defs`:<\/p>\n<pre lang=\"xml\"><defs>\r\n  <style type=\"text\/css\">@import url('http:\/\/fonts.googleapis.com\/css?family=Lato:300,900');<\/style>\r\n<\/defs><\/pre>\n<p>It then uses two `foreignObject` tags for the main quote and the attribution line. Here&#8217;s an example:<\/p>\n<pre lang=\"xml\"><foreignObject x=\"25\" y=\"25\" width=\"590\" height=\"165\">\r\n  <body xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\"\r\n    style=\"background: white; font-family: Lato; font-weight:900; font-stretch:normal; font-size:36px; line-height:36px; text-indent:-16px; margin-left:20px; color:#333333\">\r\n    <p>&#8220;Making these quotes by hand is fine &amp; NPR Visuals web app is cool, but this has some advantages, too.&#8221;<\/p>\r\n  <\/body>\r\n<\/foreignObject><\/pre>\n<p>Like most SVG elements, you have full precision as to how you place and size the `foreignObject` and this object contains XHTML, so all text or graphics in them can be fully styled. Not every browser or command-line rendering engine supports this, but the latest Chrome &#038; Safari browsers do along with the >=2.0.0 of [phantomjs](http:\/\/phantomjs.org\/). <\/p>\n<p>Once the SVG is built, the script uses phantomjs to render the resultant png file. You now have two assets (SVG &#038; png) that can be used wherever you like, but posting it as a Twitter image post will require the use of png.<\/p>\n<p>### Requirements &#038; Usage<\/p>\n<p>You&#8217;ll need python, [Pillow](https:\/\/python-pillow.github.io\/) and [phantomjs](http:\/\/phantomjs.org\/) to run the script and just need to execute<\/p>\n<pre lang=\"bash\">python quotebox.py test.json<\/pre>\n<p>to generate `test.svg` and `test.png`. On OS X I was using<\/p>\n<pre lang=\"bash\">python quotebox.py test.json && open test.svg && open test.png<\/pre>\n<p>to test out the image generation &#038; conversion.<\/p>\n<p>Note that many (most?) folks should use the NPR Visuals [quotable](https:\/\/github.com\/nprapps\/quotable) instead of this since it has full workflow management. This script was created primarily to oversimplify local usage (I don&#8217;t work in a newsroom) and play with SVG. <\/p>\n<p>The python is not bullet proof (no error checking, lack of use of tempfiles\/dirs) but it&#8217;s a decent basic foundation.<\/p>\n<p>### Future work<\/p>\n<p>There will definitely be command line switches for some options (quotes or no quotes) and possibly an extension to the JSON config file for fonts and colors. I&#8217;ll think supporting grabbing a logo from a URL is needed and automagic resizing to a series of constraints. I can also envision spinning up a quotebox app on Heroku or Google Apps and bridging it to a bookmarklet, but fork away and PR as you see fit. The creativity &#038; ingenuity of the community knows no bounds.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;m an avid NPR listener also follow a number of their programs and people on Twitter. I really dig their [quotable](https:\/\/github.com\/nprapps\/quotable) tweets. Here&#8217;s a sample of a recent one: Minn. state senators cannot look other senators in the eye during floor debate. @ailsachang http:\/\/t.co\/SfQBq4yyHQ pic.twitter.com\/DNHGEiVA9j &mdash; NPR News (@nprnews) May 8, 2015 I asked @brianboyer [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":true,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":3,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":""},"categories":[724,640,723],"tags":[810],"class_list":["post-3386","post","type-post","status-publish","format-standard","hentry","category-phantomjs","category-python-2","category-svg","tag-post"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>quotebox - An NPR-like Embedded Twitter Quote Generator - rud.is<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rud.is\/b\/2015\/05\/09\/quotebox-an-npr-like-embedded-twitter-quote-generator\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"quotebox - An NPR-like Embedded Twitter Quote Generator - rud.is\" \/>\n<meta property=\"og:description\" content=\"I&#8217;m an avid NPR listener also follow a number of their programs and people on Twitter. I really dig their [quotable](https:\/\/github.com\/nprapps\/quotable) tweets. Here&#8217;s a sample of a recent one: Minn. state senators cannot look other senators in the eye during floor debate. @ailsachang http:\/\/t.co\/SfQBq4yyHQ pic.twitter.com\/DNHGEiVA9j &mdash; NPR News (@nprnews) May 8, 2015 I asked @brianboyer [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rud.is\/b\/2015\/05\/09\/quotebox-an-npr-like-embedded-twitter-quote-generator\/\" \/>\n<meta property=\"og:site_name\" content=\"rud.is\" \/>\n<meta property=\"article:published_time\" content=\"2015-05-09T12:17:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-03-07T21:43:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rud.is\/b\/wp-content\/uploads\/2015\/05\/test.png\" \/>\n<meta name=\"author\" content=\"hrbrmstr\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"hrbrmstr\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/2015\\\/05\\\/09\\\/quotebox-an-npr-like-embedded-twitter-quote-generator\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/2015\\\/05\\\/09\\\/quotebox-an-npr-like-embedded-twitter-quote-generator\\\/\"},\"author\":{\"name\":\"hrbrmstr\",\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/#\\\/schema\\\/person\\\/d7cb7487ab0527447f7fda5c423ff886\"},\"headline\":\"quotebox &#8211; An NPR-like Embedded Twitter Quote Generator\",\"datePublished\":\"2015-05-09T12:17:55+00:00\",\"dateModified\":\"2018-03-07T21:43:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/2015\\\/05\\\/09\\\/quotebox-an-npr-like-embedded-twitter-quote-generator\\\/\"},\"wordCount\":624,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/#\\\/schema\\\/person\\\/d7cb7487ab0527447f7fda5c423ff886\"},\"image\":{\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/2015\\\/05\\\/09\\\/quotebox-an-npr-like-embedded-twitter-quote-generator\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rud.is\\\/b\\\/wp-content\\\/uploads\\\/2015\\\/05\\\/test.png\",\"keywords\":[\"post\"],\"articleSection\":[\"phantomjs\",\"Python\",\"svg\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/rud.is\\\/b\\\/2015\\\/05\\\/09\\\/quotebox-an-npr-like-embedded-twitter-quote-generator\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/2015\\\/05\\\/09\\\/quotebox-an-npr-like-embedded-twitter-quote-generator\\\/\",\"url\":\"https:\\\/\\\/rud.is\\\/b\\\/2015\\\/05\\\/09\\\/quotebox-an-npr-like-embedded-twitter-quote-generator\\\/\",\"name\":\"quotebox - An NPR-like Embedded Twitter Quote Generator - rud.is\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/2015\\\/05\\\/09\\\/quotebox-an-npr-like-embedded-twitter-quote-generator\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/2015\\\/05\\\/09\\\/quotebox-an-npr-like-embedded-twitter-quote-generator\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rud.is\\\/b\\\/wp-content\\\/uploads\\\/2015\\\/05\\\/test.png\",\"datePublished\":\"2015-05-09T12:17:55+00:00\",\"dateModified\":\"2018-03-07T21:43:48+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/2015\\\/05\\\/09\\\/quotebox-an-npr-like-embedded-twitter-quote-generator\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rud.is\\\/b\\\/2015\\\/05\\\/09\\\/quotebox-an-npr-like-embedded-twitter-quote-generator\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/2015\\\/05\\\/09\\\/quotebox-an-npr-like-embedded-twitter-quote-generator\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/rud.is\\\/b\\\/wp-content\\\/uploads\\\/2015\\\/05\\\/test.png?fit=640%2C360&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/rud.is\\\/b\\\/wp-content\\\/uploads\\\/2015\\\/05\\\/test.png?fit=640%2C360&ssl=1\",\"width\":640,\"height\":360},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/2015\\\/05\\\/09\\\/quotebox-an-npr-like-embedded-twitter-quote-generator\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/rud.is\\\/b\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"quotebox &#8211; An NPR-like Embedded Twitter Quote Generator\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/#website\",\"url\":\"https:\\\/\\\/rud.is\\\/b\\\/\",\"name\":\"rud.is\",\"description\":\"&quot;In God we trust. All others must bring data&quot;\",\"publisher\":{\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/#\\\/schema\\\/person\\\/d7cb7487ab0527447f7fda5c423ff886\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rud.is\\\/b\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/#\\\/schema\\\/person\\\/d7cb7487ab0527447f7fda5c423ff886\",\"name\":\"hrbrmstr\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/i0.wp.com\\\/rud.is\\\/b\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/ukr-shield.png?fit=460%2C460&ssl=1\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/rud.is\\\/b\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/ukr-shield.png?fit=460%2C460&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/rud.is\\\/b\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/ukr-shield.png?fit=460%2C460&ssl=1\",\"width\":460,\"height\":460,\"caption\":\"hrbrmstr\"},\"logo\":{\"@id\":\"https:\\\/\\\/i0.wp.com\\\/rud.is\\\/b\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/ukr-shield.png?fit=460%2C460&ssl=1\"},\"description\":\"Don't look at me\u2026I do what he does \u2014 just slower. #rstats avuncular \u2022 ?Resistance Fighter \u2022 Cook \u2022 Christian \u2022 [Master] Chef des Donn\u00e9es de S\u00e9curit\u00e9 @ @rapid7\",\"sameAs\":[\"http:\\\/\\\/rud.is\"],\"url\":\"https:\\\/\\\/rud.is\\\/b\\\/author\\\/hrbrmstr\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"quotebox - An NPR-like Embedded Twitter Quote Generator - rud.is","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rud.is\/b\/2015\/05\/09\/quotebox-an-npr-like-embedded-twitter-quote-generator\/","og_locale":"en_US","og_type":"article","og_title":"quotebox - An NPR-like Embedded Twitter Quote Generator - rud.is","og_description":"I&#8217;m an avid NPR listener also follow a number of their programs and people on Twitter. I really dig their [quotable](https:\/\/github.com\/nprapps\/quotable) tweets. Here&#8217;s a sample of a recent one: Minn. state senators cannot look other senators in the eye during floor debate. @ailsachang http:\/\/t.co\/SfQBq4yyHQ pic.twitter.com\/DNHGEiVA9j &mdash; NPR News (@nprnews) May 8, 2015 I asked @brianboyer [&hellip;]","og_url":"https:\/\/rud.is\/b\/2015\/05\/09\/quotebox-an-npr-like-embedded-twitter-quote-generator\/","og_site_name":"rud.is","article_published_time":"2015-05-09T12:17:55+00:00","article_modified_time":"2018-03-07T21:43:48+00:00","og_image":[{"url":"https:\/\/rud.is\/b\/wp-content\/uploads\/2015\/05\/test.png","type":"","width":"","height":""}],"author":"hrbrmstr","twitter_card":"summary_large_image","twitter_misc":{"Written by":"hrbrmstr","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rud.is\/b\/2015\/05\/09\/quotebox-an-npr-like-embedded-twitter-quote-generator\/#article","isPartOf":{"@id":"https:\/\/rud.is\/b\/2015\/05\/09\/quotebox-an-npr-like-embedded-twitter-quote-generator\/"},"author":{"name":"hrbrmstr","@id":"https:\/\/rud.is\/b\/#\/schema\/person\/d7cb7487ab0527447f7fda5c423ff886"},"headline":"quotebox &#8211; An NPR-like Embedded Twitter Quote Generator","datePublished":"2015-05-09T12:17:55+00:00","dateModified":"2018-03-07T21:43:48+00:00","mainEntityOfPage":{"@id":"https:\/\/rud.is\/b\/2015\/05\/09\/quotebox-an-npr-like-embedded-twitter-quote-generator\/"},"wordCount":624,"commentCount":0,"publisher":{"@id":"https:\/\/rud.is\/b\/#\/schema\/person\/d7cb7487ab0527447f7fda5c423ff886"},"image":{"@id":"https:\/\/rud.is\/b\/2015\/05\/09\/quotebox-an-npr-like-embedded-twitter-quote-generator\/#primaryimage"},"thumbnailUrl":"https:\/\/rud.is\/b\/wp-content\/uploads\/2015\/05\/test.png","keywords":["post"],"articleSection":["phantomjs","Python","svg"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/rud.is\/b\/2015\/05\/09\/quotebox-an-npr-like-embedded-twitter-quote-generator\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/rud.is\/b\/2015\/05\/09\/quotebox-an-npr-like-embedded-twitter-quote-generator\/","url":"https:\/\/rud.is\/b\/2015\/05\/09\/quotebox-an-npr-like-embedded-twitter-quote-generator\/","name":"quotebox - An NPR-like Embedded Twitter Quote Generator - rud.is","isPartOf":{"@id":"https:\/\/rud.is\/b\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rud.is\/b\/2015\/05\/09\/quotebox-an-npr-like-embedded-twitter-quote-generator\/#primaryimage"},"image":{"@id":"https:\/\/rud.is\/b\/2015\/05\/09\/quotebox-an-npr-like-embedded-twitter-quote-generator\/#primaryimage"},"thumbnailUrl":"https:\/\/rud.is\/b\/wp-content\/uploads\/2015\/05\/test.png","datePublished":"2015-05-09T12:17:55+00:00","dateModified":"2018-03-07T21:43:48+00:00","breadcrumb":{"@id":"https:\/\/rud.is\/b\/2015\/05\/09\/quotebox-an-npr-like-embedded-twitter-quote-generator\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rud.is\/b\/2015\/05\/09\/quotebox-an-npr-like-embedded-twitter-quote-generator\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/rud.is\/b\/2015\/05\/09\/quotebox-an-npr-like-embedded-twitter-quote-generator\/#primaryimage","url":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2015\/05\/test.png?fit=640%2C360&ssl=1","contentUrl":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2015\/05\/test.png?fit=640%2C360&ssl=1","width":640,"height":360},{"@type":"BreadcrumbList","@id":"https:\/\/rud.is\/b\/2015\/05\/09\/quotebox-an-npr-like-embedded-twitter-quote-generator\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/rud.is\/b\/"},{"@type":"ListItem","position":2,"name":"quotebox &#8211; An NPR-like Embedded Twitter Quote Generator"}]},{"@type":"WebSite","@id":"https:\/\/rud.is\/b\/#website","url":"https:\/\/rud.is\/b\/","name":"rud.is","description":"&quot;In God we trust. All others must bring data&quot;","publisher":{"@id":"https:\/\/rud.is\/b\/#\/schema\/person\/d7cb7487ab0527447f7fda5c423ff886"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rud.is\/b\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/rud.is\/b\/#\/schema\/person\/d7cb7487ab0527447f7fda5c423ff886","name":"hrbrmstr","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/10\/ukr-shield.png?fit=460%2C460&ssl=1","url":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/10\/ukr-shield.png?fit=460%2C460&ssl=1","contentUrl":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/10\/ukr-shield.png?fit=460%2C460&ssl=1","width":460,"height":460,"caption":"hrbrmstr"},"logo":{"@id":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/10\/ukr-shield.png?fit=460%2C460&ssl=1"},"description":"Don't look at me\u2026I do what he does \u2014 just slower. #rstats avuncular \u2022 ?Resistance Fighter \u2022 Cook \u2022 Christian \u2022 [Master] Chef des Donn\u00e9es de S\u00e9curit\u00e9 @ @rapid7","sameAs":["http:\/\/rud.is"],"url":"https:\/\/rud.is\/b\/author\/hrbrmstr\/"}]}},"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p23idr-SC","jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":3649,"url":"https:\/\/rud.is\/b\/2015\/08\/27\/coloring-and-drawing-outside-the-lines-in-ggplot\/","url_meta":{"origin":3386,"position":0},"title":"Coloring (and Drawing) Outside the Lines in ggplot","author":"hrbrmstr","date":"2015-08-27","format":false,"excerpt":"Time for another Twitter-inspired blog post this week, this time from a tweet by @JonKalodimos: Is there a way to do this in #rstats #ggplot2 https:\/\/t.co\/kxWQFlYpbB\u2014 Jonathan Kalodimos (@JonKalodimos) August 27, 2015 I had seen and appreciated Ann's post on her makeover of the main graphic in [NPR's story](http:\/\/www.npr.org\/sections\/money\/2014\/10\/21\/357629765\/when-women-stopped-coding) and\u2026","rel":"","context":"In &quot;Data Visualization&quot;","block_context":{"text":"Data Visualization","link":"https:\/\/rud.is\/b\/category\/data-visualization\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":4460,"url":"https:\/\/rud.is\/b\/2016\/06\/19\/a-call-to-armslist-data-analysis\/","url_meta":{"origin":3386,"position":1},"title":"A Call to Arms[list] Data Analysis!","author":"hrbrmstr","date":"2016-06-19","format":false,"excerpt":"The NPR vis team contributed to a recent [story](http:\/\/n.pr\/1USSliN) about Armslist, a \"craigslist for guns\". Now, I'm neither pro-\"gun\" or anti-\"gun\" since this subject, like most heated ones, has more than two sides. What I _am_ is pro-*data*, and the U.S. Congress is so [deep in the pockets of the\u2026","rel":"","context":"In &quot;Charts &amp; Graphs&quot;","block_context":{"text":"Charts &amp; Graphs","link":"https:\/\/rud.is\/b\/category\/charts-graphs\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2016\/06\/per-day-1.png?fit=1200%2C750&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2016\/06\/per-day-1.png?fit=1200%2C750&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2016\/06\/per-day-1.png?fit=1200%2C750&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2016\/06\/per-day-1.png?fit=1200%2C750&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2016\/06\/per-day-1.png?fit=1200%2C750&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":1545,"url":"https:\/\/rud.is\/b\/2012\/08\/06\/just-when-you-thought-it-was-safe-to-make-a-slopegraph\/","url_meta":{"origin":3386,"position":2},"title":"Just When You Thought It Was Safe To Make A Slopegraph","author":"hrbrmstr","date":"2012-08-06","format":false,"excerpt":"Thanks to a nice call-out post link on Flowing Data in my RSS feeds this morning, I found Naomi Robbins' Effective Graphs Forbes blog, perused the archives a bit and came across her post on arrow charts. She presented a nice comparison between (ugh) pie charts, arrow charts and slopegraphs.\u2026","rel":"","context":"In &quot;Charts &amp; Graphs&quot;","block_context":{"text":"Charts &amp; Graphs","link":"https:\/\/rud.is\/b\/category\/charts-graphs\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":5146,"url":"https:\/\/rud.is\/b\/2017\/03\/12\/think-twice-before-using-ohmconnect\/","url_meta":{"origin":3386,"position":3},"title":"Think Twice Before Using Ohmconnect","author":"hrbrmstr","date":"2017-03-12","format":false,"excerpt":"I listen to @NPR throughout the day (on most days) and a story on Ohmconnect piqued my interest (it aired 5 days prior to this post). The TLDR on Ohmconnect is that it ostensibly helps you save energy by making you more aware of consumption and can be enabled to\u2026","rel":"","context":"In &quot;Cybersecurity&quot;","block_context":{"text":"Cybersecurity","link":"https:\/\/rud.is\/b\/category\/cybersecurity\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2017\/03\/OhmConnect-9.png?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2017\/03\/OhmConnect-9.png?resize=350%2C200 1x, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2017\/03\/OhmConnect-9.png?resize=525%2C300 1.5x"},"classes":[]},{"id":8230,"url":"https:\/\/rud.is\/b\/2018\/02\/16\/pym-js-library-vulnerability-in-widgetframe-package\/","url_meta":{"origin":3386,"position":4},"title":"Pym.js Library Vulnerability in widgetframe Package","author":"hrbrmstr","date":"2018-02-16","format":false,"excerpt":"What's Up? The NPR Visuals Team created and maintains a javascript library that makes it super easy to embed iframes on web pages and have said documents still be responsive. The widgetframe R htmlwidget uses pym.js to bring this (much needed) functionality into widgets and (eventually) shiny apps. NPR reported\u2026","rel":"","context":"In &quot;Cybersecurity&quot;","block_context":{"text":"Cybersecurity","link":"https:\/\/rud.is\/b\/category\/cybersecurity\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18,"url":"https:\/\/rud.is\/b\/2011\/02\/02\/backup-workflow\/","url_meta":{"origin":3386,"position":5},"title":"Backup Workflow","author":"hrbrmstr","date":"2011-02-02","format":false,"excerpt":"I\u00a0was trying to convey my backup workflow\/setup to @joeday in 140 and it just wasn't working very well. Twitter -\u00a0as one might expect - is not exactly the place for detailed technical discussions, but it does provide fertile ground to spark ideas and dialogue. I told @geekshui that I'd blog\u2026","rel":"","context":"In &quot;Backups&quot;","block_context":{"text":"Backups","link":"https:\/\/rud.is\/b\/category\/backups\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/posts\/3386","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/comments?post=3386"}],"version-history":[{"count":0,"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/posts\/3386\/revisions"}],"wp:attachment":[{"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/media?parent=3386"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/categories?post=3386"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/tags?post=3386"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}