christopherkalfas.github.io

So, you’ve done it. You have built a world-changing React application, and you can’t wait to share it with the world! But, hold-up. How do you share it?

Posted by Christopher Kalfas on February 14, 2020

This next blog update is a tutorial for adding a ‘filter-by’ or ‘sort’ button in a React Container.

Let’s say you are rendering out a list in no particular order, and you decide to add a feature that allows users to sort and re-render that list by some key-value pair. For this tutorial, our list is an array of mystical creatures. We want users to be able to sort this list by popularity or ‘likes.’

Create ‘Sort’ Button – The first thing you need to do is create a button that triggers the sorting. You want to place this button in your Container Component. This logic needs to go into your Container for several reasons.

1. The first reason is the principle of ‘Separation of Concerns.’ Separating your app’s concerns allows you to delegate specific responsibilities to individual components. Utilizing this concept makes refactoring much more comfortable to implement because depending on what you are changing, your refactoring only happens in one place. A useful metaphor to think about this is an automobile assembly factory. If sports car designers want to add a new factory color to the car, who on the assembly-line needs to know about the change? The factory worker who builds the engine? No. The factory worker who is responsible for making sure the passenger-side door fits? No way! That’s not relevant information to them. The only factory worker who needs to know is the one who, you guessed it, paints the car. Automobile factories wouldn’t be able to meet their quotas if they pulled everybody into a meeting for every change to the manufacturing process. That’s not practical for them, and it’s certainly not practical for us as members of a development team.
2. Secondly, the feature belongs in the container as opposed to other components because container components are primarily concerned with how things work. They also are often stateful. Back to our example of sorting the list of creatures, this button adds a new way the app functions, and it changes the state of our creatures list. So, we are in the right place to add this button. Huzzah!
3. In this specific example we are going to make the button a ‘check-box’ that renders at the top of our creatures list. We also want to attach an ‘on click’ event to trigger the change.

Posted by Christopher Kalfas on November 15, 2019

I have been learning React with Redux for the past few weeks, and I’ve got to say its pretty rad. It’s powerful, fast, and lets you pull together a dynamic web app in the blink of an eye. It also confuses the hell out of me.

Posted by Christopher Kalfas on November 10, 2019

Hello again, I recently completed my Mod 4 Project at the Flatiron school, and this project was a culmination of 10 months of struggles, victories, luck, and defeat. I endeavored into the sea of coding, and now the goal of becoming a full-stack Developer has begun to materialize all around me; I barely noticed. As I built the backend of my project, creating an API with Rails, I forgot the weeks it took to understand ‘Object-Orientation.’ I also forgot the two days months ago when I ‘rolled-back’ a migration and broke my project beyond repair. I forgot the hours working with ‘Squids,’ Ice-cream Cones, arrow functions, strong params, and serializers. I forgot about the first time I saw an idea in my head turn into a program that others could use. I forgot a lot.

I don’t have a terrible memory as some of you are probably thinking. I forgot because I was creating something. Detail by detail, the exciting, frustrating, satisfying, and rambling nature of making an application was all-consuming. The world outside my window fell away. Calls from family or friends were ignored. Lunches missed, and bags grew under my eyes. Once I finished and committed all my features, it dawned on me. I wasn’t a student, studying rules and conventions. I was a full-stack developer. I learned those rules, and they were ‘in my hand.’ Time to forget everything, and do it. I had to finish the app. This realization reminded me of a musical I studied in college; ‘Sunday in the Park with George’. The show is about a painter, also suffering for his art. He sings a song called, you guessed it, ‘Finishing the Hat.’ The song is about agony and joy in creating art.

Lyrical Excerpt

Mapping out a sky

What you feel like, planning a sky

What you feel when voices that come

Through the window

Go Until they distance and die

Until there’s nothing but sky

And how you’re always turning back too late

From the grass or the stick

Or the dog or the light …

Coming from the hat, studying the hat

Entering the world of the hat

Reaching through the world of the hat

Like a window

Back to this one from that

There’s a part of you always standing by

Mapping out the sky, finishing a hat

Starting on a hat, finishing a hat

Look, I made a hat

Where there never was a hat’*

You can substitute the word ‘hat’ for ‘app,’ and the song works. When you start building your canvas is blank. It can be difficult to not just ‘jump’ around as George warns. He is mapping out a world in his head and creating the pieces one of the most famous paintings in history.

Posted by Christopher Kalfas on October 13, 2019

Hello again, time for the 3rd installment of my blog. This time I’m offering up a look into how I am trying to bridge my new programming skills with my personal experiences. Coming from the world of sales and acting, I am accustomed to actively pursuing my goals, whether that means fame or financial stability. Another part of my personal experience is my underlying urge to leave the world better than when I came in. I don’t think I’m alone in that regard.

Posted by Christopher Kalfas on September 19, 2019