DEV Community: Jake Pucci

The power of the Workspace Layout

Jake Pucci — Thu, 17 Nov 2022 03:49:55 +0000

When deciding how we want to we want to present our data from our database to our users, we are faced with several options. I have seen the light that is a workspace layout and would love to share my two cents on the design system.

A workspace layout facilitates user collaboration on records. It highlights the activity and discussion that is happening around a record by placing this information prominently in the larger content area, while simultaneously displaying the related records in the sidebar. A summary of the record’s details are in a panel above the content area for easy reference.

This is a design system often used by some very popular websites. When workspace layout design systems are used along with the users intention, this will lead to a much richer web application.

As this diagram shows, utilizing this design system is actually quite easy and is amazing to integrate into multi-relational database models. Each of the relationships can be shown on one page and altered dynamically creating better UX.

This generic facebook profile template is a perfect example of a workspace layout. The "[name]" would be the model name of the record being displayed. All the information on the left side of the display is the quick reference info of the related records. This would also be associated model information via the corresponding relationships. The large area for "Posts" is essentially a comment field allowing for activity and discussion that is happening around a record.

Here is a Linkedin profile template and as you can see, it is also utilizing the workspace layout design system. Joe Sample's information would be filled out entirely by the database columns. The current model name is present at the top of the page as the "me" icon in the navbar. If this example included and "activity" area, that would be the models relational information, similarly to Facebook's "posts" area.

Once you begin to recognize a workplace design system, you will see them being used on many applications and for good reason. They make UX richer!

DRY-out your fetch()

Jake Pucci — Tue, 11 Oct 2022 15:14:26 +0000

If you ever find yourself working with an API, you will undoubtably have to learn and use the fetch() method. Using fetch() allows developers to access API's and use their data in multiple ways. For those curious, the syntax for your average fetch() post method goes as follows:

Now what you chose to do with that extracted data can vary greatly. For this example, I am just console.log()-ing all of it. This can be very useful to see if your fetch() is working correctly.

fetch() is an incredibly important method and allows us Devs to access our websites backend data in many ways...

Most commonly, we need to

Create data,
Read data,
Update data
Delete data

This can be easily memorized using the acronym "CRUD". As developers, we work with CRUD all the time. So much so that one might say we often find ourselves knee-deep in CRUD while creating our projects. Luckily, there is a solution to keep us out of so much CRUD.

Don't
Repeat
Yourself!

No i'm not just yelling at you. This is actually another acronym, "DRY", and it can help keep you from drowning in the CRUD. I have learned a fun little technique that can make your code more efficient, modular, and keep it DRY. Use a function to declare your fetch() requests!

On the simplest scale, it would look like this,

Let's break this down. This is the exact same fetch() order as the previous example. What makes this so cool though is we set the fetch's URL to a parameter allowing it to be changed depending on where your fetching your data!

If above this function we wrote...

const url = 'http://example.com/movies'

... this would return the exact same data as the first, "boring" fetch() above!

We can still make this even more dynamic by just calling the function and passing our desired url as a parameter.

Even though this is super useful, you may be thinking "whatever, its not that hard to type up a correctly syntax-ed fetch every time I need it one". I would agree however, when the fetch's become more complicated, you will surely start to sink into the CRUD. Let's look at some other, more complex fetch()'s and see how useful it is to just pass info for it as parameters.

When tapping into CRUD to both update and create new data, the fetch() syntax becomes more intensive and harder to remember the exact details. It's much easier to create these fetches as functions and pass the necessary info as parameters. The real fun part is how customizable it you can make it. In the above example, I created several parameters to allow for more optimization with my fetch() function.

How you write your code is up to you. But if you want to keep yourself from living a life knee-deep in CRUD, I think this technique is a great start. Maybe down the road I'll discover an even better way to DRY-out my CRUD.

Thank You!

React's Potential

Jake Pucci — Thu, 15 Sep 2022 18:05:07 +0000

