ElkArte Community

General => Chit Chat => Topic started by: Atlas on March 16, 2019, 09:51:22 am

Title: showcase coming soon
Post by: Atlas on March 16, 2019, 09:51:22 am
I'm probably a couple of months away from a showcase but I wanted to post an update here that I'm still:

Dude I can't wait to get out of the sandbox with this project. I have zero aesthetic distance from it (I'm completely engrossed) but according to the two others whom have seen it they agree, this is disruptive technology.

Btw, I believe I read somewhere here that someone was working on pretty URLs, any update on that project?
Title: Re: showcase coming soon
Post by: radu81 on March 16, 2019, 11:43:58 am
Keep us updated and good luck with your project!
Title: Re: showcase coming soon
Post by: Spuds on March 17, 2019, 02:57:17 pm
Really looking forward to the showcase :D
Title: Re: showcase coming soon
Post by: Trekkie101 on March 17, 2019, 09:49:37 pm
Nice, will be good to see what you achieve.
Title: Re: showcase coming soon
Post by: emanuele on March 17, 2019, 10:32:07 pm
Btw, I believe I read somewhere here that someone was working on pretty URLs, any update on that project?
Not completed, nor that much tested:
https://github.com/elkarte/Elkarte/pull/3246
but still merged into 2.0. xD
Title: Re: showcase coming soon
Post by: Atlas on April 21, 2019, 12:50:35 pm
Btw, I believe I read somewhere here that someone was working on pretty URLs, any update on that project?
Not completed, nor that much tested:
https://github.com/elkarte/Elkarte/pull/3246
but still merged into 2.0. xD


Every page of my project has a pretty URL, I've even worked a logic for using user-submitted titles in URLs, 4,200 test cases and no problems --in English. I'm going to internationalize it when I have a moment to focus on it.  I've already had some Swedish words and French names with special-characters appear in my URLs, currently I'm filtering them for the URL (yet still using them in the title). Anyway, I'll probably end up modifying for pretty URLs for the forum pages too.  Anyway, my update. I haven't implemented the forum yet but the rest of the project is coming along fantastically. I haven't slept in a couple of months I'm so excited to make this thing happen.
Title: Re: showcase coming soon
Post by: Spuds on April 21, 2019, 04:46:58 pm
Who needs sleep :D
Title: Re: showcase coming soon
Post by: Atlas on May 09, 2019, 01:49:43 am
Hi guys, I haven't implemented the forum (with comments mod) yet but I have publicly posted a link to my project so I'm sharing here too. I'm almost a third of the way finished with the project (not counting the forum+comments mod).

Features:

That's about the gist of it.

Oh, and just look at those extremely pretty URLs:


Also, I hope you enjoy Tim's content.

Thoughts?
Title: Re: showcase coming soon
Post by: Spuds on May 10, 2019, 05:56:17 pm
Were you planning on leaving the CSS inline or is that just for testing at this point. Just curious as there are different thoughts about doing that.

That is some set of structured data, holy cow!

How are you going to implement audio search, is there a library for such a thing?
Title: Re: showcase coming soon
Post by: Atlas on May 11, 2019, 06:41:51 am
Were you planning on leaving the CSS inline or is that just for testing at this point. Just curious as there are different thoughts about doing that.

That is some set of structured data, holy cow!

How are you going to implement audio search, is there a library for such a thing?

Do you mean embedded CSS in the head? Yes, I'm trying to keep the requests to a minimum. I do have a few lines of inline-CSS for creating the "thumbnails" which are actually backgrounds. I did a bit of wizardry there... I didn't want to wrap anchors around multiple elements, so I used this combination of techniques... assigned a class for the links and declared all the background declarations except the background-image for the anchor's before, then in my HTML I added an HTML5 data- attribute to the anchor, then back in the CSS, I used the attribute selector to access it on the anchor, no-repeated it and positioned it far outside of the anchor's position then used inherit on the before to display it right where I wanted it. I used a similar technique for the durations and positioned them on top of the "thumbnails", again I used the HTM5 data- attribute on the anchor, then on the attribute selector in the CSS for the anchor's after. I should probably post code samples for this technique, I've never seen anyone try all of these together before. Anyway, not only am I minimizing the elements in the page, I'm also only looping through my db results once. 

