DEV Community: tfury-1722

C.R.U.D?

tfury-1722 — Mon, 15 Aug 2022 03:53:38 +0000

CRUD is more of an acronym rather than a word. It represents the operations that all developers will come across within the duration of their technical career. These operations are implemented on the backend side of things and their results are rendered through the front end or what the user would see.

The C represents create which would be a POST request from your browser/client. This action is taken when you would like to insert some data to your backend. The R represents read which would be a GET request to an endpoint from your browser/client to a server. This typically the action you do day to day on the internet when you type in a website address. The U represents an UPDATE request to your backend. This is done to modify a single entry and this entree's ID should be specified before the request is sent. The D is for the DELETE/DESTROY action. This last action is pretty much self explanatory. Some useless data on you backend with-out purpose or relation get the delete action.
This was a brief explanation of CRUD operations. I do hope this shed some light on the matter for you. Thank you for reading.****

Savory Styled-Components Mmm

tfury-1722 — Wed, 06 Jul 2022 04:39:28 +0000

In my latest react project, I decided to take on styled-components for my app's appearance. Man was I in for a ride because I didn't foresee the tumultuous journey up ahead. I started with great ambition but that quickly turned to greif once I realized how much I didn't know my CSS. But I didn't let that deter me from completing the task at hand. In fact, I took this for an opportunity to strengthen my styling muscle and to gain more experience.

Besides looking up endless tutorials and numerous google searches, I come to the realization that playing around with the code was the best way to conquer this beast. One thing I noticed, that seemed awkward, was the way the styling was applied. With normal CSS ruling, you would attach your properties to a class (.), an id (#), or any query selector along with any specificity of your choosing. This is not the case with styled-components. Due to the fact that styled-components is a styling tool that is component based, as you write your CSS rules you're literally creating your components simultaneously through interpolation. Absolutely mind-blowing right?!...Yeah, I know. If I had to sum it all up, this would be the love child of Javascript and CSS lol.

While doing this particular project, which is a retail website mimic, I've learned that this tool caters to many of developer's concerns. Just to name a few:

loading only required styles for the page
using unique classes
nesting
auto prefixing and tons more.

As if this isn't enough to get your juices flowing, 100% creative control...are you down on bending knee yet?..cause here's your gal. I can admit that it can be a bit cumbersome to export and import each styled component you create but we all know that's the name of the react game. History in America has taught us exporting and importing drives the economy and developers drive (create) webpages. Just to reiterate this library has the functionality of both Javascript and CSS. So, passing styles through variables and props is a very capable, and to my recent discovery; encouraged thing. Such as applying a global style; which is another instrument in this toolbox. The other libraries and styling tool kits will have you cram so many classes in your components till your code is resembling freshman orientation.."What classes am I in?" If that's not the case then you're probably packing those inline-styles in your document's tags and head. Now you're wondering why your code reminds you of Lil Wayne and most recent day rappers with ridiculous face tats', Yikes! Ask yourself "Have I been able to do that with my prior projects?" and I think I could guess your answer. Honestly, there is a learning curve just starting out with this software; especially when you come into advanced features like using the clamp method for sizing items on the page based off of the size of the screen using view width length unit. Whew, that was a mouthful...of...tasty styled-components. But I say all of this to say, styled-components is the way..."So use the force Luke".

courtesy of Moni Quayle from Pixabay for photography

HTML Node vs Element & The Difference.

tfury-1722 — Mon, 23 May 2022 03:56:38 +0000

Hello!
Today my blog will address the difference between a Node and an Element.

Node vs. Element

A node is generally any object in the Document Object Model (DOM) tree. Think of it like a family. The DOM is made up of a hierarchy of nodes where each node can have a parent, child nodes, a nextSibling and previousSibling. Elements or html elements like body tag, div, and span, are a specific type of node. Nodes are the generic version of HTML elements and are made up of the many different components that create a webpage, where on the other hand elements are specified as one particular type of node, addressed with a HTML tag. Some important nodes to consider:

Element Node
Text Node
Comment Node
Document Node
Document Type Node

The nodetype property of a node interface differentiates the nodes as document nodes, text nodes, comment nodes, and elements.

Everything shown in this example below taken from is a node.

 <!DOCTYPE html>
 <html lang="en">

 <head>
    <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Node VS Element in JavaScript DOM</title> </head>

 <body>
    <!-- This is comment node -->
    <h2>This is heading</h2>
    <p>This is paragraph</p>
 </body>

 </html>

A key thing to remember while traversing the DOM is that an HTMLCollection return elements while a NodeList return nodes. Both of them may be manipulated like arrays but unlike arrays they lack the ability to be used by Higher Order Functions (HOF).

I hope my blog was able to clear up the difference between a node and an element. Thank you for taking the time to read it!

-Christopher Nance

My Transition Into The World Tech.

tfury-1722 — Mon, 18 Apr 2022 02:26:35 +0000

Hi, I’m Chris,

I’ve always enjoyed coding and have spent countless nights studying different programs in my spare time. I have also spent the last decade working jobs that are less than fulfilling :(. I thought I had found my purpose in truck driving until a terrible accident brought that career to a screeching halt. As a father of 3 the show must go on. I worked at a car wash until it shut down during the pandemic. It was during this time that I landed a job at the Amazon Fulfilment Center, my present employer.

While life is not short of its challenges, I am so grateful for the opportunity Amazon afforded me, to be able to join the Flat Iron school. The chance to have a real career and create a future for my family is not a responsibility I take lightly.

I remember watching coding videos on YouTube for hours. Studying JavaScript and Python. It all seemed so unobtainable and terribly out of reach for me at the time, because I lacked direction.I can now see the light at the end of the tunnel. That light is filled with promise and a way to provide for my family in the best way possible. The future for me and my family is looking very bright indeed.