Could I volunteer some web development time/energy to help any interested @RadioRookies journalists build their own websites/platforms for empowering/owning their voices, stories, and reporting portfolios? https://indieweb.org/Indieweb_for_Journalism
{
"type": "entry",
"published": "2019-10-14T17:54:40+00:00",
"url": "http://stream.boffosocko.com/2019/could-i-volunteer-some-web-development-timeenergy-to-help-any",
"syndication": [
"https://twitter.com/ChrisAldrich/status/1183803340163035139"
],
"content": {
"text": "Could I volunteer some web development time/energy to help any interested @RadioRookies journalists build their own websites/platforms for empowering/owning their voices, stories, and reporting portfolios? https://indieweb.org/Indieweb_for_Journalism",
"html": "Could I volunteer some web development time/energy to help any interested @RadioRookies journalists build their own websites/platforms for empowering/owning their voices, stories, and reporting portfolios? <a href=\"https://indieweb.org/Indieweb_for_Journalism\">https://indieweb.org/Indieweb_for_Journalism</a>"
},
"author": {
"type": "card",
"name": "Chris Aldrich",
"url": "http://stream.boffosocko.com/profile/chrisaldrich",
"photo": "http://stream.boffosocko.com/file/600427b81f7785e704eadfe511a9270f/thumb.jpg"
},
"post-type": "note",
"_id": "5644457",
"_source": "192",
"_is_read": true
}
{
"type": "entry",
"published": "2019-10-14T16:45:46Z",
"url": "https://adactio.com/journal/15967",
"category": [
"sciencehackday",
"sanfrancisco",
"indiewebcamp",
"brighton",
"events",
"weekend"
],
"syndication": [
"https://medium.com/@adactio/64b04bd2965b"
],
"name": "Something for the weekend",
"content": {
"text": "Your weekends are valuable. Spend them wisely. I have some suggestion on how you might spend next weekend, October 19th and 20th, depending on where you are in the world.\n\nIf you\u2019re in the bay area, or anywhere near San Francisco, I highly recommend that you go to Science Hack Day\u2014two days of science, hacking, and fun. This will be the last one in San Francisco so don\u2019t miss your chance.\n\nIf you\u2019re in the south of England, or anywhere near Brighton, come along to Indie Web Camp. Saturday will feature discussions on owning your data. Sunday will be a day of doing. I\u2019ve written about previous Indie Web Camps before, and I really can\u2019t recommend it highly enough!\n\nDo me a favour and register for a spot\u2014it\u2019s free\u2014so I\u2019ve got some idea of numbers. Looking forward to seeing you there!",
"html": "<p>Your weekends are valuable. Spend them wisely. I have some suggestion on how you might spend next weekend, October 19th and 20th, depending on where you are in the world.</p>\n\n<p>If you\u2019re in the bay area, or anywhere near San Francisco, I highly recommend that you go to <a href=\"http://sf.sciencehackday.org/\">Science Hack Day</a>\u2014two days of science, hacking, and fun. This will be the last one in San Francisco so don\u2019t miss your chance.</p>\n\n<p>If you\u2019re in the south of England, or anywhere near Brighton, come along to <a href=\"https://indieweb.org/2019/Brighton\">Indie Web Camp</a>. Saturday will feature discussions on owning your data. Sunday will be a day of doing. <a href=\"https://adactio.com/journal/tags/indiewebcamp,brighton\">I\u2019ve written about previous Indie Web Camps</a> before, and I really can\u2019t recommend it highly enough!</p>\n\n<p>Do me a favour and <a href=\"https://ti.to/adactio/indie-webcamp-brighton-2019\">register for a spot</a>\u2014it\u2019s free\u2014so I\u2019ve got some idea of numbers. Looking forward to seeing you there!</p>"
},
"author": {
"type": "card",
"name": "Jeremy Keith",
"url": "https://adactio.com/",
"photo": "https://adactio.com/images/photo-150.jpg"
},
"post-type": "article",
"_id": "5641266",
"_source": "2",
"_is_read": true
}
I saw Nicholas give this great talk at Paris Web on site deaths, the indie web, and publishing on your own site. That talk was in French, but these slides are (mostly) in English—I was able to follow along surprisingy easily!
{
"type": "entry",
"published": "2019-10-14T14:41:21Z",
"url": "https://adactio.com/links/15963",
"category": [
"slides",
"presentation",
"conference",
"talk",
"indieweb",
"posse",
"digital",
"preservation",
"publishing",
"parisweb",
"french"
],
"bookmark-of": [
"https://talks.nicolas-hoizey.com/AXGNM8/ne-vous-laissez-plus-deposseder-de-vos-contenus"
],
"content": {
"text": "Ne vous laissez plus d\u00e9POSSEder de vos contenus !\n\n\n\nI saw Nicholas give this great talk at Paris Web on site deaths, the indie web, and publishing on your own site. That talk was in French, but these slides are (mostly) in English\u2014I was able to follow along surprisingy easily!",
"html": "<h3>\n<a class=\"p-name u-bookmark-of\" href=\"https://talks.nicolas-hoizey.com/AXGNM8/ne-vous-laissez-plus-deposseder-de-vos-contenus\">\nNe vous laissez plus d\u00e9POSSEder de vos contenus !\n</a>\n</h3>\n\n<p>I saw Nicholas give this great talk at Paris Web on site deaths, the indie web, and publishing on your own site. That talk was in French, but these slides are (mostly) in English\u2014I was able to follow along surprisingy easily!</p>"
},
"author": {
"type": "card",
"name": "Jeremy Keith",
"url": "https://adactio.com/",
"photo": "https://adactio.com/images/photo-150.jpg"
},
"post-type": "bookmark",
"_id": "5640122",
"_source": "2",
"_is_read": true
}
WordPress Webmentions Plugin Version 4.0.0 Released by 
David Shanske
It has been a long while since a major release of webmentions, and it is not the end of the plans we have. It is merely the first step.
In the lastest version, several useful features were added. Instead of an option to enable webmention support for pages, the plugin now let’s you select the optio...
{
"type": "entry",
"author": {
"name": "Kh\u00fcrt Williams",
"url": "https://islandinthenet.com/",
"photo": null
},
"url": "https://islandinthenet.com/2019-10-13-21-52-21/",
"published": "2019-10-13T21:52:21-04:00",
"content": {
"html": "<a href=\"https://david.shanske.com/2019/10/13/wordpress-webmentions-plugin-version-4-0-0-released/\">WordPress Webmentions Plugin Version 4.0.0 Released</a> by <a href=\"https://david.shanske.com/author/dshanske/\"><img src=\"https://david.shanske.com/wp-content/uploads/avatar-privacy/cache/gravatar/2/c/2cb1f8afd9c8d3b646b4071c5ed887c970d81d625eeed87e447706940e2c403d-42.png\" alt=\"David Shanske\" />David Shanske</a>\n<blockquote>It has been a long while since a major release of webmentions, and it is not the end of the plans we have. It is merely the first step.\nIn the lastest version, several useful features were added. Instead of an option to enable webmention support for pages, the plugin now let\u2019s you select the optio...</blockquote>",
"text": "WordPress Webmentions Plugin Version 4.0.0 Released by David Shanske\nIt has been a long while since a major release of webmentions, and it is not the end of the plans we have. It is merely the first step.\nIn the lastest version, several useful features were added. Instead of an option to enable webmention support for pages, the plugin now let\u2019s you select the optio..."
},
"post-type": "note",
"_id": "5635906",
"_source": "242",
"_is_read": true
}
If you've noticed https://OwnYourGram.com has been not working well lately, that's because Instagram is aggressively rate limiting certain requests.
I just updated it so that you can give it the URL of an individual photo and it will import it for you. Importing individual photos avoids a lot of the rate limiting issues so should work a lot better now.
If you've been missing some of your latest photos, feel free to log in and manually import them now!
{
"type": "entry",
"published": "2019-10-13T12:53:11-07:00",
"url": "https://aaronparecki.com/2019/10/13/6/ownyourgram",
"category": [
"ownyourgram",
"instagram",
"indieweb"
],
"content": {
"text": "If you've noticed https://OwnYourGram.com has been not working well lately, that's because Instagram is aggressively rate limiting certain requests. \n\nI just updated it so that you can give it the URL of an individual photo and it will import it for you. Importing individual photos avoids a lot of the rate limiting issues so should work a lot better now. \n\nIf you've been missing some of your latest photos, feel free to log in and manually import them now!",
"html": "If you've noticed <a href=\"https://OwnYourGram.com\"><span>https://</span>OwnYourGram.com</a> has been not working well lately, that's because Instagram is aggressively rate limiting certain requests. <br /><br />I just updated it so that you can give it the URL of an individual photo and it will import it for you. Importing individual photos avoids a lot of the rate limiting issues so should work a lot better now. <br /><br />If you've been missing some of your latest photos, feel free to log in and manually import them now!"
},
"author": {
"type": "card",
"name": "Aaron Parecki",
"url": "https://aaronparecki.com/",
"photo": "https://aperture-media.p3k.io/aaronparecki.com/41061f9de825966faa22e9c42830e1d4a614a321213b4575b9488aa93f89817a.jpg"
},
"post-type": "note",
"_id": "5633927",
"_source": "16",
"_is_read": true
}
This is one of the best end funniest uses I've seen yet for having a domain of one's own!
#DoOO #indieweb #phdchat #hope
https://mickens.seas.harvard.edu/tenure-announcement
{
"type": "entry",
"published": "2019-10-11T20:35:11+00:00",
"url": "http://stream.boffosocko.com/2019/this-is-one-of-the-best-end-funniest-uses-ive",
"category": [
"DoOO",
"indieweb",
"phdchat",
"hope"
],
"syndication": [
"https://twitter.com/ChrisAldrich/status/1182756575397720071"
],
"content": {
"text": "This is one of the best end funniest uses I've seen yet for having a domain of one's own!\n#DoOO #indieweb #phdchat #hope\nhttps://mickens.seas.harvard.edu/tenure-announcement",
"html": "This is one of the best end funniest uses I've seen yet for having a domain of one's own!<br /><a href=\"http://stream.boffosocko.com/tag/DoOO\" class=\"p-category\">#DoOO</a> <a href=\"http://stream.boffosocko.com/tag/indieweb\" class=\"p-category\">#indieweb</a> <a href=\"http://stream.boffosocko.com/tag/phdchat\" class=\"p-category\">#phdchat</a> <a href=\"http://stream.boffosocko.com/tag/hope\" class=\"p-category\">#hope</a><br /><a href=\"https://mickens.seas.harvard.edu/tenure-announcement\">https://mickens.seas.harvard.edu/tenure-announcement</a>"
},
"author": {
"type": "card",
"name": "Chris Aldrich",
"url": "http://stream.boffosocko.com/profile/chrisaldrich",
"photo": "http://stream.boffosocko.com/file/600427b81f7785e704eadfe511a9270f/thumb.jpg"
},
"post-type": "note",
"_id": "5619150",
"_source": "192",
"_is_read": true
}
{
"type": "entry",
"published": "2019-10-10T17:29:52-0400",
"url": "https://martymcgui.re/2019/10/10/indiewebcamp-nyc-2019-wrap-up/",
"category": [
"IndieWeb",
"NYC",
"IWCNYC2019",
"wrap-up"
],
"photo": [
"https://res.cloudinary.com/schmarty/image/fetch/w_960,c_fill/https://media.martymcgui.re/30/38/35/3e/aecb73ca660093fb290373e7e6cee71050c202a8fbe73bbb7cfc15b9.jpg",
"https://res.cloudinary.com/schmarty/image/fetch/w_960,c_fill/https://media.martymcgui.re/36/2b/1d/2f/e556af7943ca1c8891f2001c66cf0f06e6fecc67dd3d7bd379a87eeb.jpg",
"https://res.cloudinary.com/schmarty/image/fetch/w_960,c_fill/https://media.martymcgui.re/9c/c9/26/d0/c46d51520dac3f75fe566b748e47ffd1f0b4a583c5e9d27827f50a52.jpg"
],
"syndication": [
"https://twitter.com/schmarty/status/1182411737590571009",
"https://www.facebook.com/marty.mcguire.54/posts/10215441730578410"
],
"name": "IndieWebCamp NYC 2019 Wrap-Up",
"content": {
"text": "Note: much of this was taken from the \u201cthank-you\u201d email that Greg, Tantek, Tiara, and I put together to send attendees after camp\nThanks to all organizers and attendees for making this year\u2019s IndiewebCamp NYC a success! From the enlightening keynotes and in-depth discussions on Saturday, to the successful launch of several new personal websites and other projects on Sunday, we are extremely pleased with how it went.\n\n Here\u2019s a quick recap of the weekend.\n\nFriday\n\n\nSix of us met up at Adrienne\u2019s pizzabar on Stone Street for pizza, pasta, and discussion of the weekend to come! Thanks to Mozilla for sponsoring this pre-event social!\nSaturday\n\n\nWe kicked things off at the Pace Seidenberg school in NYC\u2019s Financial District with bagels, fruit, and coffee thanks to our Open Collective donors!\nAmira Dhalla opened the day with a keynote on data privacy in this age of online surveillance. You can find her slides here.\nAmanda Rush walked us through some concrete steps that we can take to make our websites more accessible. Look for a link to her talk transcript on indieweb.org/2019/NYC as soon as we can make it available.\nWe then made a schedule of attendee-facilitated discussions, covering topics like Automation, Getting Started, Why We Publish, and many more!\nYou can find the full list of discussions, including session notes and video streams, at https://indieweb.org/2019/NYC/Schedule\nSunday\n\n\nSunday was a day of making, with 10 of us convening at One Pace Plaza to create and hack on our personal sites and projects. We kicked off by having each participant stick notes for their planned projects on the wall for accountability, then dove in!\nAfter a sponsored lunch from Dos Toros Taqueria (thanks to ReVIEW Talent Feedback System), we wrapped up our work and demoed what progress we had made.\nThree participants were able to demonstrate brand new personal sites, and many more folks had made incremental improvements or fixes! You can find the full details on what was demoed at https://indieweb.org/2019/NYC/Demos\nReflections\nI\u2019ll post some of my own, shortly, but we also want to see yours!\nDid you take photos? Write a blog post about the experience? Want to share? We encourage everyone to help us get the word out about IndieWebCamp NYC. Please hashtag your posts with #IndieWebCamp!\nWe\u2019ll be collecting blog posts, short notes, photos, and more on the event page at: https://indieweb.org/2019/NYC#Blog_posts\nAs a bonus, if you publish by Friday Oct 11 at 2pm Eastern time you can even make the weekly IndieWeb newsletter! There are 4 ways to make it into the newsletter:\nSyndicate your blog post to IndieNews\n\n Post your link in IRC, Slack, or chat\n\n Share a link on Twitter with the hashtag #IndieWebCamp. Our friendly bot Loqi will pick up the link, drop it into our chat channels, and a community member can add your post to the newsletter.\n Ask a community member in chat and we will help you out!\nUpcoming IndieWeb Events\nLive near NYC and hungry for more IndieWeb? We encourage you to attend our semi-regular IndieWeb Meetups in NYC!\nOur next meetup is scheduled for October 19. Exact time and location time are still TBD. To learn more check out the brand new (and under construction) indieweb.nyc.\nAnd of course, New York City isn\u2019t the only place for the IndieWeb! You can find a list of upcoming IndieWebCamps and local meetups worldwide at https://indieweb.org/Events\nWe have a few more IndieWebCamps in particular this year, so if you\u2019re nearby one of these cities, check it out:\nOctober 19-20th: IndieWebCamp Brighton \u2014 complimentary sign-ups open!\n November 23-24th: IndieWebCamp Berlin\u2014 save the date!\n December 7-8th: IndieWebCamp San Francisco\u2014 save the date!\nThanks Again!\nIndieWebCamp NYC would not have been a success without attendees like you! Of course, we\u2019d also like to thank our sponsors (Pace, ReView, Mozilla, and all our Open Collective donors) for making this event possible!\nAnd, of course, thanks to all my fellow co-organizers: Tiara, Greg, David.\nIf you\u2019d like weekly updates and event invitations, sign-up for our This Week In The IndieWeb newsletter!\nSubscribe to This Week in the IndieWeb",
"html": "<p></p><p><i>Note: much of this was taken from the \u201cthank-you\u201d email that Greg, Tantek, Tiara, and I put together to send attendees after camp</i></p>\n<p>Thanks to all organizers and attendees for making this year\u2019s IndiewebCamp NYC a success! From the enlightening keynotes and in-depth discussions on Saturday, to the successful launch of several new personal websites and other projects on Sunday, we are extremely pleased with how it went.</p>\n<p>\n Here\u2019s a quick recap of the weekend.\n</p>\n<h2>Friday</h2>\n<a href=\"https://media.martymcgui.re/30/38/35/3e/aecb73ca660093fb290373e7e6cee71050c202a8fbe73bbb7cfc15b9.jpg\"></a>\n\n<p>Six of us met up at Adrienne\u2019s pizzabar on Stone Street for pizza, pasta, and discussion of the weekend to come! Thanks to <a href=\"https://mozilla.org/\">Mozilla</a> for sponsoring this pre-event social!</p>\n<h2>Saturday</h2>\n<a href=\"https://media.martymcgui.re/36/2b/1d/2f/e556af7943ca1c8891f2001c66cf0f06e6fecc67dd3d7bd379a87eeb.jpg\"></a>\n\n<p>We kicked things off at the <a href=\"https://www.pace.edu/seidenberg/\">Pace Seidenberg school</a> in NYC\u2019s Financial District with bagels, fruit, and coffee thanks to <a href=\"https://opencollective.com/indieweb\">our Open Collective donors</a>!</p>\n<p><a href=\"https://amiradhalla.com/\">Amira Dhalla</a> opened the day with a keynote on data privacy in this age of online surveillance. You can find her <a href=\"https://docs.google.com/presentation/d/12QkoX7BVXPh2WeMji3CUaYJMi6SsAXdMDqHLUiws9pQ/edit?usp=sharing\">slides here</a>.</p>\n<p><a href=\"https://www.arush.io/\">Amanda Rush</a> walked us through some concrete steps that we can take to make our websites more accessible. Look for a link to her talk transcript on <a href=\"https://indieweb.org/2019/NYC\">indieweb.org/2019/NYC</a> as soon as we can make it available.</p>\n<p>We then made a schedule of attendee-facilitated discussions, covering topics like Automation, Getting Started, Why We Publish, and many more!</p>\n<p>You can find the full list of discussions, including session notes and video streams, at <a href=\"https://indieweb.org/2019/NYC/Schedule\">https://indieweb.org/2019/NYC/Schedule</a></p>\n<h2>Sunday</h2>\n<a href=\"https://media.martymcgui.re/9c/c9/26/d0/c46d51520dac3f75fe566b748e47ffd1f0b4a583c5e9d27827f50a52.jpg\"></a>\n\n<p>Sunday was a day of making, with 10 of us convening at One Pace Plaza to create and hack on our personal sites and projects. We kicked off by having each participant stick notes for their planned projects on the wall for accountability, then dove in!</p>\n<p>After a sponsored lunch from <a href=\"https://www.dostoros.com/\">Dos Toros Taqueria</a> (thanks to <a href=\"http://reviewtalentfeedback.com/\">ReVIEW Talent Feedback System</a>), we wrapped up our work and demoed what progress we had made.</p>\n<p>Three participants were able to demonstrate brand new personal sites, and many more folks had made incremental improvements or fixes! You can find the full details on what was demoed at <a href=\"https://indieweb.org/2019/NYC/Demos\">https://indieweb.org/2019/NYC/Demos</a></p>\n<h2>Reflections</h2>\n<p>I\u2019ll post some of my own, shortly, but we also want to see yours!</p>\n<p>Did you take photos? Write a blog post about the experience? Want to share? We encourage everyone to help us get the word out about IndieWebCamp NYC. Please hashtag your posts with #IndieWebCamp!</p>\n<p>We\u2019ll be collecting blog posts, short notes, photos, and more on the event page at: <a href=\"https://indieweb.org/2019/NYC#Blog_posts\">https://indieweb.org/2019/NYC#Blog_posts</a></p>\n<p>As a bonus, if you publish by Friday Oct 11 at 2pm Eastern time you can even make the <a href=\"https://indieweb.org/this-week\">weekly IndieWeb newsletter</a>! There are 4 ways to make it into the newsletter:</p>\n<ul><li>Syndicate your blog post to <a href=\"https://news.indieweb.org/en/submit\">IndieNews</a>\n</li>\n <li>Post your link in IRC, Slack, or <a href=\"https://chat.indieweb.org\">chat</a>\n</li>\n <li>Share a link on Twitter with the hashtag #IndieWebCamp. Our friendly bot Loqi will pick up the link, drop it into our chat channels, and a community member can add your post to the newsletter.</li>\n <li>Ask a community member in chat and we will help you out!</li>\n</ul><h2>Upcoming IndieWeb Events</h2>\n<p>Live near NYC and hungry for more IndieWeb? We encourage you to attend our semi-regular IndieWeb Meetups in NYC!</p>\n<p>Our next meetup is scheduled for October 19. Exact time and location time are still TBD. To learn more check out the brand new (and under construction) <a href=\"https://indieweb.nyc\">indieweb.nyc</a>.</p>\n<p>And of course, New York City isn\u2019t the only place for the IndieWeb! You can find a list of upcoming IndieWebCamps and local meetups worldwide at <a href=\"https://indieweb.org/Events\">https://indieweb.org/Events</a></p>\n<p>We have a few more IndieWebCamps in particular this year, so if you\u2019re nearby one of these cities, check it out:</p>\n<ul><li>October 19-20th: <a href=\"https://indieweb.org/2019/Brighton\">IndieWebCamp Brighton</a> \u2014 complimentary sign-ups open!</li>\n <li>November 23-24th: <a href=\"https://indieweb.org/2019/Berlin2\">IndieWebCamp Berlin</a>\u2014 save the date!</li>\n <li>December 7-8th: <a href=\"https://indieweb.org/2019/SF\">IndieWebCamp San Francisco</a>\u2014 save the date!</li>\n</ul><h2>Thanks Again!</h2>\n<p>IndieWebCamp NYC would not have been a success without attendees like you! Of course, we\u2019d also like to thank our sponsors (Pace, ReView, Mozilla, and all our Open Collective donors) for making this event possible!</p>\n<p>And, of course, thanks to all my fellow co-organizers: <a href=\"https://tiaramiller.com/\">Tiara</a>, <a href=\"https://jgregorymcverry.com/\">Greg</a>, <a href=\"https://david.shanske.com/\">David</a>.</p>\n<p>If you\u2019d like weekly updates and event invitations, sign-up for our This Week In The IndieWeb newsletter!</p>\n<ul><li><a href=\"https://indieweb.org/this-week-in-the-indieweb#How_to_Subscribe\">Subscribe to This Week in the IndieWeb</a></li>\n</ul>"
},
"author": {
"type": "card",
"name": "Marty McGuire",
"url": "https://martymcgui.re/",
"photo": "https://martymcgui.re/images/logo.jpg"
},
"post-type": "photo",
"_id": "5608228",
"_source": "175",
"_is_read": true
}
Nice to see @Paul_Kinlan add Webmentions to his static site. With a nice post on how he does it with Hugo. https://paul.kinlan.me/using-web-mentions-in-a-static-sitehugo-/
{
"type": "entry",
"published": "2019-10-08T20:41:19-04:00",
"url": "https://miklb.com/blog/2019/10/08/5294/",
"syndication": [
"https://twitter.com/miklb/status/1181731342154948608"
],
"content": {
"text": "Nice to see @Paul_Kinlan add Webmentions to his static site. With a nice post on how he does it with Hugo. https://paul.kinlan.me/using-web-mentions-in-a-static-sitehugo-/",
"html": "<p>Nice to see <a href=\"https://twitter.com/Paul_Kinlan\">@Paul_Kinlan</a> add Webmentions to his static site. With a nice post on how he does it with Hugo. <a href=\"https://paul.kinlan.me/using-web-mentions-in-a-static-sitehugo-/\">https://paul.kinlan.me/using-web-mentions-in-a-static-sitehugo-/</a>\n</p>"
},
"post-type": "note",
"_id": "5586076",
"_source": "42",
"_is_read": true
}
We forgot to take a group shot at the IndieWeb Meetup in Austin last week, but just noticed as I was flipping through photos that I had this one of my iced coffee and stickers. Next meetup is Nov 6th.
{
"type": "entry",
"author": {
"name": "Manton Reece",
"url": "https://www.manton.org/",
"photo": "https://micro.blog/manton/avatar.jpg"
},
"url": "https://www.manton.org/2019/10/08/we-forgot-to.html",
"content": {
"html": "<p>We forgot to take a group shot at the IndieWeb Meetup in Austin last week, but just noticed as I was flipping through photos that I had this one of my iced coffee and stickers. Next meetup is Nov 6th.</p>\n\n<p><img src=\"https://www.manton.org/uploads/2019/da412940e3.jpg\" width=\"600\" height=\"599\" alt=\"\" /></p>",
"text": "We forgot to take a group shot at the IndieWeb Meetup in Austin last week, but just noticed as I was flipping through photos that I had this one of my iced coffee and stickers. Next meetup is Nov 6th."
},
"published": "2019-10-08T15:04:34-05:00",
"category": [
"Photos"
],
"post-type": "note",
"_id": "5584323",
"_source": "12",
"_is_read": true
}
I've just exported my Micropub posts to CouchDB using just curl and jq. Here's the command:
curl --silent -H "Authorization: Bearer $MICROPUB_ACCESS_TOKEN" "${MICROPUB_ENDPOINT}?q=source&limit=$LIMIT" | jq '{
"docs": .items | map(. + {
"_id": .properties.published[] | strptime("%Y-%m-%dT%H:%M:%S%Z") | mktime | tostring
}) | map(
if .properties | has("visibility") then
.
else (
. * {"properties": {"visibility": ["public"]}}
) end
)
}' | curl -u $COUCHDB_AUTH localhost:5984/posts/_bulk_docs -X POST -d@- -H "Content-Type: application/json"
The variables $LIMIT (count of posts to be exported), $MICROPUB_ACCESS_TOKEN, $MICROPUB_TOKEN and $COUCHDB_AUTH are set by user.
{
"type": "entry",
"published": "2019-10-08T15:08:47+00:00",
"url": "https://fireburn.ru/posts/1570536527",
"category": [
"couchdb",
"micropub",
"ownyourdata"
],
"content": {
"text": "I've just exported my Micropub posts to CouchDB using just curl and jq. Here's the command:\n\ncurl --silent -H \"Authorization: Bearer $MICROPUB_ACCESS_TOKEN\" \"${MICROPUB_ENDPOINT}?q=source&limit=$LIMIT\" | jq '{\n \"docs\": .items | map(. + {\n \"_id\": .properties.published[] | strptime(\"%Y-%m-%dT%H:%M:%S%Z\") | mktime | tostring\n }) | map(\n if .properties | has(\"visibility\") then\n .\n else (\n . * {\"properties\": {\"visibility\": [\"public\"]}}\n ) end\n )\n}' | curl -u $COUCHDB_AUTH localhost:5984/posts/_bulk_docs -X POST -d@- -H \"Content-Type: application/json\"\n\n\nThe variables $LIMIT (count of posts to be exported), $MICROPUB_ACCESS_TOKEN, $MICROPUB_TOKEN and $COUCHDB_AUTH are set by user.",
"html": "<p>I've just exported my Micropub posts to CouchDB using just curl and jq. Here's the command:</p>\n<pre><code>\ncurl --silent -H \"Authorization: Bearer $MICROPUB_ACCESS_TOKEN\" \"${MICROPUB_ENDPOINT}?q=source&limit=$LIMIT\" | jq '{\n \"docs\": .items | map(. + {\n \"_id\": .properties.published[] | strptime(\"%Y-%m-%dT%H:%M:%S%Z\") | mktime | tostring\n }) | map(\n if .properties | has(\"visibility\") then\n .\n else (\n . * {\"properties\": {\"visibility\": [\"public\"]}}\n ) end\n )\n}' | curl -u $COUCHDB_AUTH localhost:5984/posts/_bulk_docs -X POST -d@- -H \"Content-Type: application/json\"\n</code></pre>\n\n<p>The variables <code>$LIMIT</code> (count of posts to be exported), <code>$MICROPUB_ACCESS_TOKEN</code>, <code>$MICROPUB_TOKEN</code> and <code>$COUCHDB_AUTH</code> are set by user.</p>"
},
"author": {
"type": "card",
"name": "Vika",
"url": "https://fireburn.ru/",
"photo": "https://avatars1.githubusercontent.com/u/7953163?s=460&v=4"
},
"post-type": "note",
"_id": "5583902",
"_source": "1371",
"_is_read": true
}
{
"type": "entry",
"published": "2019-10-07T19:50:58+02:00",
"url": "https://notiz.blog/2019/10/07/notizblog-svg/",
"featured": "https://notiz.blog/wp-content/uploads/2019/10/notizblog-logo-900x281.jpg",
"name": "notizblog.svg",
"content": {
"text": "Mein Blog hat ein Logo! \ud83d\ude0d\n\n\n\nVor fast genau 4 Jahren hat mir Chris ein erstes notizBlog Logo entworfen. Einfach so\u2026 ohne wirklich etwas daf\u00fcr zu verlangen\u2026 und mir war es nicht einmal einen Blog-Post wert\u2026 Das will ich hiermit nachholen!\n\n\n\nIch wei\u00df noch, dass sich Chris damals sehr schwer getan hat, das Thema Notizblock und Weblog in einem Logo zu vereinen. Ich bin mir auch nicht sicher ob das RSS-Logo wirklich die Assoziation zu Weblog herstellt, aber mir hat das Resultat gefallen. Der abstrahierte Notizblock sieht gro\u00dfartig aus und das Format macht sich gut als Favicon und noch besser auf dem Apple-Home-Screen.\n\n\n\n\u00dcber die Zeit hab\u2018 ich mich dennoch sattgesehen bzw. hab ich mittlerweile Gefallen an simpleren Logos gefunden. Also hab ich Chris nochmal angepingt ob er nicht Lust h\u00e4tte mir ein neues Logo zu bauen.\n\n\n\nMeine Vorgaben: \u201eDas \u201eNotiz-Blog\u201c Wortspiel solle einflie\u00dfen und es muss mindestens so simpel wie das wirres.net Logo sein!\u201c \ud83d\ude09\n\n\n\nEin paar Stunden sp\u00e4ter hatte ich folgendes in meiner Inbox:\n\n\n\nMein erster Favorit war unten in der Mitte, aber nach ein paar Runden und den Meinungen von Familie, Freunden und Kollegen, entstanden die Logos rechts und links unten. Mir gef\u00e4llt die Version links unten mit am besten, aber nach dem Feedback von Chris, bez\u00fcglich unterschiedlicher Gr\u00f6\u00dfen, Aufl\u00f6sungen und Farbschemas, wurde es dann doch folgende Kombination:\n\n\n\nVielen Dank f\u00fcr das gro\u00dfartige Logo!\n\n\n\nChris ist in meinen Augen ein verkanntes \u201eBrand Identity Designer\u201c Genie, das leider viel zu wenig Referenzen ver\u00f6ffentlicht hat!\n\n\n\nUm aber dann doch eine Referenz zu nennen: Chris bastelt, wie ich, schon seit Ewigkeiten an verschiedenen WordPress Themes. Ich hoffe, das aktuelle schafft es bis zur finalen Ver\u00f6ffentlichung. Es unterst\u00fctzt Post-Types, funktioniert mit den g\u00e4ngigen IndieWeb Plugins, ist microformattiert und sieht gro\u00dfartig aus! Das Theme kann man \u00fcbrigens auf seinem Weblog bewundern: christian.hockenberger.us",
"html": "<p>Mein Blog hat ein Logo! \ud83d\ude0d</p>\n\n\n\n<p>Vor fast genau 4 Jahren hat mir <a href=\"https://christian.hockenberger.us/\">Chris</a> ein erstes <strong>notizBlog Logo</strong> entworfen. Einfach so\u2026 ohne wirklich etwas daf\u00fcr zu verlangen\u2026 und mir war es nicht einmal einen Blog-Post wert\u2026 Das will ich hiermit nachholen!</p>\n\n\n\n<p>Ich wei\u00df noch, dass sich Chris damals sehr schwer getan hat, das Thema <strong>Notizblock</strong> und <strong>Weblog</strong> in einem Logo zu vereinen. Ich bin mir auch nicht sicher ob das RSS-Logo wirklich die Assoziation zu <em>Weblog</em> herstellt, aber mir hat das Resultat gefallen. Der abstrahierte Notizblock sieht gro\u00dfartig aus und das Format macht sich gut als Favicon und noch besser auf <a href=\"https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html\">dem Apple-Home-Screen</a>.</p>\n\n\n\n<img src=\"https://notiz.blog/wp-content/uploads/2019/10/notizblog-old-logo-900x226.png\" alt=\"\" /><p>\u00dcber die Zeit hab\u2018 ich mich dennoch sattgesehen bzw. hab ich mittlerweile Gefallen an simpleren Logos gefunden. Also hab ich Chris nochmal angepingt ob er nicht Lust h\u00e4tte mir ein neues Logo zu bauen.</p>\n\n\n\n<p>Meine Vorgaben: \u201eDas \u201e<em>Notiz-Blog</em>\u201c Wortspiel solle einflie\u00dfen und es muss mindestens so simpel wie das <a href=\"https://wirres.net/\">wirres.net</a> Logo sein!\u201c \ud83d\ude09</p>\n\n\n\n<p>Ein paar Stunden sp\u00e4ter hatte ich folgendes in meiner Inbox:</p>\n\n\n\n<img src=\"https://notiz.blog/wp-content/uploads/2019/10/notizblog-logo-drafts-900x675.jpg\" alt=\"\" /><p>Mein erster Favorit war unten in der Mitte, aber nach ein paar Runden und den Meinungen von Familie, Freunden und Kollegen, entstanden die Logos rechts und links unten. Mir gef\u00e4llt die Version links unten mit am besten, aber nach dem Feedback von Chris, bez\u00fcglich unterschiedlicher Gr\u00f6\u00dfen, Aufl\u00f6sungen und Farbschemas, wurde es dann doch folgende Kombination:</p>\n\n\n\n<img src=\"https://notiz.blog/wp-content/uploads/2019/10/notizblog-icon-logo-900x403.jpg\" alt=\"\" /><p><strong>Vielen Dank f\u00fcr das gro\u00dfartige Logo!</strong></p>\n\n\n\n<p>Chris ist in meinen Augen ein verkanntes <a href=\"https://dribbble.com/chrisbergr\">\u201eBrand Identity Designer\u201c Genie</a>, das leider viel zu wenig Referenzen ver\u00f6ffentlicht hat!</p>\n\n\n\n<p>Um aber dann doch eine Referenz zu nennen: Chris bastelt, wie ich, schon seit Ewigkeiten an verschiedenen WordPress Themes. Ich hoffe, <a href=\"https://github.com/chrisbergr/Themeberger-Basic\">das aktuelle</a> schafft es bis zur finalen Ver\u00f6ffentlichung. Es unterst\u00fctzt Post-Types, funktioniert mit den g\u00e4ngigen IndieWeb Plugins, ist microformattiert und sieht gro\u00dfartig aus! Das Theme kann man \u00fcbrigens auf seinem Weblog bewundern: <a href=\"https://christian.hockenberger.us/\">christian.hockenberger.us</a></p>"
},
"author": {
"type": "card",
"name": "Matthias Pfefferle",
"url": "https://notiz.blog/author/matthias-pfefferle/",
"photo": "https://secure.gravatar.com/avatar/75512bb584bbceae57dfc503692b16b2?s=40&d=https://notiz.blog/wp-content/plugins/semantic-linkbacks/img/mm.jpg&r=g"
},
"post-type": "article",
"_id": "5571528",
"_source": "206",
"_is_read": true
}
Huge thanks to co-organizers @tiereeee @schmarty @dshanske @jgmac1106 for an amazing @IndieWebCamp NYC this weekend. Thanks to @PaceUniversity for having us! So good to see so many new #indieweb sites go live: @nshad314 @teonbrooks et al and all the demos!
{
"type": "entry",
"published": "2019-10-07 06:05-0700",
"url": "http://tantek.com/2019/280/t1/amazing-indiewebcamp-nyc-new-sites",
"category": [
"indieweb"
],
"content": {
"text": "Huge thanks to co-organizers @tiereeee @schmarty @dshanske @jgmac1106 for an amazing @IndieWebCamp NYC this weekend. Thanks to @PaceUniversity for having us! So good to see so many new #indieweb sites go live: @nshad314 @teonbrooks et al and all the demos!",
"html": "Huge thanks to co-organizers <a class=\"h-cassis-username\" href=\"https://twitter.com/tiereeee\">@tiereeee</a> <a class=\"h-cassis-username\" href=\"https://twitter.com/schmarty\">@schmarty</a> <a class=\"h-cassis-username\" href=\"https://twitter.com/dshanske\">@dshanske</a> <a class=\"h-cassis-username\" href=\"https://twitter.com/jgmac1106\">@jgmac1106</a> for an amazing <a class=\"h-cassis-username\" href=\"https://twitter.com/IndieWebCamp\">@IndieWebCamp</a> NYC this weekend. Thanks to <a class=\"h-cassis-username\" href=\"https://twitter.com/PaceUniversity\">@PaceUniversity</a> for having us! So good to see so many new #<span class=\"p-category\">indieweb</span> sites go live: <a class=\"h-cassis-username\" href=\"https://twitter.com/nshad314\">@nshad314</a> <a class=\"h-cassis-username\" href=\"https://twitter.com/teonbrooks\">@teonbrooks</a> et al and all the demos!"
},
"author": {
"type": "card",
"name": "Tantek \u00c7elik",
"url": "http://tantek.com/",
"photo": "https://aperture-media.p3k.io/tantek.com/acfddd7d8b2c8cf8aa163651432cc1ec7eb8ec2f881942dca963d305eeaaa6b8.jpg"
},
"post-type": "note",
"_id": "5567792",
"_source": "1",
"_is_read": true
}
Nice demos indiewebcamp nyc! 🐰
{
"type": "entry",
"published": "2019-10-07T10:44:04+10:00",
"url": "https://unicyclic.com/mal/2019-10-07-Nice_demos_indiewebcamp_nyc_",
"photo": [
"https://unicyclic.com/mal/public/index.jpg"
],
"syndication": [
"https://twitter.com/malcolmblaney/status/1181007264297213955"
],
"content": {
"text": "Nice demos indiewebcamp nyc! \ud83d\udc30",
"html": "Nice demos indiewebcamp nyc! \ud83d\udc30<a href=\"https://brid.gy/publish/twitter?bridgy_omit_link=true\"></a><a href=\"https://twitter.com/malcolmblaney/status/1181007264297213955\" class=\"u-syndication\"></a>"
},
"author": {
"type": "card",
"name": "Malcolm Blaney",
"url": "https://unicyclic.com/mal",
"photo": "https://unicyclic.com/mal/public/profile_small_thumb.png"
},
"post-type": "photo",
"_id": "5564096",
"_source": "243",
"_is_read": true
}
{
"type": "entry",
"published": "2019-10-06T16:16:50-07:00",
"url": "https://aaronparecki.com/2019/10/06/20/foursquare",
"category": [
"indiewebcamp",
"p3k",
"foursquare",
"indieweb",
"ownyourdata"
],
"name": "Syndicating My Tips to Foursquare",
"content": {
"text": "I realized I have been avoiding leaving tips in Foursquare because I didn't have a good way to post them from my website. So today I added the ability to syndicate my posts as Foursquare tips.\nI have three different ways my posts can end up as tips on Foursquare:\nI can reply to one of my checkins\n I can reply to a Foursquare venue URL directly\n I can send the text of a checkin itself as a tip\nThat last one is interesting, because it doesn't quite map to the normal way tips end up on Foursquare. But I realized that sometimes I write text in my checkins that is actually more like a tip anyway, so I wanted to give myself that option.\nI'm probably most likely to use the first option of replying to one of my own checkin posts to leave a tip. Since my checkins appear in my reader, I can actually post directly inline from the reader to go back and leave tips.\nI also made the decision to not try to syndicate these automatically, instead I have to manually click the syndication option before my site will attempt to syndicate the post.\nHere's what a checkin post on my website looks like:\nAnd here's what that tip looks like syndicated to Foursquare:\nOverall this was pretty straightforward to do. The hardest part was dealing with finding the Foursquare venue URL from my own internal storage of my posts for the three different options.\nThe Foursquare API for this is reasonably well documented (Add a tip to a venue), but there were a few gotchas. It's not immediately obvious from that page that you need to include the access token as a post body parameter, and you also need to include an API version string. These are documented elsewhere in their docs, so it didn't take too long to find, but if you just start out reading the specific API method you want to use, it's not mentioned there at all.\nThere is also a parameter in the API docs called \"url\" which is described as \"A URL related to this tip\" with an example value of \"http://blog.zagat.com/taco-survey-results-are-here\". At first I was excited that I may be able to link my Foursquare tips back to my website. But every time I tried including a URL in the request, I got back a generic error \"bad tips/add request\". Leaving out that parameter made the API call work. Oh well.\nSo hopefully this will encourage me to leave more tips on Foursquare! I find the tips very helpful when I travel, so I'm happy to contribute back to this data set!",
"html": "<p>I realized I have been avoiding leaving tips in Foursquare because I didn't have a good way to post them from my website. So today I added the ability to syndicate my posts as Foursquare tips.</p>\n<p>I have three different ways my posts can end up as tips on Foursquare:</p>\n<ul><li>I can reply to one of my checkins</li>\n <li>I can reply to a Foursquare venue URL directly</li>\n <li>I can send the text of a checkin itself as a tip</li>\n</ul><p>That last one is interesting, because it doesn't quite map to the normal way tips end up on Foursquare. But I realized that sometimes I write text in my checkins that is actually more like a tip anyway, so I wanted to give myself that option.</p>\n<p>I'm probably most likely to use the first option of replying to one of my own checkin posts to leave a tip. Since my checkins appear in my reader, I can actually post directly inline from the reader to go back and leave tips.</p>\n<p>I also made the decision to not try to syndicate these automatically, instead I have to manually click the syndication option before my site will attempt to syndicate the post.</p>\n<p>Here's what a checkin post on my website looks like:</p>\n<img src=\"https://aperture-media.p3k.io/aaronparecki.com/5f25bf7f036d95f64863db5aa17bceab2d86cbcabde3059214fa887ebd7bf450.png\" alt=\"\" /><p>And here's what that tip looks like syndicated to Foursquare:</p>\n<img src=\"https://aperture-media.p3k.io/aaronparecki.com/f1a830d41cb62aa8fee05d0fbac5967639705bbefbe1800c1ebae34015b2b70c.png\" alt=\"\" /><p>Overall this was pretty straightforward to do. The hardest part was dealing with finding the Foursquare venue URL from my own internal storage of my posts for the three different options.</p>\n<p>The Foursquare API for this is reasonably well documented (<a href=\"https://developer.foursquare.com/docs/api/tips/add\">Add a tip to a venue</a>), but there were a few gotchas. It's not immediately obvious from that page that you need to include the access token as a post body parameter, and you also need to include an API version string. These are documented elsewhere in their docs, so it didn't take too long to find, but if you just start out reading the specific API method you want to use, it's not mentioned there at all.</p>\n<p>There is also a parameter in the API docs called \"url\" which is described as \"A URL related to this tip\" with an example value of \"http://blog.zagat.com/taco-survey-results-are-here\". At first I was excited that I may be able to link my Foursquare tips back to my website. But every time I tried including a URL in the request, I got back a generic error \"bad tips/add request\". Leaving out that parameter made the API call work. Oh well.</p>\n<p>So hopefully this will encourage me to leave more tips on Foursquare! I find the tips very helpful when I travel, so I'm happy to contribute back to this data set!</p>"
},
"author": {
"type": "card",
"name": "Aaron Parecki",
"url": "https://aaronparecki.com/",
"photo": "https://aperture-media.p3k.io/aaronparecki.com/41061f9de825966faa22e9c42830e1d4a614a321213b4575b9488aa93f89817a.jpg"
},
"post-type": "article",
"_id": "5563334",
"_source": "16",
"_is_read": true
}
{
"type": "entry",
"published": "2019-10-06 13:26-0700",
"rsvp": "yes",
"url": "http://tantek.com/2019/279/t2/hosting-homebrew-website-club-sf",
"category": [
"SF",
"IndieWeb"
],
"in-reply-to": [
"https://tantek.com/2019/289/e1/homebrew-website-club-sf"
],
"content": {
"text": "hosting Homebrew Website Club #SF #IndieWeb meetup 2019-10-16 17:30 @MozSF!\n\nJoin us! @benwerd @dietrich @generativist @html5cat @NurtureGirl @feross @maira et al\n\nRSVP: https://tantek.com/2019/289/e1/homebrew-website-club-sf\nMore: https://indieweb.org/events/2019-10-16-homebrew-website-club#San_Francisco",
"html": "hosting Homebrew Website Club #<span class=\"p-category\">SF</span> #<span class=\"p-category\">IndieWeb</span> meetup 2019-10-16 17:30 <a class=\"h-cassis-username\" href=\"https://twitter.com/MozSF\">@MozSF</a>!<br /><br />Join us! <a class=\"h-cassis-username\" href=\"https://twitter.com/benwerd\">@benwerd</a> <a class=\"h-cassis-username\" href=\"https://twitter.com/dietrich\">@dietrich</a> <a class=\"h-cassis-username\" href=\"https://twitter.com/generativist\">@generativist</a> <a class=\"h-cassis-username\" href=\"https://twitter.com/html5cat\">@html5cat</a> <a class=\"h-cassis-username\" href=\"https://twitter.com/NurtureGirl\">@NurtureGirl</a> <a class=\"h-cassis-username\" href=\"https://twitter.com/feross\">@feross</a> <a class=\"h-cassis-username\" href=\"https://twitter.com/maira\">@maira</a> et al<br /><br />RSVP: <a href=\"https://tantek.com/2019/289/e1/homebrew-website-club-sf\">https://tantek.com/2019/289/e1/homebrew-website-club-sf</a><br />More: <a href=\"https://indieweb.org/events/2019-10-16-homebrew-website-club#San_Francisco\">https://indieweb.org/events/2019-10-16-homebrew-website-club#San_Francisco</a>"
},
"author": {
"type": "card",
"name": "Tantek \u00c7elik",
"url": "http://tantek.com/",
"photo": "https://aperture-media.p3k.io/tantek.com/acfddd7d8b2c8cf8aa163651432cc1ec7eb8ec2f881942dca963d305eeaaa6b8.jpg"
},
"post-type": "rsvp",
"refs": {
"https://tantek.com/2019/289/e1/homebrew-website-club-sf": {
"type": "entry",
"url": "https://tantek.com/2019/289/e1/homebrew-website-club-sf",
"name": "Tantek\u2019s event",
"post-type": "article"
}
},
"_id": "5563214",
"_source": "1",
"_is_read": true
}
{
"type": "entry",
"published": "2019-10-06T21:46:13Z",
"url": "https://adactio.com/journal/15941",
"category": [
"css",
"colours",
"schemes",
"styles",
"ligtht",
"dark",
"modes",
"indiewebcamp",
"styling",
"images",
"frontend",
"development",
"design"
],
"syndication": [
"https://medium.com/@adactio/19d304d32f7"
],
"name": "Dark mode",
"content": {
"text": "I had a very productive time at Indie Web Camp Amsterdam. The format really lends itself to getting the most of a weekend\u2014one day of discussions followed by one day of hands-on making and doing. You should definitely come along to Indie Web Camp Brighton on October 19th and 20th to experience it for yourself.\n\nBy the end of the \u201cdoing\u201d day, I had something fun to demo\u2014a dark mode for my website.\n\nY\u2019know, when I first heard about Apple adding dark mode to their OS\u2014and also to CSS\u2014I thought, \u201cOh, great, Apple are making shit up again!\u201d But then I realised that, like user style sheets, this is one more reminder to designers and developers that they don\u2019t get the last word\u2014users do.\n\nApplying the dark mode styles is pretty straightforward in theory. You put the styles inside this media query:\n\n@media\u00a0(prefers-color-scheme:\u00a0dark)\u00a0{\n...\n}\n\n\nRather than over-riding every instance of a colour in my style sheet, I decided I\u2019d do a little bit of refactoring first and switch to using CSS custom properties (or variables, if you will).\n\n:root {\n --background-color: #fff;\n --text-color: #333;\n --link-color:\u00a0#b52;\n}\nbody {\n background-color: var(--background-color);\n color: var(--text-color);\n}\na {\n color: var(--link-color);\n}\n\n\nThen I can over-ride the custom properties without having to touch the already-declared styles:\n\n@media (prefers-color-scheme: dark) {\n :root {\n --background-color: #111416\n --text-color: #ccc;\n --link-color: #f96;\n }\n}\n\n\nAll in all, I have about a dozen custom properties for colours\u2014variations for text, backgrounds, and interface elements like links and buttons.\n\nBy using custom properties and the prefers-color-scheme media query, I was 90% of the way there. But the devil is in the details.\n\nI have SVGs of sparklines on my homepage. The SVG has a hard-coded colour value in the stroke attribute of the path element that draws the sparkline. Fortunately, this can be over-ridden in the style sheet:\n\nsvg.activity-sparkline\u00a0path\u00a0{\n stroke:\u00a0var(--text-color);\n}\n\n\nThe real challenge came with the images I use in the headers of my pages. They\u2019re JPEGs with white corners on one side and white gradients on the other.\n\n\n\nI could make them PNGs to get transparency, but the file size would shoot up\u2014they\u2019re photographic images (with a little bit of scan-line treatment) so JPEGs (or WEBPs) are the better format. Then I realised I could use CSS to recreate the two effects:\n\nFor the cut-out triangle in the top corner, there\u2019s clip-path.\n\nFor the gradient, there\u2019s \u2026gradients!\n\nbackground-image:\u00a0linear-gradient(\n to\u00a0right,\n transparent\u00a050%,\n var(\u2014background-color)\u00a0100%\n);\n\nOh, and I noticed that when I applied the clip-path for the corners, it had no effect in Safari. It turns out that after half a decade of support, it still only exists with -webkit prefix. That\u2019s just ridiculous. At this point we should be burning vendor prefixes with fire. I can\u2019t believe that Apple still ships standardised CSS properties that only work with a prefix.\n\nIn order to apply the CSS clip-path and gradient, I needed to save out the images again, this time without the effects baked in. I found the original Photoshop file I used to export the images. But I don\u2019t have a copy of Photoshop any more. I haven\u2019t had a copy of Photoshop since Adobe switched to their Mafia model of pricing. A quick bit of searching turned up Photopea, which is pretty much an entire recreation of Photoshop in the browser. I was able to open my old PSD file and re-export my images.\n\n\n\nLet\u2019s just take a moment here to pause and reflect on the fact that we can now use CSS to create all sorts of effects that previously required a graphic design tool like Photoshop. I could probably do those raster scan lines with CSS if I were smart enough.\n\n\n\nThis is what I demo\u2019d at the end of Indie Web Camp Amsterdam, and I was pleased with the results. But fate had an extra bit of good timing in store for me.\n\nThe very next day at the View Source conference, Melanie Richards gave a fantastic talk called The Tailored Web: Effectively Honoring Visual Preferences (seriously, conference organisers, you want this talk on your line-up). It was packed with great insights and advice on impementing dark mode, like this little gem for adjusting images:\n\n@media\u00a0(prefers-color-scheme:\u00a0dark)\u00a0{\n img {\n filter:\u00a0brightness(.8)\u00a0contrast(1.2);\n }\n}\n\n\nMelanie asked pointed out that you can indicate the presence of dark mode styles to browsers, although the mechanism is yet to shake out. You can do it in CSS:\n\n:root\u00a0{\n color-scheme:\u00a0light\u00a0dark;\n}\n\n\nBut you can also do it in HTML:\n\n<meta name=\"supported-color-schemes\" content=\"light dark\">\n\n\nThat allows browsers to swap out replaced content; interface elements like form fields and dropdowns.\n\nOh, and one other addition I added after the fact was swapping out map imagery by using the picture element to point to darker map tiles:\n\n<picture>\n<source media=\"prefers-color-scheme: dark\" srcset=\"https://api.mapbox.com/styles/v1/mapbox/dark-v10/static...\">\n<img src=\"https://api.mapbox.com/styles/v1/mapbox/outdoors-v10/static...\" alt=\"map\">\n</picture>\n\n\n\n\nSo now I\u2019ve got a dark mode for my website. Admittedly, it\u2019s for just one of the eight style sheets. I\u2019ve decided that, while I\u2019ll update my default styles at every opportunity, I\u2019m going to preservethe other skins as they are, like the historical museum pieces they are.\n\nIf you\u2019re on the latest version of iOS, go ahead and toggle the light and dark options in your system preferences to flip between this site\u2019s colour schemes.",
"html": "<p>I had a very productive time at <a href=\"https://indieweb.org/2019/Amsterdam\">Indie Web Camp Amsterdam</a>. The format really lends itself to getting the most of a weekend\u2014one day of discussions followed by one day of hands-on making and doing. You should definitely come along to <a href=\"https://indieweb.org/2019/Brighton\">Indie Web Camp Brighton</a> on October 19th and 20th to experience it for yourself.</p>\n\n<p>By the end of the \u201cdoing\u201d day, I had something fun to demo\u2014a dark mode for <a href=\"https://adactio.com\">my website</a>.</p>\n\n<p>Y\u2019know, when I first heard about Apple adding dark mode to their OS\u2014and also to CSS\u2014I thought, \u201cOh, great, Apple are making shit up again!\u201d But then I realised that, like user style sheets, this is one more reminder to designers and developers that they don\u2019t get the last word\u2014users do.</p>\n\n<p>Applying the dark mode styles is pretty straightforward in theory. You put the styles inside this media query:</p>\n\n<pre><code>@media\u00a0(prefers-color-scheme:\u00a0dark)\u00a0{\n...\n}\n</code></pre>\n\n<p>Rather than over-riding every instance of a colour in my style sheet, I decided I\u2019d do a little bit of refactoring first and switch to using CSS custom properties (or variables, if you will).</p>\n\n<pre><code>:root {\n --background-color: #fff;\n --text-color: #333;\n --link-color:\u00a0#b52;\n}\nbody {\n background-color: var(--background-color);\n color: var(--text-color);\n}\na {\n color: var(--link-color);\n}\n</code></pre>\n\n<p>Then I can over-ride the custom properties without having to touch the already-declared styles:</p>\n\n<pre><code>@media (prefers-color-scheme: dark) {\n :root {\n --background-color: #111416\n --text-color: #ccc;\n --link-color: #f96;\n }\n}\n</code></pre>\n\n<p>All in all, I have about a dozen custom properties for colours\u2014variations for text, backgrounds, and interface elements like links and buttons.</p>\n\n<p>By using custom properties and the <code>prefers-color-scheme</code> media query, I was 90% of the way there. But the devil is in the details.</p>\n\n<p>I have SVGs of sparklines on my homepage. The SVG has a hard-coded colour value in the <code>stroke</code> attribute of the <code>path</code> element that draws the sparkline. Fortunately, this can be over-ridden in the style sheet:</p>\n\n<pre><code>svg.activity-sparkline\u00a0path\u00a0{\n stroke:\u00a0var(--text-color);\n}\n</code></pre>\n\n<p>The real challenge came with the images I use in the headers of my pages. They\u2019re JPEGs with white corners on one side and white gradients on the other.</p>\n\n<p><img src=\"https://adactio.s3.amazonaws.com/images/headerimages.jpg\" alt=\"header images\" title=\"\" /></p>\n\n<p>I could make them PNGs to get transparency, but the file size would shoot up\u2014they\u2019re photographic images (with a little bit of scan-line treatment) so JPEGs (or WEBPs) are the better format. Then I realised I could use CSS to recreate the two effects:</p>\n\n<ol><li>For the cut-out triangle in the top corner, there\u2019s <code>clip-path</code>.</li>\n<li>\n<p>For the gradient, there\u2019s \u2026gradients!</p>\n\n<p>background-image:\u00a0linear-gradient(\n to\u00a0right,\n transparent\u00a050%,\n var(\u2014background-color)\u00a0100%\n);</p>\n</li>\n</ol><p>Oh, and I noticed that when I applied the <code>clip-path</code> for the corners, it had no effect in Safari. It turns out that after half a decade of support, it still only exists with <code>-webkit</code> prefix. That\u2019s just ridiculous. At this point we should be burning vendor prefixes with fire. I can\u2019t believe that Apple still ships standardised CSS properties that only work with a prefix.</p>\n\n<p>In order to apply the CSS <code>clip-path</code> and gradient, I needed to save out the images again, this time without the effects baked in. I found the original Photoshop file I used to export the images. But I don\u2019t have a copy of Photoshop any more. I haven\u2019t had a copy of Photoshop since Adobe switched to their Mafia model of pricing. A quick bit of searching turned up <a href=\"https://www.photopea.com/\">Photopea</a>, which is pretty much an entire recreation of Photoshop in the browser. I was able to open my old PSD file and re-export my images.</p>\n\n<p><img src=\"https://adactio.com/skins/default/images/clone.jpg\" alt=\"LEGO clone trooper\" title=\"\" /><img src=\"https://adactio.com/skins/default/images/bandstand.jpg\" alt=\"Brighton bandstand\" title=\"\" /><img src=\"https://adactio.com/skins/default/images/scaffold.jpg\" alt=\"Scaffolding\" title=\"\" /><img src=\"https://adactio.com/skins/default/images/tokyo.jpg\" alt=\"Tokyo\" title=\"\" /><img src=\"https://adactio.com/skins/default/images/florence.jpg\" alt=\"Florence\" title=\"\" /></p>\n\n<p>Let\u2019s just take a moment here to pause and reflect on the fact that we can now use CSS to create all sorts of effects that previously required a graphic design tool like Photoshop. I could probably do those raster scan lines with CSS if I were smart enough.</p>\n\n<p><img src=\"https://adactio.s3.amazonaws.com/images/darkmode.jpg\" alt=\"dark mode\" title=\"\" /></p>\n\n<p>This is what I demo\u2019d at the end of Indie Web Camp Amsterdam, and I was pleased with the results. But fate had an extra bit of good timing in store for me.</p>\n\n<p>The very next day at the <a href=\"https://2019.viewsourceconf.org/\">View Source</a> conference, <a href=\"https://melanie-richards.com/\">Melanie Richards</a> gave a <em>fantastic</em> talk called The Tailored Web: Effectively Honoring Visual Preferences (seriously, conference organisers, you want this talk on your line-up). It was packed with great insights and advice on impementing dark mode, like this little gem for adjusting images:</p>\n\n<pre><code>@media\u00a0(prefers-color-scheme:\u00a0dark)\u00a0{\n img {\n filter:\u00a0brightness(.8)\u00a0contrast(1.2);\n }\n}\n</code></pre>\n\n<p>Melanie asked pointed out that you can indicate the presence of dark mode styles to browsers, although the mechanism is yet to shake out. You can do it in CSS:</p>\n\n<pre><code>:root\u00a0{\n color-scheme:\u00a0light\u00a0dark;\n}\n</code></pre>\n\n<p>But you can also do it in HTML:</p>\n\n<pre><code><meta name=\"supported-color-schemes\" content=\"light dark\">\n</code></pre>\n\n<p>That allows browsers to swap out replaced content; interface elements like form fields and dropdowns.</p>\n\n<p>Oh, and one other addition I added after the fact was swapping out map imagery by using the <code>picture</code> element to point to darker map tiles:</p>\n\n<pre><code><picture>\n<source media=\"prefers-color-scheme: dark\" srcset=\"https://api.mapbox.com/styles/v1/mapbox/dark-v10/static...\">\n<img src=\"https://api.mapbox.com/styles/v1/mapbox/outdoors-v10/static...\" alt=\"map\">\n</picture>\n</code></pre>\n\n<p><img src=\"https://api.mapbox.com/styles/v1/mapbox/outdoors-v10/static/-0.118150695783165,50.832480097557,10,0/400x400?access_token=pk.eyJ1IjoiYWRhY3RpbyIsImEiOiJjajJ5aDAxbngwMDB2MnFwYmU1cDQxMmQ0In0.0nVa5NURtu9npqBj8qouVQ\" alt=\"light map\" title=\"\" /><img src=\"https://api.mapbox.com/styles/v1/mapbox/dark-v10/static/-0.118150695783165,50.832480097557,10,0/400x400?access_token=pk.eyJ1IjoiYWRhY3RpbyIsImEiOiJjajJ5aDAxbngwMDB2MnFwYmU1cDQxMmQ0In0.0nVa5NURtu9npqBj8qouVQ\" alt=\"dark map\" title=\"\" /></p>\n\n<p>So now I\u2019ve got a dark mode for my website. Admittedly, it\u2019s for just one of the eight style sheets. I\u2019ve decided that, while I\u2019ll update my default styles at every opportunity, I\u2019m going to preservethe other skins as they are, like the historical museum pieces they are.</p>\n\n<p>If you\u2019re on the latest version of iOS, go ahead and toggle the light and dark options in your system preferences to flip between this site\u2019s colour schemes.</p>"
},
"author": {
"type": "card",
"name": "Jeremy Keith",
"url": "https://adactio.com/",
"photo": "https://adactio.com/images/photo-150.jpg"
},
"post-type": "article",
"_id": "5563011",
"_source": "2",
"_is_read": true
}
@marcthiele @johanbove would be great to do @IndieWebCamp before @btconf Düsseldorf 2020! Gathering interest/prefs:
https://indieweb.org/Planning#Dusseldorf
Please feel free to edit, add yourself to date(s) you can make. Join https://chat.indieweb.org/ & let’s chat about volunteering!
{
"type": "entry",
"published": "2019-10-06 08:05-0700",
"url": "http://tantek.com/2019/279/t1/",
"in-reply-to": [
"https://twitter.com/marcthiele/status/1180247159238774790"
],
"content": {
"text": "@marcthiele @johanbove would be great to do @IndieWebCamp before @btconf D\u00fcsseldorf 2020! Gathering interest/prefs:\nhttps://indieweb.org/Planning#Dusseldorf\nPlease feel free to edit, add yourself to date(s) you can make. Join https://chat.indieweb.org/ & let\u2019s chat about volunteering!",
"html": "<a class=\"h-cassis-username\" href=\"https://twitter.com/marcthiele\">@marcthiele</a> <a class=\"h-cassis-username\" href=\"https://twitter.com/johanbove\">@johanbove</a> would be great to do <a class=\"h-cassis-username\" href=\"https://twitter.com/IndieWebCamp\">@IndieWebCamp</a> before <a class=\"h-cassis-username\" href=\"https://twitter.com/btconf\">@btconf</a> D\u00fcsseldorf 2020! Gathering interest/prefs:<br /><a href=\"https://indieweb.org/Planning#Dusseldorf\">https://indieweb.org/Planning#Dusseldorf</a><br />Please feel free to edit, add yourself to date(s) you can make. Join <a href=\"https://chat.indieweb.org/\">https://chat.indieweb.org/</a> & let\u2019s chat about volunteering!"
},
"author": {
"type": "card",
"name": "Tantek \u00c7elik",
"url": "http://tantek.com/",
"photo": "https://aperture-media.p3k.io/tantek.com/acfddd7d8b2c8cf8aa163651432cc1ec7eb8ec2f881942dca963d305eeaaa6b8.jpg"
},
"post-type": "reply",
"refs": {
"https://twitter.com/marcthiele/status/1180247159238774790": {
"type": "entry",
"url": "https://twitter.com/marcthiele/status/1180247159238774790",
"name": "@marcthiele\u2019s tweet",
"post-type": "article"
}
},
"_id": "5561685",
"_source": "1",
"_is_read": true
}
Tweaks Ali Spittel’s face tracking filter demo to include a “snapshot” button that creates an image you can right-click and save.
Next up: can I make this into a Micropub client to post directly to my site?
{
"type": "entry",
"published": "2019-10-06T12:27:24-0400",
"url": "https://martymcgui.re/2019/10/06/122724/",
"category": [
"IndieWeb",
"IWCNYC"
],
"photo": [
"https://res.cloudinary.com/schmarty/image/fetch/w_960,c_fill/https://media.martymcgui.re/44/94/08/af/56a309da54850ed4f24150e5cb24314fffdb1e3f80dfb84e58738a4c.jpg"
],
"content": {
"text": "Tweaks Ali Spittel\u2019s face tracking filter demo to include a \u201csnapshot\u201d button that creates an image you can right-click and save.\n\nNext up: can I make this into a Micropub client to post directly to my site?",
"html": "<a href=\"https://media.martymcgui.re/44/94/08/af/56a309da54850ed4f24150e5cb24314fffdb1e3f80dfb84e58738a4c.jpg\"></a>\n\n <p>Tweaks <a href=\"https://www.alispit.tel/\">Ali Spittel\u2019s</a> <a href=\"https://github.com/aspittel/face-filters-javascript/\">face tracking filter demo</a> to include a \u201csnapshot\u201d button that creates an image you can right-click and save.</p>\n\n<p>Next up: can I make this into a <a href=\"https://indieweb.org/Micropub\">Micropub</a> client to post directly to my site?</p>"
},
"author": {
"type": "card",
"name": "Marty McGuire",
"url": "https://martymcgui.re/",
"photo": "https://martymcgui.re/images/logo.jpg"
},
"post-type": "photo",
"_id": "5560566",
"_source": "175",
"_is_read": true
}
{
"type": "entry",
"published": "2019-10-06T08:55:00+0100",
"url": "https://www.jvt.me/mf2/f113a681-88b3-4599-8882-adab234e5cae/",
"category": [
"web",
"indieweb"
],
"bookmark-of": [
"http://mikepennisi.com/blog/2019/the-web-cant-survive-a-monoculture/"
],
"name": "The Web Can't Survive a Monoculture",
"content": {
"text": "This is a great article on why we can't just let Google Chrome / Chromium take over the Web, and need to fight for other alternatives.\n\nBut as well as looking at the browsers, we need to look to the platforms too. If everyone ie uses Twitter, then Twitter are less likely to make changes because no one has an alternative. Whereas when we have multiple viable options, folks can jump around and use better platforms if they exist.\n\nThe IndieWeb is looking to do this - check out https://indieweb.org/why for a bit more info",
"html": "<p>This is a great article on why we can't just let Google Chrome / Chromium take over the Web, and need to fight for other alternatives.\n\nBut as well as looking at the browsers, we need to look to the platforms too. If everyone ie uses Twitter, then Twitter are less likely to make changes because no one has an alternative. Whereas when we have multiple viable options, folks can jump around and use better platforms if they exist.\n\nThe IndieWeb is looking to do this - check out <a href=\"https://indieweb.org/why\">https://indieweb.org/why</a> for a bit more info</p>"
},
"author": {
"type": "card",
"name": "Jamie Tanna",
"url": "https://www.jvt.me",
"photo": "https://www.jvt.me/img/profile.png"
},
"post-type": "bookmark",
"_id": "5557332",
"_source": "2169",
"_is_read": true
}
Did one of those things where someone asks a dev question and I do the old “oh you just…” before looking closer at the code. Having fun now figuing it out as it relates to stuff I want to do with my jekyll theme https://github.com/miklb/jekyll-indieweb
{
"type": "entry",
"published": "2019-10-05T22:26:06-04:00",
"url": "https://miklb.com/blog/2019/10/05/5290/",
"syndication": [
"https://twitter.com/miklb/status/1180670547262357504"
],
"content": {
"text": "Did one of those things where someone asks a dev question and I do the old \u201coh you just\u2026\u201d before looking closer at the code. Having fun now figuing it out as it relates to stuff I want to do with my jekyll theme https://github.com/miklb/jekyll-indieweb",
"html": "<p>Did one of those things where someone asks a dev question and I do the old \u201coh you just\u2026\u201d before looking closer at the code. Having fun now figuing it out as it relates to stuff I want to do with my jekyll theme <a href=\"https://github.com/miklb/jekyll-indieweb\">https://github.com/miklb/jekyll-indieweb</a>\n</p>"
},
"post-type": "note",
"_id": "5555975",
"_source": "42",
"_is_read": true
}