Facebook has created one of the webs most popular frameworks, React. It's popularity has been tremendous and some of the biggest companies have chosen to use React as their website framework. Some examples include...

Facebook
Instacart
Netflix
SalesForce

With companies like these backing React, the framework's capability almost speak for itself.

One of Reacts greatest feature's are it hooks. React hooks are built in tools that Engineers can utilize to improve their code.

useState

useState allows Engineers to update the state of their functions. State is data that is dynamic in your component: it changes over time as users interact with your application. useState is probably the most common React hook as it allows for dynamic user interactivity.

useEffect

useEffect is a React hook that allows Engineers to tap into the side effects of a function. Side effects of functions happens when a function is called and it causes change outside of the function itself. You can "hook" into this change via useEffect. I have found this to be the most useful for me when it comes to fetching data from an API when a component loads. In this example, the component loading is the main function firing and the data fetch via useEffect is the side effect.

Another Engineer-friendly tool React provides are

components.

Components are little bits of re-usable code blocks that are similar to JavaScript functions but return JSX. JSX or JavaScript XML, is the combination of both JavaScript and HTML and allows Engineers to write HTML in React. Components are really good at organizing our code and make it easy to extract the boilerplate code. Components are a crucial and powerful part of React but they would be almost useless without...

Props

Props allow us to pass information from parent components to child components. Props can hold all kinds of information including strings, numbers, booleans, objects, even functions. In the example below, "actors" is the prop being passed to the "Actors" component.

To break this down to a simpler level, let's use this analogy. Let's say we have a big tasty burrito in front of us. Notice how the tortilla carries all the ingredients inside of it. You can easily carry the burrito around with you and have access to all of its tasty ingredients within. Amazingly, this is just like React! Components are like the tortilla carrying all of the ingredients (props) inside! Just like the ingredients of a burrito, props can be anything you chose.

In my opinion, React is the most capable webpage wireframes currently available. Its use of props, components and hooks makes its modularity and ease of use stand out. I hope this post helped educate or inspire your future React Use!... also make you a little hungry for a burrito...

Closing My Bootcamp's First Phase.

Jake Pucci — Wed, 24 Aug 2022 16:45:00 +0000

I have officially finished my bootcamp's first phase. These last three weeks carried incredible challenges and at times, some adrenaline-filled victories. It's funny to be so dramatic about it but that's exactly how it felt.

For context, I feel like I should explain my background with computers, or lack thereof. Before this bootcamp, my computer knowledge was incredibly novice. At most, I would use a computer to email people and watch the occasional Youtube video. Even an Excel spreadsheet looked incredibly foreign to me. Never did I think I would be able to operate the terminal, use VScode, and understand what functions are and how they operate. Phase-1 was undoubtedly a rollercoaster.

The first week took no time at all when it came to absolutely throwing me into a dark pit of despair. Never has my fear of failure been so high and my confidence been so low. The resulting feedback loop was overwhelming. I decided the only way to boost my confidence with all the new material was to spend every minute I had studying, watching tutorials, and practicing labs. I felt that if I just eat, sleep and breathe JavaScript, I would begin to understand what was happening. This introduced me to my first bootcamp lesson; rest is a necessity. After working 16+ hours each day trying to catch up and learn JavaScript, I finally crashed mentally. So much so that I regressed in my coding knowledge. Eventually after some rest, I felt like I was starting to grasp about 40% of what was going on which, according to my Tech Coach, is a fantastic start. Celebrating this small victory was much needed. There was even a moment when I thought "Ok, I got this", but this cycle of feeling confident and then knowing nothing continues even now.

Week two began and I was bracing for the same shock I felt in the previous week. Luckily, week two's entire focus was different and I could breathe a sigh of relief. Instead of the confidence beat-down that was week one, week two consisted of tying all our skills together to prepare for our first coding challenge. This practice was a warm welcome, and I actually was enjoying the repetition of the mock coding challenges. Our challenge consisted of using a fetch() method to create a website hosted by our local json server. Im sure to most Devs this is probably an incredibly easy task but for me and my novice knowledge of JavaScript, it was a crazy challenge. I did however learn some very helpful tips to help keep your code clean and useful.

