As I near the end of Phase 2 of Flatiron School's Software Engineering program, I find myself looking back on all that I've learned about coding with React. Perhaps what strikes me the most, especially when compared to the previous phase which mostly covered vanilla javascript, is React's declarative style of programming. The concept of saying “give me this final result” and allowing the computer to figure out the rest feels almost like cheating at times. This has gotten me to think about how often it feels like I’m cheating when it comes to coding. So much is built on other people’s packages or dependencies or tools or plugins that often it feels like being a good programmer is less about how much technical knowledge you already have and more about how good your googling is! I’ve had to really question that “cheating” feeling. Through learning more and more about coding, I’ve come to deepen my understanding of the whole “standing on the shoulders of giants” thing. I’ve always understood this to mean that all great achievements are made possible by the previous great achievements of others, but I’ve never really considered just how much it plays out in the day to day. Like how I don’t know everything that React is doing to take my components and render them to the DOM. Similarly I don’t know everything that is happening in HTML to make a select box which opens a drop down full of options when clicked, but the computer is able to do it all for me because I knew the right way to ask it to do that… isn’t that just magical?
function EmojiSelector({ onChange, foodEmoji }){
const emojiArray = ["🍽","🍏","🍎","🍐","🍊","🍋","🍌","🍉","🍇","🍓","🍈","🍒","🍑","🥭","🍍","🥥","🥝","🍅","🍆","🥑","🥦","🥬","🥒","🌶","🌽","🥕","🧄","🧅","🥔","🍠","🥐","🥯","🍞","🥖","🥨","🧀","🥚","🍳","🧈","🥞","🧇","🥓","🥩","🍗","🍖","🦴","🌭","🍔","🍟","🍕","🥪","🥙","🧆","🌮","🌯","🥗","🥘","🥫","🍝","🍜","🍲","🍛","🍣","🍱","🥟","🦪","🍤","🍙","🍚","🍘","🍥","🥠","🥮","🍢","🍡","🍧","🍨","🍦","🥧","🧁","🍰","🎂","🍮","🍭","🍬","🍫","🍿","🍩","🍪","🌰","🥜","🍯","🥛","🍼","☕️","🍵","🧃","🥤","🍶","🍺","🍻","🥂","🍷","🥃","🍸","🍹","🧉","🍾","🧊","🥄","🍴","🥣","🥡","🥢","🧂"]
return(
<div>
<select name="emojiSelect" id="emojis" onChange={onChange} className="selectEmojis" value={foodEmoji}>
<option>Select Emoji...</option>
{emojiArray.map(emoji=><option key={emoji}>{emoji}</option>)}
</select>
</div>
)
}
(my EmojiSelector component which allows users to select from a list of food emojis. It felt so simple to execute thanks to React's declarative programming--I must be a fraud!)
My course instructor mentioned the concept of “pattern matching” the other day. It’s a pitfall of learning code in which students don’t necessarily learn the concepts of what they are programming, but simply memorize whatever code they need for a particular action, without really understanding it. This sent me into a bit of a panic, I'll be honest. For example, I might understand something like a fetch request--a client makes a request to a server for certain data, the server sends back a promise, which acts as a sort of I.O.U., which then gets fulfilled (or doesn't) when the server sends the data it’s promised. But like……… HOW is it doing all that, right? I have no idea… well maybe I have some idea, but I’m definitely not getting the full picture just yet. And I wonder if all coding isn’t like that to some extent, because where does it end? The programming languages we use today are built on older languages from the past right? And those are based on even older ones? Back and back until you’re dealing with ones and zeroes flipping switches on and off? Is it really cheating to code declaratively? Is all coding cheating?
It’s interesting to think about. How far down the iceberg do you need to go to really know what it is you’re doing? Like ultimately computers are hardware, should I be learning mechanical engineering too? Electrical engineering? Should I mine for the metals and plastics myself? Make my own tools to put it all together? I feel like… no! My time is better spent elsewhere… and isn’t the whole point of living in a society to collaborate so that we don’t all have to toil away in the computer mines to free our own laptops from the granite? I think part of the beauty I’m realizing is inherent to coding is just how collaborative it all is. Even the most solitary, genius programmer blazing their own trail through the digital world is ultimately reliant on the work of other people in a million different ways. To be a programmer is to collaborate with countless visible and invisible people across space and time in the endless quest to facilitate the sharing of cat pictures… and I think that’s really cool!
Coding can do some pretty intense, high concept stuff, but I really love the channels it opens for smaller communication as well. Like with my phase 2 project! For this phase, I made a single page web application called Our Lil’ Picnic Basket. The main goal of the site is to collect some of the little stories people have about their favorite foods. So it’s almost like I’ve been collaborating with the creators of React, JSON-server and all the dependencies I’ve been using in order to then further collaborate with any visitors to the site who would like to add a story to the mix! It's like standing on the shoulders of giants so that I can call out to people standing on different giants and be like “Hey… what’s it like over on that giant?”
return (
<div className="newFoodFormContainer">
<h2> What Are You Bringing to Our Lil Picnic? </h2>
<h3>what's a food that reminds you of home? Tell us about it below!</h3>
<form className="newFoodForm" onSubmit={handleSubmit}>
<FormInput name="name" label="What's this food called?" value={foodName} placeholder="Food Name" onChange={handleChange}/>
<FormInput name="city" label="Where did you eat this food?" value={foodCity} placeholder="City" onChange={handleChange}>
<input type="text" name="country" placeholder="Country" onChange={handleChange} value={foodCountry}/>
</FormInput>
<EmojiSelector onChange={handleChange} foodEmoji={foodEmoji}/>
<label>A Fond Memory of This Food:
<textarea type="textArea" name="story" placeholder="tell us a story..." onChange={handleChange} value={foodStory}/>
</label>
<input type="submit" name="submit" value="Add Food!" onMouseDown={()=>setBtnClassName("clicked")} onMouseUp={()=>setBtnClassName(null)} className={btnClassName}/>
</form>
</div>
)
}
(my call from the giant I'm standing on to the people on other giants)
Even though I won’t always be working with declarative programming languages in the future, I will always be working within a network of knowledge and technology built by both contemporary and non-contemporary coders who've made whatever I'm working on possible. And hopefully in doing this work, I will make my own little additions to help others raise themselves up from the giant’s shoulders even further, like a stepladder or perhaps a bench they could stand on… whatever I do it’s nice to remind myself that I’m not doing it alone.
Top comments (0)