CSS Positioning Woes & URL Encoding

Today I added a section for all posts that includes sharing links for Twitter, Facebook, Reddit, etc.

Positioning Issues

In order to call attention to the sharing links, I added a scale event to each icon as well as the section header, using a JavaScript mouseenter event listener over the whole wrapper div. It looked great and I was happy with the outcome, but scaling the text up made the header element wider than the page, which added an unnecessary horizontal scroll.

I searched and tried lots of ways to fix it but in the end couldn’t get it today. I’ll try again another day.

I also added in the social links for several sites. This great repo lists lots of social sites and how to do sharing URLs without needing APIs, registrations, JavaScript, etc. Just the plain & simple links. So I set that up pretty easily, but one question came up about URL encoding…it needs to have all characters escaped. So for an email address, for example:

BAD:
mailto:?subject=I'm sharing a link with you!

GOOD:
mailto:?subject=I%27m%20sharing%20a%20link%20with%20you!

I found a URL encoding tool which is perfect for predefined text.

However I also wanted to put the title in some of the links as well. The static site generator (Hexo) makes it easy to include with a variable:

<%= page.title %>

But this leaves in all of the spaces and reserved characters like & and ? which are in some of the post titles. Hexo does not offer an easy way to access/amend the title unfortunately.

Most of the links worked anyway (thanks modern browsers), but I think I could write a plugin for Hexo to fix this. Something to tackle in the future.

Other Stuff

I also added category & tag pages to the site to help with navigation. Hexo has tag_map and category_map settings with no documentation, but I think I will need to use it pretty soon. Luckily I found an article with a good explanation.

Up Next

Continue working on the UX/UI course I started 2 days ago, and wrap up this web project once and for all!