#dev 2020-08-08
2020-08-08 UTC
#
gRegorLove prologic, that /post request isn't showing a request body in IE11. Is that being built by JS?

[schmarty] joined the channel
#
[schmarty] Maybe trying to use FormData?

#
gRegorLove Seems something like that. The input elements are actually outside the <form></form>

jjuran joined the channel
#
[schmarty] Oh that certainly seems like it would cause issues π

#
gRegorLove Whoa, TIL on a form input, `form` attribute lets you specify the form id and then it doesn't have to be a descendent

#
gRegorLove But I'm willing to bet IE11 isn't handling that correctly, hah

[fluffy] and [tantek] joined the channel
#
[schmarty] woah that is new to me as well

#
prologic Hmm
#
prologic So does IE11 handle this at all?
#
prologic If not I will have to refactor that as well
#
prologic I'm gonna have to fire this guy (freelancer) that did this π€£
justache and geoffo joined the channel
#
prologic I think this answers that:
#
prologic IE does not support HTML5 form attribute for <input> or <button> element yet.
#
prologic Does anyone know if nested <form>(s) are okay?
#
prologic I'll just put the <input> and <button> back inside the form
#
gRegorLove I was wrong about the empty request body, it's sending field `hash` but with no value. That's the only hidden form input inside the <form> id=twtForm

#
gRegorLove So it seems like #twtForm.submit() is not finding the outside <textarea> to submit in IE11

#
gRegorLove Yeah, personally my first idea would be to have all the inputs inside the form and use regular input type=submit if possible.

#
gRegorLove Don't think you can nest forms

#
gRegorLove I'd also try to use one form with multipart/form-data instead of separate forms

#
prologic Well I have to use separate forms I think?
#
prologic As the image upload is an out-of-band action
#
prologic it returns the URI for the uploaded image
#
prologic which then gets shoved into the textarea with a Markdown-style link
#
gRegorLove Ah, photo gets insert into the <textarea> so it can be edited before you post?

#
prologic But I don't have to nest forms here
#
prologic that's okay, its already handled by JS
#
gRegorLove I haven't played with the photo upload yet

#
prologic And that part works correctly
#
prologic Yeah it just gets inserted as a Markdown image link
#
gRegorLove Sorry to bring bad news, that doesn't seem to work in IE either :|

#
gRegorLove After I select a photo to uplaod I see an "Add" button beside it, nothing new in textarea

#
gRegorLove In Chrome the Add button inserts the Markdown. IE the Add button opens the file dialog again

#
gRegorLove Heading afk for a bit

#
prologic Hmm
#
prologic Let me fix this issue first re the form= atttrs
#
prologic And then if you can help me fix that too on IE I'd appreciate it
#
prologic gRegorLove okay when you're back I fixed everything just discussed
#
prologic I *hope* the image upload works on IE now
#
prologic :)
#
prologic as well as posting in general
#
gRegorLove Text post worked. After selecting a photo and clicking add it appended `![]()`

#
prologic well fuckety fuck fuck :)
#
prologic Any ideas why? :)
#
prologic Probably a JS bug or some JS compatibility
#
[schmarty] yeah sounds like it's trying to use APIs to get at the uploaded file and then drop a markdown image embed, but is missing the actual data. maybe with the FileUpload API which is probably not IE11. π

#
gRegorLove input name=media_file is still outside the form#uploadForm

#
gRegorLove It's inside the form#twtForm

#
gRegorLove The upload endpoint returns JSON with the media URL, it's blank. So it appears selected image isn't getting sent with the upload request

#
prologic Ahhh!
#
prologic I have to show that inside too?
#
gRegorLove (Not entirely blank; the JSON is there but it doesn't have a media URL)

#
prologic *nods*
#
prologic I _thought_ I polyfilled everything required
#
gRegorLove I'm not sure, I'm kinda turned around with these forms and trying to read the JS

#
prologic maybe I missed an element, lemme see
#
gRegorLove upload response is `

{"Type":"mediaURI","Path":""}
`#
prologic L126 u("#uploadForm").append(u("#uploadMedia"))
#
gRegorLove twtxt.js? I'm just using Chrome prettify, but it's only 115 lines XD

#
prologic Haha
#
prologic But of course :)
#
gRegorLove I don't see a line like that in there

#
prologic Maybe this helps :)
#
gRegorLove oh hey

#
gRegorLove cool

