👨💻 #Proposal-86: Change Log - URL Structure, Mobile Carousel, /tags, Back-to-top & Bugs
In my most recent update, I outlined the changes that are available to review on steemitdev.com. In this post, I'l document those changes.
Updated the URL structure and corresponding Canonical URL to improve SEO
Implemented the Community Carousel on Mobile devices
Fixed the '/tags' page
Implemented 'Back-to-top' on Desktop
Fixed Bug - Payout dropdown menu is cut off at the bottom #3931
Fixed Bug - Props of community settings is rejected by Hivemind as invalid #3932
Fixed Bug - Preview Squashed on Mobile Devices #3935
🌐 URL Structure
Implementation of the URL structure required 2 key changes:
Post links in post feeds
The Canonical URLs in the page's
<head>element.
1. PostSummary.jsx
The existing URL structure takes the form:
const post_url = `/${category}/@${author}/${permlink}`;
Where category is either a community identifier or the first tag that the user entered (i.e. posting to their blog, rather than to a community).
It's the author and permlink that determine what the back-end loads into the browser so the category can be updated without fear of breaking the site.
Please see my earlier post for the chosen approach.
In order to insert the community title into the URL, we first retrieve this from the 'post' details (lines 106-107) and remove any special characters to ensure that the URL is 'Google-friendly' (using only ASCII characters) (lines 108-116).
Since some communities are purely international (non-ASCII) characters, we fall back to using the first tag in the user's post (lines 119-130).
If both of these approaches "fail", we've already set a 'default' of the existing value (line 101) so the 'tempCategory' should never be blank / null.
2a server-html.jsx
To implement 2b, I needed a hook to target the CanonicalURL in the <head> tag.
2b PostFull.jsx
The implementation of the Canonical URL follows the same concept as the in-page feed.
We start off by identifying if there's a Canonical URL already specified on the page (line 272) and if not, we create the element (lines 273-279).
We then follow the PostSummary.jsx implementation (lines 281-311) with the additional step of pushing this to the <head> (line 312).
2c CanonicalLinker.js
The CanonicalLinker file creates the initial Canonical URL as the page is being constructed. It was initially set to take the post.category and has been updated to once again, follow the above concept.
🎠 Community Carousel on Mobile devices
The implementation of this centres around the logic for how many posts appear in the carousel. One Desktop devices, 2 posts are displayed at a time whereas on a Mobile device, we only want 1.
PostList.jsx
I did this by adjusting the requirement for their to be 2 or more pinned posts, to also allow narrow screen widths (< 768 pixels is our 'mobile snap point').
I also needed to adjust the slider offset when the user clicks on 'forward', 'back' or one of the carousel dots.
PostList.scss
This also required some CSS changes which GitHub makes look overly intensive.
All I've essentially done is remove the @include MQ(M) { to identify that the CSS is for "Medium" sized screens (i.e. larger than 768 pixels) and introduced a different calculation for the slider offset.
🏷 '/tags' Page
Implementation of this follows the same approach used for retrieving the 'followers' list (I placed the 'tags' implementation before 'followers' to see the similarity).
GlobalReducer.js
FetchDataSaga.js
The getTags function is currently hard coded to return the maximum 250 tags and in future, this should be updated to accept a variable so that a Tag Cloud (for example) could retrieve the top 50 or 100 trending tags.
TagsIndex.jsx
The TagsIndex.jsx is the page that's called when /tags appears in the URL. I don't understand how the previous implementation ever worked and I've now implemented it in the same way that 'Followers' (and other data retrieval) is implemented on other pages.
As I type this, I've noticed a lot of comments and logging that I used whilst debugging that needs removing before pushing live.
The existing implementation uses tagsAll so I've maintained this in the tag retrieval which is initially retrieved from the State and returned to the page.
We've also hooked the getTags function up to the page, which can be called by the function fetchTags().
We call this function once the component has mounted to populate the page if the tagsAll object is empty.
Currently, community tags (i.e. hive-xxxxxx) have been filtered out with a view to implementing a 'community table' at a later date.
A version of this code has been implemented and commented out although this is a fairly crude, inefficient implementation which certainly needs revisiting.
As suggested earlier, this approach to implementing the Tags allows for the future implementation of a Tag Cloud.
⬆ 'Back-to-top'
App.jsx
Implementation of 'back-to-top' required the inclusion of a button in the HTML output:
Which hooks up to a handleScrollToTop function that simply returns the user to the top of the screen.
App.scss
This required its associated CSS which I will not explain in detail:
Note that by default, the button does not display (display: none) and is only visible on Desktop devices (lines 265-268).
I attempted an implementation for Mobile (line 249 that needs removing) which quickly became too complex due to the show/hide nature of the bottom menu bar. It also felt too obtrusive on small devices - something that might be revisited in the future.
🐛 Bugs #3931, #3932 and #3935
#3931 - Payout dropdown menu is cut off at the bottom
App.css
This fix simply required the removal of overflow: hidden from the main content area.
#3932 - Props of community settings is rejected by Hivemind as invalid
CommunitySettings.jsx
An additional check was implemented to ensure that 'settings' does not return an empty object and has 'avater_url' and 'cover_url' attributes, even if they are blank (i.e. the images have been removed) (lines 126-134).
#3935 - Preview Squashed on Mobile Devices
app.scss
This fix simply required the heading ('Preview') to clear the 'Markdown Style Guide' which was set to float: right.
If any of these changes require further explanation or you're a future developer that has any questions, then please leave a comment below.
I'm liking the URL changes, though we have a weird situation right now with different web sites presenting different canonical URLs. I wonder which one wins and how that effects SEO scores.
I think I remember seeing the /tags page a long long time ago, but it had totally slipped my mind until you mentioned it. Nice to see that working. It would be good if the main pages had a link to it, too (and also /promoted).
Minor typo here. Should be "steemitdev". Probably doesn't matter, but there may be a random person or two who doesn't know where to find it:
0.00 SBD,
1.02 STEEM,
1.02 SP
I'm glad you like it! Steemitdev has 'noindex' set which might help with that although I'm not 100% sure. steemitdev should really have a robots.txt file that tells all bots to go away, but it doesn't.
Hopefully, it's only temporary. I've tested all of the changes and they look good. I've committed a change to remove the comments which I'll get deployed before approving - but this shouldn't impact anything!
With the /tags, there's no obvious place in the siite structure for this to live at the moment. Which in my opinion, is ok - a page that simply has Trending tags doesn't really offer much. The main reason that I fixed it is so that I can use the idea contextually elsewhere - specifically on the "All Posts" feed. I don't feel particularly strongly on this point so if you have any suggestions as to where it would logically fit, I'm listening.
Thanks - I've updated the post.
0.00 SBD,
3.76 STEEM,
3.76 SP
Your comment has been supported by THE PROFESSIONAL TEAM. We support quality posts, Original quality comments anywhere, and any tags
I have nothing to do with you, don't like to find trouble with other people. Be wise when playing social media, you have gone too far and are harming people. Remember! People's patience has limits
This is for the Jews.
That's because you started it first.
I can say with a high level of confidence that it wasn’t my downvotes that turned you into a disgusting racist.
Then aren't your actions disgusting? You think this platform belongs to your mother, so you can do whatever you want here. Just look, your comment got flagged by other Steemians indicating that you are a troublemaker.
Ha ha! Downvoted by a known scammer 🤣 Yeah, that makes me the troublemaker.
Laugh as much as you like, there will be a time when your laughter turns into tears.
That’s very true.
This video gets me crying with laughter every time:
Now stop beating around the bush, tell me why you like to bother with other people's business so much. I thought after yesterday's heated argument, we were done. But it turns out you're really a jerk.
That was 4 days ago, not yesterday.
It's the same, stop this I'm sick of all this. Don't act like a child.
It’s not the same. 4 days ago, it was Wednesday. Most people need to work on a Wednesday. Yesterday was Saturday which for most people, means a day off.
So they’re certainly not the same. Perhaps if you don’t go to school, they could be considered the same because every day is a day off. Even then, they’re obviously not the same.
That applies where you live. Unlike us here, yesterday it had a broad meaning. So often socialize in the outside world, so that your mind is open.
You thought wrong.
You are also wrong.
You couldn’t be more wrong.
Certainly not greater than the mistake you have made. You invite others to do evil, because you are a coward. How dare you gang up on others.
No gangs here. Everybody makes their own decision. You’ve been rude to people. You’ve been rude about entire races of people. These people saw and remember that. For some, that’s very personal.
Don't involve others in this, it's only you and your gang who have problems here. You always think you're right, that's a big mistake.
🤣 Hypocrite.