Responsive Font Size & CSS Tooltips & Sequelize Virtual Types

Hodge-podge of things I’ve been working on over the past few days! Mostly UI based since that’s what I’m (finally) currently working on.

Responsive Font Sizing

I like the idea of responsive font sizing a lot, where the text size is exactly appropriate for the size of the window/device. I’ve seen this done in a number of ways, but never remember exactly how to do it. Hence a new round of googling. This article was one of the few modern approaches I found which explained how to do it concisely.

CSS Tooltips

I very briefly looked into creating tooltips to indicate that a user must be logged in to click a certain button. Though I decided not to do this in the end, this article and related Codepen pen would be a good starting point if needed in the future. Just need to make sure to address accessibility in the implementation, as the article doesn’t address it and I do remember reading something about tooltips not being very accessible.

Sequelize Virtual Types

Another thing I looked into briefly but decided against doing was implementing a virtual type using Sequelize for one of my database models. The documentation is not very clear on how to do this, but this article provided a somewhat clearer review of how to do it.

In the end I decided to add a getter method to the model instead, meaning I’d get the desired value by calling a function rather than referencing a specially-created column. The benefit of using virtual types is that you can add validation to the field, but this wasn’t needed in my case so a getter worked just fine.

Up Next

Need to implement a star rating element so some fun CSS to come.