DEV Community: Kevin Dutzy

Create a dynamic route for search bar

Kevin Dutzy — Thu, 16 Feb 2023 19:09:37 +0000

Recently I created a project that allowed users to choose from multiple different options to search by (name, brand, type, size), and when creating routs in the backend - I thought there must be a cleaner more efficient way to do this rather than having a separate method for each search type. After thinking if over I realized that through params, I had the ability to pass in the value of both the search type as well as the value of the search, and use those within my method to create a dynamic search that would return the desired results. I'll go ahead and walk through the steps of setting someting like this up in both the front end and back end.

Start with the back end

to start, you'll want to create a 'get' route that will be targeting your desired controller where the method will live. something like this

get '/:option/:search', to:'synth_modules#search'

from there, you need to set up a method in your controller that will be looking to find a specific instance, based on the provided info from params. it might look something like this :

in the above image - I'm declaring a variable that will be assigned the instance that matches the search. if a instance is created, it will return that data as json back to the front end, and if not the error will be sent up. As you can see, im using a custom method .filtered_synths and passing in the params to that method, it makes things cleaner in my opinion to have a single method called rather than .where's and other methods flying around.

The Front End

now that the back end is set up to receive data from the front end, heres how we would set up our fetch request in a react front end.

first, have a form built out based on your own needs, mine had a drop-down where users can select which attribute they would like to search by, followed by a text box where the search value would go. Each of those values are set to state, so that I can reference that in my fetch URL, and it can stay updated on each change of the form. Once the submit button is clicked, it triggers a fetch request, that looks like this

as you can see you need to interpolate the state values of 'option' as well as 'search' inside the URL, and with the response, set that return object to the state that is rendering all of your cards, in my case is was all synth modules, so now the only objects that will be rendered are the modules that match the search value.

There are plenty of ways to execute this solution, but at the time this seemed like a efficient way to minimize code and multiple methods, by combining all searches into one method with the powerful use of params.

Using React H5 Audio Player

Kevin Dutzy — Thu, 26 Jan 2023 20:08:08 +0000

As I get further into my journey as a software engineer, I have spent more time trying to utilize and understand how to use many different npm packages. They can be super useful and really streamline the development process, saving you time from building something by scratch and troubleshooting.

I recently came across the React H5 Audio Player package when planning a project for users to upload and playback music. This package takes care of all the dirty work necessary in building your own media player and also allows for some customization and options. I'm going to discuss how to install, and incorporate this package in your next project

To start, you need to either list this package inside the package.json file OR in a terminal within your project directory - you can run the command to install it. I'll go over each of those steps:

Inside package.json file:

each of these items listed under "dependencies" is a package that can be utilized when building your code. You can list your Audio Player package in this section by writing

"react-h5-audio-player": "3.8.6"

and then once you go begin to build your project, you will run in the terminal

npm install

which will go through that package.json file and install all dependencies listed.

Install from the terminal

If you would rather just install this package directly from the terminal instead, heres how you would do that.

go to the project directory within your terminal, once inside it write the command

npm i react-h5-audio-player

this will install the "react-h5-audio-player", and list in as a dependency in your package.json file for you. Once that is done you will have access to that package within your project.

Using the audio player

theres many different ways you can configure this audio player based on your needs, its worth reading the documentation or look through this Storybook demo and interact with it or read more information on configurations by clicking the "doc" tab at the top of the page.

There are tens of thousands of packages from npm that can streamline your development process and make your life as a programmer easier, because why reinvent the wheel, right? I encourage you to look through all the possible packages out there that you may already exist before starting a project and trying to build something from scratch. Happy Coding!

Controlled Forms - Why do we need them?

Kevin Dutzy — Fri, 09 Dec 2022 17:09:36 +0000

With learning react over the past three weeks, there was a lot of discussion about controlled forms vs. uncontrolled forms, and a big emphasis on why we should use controlled components instead. Let's first break down exactly what the difference is between the two..

Forms -

Traditionally forms store & maintain their own state, and it will get updated when you query the DOM and pull the current value. React takes a different approach by taking the current value through props, storing the values to state inside the component, and monitoring any changes through the onChange callback. The main difference is that a controlled component is all handled completely by react. Take a look and this screenshot of what a controlled form looks like, the key indicators are having the input value set to the state, and having an onChange attribute on the input as well.

notice we attached the onChange callback to the input, and every time there is a change on the input it is triggering a helper function, which will be taking in that value and setting it to state, which is either declared inside the component or passed down from a parent component. We then take the value= attribute and assign our state to it. So now every time a change happens, it updates state, which is then assigned back to the value of the form in almost this looping type of way. This is what truly makes a controlled form, everything is handled within react and not pulled from the DOM.

There is very little reason to ever choose an uncontrolled form compared to a controlled one, in most cases you will always want it to be controlled with React. It allows you to have more flexibility with managing state inside the components, you can also have several inputs for one piece of data, and also allows you to have dynamic inputs as well.

If you are interested in learning more about controlled forms take a look at the documentation from react.js.

InnerText vs. InnerHTML vs. TextContent

Kevin Dutzy — Fri, 18 Nov 2022 18:12:54 +0000

Which do I use? When? Why?

You aren't alone if you find it daunting on which of these to choose and the nuances between them. This post will help break down, and give you a better understanding of them and when it's appropriate for each to use.

The Breakdown

These all share basically the same core function - which is to pull the contents inside elements. It begins to vary when it comes to what content is grabbed, and how it is also rendered on the page.

We will start with a few comparisons between InnerText and TextContent:

Mainly, TextContent allows you to grab ALL elements, where as InnerText is only going to use what's considered human readable elements.
InnerText can read CSS styles and will display them, TextContent will only display the content without any styling.

Here's a photo example from MDN showing how innertext and textcontent display differently

MDN has great references for getting a deeper understanding of how these all relate to each other and how they differ as well. I highly recommend using that site as much as you can in general, although there is a lot of information to sift through - it is very reliable and thoroughly explained.

InnerHTML

This one gets a little more confusing, and I feel like depending on the person you ask, you will get different opinions as to how they feel about using it. InnerHTML will actually take the text and whatever html tags are attached with it and either replace them with your assigned content, or you can grab existing content and append new contents to the existing one of an element. Take a look at MDN's documentation explaining the usage and DANGER'S of using InnerHTML over the other methods.