Personal Site Redesign

redriderx.com.png

This was long overdue, but I finally gathered the will to update my personal site.

This redesign was mainly about featuring projects on the site, while updating my relevant social links.

Behind the scenes, there were also some host and platform switcheroos. Long story short: Netlify is pretty swell.

My favorite thing about the redesign is probably the drifting starry background. It’s such a simple but effective thing.

See it in motion

Advertisements

Meme Insider Redesign

meme-insider.png

After hearing about it a couple times from reddit and youtube, I decided to seek out an issue of Meme Insider. I immediately fell in love with the goof.

The magazine is such a quality product that I wanted to help the website reach the same high bar.

For reference here’s what it looked like before:

before-mi.png

I tried to preserve the essential content elements while reframing everything in a less confusing way. I think so far everyone is happy with the result.

Read the latest issue yourself at https://memeinsider.co/

Super Media Collider Extravaganza for Reddit

I decided to start using my wordpress blog as a way to document my side projects, but that made me realize I hadn’t documented quite a few. Hence these very late posts.

smcer-screen

After reading a bit about HyperDev Gomix Glitch, I really wanted to take it for a test spin. I had been reading up on Vue JS when the popular app radd.it (and its creator) started going through some rough times.

I decided to take my Christmas break to build a basic replacement that kept true to what I liked best about radd.it. But with more emojis.

Treat yourself

EmoJS

 I decided to start using my wordpress blog as a way to document my side projects, but that made me realize I hadn’t documented quite a few. Hence these very late posts.

 

emojs-screen-grab

Have you ever though “I like JavaScript well enough, but I wish I could use Emojis to code more efficiently”?

Well me neither, but that didn’t stop me from making a novelty language!

While many better and more thorough riffs on this idea have come up since 2015, I still maintain I was the first to have such a bad idea.

You can check it out for yourself at https://emojs.github.io/

Achieving an Inset border-radius on the Web: The Methods and Madness of Beveled Corners

In a recent web-dev project, a design required scooped corners on some images.

This problem has been tackled many times before. But even so, it took some time to find a solution that worked for the project I was working on.

In case someone walks down this path again, I thought I’d write about what methods I researched and how I arrived at my chosen solution.

The target effect was an image with scooped corners and a uniform border, something like this:

target effect

The main restrictions in my case were:

  • These images were added through a WYSIWYG. All I could apply to the img tag from the backend was a class. The rest had to be done in the frontend.
  • IE 10+ support is required, and IE9+ support is preferred.

With those stipulations, lets look at some solutions!

Method 1: Mad gradient hax

The first method I found is arguably the most popular (according to Google, anyway).

Lea Verou uses four CSS gradients to replicate each beveled corner individually, with the gradients going immediately from full colour to transparent in one stop to give a hard edge to the shape.

This method doesn’t work for me however because gradient backgrounds don’t really work on images.

Method 2: Instead of images, use… Images?

One of the obvious approaches to custom borders is to use border-image, as done by this fiddle (apologies to the creator as I can’t find a source).

The restrictions on border width and inflexibility in border colour don’t work well for my case, however.

Method 3: Needs more jQuery

There is, as always, the Nuclear jQuery option.

jQuery Corners has been around for some time and while it does have great browser support, the limitations on border size and the bloat associated with this approach (extra JS plugin + a lot of extra markup) make it unworkable for me.

Here is a codepen demonstrating the issues this method presents (you may need to explicitly load non-HTTPS scripts in your browser):

Method 4: Mad gradient hax part duex

Lea Verou has also made a second take on using gradients for an inset border effect.

This method uses a pseudo element to apply the gradient on top of the element instead of it being used in the background of the element (The gradient wrapping shown in this demo is super cool and I didn’t know that CSS gradients worked in this way).

While this method does get pretty close to achieving my goals, if does fall short. I can live with a wrapper element to get this to work on images (which don’t support pseudo elements), but the mediocre browser support (no support on IE9 and icky aliasing on Chrome) and not being able to apply a uniform border to the entire element mean it won’t work for me.

Here is a codepen demonstrating the issues this method presents:

Method 5: A :psuedo solution

The most promising solution is a relatively simple one coming from Mike Behnke. His method is somewhat similar to the previous method except it uses four separate pseudo elements with border-radius.

This method checks all the boxes for me. Pretty good browser support, flexible and uniform border options, and a nice smooth corner (even on Chrome) make it almost the ideal solution.

The major issue, however, is the extra wrapper tags needed to make this method work.

A Happy Medium

In order to use Mike Behnke’s solution I need to overcome the hard restriction of only a single img tag being sent down to the pipe.

While I would have liked to avoid using JS at all to achieve this effect, a little dash of jQuery (.wrap(), to be precise) made this a much easier process.

Here is a demo of the solution I used for the project:

A Final Solution?

This little journey has been fun and all, but I would have much rather just use something like the proposed corner-shape. Lea Verou has been championing this proposed property and has made a good demonstration of how corner-shape would work.

I for one would love to see this property become standard but unfortunately it seems progress on it has stalled.

Have any thoughts or corrections? Let me know!