DEV Community

JesseNReynolds
JesseNReynolds

Posted on

Iterating to create dynamic web elements.

I have a confession to make: I hate writing these blog posts. It's not as though I'm going to have some greate contribution to make to the understanding of software development at this point. I've been doing it all of two months, and although I think I'm doing well, I'm certainly no expert. Nothing I do here is going to be truly novel or innovative; clever, maybe, at best.

So anyway, let me walk you through some of the hopefully clever workflows I developed in this project.

By using the attributes of ruby objects that mimic database rows and iterating over collections of those objects, we can dynamically create elements on our webpage that contain the data of our database in visually pleasing ways. If we want to display all books, for example this:

an ERB file that iterates over books and generates <a> tags with information displayed in card-format
(please forgive the improper class name formatting)
and this:

css rules to style the a tags as flex-elements

becomes this:

a bunch of flex clickable flex objects that contain information about a book

The thing I'm most proud of achieving in this view is probably that each of those book card elements is actually an a-tag that's modified to be a flex-box object, meaning I have modern feeling "clicky-divs" without using any javascript, and because each of these cards is generated from database data, what cards you'll get is determined by what books are represented on the database. If a user adds a book, it just shows up, and if a user removes a book, it just won't be there next time you load the page.

It's not an earth-shattering idea, I'm sure someone else has done this before. But hey, I think it's clever, and there's a lot of places on this app that I got to create a solution to a problem like "how should I display all the books?" and when I had the solution working and styled I thought to myself "hey, that looks good, and the way it happens is pretty clever".

I guess what I'm saying is that when talking about the adventure of learning to code, maybe the real treasure is all the "heh, I'm clever" moments we had along the way.

Top comments (0)