#dev 2020-04-04
2020-04-04 UTC
[jgmac1106], AngeloGladding, foo1, [cleverdevil], KartikPrabhu, gxt, [jeremycherfas], leg, dmitry, jenelizabeth, xdecimal and swentel joined the channel
# 
[jeremycherfas] Finding that tools like css-linter in Atom find all sorts of “errors” that nevertheless work perfectly well. Or maybe they’re just warnings. Either way, not helping me.
dmitry joined the channel
[grantcodes] joined the channel
# 
[grantcodes] That's the difference between a linter and a validator isn't it?
# [jeremycherfas] I guess it is. Anyway, I’m making progress. I think. I hope.
# [jeremycherfas] The W3C validator doesn’t like all the calculations involved in the responsive text lock, but I don’t care as they work.
# [jeremycherfas] Nope. I’ve been through this every which way and sideways. I think I am going to go live so that maybe some other eyes can show me where I have one wrong. Imean, if the HTML contains
# [jeremycherfas] ```<div class="commenter">
# [jeremycherfas] <p>Jezza<br />
# [jeremycherfas] 1 year ago</p>
# [jeremycherfas] </div>```
# [jeremycherfas] And the CSS contains
# [jeremycherfas] ```.commenter p {
# [jeremycherfas] text-align: right;
# [jeremycherfas] }```
# [jeremycherfas] and the css is definitely loaded, and the cache has been emptied, then why on earth would the text not be right-aligned? And if I add the same CSS as a new rule in Fiorefox devtools, it works exactly as I expect.
alina joined the channel
KartikPrabhu joined the channel
# [jeremycherfas] Well, the things that are left are very minor niggles, mostly, that I know I can fix with `style` if I have to, so I am going live and will then ask for more help.
alina joined the channel
# 
dmitry jeremycherfas, if I understand your problem correctly, you can also use `text-align: right !important;` which will give this instruction higher priority
# dmitry and perhaps (I'm very unsure of it) `p` isn't displayed as a block, so it might have a small width. Or the same could be with it's parent dive
superjen96 and [g33kcentric] joined the channel
# [g33kcentric] using !important is useful for debugging butttttttt its a bit of a bad habit 🙂
# crab not to mention that it's impossible to not read it as "not important" ;-)
# [g33kcentric] i mean, it is the exact mood im usually in when i resort to using it :D
KartikPrabhu joined the channel
# dmitry sometimes it's necessary, but for the most time it's a bad habit, yes
# dmitry for example, it's useful in adv templates, when adv being inserted directly into page DOM
# dmitry in this case there is a need to reset a lot of CSS values and it's going with !important to override default site styles
# dmitry this is being used by yandex adv and, I guess, by Google as well
# dmitry but for the most part !important means "I need to learn more about CSS", right
j605 joined the channel
# [jeremycherfas] It’s true; I try to avoid !important if I can. But OK. Now, if anyone is interested, a page is live at https://www.jeremycherfas.net/blog/monthly-report-2020-03 and the easiest place to see what a mess it is, is in the graphs (which need js.
# [jeremycherfas] You will see bright red and orange bars. And yet the CSS over-rides those to be blue, red and green. And the CSS is definitely loaded. Those rules are right at the end.
# [jeremycherfas] That’s even worse. I think it needs a rest. I know I do. 🙂
# [jeremycherfas] I had 500 earlier this afternoon.
gRegorLove and [LewisCowles] joined the channel
# [LewisCowles] [jeremycherfas] I'm seeing it but there are no selectors showing me stroke or color for the bars besides red
# [LewisCowles] where are you adding CSS?
# [LewisCowles] or is the text what is wrong?
# [jeremycherfas] Exactly! But if you look at the source, you can see, for example `<g ct:series-name="Hours logged 2018" class="ct-series ct-series-a"><line x1="65.17847188313802" x2="65.17847188313802" y1="408.9666748046875" y2="408.9666748046875" class="ct-bar" ct:value="0"></line>` which contains the `class` that is in `custom.css`
# [jeremycherfas] i.e. `.ct-series-a`
# [LewisCowles] is custom.css being built into another css file?
# [LewisCowles] because I'm not receiving custom.css
# [jeremycherfas] That page is actually a more complex example but it is most jarring there because the text is hard-coded, as it were, to be the “right” colours.
# [jeremycherfas] Oh god yes. Sorry. I put everything into a single CSS to see if that made any difference. Let me switch that back.
# [LewisCowles] Sometimes the combination process can mess with the cascade
# [LewisCowles] so in this case you have chartist.css and your own css.
# [LewisCowles] I believe what may be happening is that chartist.min.css is loading after your CSS file
# [LewisCowles] I see
# [LewisCowles] ```.ct-series-a .ct-bar {
# [LewisCowles] stroke-width:3px
# [LewisCowles] stroke:blue;
# [LewisCowles] .ct-series-b .ct-bar {
# [LewisCowles] stroke:green;
# [LewisCowles] stroke-width:3px
# [LewisCowles] .ct-series-c .ct-bar {
# [LewisCowles] stroke:red;
# [LewisCowles] stroke-width:3px
# [LewisCowles] }```
# [jeremycherfas] If you reload now, you should see custom.css, which contains
# [LewisCowles] which are correct. The other thing you could do is namespace them by putting a class on the body tag
# [jeremycherfas] ```.ct-series-a .ct-bar {
# [jeremycherfas] /* Colour of your bars */
# [jeremycherfas] /* The width of your bars */
# [jeremycherfas] stroke: blue;
# [jeremycherfas] stroke-width: 3px;
# [jeremycherfas] }```
# [jeremycherfas] near the end.
# [LewisCowles] to make them more specific
# [LewisCowles] the last edit seems to have killed the page
# [jeremycherfas] chartist.css is earlier in the head. Does that not make it earlier?
# [jeremycherfas] Those 500s are another problem.
# dmitry which program do you guys use for IRC? it looks like it has markdown support
# [jeremycherfas] I’m coming through the Slack bridge
# [LewisCowles] position in the body won't affect load order necessarily I think
# [LewisCowles] try altering the selector to be .ct-chart .ct-series .ct-bar
# [LewisCowles] if we're more specific we might not worry about order
# [LewisCowles] any upper level selector can help
# [LewisCowles] it's "namespacing css" and is older than BEM where you fully control all components and source order is not an issue
# [jeremycherfas] BEM?
# dmitry I want to help, but don't understand which colors are wrong. ct-series should be in what color instead of what color
# [LewisCowles] don't get distracted by my overview, just add .ct-chart to be prior to the existing selectors as shown above
# [LewisCowles] dmitry, it should be in the label colours
# [LewisCowles] which really means the labels should have a class which is also in the selector, but we can get there second
# [LewisCowles] btw `.ct-chart .ct-series .ct-bar` should be `.ct-chart .ct-series-a .ct-bar` for series a, etc
# [jeremycherfas] Done. I now have
# [jeremycherfas] stroke: blue;
# [jeremycherfas] /* Colour of your bars */
# [jeremycherfas] ```.ct-chart .ct-series-a .ct-bar {
# [jeremycherfas] /* The width of your bars */
# [jeremycherfas] }```
# [jeremycherfas] stroke-width: 3px;
# [jeremycherfas] Makes no difference I can see.
# [jeremycherfas] The labels is a whole separate issue that I will, as you say, solve more elegantly later.
# [LewisCowles] so you're not getting 500's?
# [LewisCowles] I cannot see right now
# dmitry I do get it right now as well
# [LewisCowles] more specific css classes should result in this working
# [jeremycherfas] No. Grav caches very aggressively, so I clear the cache on the server, then clear the cache in firefox, then reload. Are you still getting 500s?
# [LewisCowles] I am
# [LewisCowles] what is grav?
# 
Loqi Grav is a flat-file CMS built on PHP, with Twig templating, and YAML + Markdown for storing articles (YAML for metadata, Markdown for the content) https://indieweb.org/Grav
# [jeremycherfas] Strange, that it loads for me and dmitry.
# [LewisCowles] dear grav developers... please make less flaky software
# dmitry no, I mean I do get 500 too
# [jeremycherfas] The truly weird part is that as far as I can tell, i have not changed anything that would affect this. But clearly, I have.
# [jeremycherfas] Let me clear the Grav cache again.
# [LewisCowles] 500 is so opaque it may not be you
# [jeremycherfas] Try again?
# [LewisCowles] nada
# [jeremycherfas] The truth of the matter is that I am probably out of my depth with Grav, but I really rather like it.
# dmitry still 500
# dmitry what's in your server error log?
# [jeremycherfas] Error log is empty!
# dmitry that's weird. maybe it isn't configured?
# [jeremycherfas] For https
# dmitry I'm using https
# dmitry maybe it stored in some different place
# [jeremycherfas] http error log shows a long list of different `PHP Fatal error: Allowed memory size of 94371840 bytes exhausted (tried to allocate 65536 bytes)`
# dmitry that's might be the problem
# [LewisCowles] right so this is not your fault, but rather the host. Can you clear opcache / apc?
# dmitry what could consume that many memory?
# [LewisCowles] 94,371,840 94MB or less
# [jeremycherfas] I’m not sure.
# [LewisCowles] 65536 sounds like templating
# [jeremycherfas] Can I do that from the command line? I’m SSH in
# [LewisCowles] buffers of 64k
# [LewisCowles] It's a PHP thing
# dmitry it's like your webpage is trying to install Chrome
# [jeremycherfas] Wha?
# [LewisCowles] it is most likely CSS combination
# dmitry I was trying to make a joke about Chrome eating your RAM
# [LewisCowles] or some form of minification
# [jeremycherfas] Oh, sorry dmitry.
# [LewisCowles] I cannot imagine that the template renderer is doing 64kb itself
# [jeremycherfas] I thought I had stopped all minification. Let me check again.
# [LewisCowles] but 64kb seems like an output buffer for size
# dmitry and minification normally shouldn't take 90 mb
# [LewisCowles] No, but it will take more than writing to a buffer which periodically flushes
# [LewisCowles] the buffer size can be adjusted, but 64KB is one I've seen before in shared hosting
# [jeremycherfas] I’ve got rid of all pipelining and minifying for CSS and JS.
# [LewisCowles] right clear cache and we'll try again
# [jeremycherfas] Done
# dmitry great
# dmitry 200
[snarfed] joined the channel
# [LewisCowles] I'm still getting 500 here
# [LewisCowles] https://github.com/getgrav/grav/issues/941 points at image resizing per-request
# [LewisCowles] are you resizing images?
# [jeremycherfas] I’m not getting that error though.
# [jeremycherfas] Not on that page. Probably not anywhere else.
# [LewisCowles] > PHP Fatal error: Allowed memory size of 94371840 bytes exhausted (tried to allocate 65536 bytes)
# [LewisCowles] both are out of memory issues, with slightly different cause
# [jeremycherfas] That issue was from 2016.
# [LewisCowles] Why would that matter. I'm not saying that is 100% your issue, I've asked if you were resizing images as I've only just found the people that code your software are so inexperienced they do that at runtime
# [LewisCowles] 94mb is stupidly large for rendering text
# [LewisCowles] so I'm trying to work out which parts you are using
# [jeremycherfas] Well, I’m hoping that as the issue is closed, it is no longer relevant. But I am sure you are also right.
# dmitry not sure why, but seems like it should be defined like this:
# dmitry `.ct-series-c .ct-bar, .ct-series-c .ct-line, .ct-series-c .ct-point, .ct-series-c .ct-slice-donut`
# [jeremycherfas] OK, if I look at the http error log I can see a lot of things that are causing the PHP fatal error. Maybe I should take this to the Grav Discord.
# dmitry at least, it worked in Inspector
# dmitry `.ct-series-c .ct-bar, .ct-series-c .ct-line, .ct-series-c .ct-point, .ct-series-c .ct-slice-donut
{ stroke: green }` did the trick# dmitry I've just copied selectors line from chartist.min.css
# dmitry before today I've never knew that there is a possibility to change colors in SVG with CSS, so I'm not sure why this selectors worked and when I've tried to use just `.ct-series-c .ct-bar`, it didn't
# [jeremycherfas] That’s interesting dmitry; but I am not using ct-line, or ct-point or ct-clice-donut. Those are for different kinds of charts. My chart is purely a bar chart.
# dmitry and they're not even highlighted
# dmitry in Inspector
# dmitry they're makred with lightgrey as they don't have any impact
[grantcodes] joined the channel
# [grantcodes] I didn't read through all the scrollback, but I saw you had 2 class attributes in some html code int here, that wouldn't help 😛
# dmitry ok, now even more weird
# dmitry when I continue to experiment, `.ct-series-c .ct-bar` worked
# dmitry what's going on
# dmitry and now it's 500 again
# [grantcodes] Ignore me. Misread
# [LewisCowles] I think that must be a browser bug no?
# [LewisCowles] I see it's 3 rules
# [LewisCowles] well 4
# [LewisCowles] but the reason I suggested trying to make 1 more specific was to overwrite only that special case
# [LewisCowles] I've saved my cached version of the page and event the above more specific is not working
# [jeremycherfas] I’ve a feeling there are two different things going on that are making life very difficult. One is the PHP fatal error, and the other this whole business with the CSS. I’ve got to stop, for now,
# [jeremycherfas] [LewisCowles] ++ and dmitry++
# [jeremycherfas] I’ll tackle the fatal error in the Grav discord when I can. And tear my hair out about the CSS separately.
# [jeremycherfas] Of course, I could just accept the colours chartist is forcing on me and attempt an elegant solution to my labels instead. But that won’t fix the other, similar CSS problems of selectors being present in the HTML but somehow not getting the values given them in the CSS.
# [LewisCowles] the CSS is the stylesheet. Unsure how
# [LewisCowles] but if I relocate the CSS to the bottom of the HTML file it works
# [LewisCowles] Due to specificity of the selector I'm using, I know it's not a network load order issue
# [LewisCowles] Due to seeing other styles from the CSS I know it's at least partially applied
# [LewisCowles] something very odd indeed
# [jeremycherfas] Wait, what?
# [jeremycherfas] I really do have to go, alas. Supper will not cook itself. But I will be back tomorrow to bother you again.
# [jeremycherfas] Thanks again.
# [LewisCowles] I'll link you a gist to the HTML file
# [LewisCowles] I do not like or accept browsers not doing as they are told
swentel joined the channel
# [LewisCowles] the only important change is the style tag at the bottom of the html
# [LewisCowles] the rest was to have it work from view-source (cached copy) from my desktop
[Jeff_Hawkins] joined the channel
# 
@schneyra ↩️ Und genau genommen traue ich das nur zu twittern, weil ich eine Erwähnung brauche um die Tage mit Webmentions zu experimentieren. (twitter.com/_/status/1246504017888452608)
dopplergange, dopplerg-, gRegorLove and [jgmac1106] joined the channel
# 
@rabentusch Mindestens so toll, nochmal: Webmenstions-Modul von Gregor Morill: https://modules.processwire.com/modules/webmention/ #processwire #module // https://cor.am/twitter/04-04-2020-4/ (twitter.com/_/status/1246523139397468163)
[snarfed] joined the channel
# 
@jgmac1106 Hoping I got webmentions working on the wiki articles as well as the blog posts. https://longthoughts.jgregorymcverry.com/doku.php?id=system_agent_network_theory (https://quickthoughts.jgregorymcverry.com/s/NW4qo) (twitter.com/_/status/1246525834514649088)
# 
[jgmac1106] I did, I did get webmentions working on my wiki articles: ttps://longthoughts.jgregorymcverry.com/doku.php?id=system_agent_network_theory
[Michael_Beckwi], loicm, [chrisaldrich] and [_iamdave] joined the channel
# [_iamdave] [chrisaldrich] hello there.
# [_iamdave] I believe the control panel/gear icon on my homepage should allow you to open the tiddlywiki prefs, and there you'll see I've thrown raw html into the Title: field, which gets rendered by Tiddlywiki during it's save function. You and I engaged I believe a few weeks ago where I was stuck on this, and this was the solution I ended up implementing to validate and getting a success.
# [_iamdave] Now that said
# [_iamdave] where I got stuck most recently, two days ago was trying to modify the 'shadow tiddler' which is where the actual HTML markup for the view model resides
# [_iamdave] $:/core/templates/html-tiddler
# [_iamdave] or at least that's where my initial poking has lead me.
# [_iamdave] The goal there was to properly put an h-card along with webmention rels instead of what I've done so far, which is admittedly quite hacky.
# [_iamdave] And there you have it.
# 
[chrisaldrich] I'm generally new to the whole process, but I'm slowly figuring it all out. Any tips are welcome
# [_iamdave] Certainly, I've been meaning to create a git repo to log my work and make it accessible, you're probably seeing this as well: the community is pretty far and wide, and there's lots of answers on Google but many of them are years old.
# [_iamdave] Will get on that this weekend and be sure to ping you; there
# [_iamdave] there's a lot I've already learned but need to spool out of my mind*
# [chrisaldrich] It took me a few days to find the split between classic stuff and TW5..
# [_iamdave] quite honestly the same.
# [chrisaldrich] I've seen a lot of tutorials for fun little functionality that seems relatively common, but I'm always left wondering why some of it's not just built into the core product.
# [_iamdave] I think that's where the strength of it's "plugin" feature comes from.
# [chrisaldrich] My other problem is that all the plugins seem to be strewn all over the place. But I do like the fact that drag and drop couldn't be simpler.
# [chrisaldrich] That type of dead simple UI is really fantastic once one is up and running.
# [_iamdave] yup. having a "directory" of sorts for these plugins would be a fantastic thing.
# [chrisaldrich] The tough part about some of the TiddlyWiki infrastructure is that's it's seemingly hiding within itself and takes some surfing around to find sometimes. I suppose part of that is down to the fact that most of them are private and not public.
# [chrisaldrich] Especially compared to MediaWiki, where that model is mostly all-public and less private.
# [chrisaldrich] [_iamdave] Which part of the world are you in? There were a few of us who were going to plan some IndieWeb wiki brainstorming sessions shortly. One is in the UK and another is in Connecticut while I'm in LA.
# [_iamdave] Chicago, myself.
# [chrisaldrich] I noticed in the #indieweb chat the other two were up early this morning discussing docuwiki...
# [_iamdave] oho?
# [chrisaldrich] I've also been doing some reading into https://sphygm.us/ who has done a bit of tinkering on IndieWeb pieces for TW5, but I don't think I've seen them in the chat yet. They appear to have gotten Webmention working using webmention.io.
# [chrisaldrich] I suspect it may take some work to get displaying webmentions working. Not sure about automating sending them either.
# [chrisaldrich] Though on the other hand, I've got a primary site that does most of the communication protocol stuff I want.
# [_iamdave] http://philosopher.life also uses TW.
# [_iamdave] If you happen to spot some similarities, blame Mike.
# [chrisaldrich] [_iamdave] Have you found any bookmarklets for quickly cutting/pasting content from other sites into your site?
# [chrisaldrich] Who is Mike?
# [_iamdave] Not yet, haven't even thought to do that, to be honest.
# [_iamdave] And Mike is my editor. He's a cat. He says hello.
# [chrisaldrich] I ran across philosopher.life and sphygm.us via KicksCondor's circle of wiki friends.
# [_iamdave] yup, same.
# [_iamdave] Fraidycat was actually my window into the indieweb.
# [chrisaldrich] Do you know any other folks who have public-facing TW's?
# [chrisaldrich] What is TiddlyWiki?
# Loqi TiddlyWiki is a responsive website platform built as a single file in HTML, CSS, and JavaScript https://indieweb.org/TiddlyWiki
# [chrisaldrich] TiddlyWiki << Example: https://philosopher.life/
# Loqi ok, I added "Example: https://philosopher.life/" to the "See Also" section of /TiddlyWiki https://indieweb.org/wiki/index.php?diff=69394&oldid=69393
# [_iamdave] I found a link a few days back from a guy who had written some bash scripts that will render your entire TW site to static HTML and had his site as an example, digging back through history I'm regretting not immediately bookmarking it
# [chrisaldrich] One of the things I've found most useful is being able to download/copy others' files and spelunk into their internals. Somehow it feels even more opensource than opensource.
# [chrisaldrich] It wasn't Brandon Hall was it? I saw his example on youtube a while back and threw it onto that wiki page.
# [_iamdave] oh yep, it was!
# [chrisaldrich] Going that route may make IndieWebifying TiddlyWiki a lot easier since it doesn't require viewing into one massive HTML file, but then it also takes more coding chops too.
# [chrisaldrich] How are you hosting yours?
# [_iamdave] github pages presently
# [chrisaldrich] I think I knew that maybe....
# [chrisaldrich] Have you been able to log into the IndieWeb wiki yet to add yourself as an example?
# [_iamdave] not just yet
# [chrisaldrich] If you have your website in your GitHub profile and then add a rel="me" link from your site's header that points to your GitHub profile, you should be able to do the RelMeAuth dance to get logged in.
# [chrisaldrich] I was about to do it on my site too...
# [_iamdave] ahh currently it's pointed to twitter but gh would make more sense as that's where things originate host wise.
# [chrisaldrich] you can use either/or really, both should work
# [chrisaldrich] as long as your domain name is in the website field on both and you have two rel-me links on your site pointing back at each.
# [_iamdave] "both should work" another point for microformats and the indieweb.
# [chrisaldrich] Hmm... I've got a rel-me on my github page and a corresponding one on my site, IndieLogin.com sees it but says: "The following links were found on your website, but are not supported authentication options."
# [_iamdave] here's a question: are you doing it as <a href="blah" rel="me">?
# [_iamdave] If memory serves, I tripped over that a few times and resorted to using a div which validated fine, but I could never get just an <a> rel to pass.
# [chrisaldrich] maybe it's a trailing / issue with github... I'm using a <link rel="me" href="https://github.com/chrisaldrich" /> in my header.
# [_iamdave] possible. i've observed gh to be slow to actually render changes even when they're in the repo.
# [chrisaldrich] maybe it's caching that trailing slash... I'll have to wait a bit to see what happens. Did yours work?
# [chrisaldrich] I've got three other sites that will let me into the wiki, so I'm not as concerned, though I'm planning on using the same method for setting up webmentions, so...
# [chrisaldrich] What is webmentions.io?
# Loqi It looks like we don't have a page for "webmentions.io" yet. Would you like to create it? (Or just say "webmentions.io is ____", a sentence describing the term)
# [chrisaldrich] What is webmention.io?
# Loqi webmention.io is an open-source project and hosted service for receiving webmentions and pingbacks on behalf of your indieweb site https://indieweb.org/webmention.io
# [chrisaldrich] Who names a project after a spec anyway? 😉 😛
# [chrisaldrich] aaronpk++ for https://webmention.io/
# [_iamdave] I do have a new domain that I haven't indieweb'd up yet, that'll be a good playground to see where exactly the hangup is starting fresh.
# [chrisaldrich] There's an issue on the IndieLogin.com page about trailing slashes, so I'm guessing that (and that it's caching the trailing slash) are keeping me locked out atm.
# [_iamdave] ahh well there we have it.
# 
jacky like https://fobar.com and https://fobar.com/cookies is fine
# jacky but https://foobar.com/ and https://fobar.com/cookies/ isn't
# [chrisaldrich] Uh, oh! I'm also noticing that webmention.io doesn't like fragments for sending webmentions, so that for example I can't use http://tw.boffosocko.com/#Self-hosting%20TiddlyWiki%20with%20GitHub%20Pages to send a mention to https://boffosocko.com/2020/04/04/self-hosting-tiddlywiki-with-github-pages/
# [chrisaldrich] What is manual webmention?
# Loqi Webmention is a web standard for mentions and conversations across the web, a powerful building block that is used for a growing federated network of comments, likes, reposts, and other rich interactions across the decentralized social web https://indieweb.org/manual_webmention
# [chrisaldrich] http://mention-tech.appspot.com/ reports sending as a success though.
# [chrisaldrich] Thanks sknebel, I had that as a secondary culprit as I thought I remembered the fragment issue there ages ago when js wasn't a thing either.
# [chrisaldrich] I'm checking now to see if the mention-tech did the same thing, but it did return a success.
[grantcodes] joined the channel
# [chrisaldrich] btw, 👋 jacky!
# [chrisaldrich] I know that WordPress supports fragments in Webmention as that's how I get bridgy to thread replies between my site and Twitter.
[fluffy] joined the channel
# [chrisaldrich] I think it's also used for comment section to comment section on WordPress to WordPress.