Audio search, I need the subtitle files. I'm going to create a list of extended stop-words to filter from the fulltext of each subtitle file so I can minimize the size of the column in a db table. You'll actually match on that when you search, then I'll know which subtitle file to access to return the timestamp for that phrase in the video-file, that way I can build you a skip-to link.

Did you notice the structured data is dynamic instead of static? it is depends on the current page and its relationship to ancestor elements, some of it also depends on your actions, try submitting sjsjsjdkjfdklfjslkdjf in the search then check the structured data, you'll see you've completed a SearchAction but failed at a FndAction. This gets even crazier with the autosuggest, which is a ChooseAction, as soon as you start typing I inject a ActiveActionStatus in the SearchAction, if your value in the input doesn't have a match I inject a FailedActionStatus in the ChooseAction, and so on with several other conditions between the SearchAction, ChooseAction and FindAction.  Googlebot can read rendered markup, btw. So injecting elements in with javascript like this really flexes the muscles of schema's Action entities.

..oh, and btw, the structured data I added to the forum's default template (so far) also uses the action statuses for SearchAction and FindAction.

Title: Re: showcase coming soon
Post by: Atlas on May 12, 2019, 08:09:10 am
....I should probably post code samples for this technique...

Code: [Select]
<style>
.searchTitle a:link, .searchTitle a:visited, .searchTitle a:hover, .searchTitle a:active {
    background-position: -1000px -1000px;
    background-repeat: no-repeat;
    min-width: 280px;
    max-width: 768px;
    min-height: 140px;
    display: block;
    margin: 0 auto;
    word-wrap: break-word;
    border-radius: 5px;
    background-color: #666;
    padding: 10px 0px 10px 10px;
    color: #fff;
    text-shadow: rgba(1,6,16, 1) 2px 2px 1px;
    text-decoration: none;
    max-width: 600px;
    vertical-align: baseline;
}

.searchTitle a::before {
    background-image: inherit;
    min-width: 200px;
    min-height: 116px;
    display: inline-block;
    vertical-align: -116px;
    float: left;
    background-attachment: scroll;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 200px 156px;
    background-color: #fff;
    margin-right: 10px;
    content: " ";
}

.searchTitle a::after {
    content: attr(data-duration);
    background-color: #000;
    color: #fff;
    position: absolute;
    top: 109px;
    right: calc(100% - 210px);
    display: inline-block;
    font-size: 0.7em;
    line-height: 0.9em;
    font-weight: normal;
    padding: 2px;
    font-family: initial;
    width: auto;
    height: auto;
}

</style>
<h5 property="headline" class="searchTitle"><a property="mainEntityOfPage" href="https://weburlate.com/timcast/news/2019-05-01/Athlete-LOSES-Landmark-Legal-Case-TESTOSTERONE-Will-Be-Restricted" style="background-image:url('https://i.ytimg.com/vi/FVTCDCkKd6E/hqdefault.jpg');" data-duration="11:01">Athlete LOSES Landmark Legal Case, TESTOSTERONE Will Be Restricted</a></h5>