#
gRegorLove (I also hadn't refreshed Chrome, oops)

#
prologic Oh :)
#
prologic Yeah caching is hard
#
prologic We busy the cache with Commit hashses
#
prologic But I think browsers are sometimes stupid?
#
prologic π€£
#
gRegorLove I'm not familiar with the polyfille being used here or Twix, so might be about the end of how much I can help unfortunately

#
gRegorLove The request's Content-Length is 198 so photo definitely isn't getting uploaded

#
gRegorLove `u("#uploadForm").first()` returns the form element itself; not the #uploadMedia file input

#
prologic And you're not getting an error?
#
prologic What image/* are you testing with ?
#
prologic An image/jpeg or something else?
#
gRegorLove #uploadForm has no child elements, so I *think* it's literally trying to upload the form element, which is empty

#
gRegorLove jpeg

#
prologic Hmm
#
prologic u("#uuploadForm").first() should return the entire form
#
prologic Its part of UmbrellaJS's API which returns the first matching element
#
prologic rather than UmbrellaJS's object
#
gRegorLove It does, but IE doesn't have any inputs in that form

#
prologic despite the lines above .append()'ing it in?
#
gRegorLove I mean, neither browser does... I'm not sure how Chrome is finding it

#
prologic Oh wait I think I found a bug
#
prologic u("#uploadForm").append(u("#uploadMedia"))
#
prologic That should probably be:
#
prologic u("#uploadForm").append(u("#uploadMedia").first())
#
gRegorLove That looks right. `u("#uploadMedia").first()` gives me the file input

#
prologic according to the docs though it should work just fine
#
gRegorLove Learning a new JS framework by trial and error over here :)

#
prologic :D
#
prologic So adding .first() is the fix here?
geoffo joined the channel
#
prologic still works in CHrome so *meh* :)
#
gRegorLove It makes sense to me at least trying it out in the console. Without .first I just get an [object Object]. With it I get the actual file input

jimpick and mitchell joined the channel
#
prologic Okay redeployed
#
prologic Let's hope this is the fix :)
#
gRegorLove Aside, the UI doesn't show the photo I've selected, so I was a bit confused at first, didn't realize I needed to click Add to insert the photo

#
gRegorLove *fingers crossed* refreshes to try again

#
prologic Yeah something to improve upon
#
prologic add a little thumbnail of it next to the add butotn
#
prologic Maybe even with a little X (nah changed my mind) type of thing
#
prologic even though its already been uploaded!
#
prologic NB: I suck at UI/UX :)
#
prologic Not my forΓ©
#
prologic fortΓ©*
mattl and myfreeweb joined the channel
#
gRegorLove Hm, still didn't work.

#
gRegorLove Content-Length: 198

zootella joined the channel
#
gRegorLove Man, IE makes it difficult to inspect JS to see if I've got the latest version. Did hard refresh a couple times though.

#
prologic Hmm
#
prologic Okay where are those f'n IE VMs
#
prologic Must be something non-obvious we're missing here
#
prologic What if I don't polyfill this crap at all
#
prologic hmm that might be quite ahrd acually
#
prologic yeah this idea doesn't work
[tb] joined the channel
#
gRegorLove Can the #uploadMedia be put inside that form so you don't have to do any appending?

#
gRegorLove No, #uploadMedia inside #uploadForm

#
gRegorLove #twtForm is the one handled by /post

#
prologic OH yes that's what I was just trying
#
prologic But I couldn't figure out a way to activate the mediaUpload type=file input field from JS
#
prologic Seems like a security issue?
jimpick joined the channel
#
prologic I tried stuff like u("#uploadMedia").trigger("change") and u("#uploadMedia").trigger("click"), etc
#
gRegorLove It's activated when you click "Add" I thought?

#
prologic Chrome didn't like any of that and did nothing
#
prologic Yes but I couldn't bring up the "file selection" dialog I mean
[tantek] joined the channel
#
gRegorLove Sure, the file input and the add button would need to be inside the same form

#
prologic Ahh I see
#
prologic But then we have a style / UI/UX problem
#
prologic That I'm not I'm capable of solving :)
mattl joined the channel
#
prologic Okay that seems to work out okay
#
prologic now the camera icon is at the top of the textarea
#
prologic onbviously
#
prologic But now I have to think about how to make this generally better
#
prologic maybe stick a row of buttons along the top <B> <I> <Ccamera> etc
#
prologic Okay I'm going to deploy and push this out
#
prologic LMK if it works (give me a few mins)
#
prologic Okay deployed
#
gRegorLove Worked!

#
prologic Nice
#
prologic Now I'm going to improve this sucky UI :)
#
prologic Assuming I can!
#
prologic I really am not that good at CSS
nickodd joined the channel
#
prologic gRegorLove wannt try it one more time?
#
prologic its now just a single button :)
#
GWG I tried to outline possible topics for a Microformats 2 session https://indieweb.org/2020/Pop-up/Sessions#Agenda
#
prologic I'm _going_ to try to actually create a toolbar of sorts
#
prologic Okay I now have a VM with IE in it :)
#
prologic So I know the image upload with single button UI/UX works
#
gRegorLove Coo, prologic. Might take a look at Quill for UI ideas, I know it has a photo upload.

#
gRegorLove Using CSS Grid or flexbox, you could probably put the upload stuff beside the textarea on the right or something

#
prologic Ahh yeah
#
prologic I'll have a fiddle :)
#
prologic Thanks for help btw!
#
gRegorLove You're welcome!

#
gRegorLove Ok to delete the posts I made?

[chrisaldrich] joined the channel
#
prologic If you wish :)
#
prologic https://imgur.com/a/qJiUIom
#
prologic How do I fix the positioning of this form?
#
prologic its coming from the <input type="file"> element
#
prologic it has some space around it I don't understand where that's coming from
#
[chrisaldrich] gRegorLove++ for troubleshooting IE

#
prologic hah
#
prologic I think I fixed it :)
#
prologic gRegorLove++ for helping me with my side project https://twtxt.net/ Thank you!
[jeremycherfas] joined the channel
#
prologic In Markdown or even HTML
#
prologic What do you call the ** __ prefix/suffix strings
#
prologic do they have a name?
tomasparks joined the channel
#
prologic Well despite the fact I can't code my way out of a paper bad when it comes to UI/UX and CSS
#
prologic I think I did a pretty good job with the new toolbar on https://twtxt.net/ just deployed :)
#
prologic We have very basic B I link, image and upload buttons
#
prologic And yes I made sure they also work in IE :)
dckc, jjuran, moppy, gRegorLove, [chrisaldrich], jeremy and [mapkyca] joined the channel; prologic left the channel
#
Zegnat !tell prologic,gRegorLove just saw your discussions on IE compatibility. Specifically re "Edge uses Chromium now, right?" The answer is yes AND NO. Officially there are 2 stable versions of Edge, one running Chromium and one running EdgeHTML. We ran into problems with that at work recently, because we support Edge and *thought* we were testing Edge. Turned out we were not testing both Edge.

dhanesh95, leg and [grantcodes] joined the channel
#
[grantcodes] The old edge is only supported for enterprise I think though. TBH I wouldn't bother with ie or old edge unless the project has a specific reason to support them.

[jeremycherfas] and jamietanna joined the channel
#
jamietanna Something I thought about the other day, but forgot to share, off the back of the Micropub Pop-Up a couple of weeks ago is post-type-discovery for Pages opposed to Posts. I was thinking that, at least on my site, I'd only expect to see a dt-updated on a page, whereas a post may have dt-published and dt-updated

nickodd and [tantek] joined the channel
#
Loqi It looks like we don't have a page for "pt" yet. Would you like to create it? (Or just say "pt is ____", a sentence describing the term)

#
Loqi Post Type Discovery specifies an algorithm for consuming code to determine the type of a post by its content properties and their values rather than an explicit βpost typeβ property, thus better matched to modern post creation UIs that allow combining text, media, etc in a variety of ways without burdening users with any notion of what kind of post they are creating https://indieweb.org/PTD

#
jamietanna jacky I was thinking this could be true with h-page, too. Or does Post Type Discovery only relate to h-entry?

[schmarty] joined the channel
#
aaronpk first thing http://ptd.spec.indieweb.org/#algorithm

#
jacky funny enough there's a Page object in AS2 https://www.w3.org/TR/activitystreams-vocabulary/#dfn-page

#
jacky is looking at https://www.w3.org/TR/activitystreams-vocabulary/ and wasn't aware of all of the explicit actions expressed by it

#
jamietanna ah my bad, so similarly for post-dype-discovery, if it received an h-page, it'd be a page

[manton] joined the channel
[grantcodes] joined the channel
#
[grantcodes] I added any h-type that's not entry to my ptd

#
jacky like I don't see how I'd make a page like this cleanly (in my site at least) using micropub https://jacky.wtf/library.html

#
Zegnat jacky++ for using https://jacky.wtf/twitch/ to link to your Twitch page, now that is really keeping things to your own domain!

deathrow1 joined the channel
prologic joined the channel
#
prologic Hey π If anyone is looking for something to and loves Go/Golang, simple HTML/JS/CSS come help me out over at https://github.com/prologic/twtxt/issues there are loads of issues we need to get done! :D
#
Loqi prologic: Zegnat left you a message 5 hours, 7 minutes ago: just saw your discussions on IE compatibility. Specifically re "Edge uses Chromium now, right?" The answer is yes AND NO. Officially there are 2 stable versions of Edge, one running Chromium and one running EdgeHTML. We ran into problems with that at work recently, because we support Edge and *thought* we were testing Edge. Turned out we were not testing both Edge.

#
prologic aaronpk you going to submit a PR for that?
#
prologic That would be awesome :)
#
prologic Oh
#
prologic rats :)
#
prologic here's to hoping for more contributors :)
[tantek] and [Rose] joined the channel
#
@vaughnhannon Round 4 of the US Go Congress Open is happening. My game here: https://online-go.com/game/26012444
Also on:
* http://online-go.com
* http://brid.gy
### _Related_ (twitter.com/_/status/1292146247793610752)
[chrisaldrich] joined the channel
#
[chrisaldrich] π tantek; which also reminds me aaronpk should do a photo at the break before we lose others. I think Rose and one or two others have left already

[jgmac1106] and [schmarty] joined the channel
leg joined the channel
#
@aswath β©οΈ My rec is use of indieauth since it allows for users to bring their own id, which can be even an email id. See https://blog.enthinnai.com/2020/07/21/defining-id-authenticators-and-approaches-to-federation-for-webrtc-based-systems/ for more details. /3. (twitter.com/_/status/1292166330288873475)
#
voxpelli Regarding how to rewrite headers with Cloudfront Workers: https://developers.cloudflare.com/workers/templates/pages/modify_req_props/

geoffo joined the channel
#
[schmarty] gonna head out! thanks everyone! learned a lot and excited that progress was made today!!

#
[chrisaldrich] aaronpk++ for prep, leadership, and volunteer work on IndieAuth session

#
jacky is there a particular category for it? the micropub event didn't have it linked https://events.indieweb.org/2020/07/micropub-pop-up-session-kGMIMOXFUdBn

#
Zegnat jacky: this? https://indieweb.org/2020/Pop-ups/Micropub

#
Zegnat Also wondering if we maybe should not be hiding past popups under See Also? https://indieweb.org/2020/Pop-ups#See_Also

[tb] joined the channel
#
Zegnat Aah, and then I guess the sub category https://indieweb.org/Category:IWC_Pop-ups_2020_Sessions is for sessions that have a date decided and/or have already been had?

#
[tb] Hehe thanks [Zegnat], blame it all on the excellent Doorkeeper library β I think extracting what I've built in Singulus into something reusable as a Doorkeeper extension gem might be my first contribution back to the IndieAuth ecosystem
#
[tb] Guess I can go remove the `me` verification stuff I was doing in my authorization flow now
nickodd left the channel
#
[tb] So what I've been doing is I have a `profile_urls` column on my `users` table, and if the `me` param doesn't match one of the values in there for whoever the logged in user is it won't even let you authorize the request
#
[tb] Which in hindsight I think I just did because it felt like the correct paranoid thing to do
#
[tb] But there really would've been no consequence to anything if I'd just let any `me` value in anyway
[snarfed] joined the channel
geoffo joined the channel
#
[schmarty] seems to me in the split-endpoint case that the token endpoint would be expected to pass along the code_verifier to the auth endpoint.

gRegorLove joined the channel
geoffo joined the channel
#
aaronpk hmm should we move https://github.com/tantek/post-type-discovery to the indieweb org?

[chrisaldrich] joined the channel
[tw2113] joined the channel
#
[tantek] aaronpk, maybe not urgent since https://ptd.spec.indieweb.org/ does work?

#
[tantek] feel free to file an issue though about moving it to the indieweb org: https://github.com/tantek/post-type-discovery/issues