//variables
const imageList = document.querySelector('#movie-list')
const title = document.querySelector('#title')
const yearReleased = document.querySelector('#year-released')
const description = document.querySelector('#description')
const image = document.querySelector('#detail-image')
const button = document.querySelector('#watched')
const bloodPoints = document.querySelector('#amount')
const bloodForm = document.querySelector('#blood-form')
const bloodAmount = document.querySelector('#blood-amount')
let selectedMovie;

Declaring variables is a fundamental part of coding. In large blocks of code, you can find hundreds of variables declared. Through experience I have learned creating a space at the beginning of your code to declare globally scoped variables to be a super helpful method. Trust me, it makes the problem solving process that much less painful.

Along with declaring global variables in an organized location, I also learned to name them in ways that make sense and are easy to understand.

const meunuList = document.querySelector('#menu')
const dishSection = document.querySelector('#dish')
let selectedItem;
const dishName = document.querySelector('#dish-name')
const dishDescription = document.querySelector('#dish-description')
const dishImg = document.querySelector('#dish-image')
const dishPrice = document.querySelector('#dish-price')
const dishText = document.querySelector('#dish-text')
const menuItems = document.querySelector('#menu-items')
const cartForm = document.querySelector('#cart-form')
const cartAmount = document.querySelector('#cart-amount')
const numberInCart = document.querySelector('#number-in-cart')

Above is a prime example of how not to name your variables. I could have saved myself a lot of time and frustration if I named these variables in a more understandable way. For example
const meunuList = document.querySelector('#menu') and
const menuItems = document.querySelector('#menu-items')
are both named very similarly. Often I found myself using the variable menuList when I needed menuItems or vice-versa. Moral is, name your variables in ways you can identify exactly what you're calling on.

It was during week two that I actually enjoyed working on these practice challenges. I felt like I could actually see the progress I had made with JavaScript and found it fun to try and problem solve my functions in all the different ways one can. Finding ways to consolidate and clean up my code was very satisfying and almost like a game. For example:

const divide = function(param1, param2){
    return param1 / param2
};

// can become shorter with an arrow function;

const divide = (param1, param2) => param1 / param2

In my most humble opinion, the latter function is a much cleaner looking version.

So far, my experience with my bootcamp, Phase - 1, and programming overall has been pretty good! Besides the occasional deep dive into the pit of despair, I am really feeling like I can learn this skill. I believe as long as I keep applying myself to learning this and keep repeating my mantra, I will only continue to improve my skills.

My bootcamp sent me this image on my first day. I reference it often.

Admitting Something Embarrassing

Jake Pucci — Tue, 23 Aug 2022 01:43:00 +0000

I think a large part of being a beginner at something is owning your mistakes and being able to laugh at yourself.

I find myself studying and reviewing almost too much at times and it is almost counter productive. So much so that during week 1 of my bootcamp, I forgot what a parameter in a function was.

Learning the Basics of DEV

Jake Pucci — Tue, 23 Aug 2022 01:28:00 +0000

It has just occurred to me that these posts should be written in Markdown

considering I have only just started to use Markdown this morning, I think it's fair to make a short list of things that I think are cool within it.

its definitely cool how this little star creates an unordered list.
However that can only get you so far. Often I'll have to create an ordered list.
Sometimes, certain situations even call for extra inflection via underlining.
I may only know the basics of Markdown but luckily I still have plenty of time to learn.

My First Post on DEV!

Jake Pucci — Tue, 23 Aug 2022 01:16:00 +0000

Hello World!
Today, August 22nd 2022 is the beginning of my blogging journey. I have been studying the art, science and passion that is computer coding for 14 days now. My first impressions? Holy moly how on earth will I ever understand what is happening. As long as I continue to work at it, it wont be long before I have conquered this new skill.