Spending the Weekend Thinking

My possible dive into web accessibility and rethinking solutions

In response to last week, my pull request for centring table contents got merged but my pull request for adding a non-breaking hyphen needs revision. My slapped-on solution (born from trial and error) needs a bit more baking in the oven. While working on that PR I was solely focused on just implementing a way to replace the normal hyphen with a non-breaking one as the PR title suggests. However, this direction essentially ignored any other way to solve the original issue — that my last name was being cut down the middle.

Instead of using JavaScript to handle this, it was brought up that this could also potentially be done with CSS (linked resources here). This way, not only does this solution help avoid having my last name cut off, but also gives us room for longer author names.

After a bit of research, I found an eerily similar issue here, they were having the same dilemma of trying to figure out how to not break at the hyphen. After trying their proposed solutions I can’t get similar results to our solution with JavaScript. That being said, I think I can improve the Javascript solution by first using Unicode instead of the string literal for the non-breaking hyphen, this will allow future maintainers to quickly understand what the code is doing (before it just looked like a redundant line of code to replace all hyphens with a hyphen). Furthermore, part of the problem that contributed to my name being cut off was because the container for the author's names was simply too small given the amount of extra space on the screen. So, what I did was added a breakpoint that gave larger screens more width for the author name. Hopefully, this solution combines the best of both ideas to accommodate long names that may or may not include hyphens in it (like mine).

Decorating Each Post With a Class That Matches the Blog Host Platform

I’ve been working on this issue for the better half of last week, and the main problem I encountered earlier was that I couldn’t fully extract the blogging platform name:

// Old solution
const blogClassName = new URL(post.url).hostname.replace('.', '-');
// What we want: medium-com | What we got: roycedev-medium.com

It’s been a long time since I did regex back in my first year Unix course — so I brushed up and did some research. One of the solutions that I found was from this StackOverflow post which gave exactly the intended result:

function domain_from_url(url) {
    var result
    var match
    if (match = url.match(/^(?:https?:\/\/)?(?:[^@\n]+@)?(?:www\.)?([^:\/\n\?\=]+)/im)) {
        result = match[1]
        if (match = result.match(/^[^\.]+\.(.+\..+)$/)) {
            result = match[1]
        }
    }
    return result
}

However, you can’t just copy and paste a solution from the web and use it in a commercial product. I studied what the code did, and made almost a dozen modifications which came out like so:

const parseHostName = (hostname: string) => {
  var matches = hostname.match(new RegExp(/^[^\.]+\.(.+\..+)$/));
  var result = matches ? matches[1] : hostname;
  result = ' ' + result.replace('.', '-');
  return result;
};
const hostName = post ? new URL(post.url).hostname : '';
const blogClassName = parseHostName(hostName);

This produces the same result, yet they are completely different in structure. The way I did this was I combined the old solution which gave a URL that needed to be further parsed and simply made a function to do exactly that and extract the blogging platform name. What we are left with is a solution that decorates each post with the blogging platform name like so:

This will allow Telescope front-end devs to specifically style posts from certain blogging platforms (I’m looking at you BlogSpot).

Future Plans

Telescope 2.0 is coming up fast and I want to do more to contribute and so far I’ve been thinking that I want to join the fight to make Telescope more accessible. This came about when helping my grandparents (who I live with) surf the web since they struggle with certain apps/websites — I realized that things obvious to me (I grew up with the internet by my side) are not so obvious to them. Sometimes designers go for what looks modern/minimal/aesthetic but miss the mark on intuitive design and usability by assuming all users are more or less tech-savvy.