Title: Re: showcase coming soon
Post by: Spuds on May 12, 2019, 03:58:04 pm
Do you mean embedded CSS in the head? Yes, I'm trying to keep the requests to a minimum.
Yes that is what I was referring to.   I guess that also prevents any render blocking css.
I do have a few lines of inline-CSS for creating the "thumbnails" which are actually backgrounds. I did a bit of wizardry there... I didn't want to wrap anchors around multiple elements, so I used this combination of techniques... assigned a class for the links and declared all the background declarations except the background-image for the anchor's before, then in my HTML I added an HTML5 data- attribute to the anchor, then back in the CSS, I used the attribute selector to access it on the anchor, no-repeated it and positioned it far outside of the anchor's position then used inherit on the before to display it right where I wanted it. I used a similar technique for the durations and positioned them on top of the "thumbnails", again I used the HTM5 data- attribute on the anchor, then on the attribute selector in the CSS for the anchor's after. I should probably post code samples for this technique, I've never seen anyone try all of these together before. Anyway, not only am I minimizing the elements in the page, I'm also only looping through my db results once.
Thanks for the example and the detailed explanation, that is a good technique, I may have to use that in the future !
Did you notice the structured data is dynamic instead of static?
I'm going back to take another look at all that structured data, I had not notice it was dynamic, very cool
Title: Re: showcase coming soon
Post by: Atlas on May 15, 2019, 10:43:55 am
Tim uploads on a schedule, I believe that schedule is about to change but lately he has been uploading 10am, 1pm, 4pm, 6pm, 6:15pm and 6:30pm. A new "day page" is generated at midnight for the next day so since there's no content there I display the BroadcastEvent (https://schema.org/BroadcastEvent) schedule.  I'm also comparing the current time to the scheduled time and giving you a countdown. If the upload is late (which happens often because youtube doesn't have the metadata available immediately) then I change the BroadcastEvent's EventStatusType from EventScheduled (https://schema.org/EventScheduled) to EventPostponed (https://schema.org/EventPostponed) then give you a "count-up" to how late. I'm still testing this part and have it hardcoded in my template, once I've worked it all out I'll create an admin-editable db table for it.
Title: Re: showcase coming soon
Post by: Atlas on May 22, 2019, 12:20:25 am
I had not notice it was dynamic, very cool
Now you can see an actionStatus changing depending on user-actions. Look at the current day's page:

https://weburlate.com/timcast/news/2019-05-21

"inspect element" on the "Check for New Reports" button, toggle your browser so you can view the page and the HTML in the "inspector" of your dev tools at the same time and search for the
Code: [Select]
<link id="checkActionStatus" property="actionStatus" href="https://schema.org/PotentialActionStatus" />
in the inspector. Now click the "Check for New Reports" button and you'll see the actionstatus change from "PotentialActionStatus" to "CompletedActionStatus"

attached screencap shows before and after clicking the "Check for New Reports" button.

The button of course fires a script that checks for updates from youtube. I detail all of that in the semantics in that page. The best thing about adding a schema "Action" to this button is that even Googlebot will be able to "click the button" to update the page's content, no human interpretation needed.
Title: Re: showcase coming soon
Post by: Atlas on May 22, 2019, 12:33:39 am
These two screencaps are of the semantics involved for that "Check for New Reports" button...
Title: Re: showcase coming soon
Post by: Atlas on May 30, 2019, 12:20:21 pm
@Spuds, I have an update. I acquired the auto-generated subtitle files for about 2,300 videos.  I converted the SRT files to VTT and uploaded them so I can link to them in the semantics. I'm also outputting the text of the VTT as HTML in a given video's page as the VideoObject's "transcript".  Tim enunciates well, so very few mistaken words in the files I've reviewed, although there's no punctuation aside from apostrophes. My next step should probably be creating a db table for the transcripts so I can implement my fulltext audio search.  I still need to work out a routine to edit the VTTs (with revert option) and update the db-table with the revised text.

I have more updates as well, I've linked his content from youtube & bitchute.  I plan to add a local-storage user-setting to allow users to choose a default video source: bitchute/youtube. Tim has also added an audio podcast, I have those linked to the videos as well.

here's what it looks like currently: https://weburlate.com/timcast/news/2019-05-29/Men-and-Women-Are-Biologically-Different-Life-Is-Not-Fair-Get-Over-it

and the semantics for that page: https://search.google.com/structured-data/testing-tool/u/0/#url=https%3A%2F%2Fweburlate.com%2Ftimcast%2Fnews%2F2019-05-29%2FMen-and-Women-Are-Biologically-Different-Life-Is-Not-Fair-Get-Over-it
Title: Re: showcase coming soon
Post by: Spuds on May 30, 2019, 04:08:27 pm
Very nice ...

Are you going to leave the transcript on the page or hide/collapse it?  I assume collapsed/hidden it would still be picked up as the structured data.  Only reason I ask is that without the punctuation its a bit of a blob of text. 

Anyway that is cool that you could convert the sub titles it to video text transcript.  It also opens up other accessibility options which is nice benefit as well.
Title: Re: showcase coming soon
Post by: Atlas on May 30, 2019, 05:12:22 pm
I'm actually thinking about hacking elkarte so I can crowd-source edits. Dedicate a specialized board to it and generating a topic for each subtitle file.  Then users can quote the OP and edit the text. Upvote the best edit if more than one and add a mods-only button to overwrite the VTT file (I'll need to validate it first, of course). I'm also thinking of adding more granular semantics in the subtitle files. WebVTT allows for JSON-LD, which I can convert to RDFa when I output it to the page.
Title: Re: showcase coming soon
Post by: Atlas on May 31, 2019, 05:22:56 am
.
I'm actually thinking about hacking elkarte so I can crowd-source edits.
btw, if anyone has a SQL query handy for inserting topics, that'd be helpful.

I'll even semantically-markup the link to the edit page:
so this:
Code: [Select]
<span property="caption" typeof="MediaObject">
<meta property="encodingFormat" content="text/vtt" />
<link property="contentUrl" href="https://weburlate.com/timcast/subtitles/vgn-fuZ_tEc.vtt" />
</span>

becomes this:
Code: [Select]
<span property="caption" typeof="MediaObject">
<meta property="encodingFormat" content="text/vtt" />
<link property="contentUrl" href="https://weburlate.com/timcast/subtitles/vgn-fuZ_tEc.vtt" />
   <span property="potentialAction" typeof="UpdateAction">
      <link property="actionStatus" href="https://schema.org/PotentialActionStatus" />
      <span property="name">
         <a property="target" typeof="EntryPoint" href="path/to/forum/topicPage">Edit Captions</a>
      </span>
   </span>
</span>

btw, I don't think I mentioned the "CheckAction" I implemented on the current day's page, I have an ajax-button at the bottom of that page that checks: 2 youtube RSS feeds, 2 bitchute HTML pages and the audio-podcast's RSS feed for updates, when clicked.  I also have a cronjob to execute the check several times a day. Anyway, I even added semantics to the button. You can markup pretty much all user actions like this.
Title: Re: showcase coming soon
Post by: Atlas on May 31, 2019, 09:48:10 am
btw, if anyone has a SQL query handy for inserting topics, that'd be helpful.
version 1.1.5, btw

So I'll need to insert in the _messages table and update "num_topics", "id_last_msg" and "id_msg_updated" in the _boards table, anything else?
Title: Re: showcase coming soon
Post by: emanuele on May 31, 2019, 11:49:52 pm
Look at createPost in Post.subs.php and in Post.controller.php for how to use it.
Title: Re: showcase coming soon
Post by: Atlas on June 01, 2019, 05:37:07 am
thanks @emanuele

also, I'm testing the audio-podcast with captions:  https://weburlate.com/timcast/audioTest2.html
Title: Re: showcase coming soon
Post by: Atlas on June 02, 2019, 10:14:12 am
@Spuds , I added the user preference feature to switch between youtube/bitchute. I had to back-engineer youtube's  iframe API to create one for bitchute. Since not all youtube videos have a bitchute counterpart it's a preference setting, it'll serve youtube when there's no bitchute link in my db. Oh, also, no login required for the setting, i store the setting in the user's local storage.