DEV Community: Benji Grant

Material You Seek Bar

Benji Grant — Fri, 10 Sep 2021 16:11:46 +0000

When I saw Google's new Material You update to their popular Material Design framework, I was very excited about some of the bold choices they made, it looks really different.

If you haven't seen it yet, check our their blog post at https://material.io/blog/announcing-material-you

This video they included particularly inspired me, you can see a wavy seek bar in the bottom left hand corner:

I decided to try and recreate this seek bar using html, css and javascript, and this is what I got at the end:

My implementation is definitely not perfect, but I think it does a pretty good job of replicating the video, and it's responsive! Try moving the progress handle around.

In order to create this effect, I'm generating an animated SVG element using javascript to make sure it responds to the position of the seek bar and is responsive when the screen width is smaller. I suggest you take a look at the MDN docs for SVG paths to understand how it works, but essentially I'm using the Q operator to emulate a sine wave, and giving it three steps to animate between to emulate the wave travelling from left to right.

I tried to make this seek bar accessible as well, but I'm not an expert on aria properties 😅 Let me know if you attempt this a different way or have any questions. What's your favourite new Material You component?

Crab Fit! Find a time that works for everyone

Benji Grant — Fri, 12 Mar 2021 04:43:55 +0000

I plan a lot of events with friends and co-workers, and often we need to plan a time, which usually ends up being done with a simple poll. I've also used Doodle a lot, but of course that has it's own flaws.

Using React and Google Cloud Appengine, I have created a new solution which I call 🦀 Crab Fit! Honestly most of the name comes from finding the cute domain 😅. I'm proud of what I've created so keep reading to find out how it works and how you can use it to plan your events as well.

Crab Fit lets you create an event with a specific set of dates in mind, or you can also just use generic days of the week.

You can then choose a time range, say, if the event must happen during working hours, using this cool slider. (oh, and yes there's a dark mode!)

Then, all you have to do is send out the link to everyone involved, and get them to put in their availabilities! You can view them all on a heat map to easily see when everyone is free.

I am constantly updating it as I get feedback, and currently have plans for the following as I write this:

Mouse over the colour bar to highlight availability segments
A better way of viewing availabilities on mobile
Select a specific person to see their availability
Just click on the link to copy to the clipboard

Please try it out and of course let me know if you have any feedback!

You can view it here: https://crab.fit

Cute CSS Animals

Benji Grant — Thu, 13 Jun 2019 23:21:43 +0000

Hello!

I recently got some cute pens in the mail, and I thought they looked like they could be recreated in CSS, this is what I came up with:

My challenge to both new and experienced CSS artists, try and create your own animals! I'd love to see a dog, a cat, maybe even a turtle. You can try adding more animals to the pen, or if you're not entirely sure how the code works, try changing the CSS of an existing animal, see what you can make!

And please, share it with us below. 😄

My Keyboard and Mouse

Benji Grant — Wed, 17 Apr 2019 00:44:17 +0000

Hey, so I recently got a new keyboard and mouse, one I've wanted for a while since seeing Google's new Pixel Slate tablet and it's nice round keys. What I've got now is the Logitech K380, and a Logitech M720 mouse to go along with it.
I love it so much with the rounded keys, I even recreated it with CSS.

What are your thoughts on rounded keys? What keyboard/mouse are you currently using? Let us know below!