Dev Digression: A Blog

Getting to the Root of React

As promised in my last post, I will take some time to delve into React concepts and procedures in my next few posts – and I will attempt to pay attention to things that I felt were difficult to grasp when I first began learning it.

I want to focus first on the concept of a component. Components are the heart of React. At first, they can seem like something esoteric – especially when you see them implemented with JSX, which can also be startling to newcomers. Nevertheless, two things should help keep us grounded in our journey of React.

First, React is a Javascript library. Don’t believe me? Check out the React page. See? It says so right there.

This means that React’s purpose is to take existing concepts from Javascript and give us a quicker, more efficient way to do things which are commonly used in web apps. In this way, it is similar to jQuery. So fear not - while we are dealing with strange new syntax and a few new concepts, React actually helps us to do things in a simpler way by converting everything written in a React project back to Javascript. It is particularly helpful to remember this about JSX - although it looks similar to HTML, it is not called HTMLX; the focus is on how it performs Javascript tasks. In the end, its purpose is to provide an easier visual for manipulating things on HTML pages by doing things in Javascript code.

The second thing to remember, which will be a focus of this post, is that React components are simply reusable pieces of code, much like functions. In fact, they are quite often written simply as functions. Creating a component entails giving it its own .js file and everything. This means that it is very modular, making it easier to visualize projects in the long run. While it can be difficult to justify having to flip through so many different files (is this Object-Oriented programming, or what?), I suppose it could be argued that it is a better alternative than scrolling through hundreds or thousands of lines of spaghetti code. But I digress…

Read More

Reacting

I ended 2017 with my first fullstack Node project.

2018 is off to a rousing start, as I have jumped back to sharpen my frontend skills by learning React.

Once again, the journey began with a fairly simple concept: a fancy new Javascript library. Been there before (I’m looking at you, jQuery). So what was special about this one? Well, one major difference is that React is much quicker and lighter, as it uses a virtual DOM to update sections of a page independently (these sections are known as components – more on this soon).

My reaction:

Read More

What's This RESTful CRUD About?

After soliciting feedback for my MVP (and a bit of a tussle with Travis CI as I cleaned up my testing regimen), I can now present the new and improved Studyficient!

It feels great to have built something which utilizes client-side and server-side technologies!
The story of this app reads much like learning web development in general – a plot involving learning one skill and quickly finding out that one technology turns into seven more another. For Studyficient, Node, Express, and MongoDB were the three main technologies. Along the way, I encountered the likes of Mongoose, Mocha, Chai, and Passport - as well as a few new services to utilize continuous integration (Travis CI) and deployment (Heroku).

While each of these new technologies is quite distinct from those on the front end, there are certainly parallels which can be drawn from both ‘ends’ of the spectrum. Perhaps the most obvious similarity in the so-called MERN stack is the programming language itself: the N (Node.js) enables Javascript to be compiled and run with server technologies. This gave me an even stronger appreciation for Javascript as a coding language (and C++, as it is the language used to write the V8 engine on which Node runs).

Additionally, the E (Express), the incredibly efficient Node.js framework, helps to construct routes with relative ease – which brings me to another major similarity between frontend and server side: both have a myriad of acronyms by which they describe their modes of operation and common practices (if you’ve read my posts up to this point, you’re probably sensing a theme here…)

Read More

Study Away!

Greetings, once again, esteemed reader!
I return to you after a lengthy sojourn into to the server-side aspects of web development!

It was an interesting, exciting – and at times, rather frustrating – endeavor; but thankfully, I have something to show for all of my efforts!

I have come a long way since my last project involving frontend API calls.
My latest project actually involved constructing my own API – complete with a database to store information, including user accounts. This process also entailed establishing authorization with JSON Web Tokens (JWTs) and utilizing Passport.js.

More on the specifics later!
For now, I have another MVP for you to test out!

Go ahead and take a look at Studyficient!

If you’d like to test it out without creating a new account, feel free to log in with
Username: studydemo
Password: study123

Read More

(App)licable Lessons

It sure is a pleasure to write this post - mostly because I am stoked on the completion of my latest project, a comprehensive frontend web app!
Please check it out and feel free to let me know what you think!
Be There - For Your Career

This one really gave me a chance to practice my coding chops! But honestly.. what would an undertaking like this be for an up-and-coming web developer such as myself without a couple of good ol' fashioned lessons along the way?

Perhaps the greatest lesson working on a project as large as this (relatively speaking, of course) was the value of planning out a project design before jumping into the code. Part of this lesson also pertained specifically to APIs: I had to find one which would provide me the information I needed - and (this is the crucial part)
in a useful way.

Read More

The Real MVP(s)

"APIs, AJAX, and JSON - OH MY!"
I channel this sentiment from The Wizard of Oz in order to display my initial fear of more new terms being hurled out as I began to learn asynchronous client-side apps. Thankfully, this fear has since withered away as I gained quite a large amount of knowledge in using those very components over the past few weeks by building my latest app.

Among other things, some have speculated that L. Frank Baum originally wrote The Wonderful Wizard of Oz as an allegory for the debate about bimetallism at the turn of the twentieth century. This makes me think that maybe there could be a new interpretation for the internet age… (For example, in lieu of 'follow the yellow-brick road!', 'follow H-T-T-Protocol!') Yikes…how’s that for a digression?

Read More