DEV Community: Eric Saldivar

How to write a README

Eric Saldivar — Wed, 15 Sep 2021 21:45:26 +0000

What is a README? A README is a series of instructions, information, and/or guide which usually highlight a portion if not what an entire codebase does. A README is written in Markdown syntax which may be different then what you are accustomed to besides HTML syntax.

So why use a README? Well, the reason I started diving into writing READMEs and taking the time to fine tune them is simply because it makes my code accessible. It creates a guide by which those unfamiliar with my code or tech stack can gain a quick insight into the workings of my file structure, database management/schema, etc.

Now, how do you write a good README?

Title, short description, and image

Well first you need a title and I would recommend titling your README based on it's coverage. A README that you find as soon as you open up a repository should be titled the name of the repository or product. I would recommend h1 tags for this purpose. It also makes sense to put a short description (one sentence) of the overall purpose of the product or code here. I also recommend a picture directly under your README that is a representation of your code/product. This could also be a logo for your product! Maybe a picture of a key feature or a gif of your product in action. Images are written in markdown syntax with the img tag. An important note is that markdown syntax uses inline styling to position things, color things, size things, etc. So for an image I typically mark its source (src) maybe its linked in the files or hyperlinked where it is stored.

See an example below for one of my first title, description, and image.

So you have a fancy title, a short description, and an image that gives some insight into your project/product. I believe the next thing that sets apart other READMEs is a table of contents. How do you create a table of contents with Markdown? Title the Table of contents with an h2 tag then use the following format.

Asterisk followed by closed square brackets that wrap the title of the content followed by parenthesis that enclose the link to the part of the README where the content is located.

Example:

Sections

After the table of contents, the contents naturally follow. What the contents are depends on your project/product but things that make contents easy to read are picture examples and code snippets!

How do you write a code snippet and what is it? Let's take a look!

Three tick marks followed by the language and inside the tick marks you can place your code block. After that close with three more tick marks!

function addTwo(num){
    return num + 2;
}

So these are what I would consider the basics of a README. I want to expand on this later. I will also say that it has benefited me to look at professional products and study their READMEs. I hope this has been helpful to you! See you in the next post.

Algorithm Approach: Retrieve Depth

Eric Saldivar — Wed, 21 Jul 2021 14:58:06 +0000

Hey all! This is my first algorithm approach where I utilize RECURSION! Let's hope for the best and dive in! So what is recursion? In computer science, recursion is a method of solving a problem where the solution depends on solutions to smaller instances of the same problem. Such problems can generally be solved by iteration, but this needs to identify and index the smaller instances at programming time.-- Epp, Susanna (1995). Discrete Mathematics with Applications.

The simple way I think of recursion is when a function calls itself. Usually functions return a value to be accessed outside of their scope.

So the algorithm:

retrieveDepth([2, [4, [7], 1], 5], 2)

Given an arbitrarily nested array of numbers and a positive integer "depth",return a new array consisting of the numbers with depth less than or equal to the provided depth, in order of appearance.

The original array is considered to be at depth 1, and inner arrays are at
greater depth.

What does it mean? The first parameter will be an array with nested arrays, depths ranging from one level deep to many levels deep. The second argument will be the depth you are required to go into, the depth of the inner arrays.

So how can we visualize this problem?

The first layer of the array means you can access the values and they won't be arrays. The following levels are nested. If you are required to go deeper than the first level you will bring up the values nested into the matching depth that you dive.

The approach:

We need a base case which is the condition when met stops our function and returns an output. Without a base case our function would call itself endlessly and create a stack overflow, when a program attempts to use more space than is available on the call stack (that is, when it attempts to access memory beyond the call stack's bounds).

The base case is:

if(depth <= 1) return arr.filter(value => !Array.isArray(value));

When we are at the depth of one, we will no longer dive and return the array but we need to filter through it. We are applying the filter method. We only want values that are not arrays. We iterate through the array and if a value is an array we do not include it in the newly filtered array. We are checking with Array.isArray(value) but we have a ! (bang operator) which when placed in front of a boolean value it will reverse the value, returning the opposite. So we will receive all values that are not arrays.

The recursive call is:

return retrieveDepth(arr.flat(), depth - 1);

We return the function but the arguments are different. We flatten the array with each new call and decrement the depth by 1. We do this until we reach our base case, which is when the depth is less than or equal to 1. Less than to catch any weird arguments that are less than 1 initially and 1 as we decrement we should eventually reach 1.

Just a quick note on what array.flat() does. The flat() method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.

Our function at a final glance.

const retrieveDepth = (arr, depth) => {
  if(depth <= 1) return arr.filter(value => !Array.isArray(value));
  return retrieveDepth(arr.flat(), depth - 1);
}

We can expect our evaluated result to be:

And that's it! Any questions? Reach out! Thanks for reading and have a great day!

Style with the Dev Tools: Part 1 - Positioning

Eric Saldivar — Thu, 01 Jul 2021 18:49:55 +0000

I don't know about you but I often hear that styling a webpage is tedious and frustrating. I can appreciate that. But, it doesn't have to be. Did you know that you can style a webpage with the developer tools. Maybe you do and that is great! But if you don't then let me enlighten you to a couple of tips and tricks that I enjoy using.

So one of the first challenges I find when working with a webpage is centering or positioning anything. It's a pain in the butt! But it can be made simpler and one of the ways to make things easier for you is to use display grid or flex. Now I will link CSS Tricks Grid here and flex here. I have linked basic pictures of the helpful images you can find on CSS tricks.

So let's talk how to help with the dev tools. If you inspect the page and you have display grid or display grid on any of your containers/divs you can actually see a button on the elements tab in the dev tools that says either grid or flex depending on your choice.

After clicking this button you will be able to manipulate the styles window to the right which has another small button. If you click this you will then have access to all of the manipulation for grid and flex. This is powerful and I urge you to play around with this. You can move components on your browser window and find that position and layout that works for you. Want to bring these positions in your code? Copy and paste the CSS and bring it into yours. This might require some finesse if you are using Sass, Styled Components, Material Ui, etc...

I want to make a small series about styling especially with the dev tools so I will end this article here. If you need any help please reach out! I hope that you enjoy styling a little bit more and good luck with your coding!

Algorithm Approach: Bubble Sort

Eric Saldivar — Wed, 02 Jun 2021 20:10:25 +0000

Today I want to talk about the first sort that I have learned, bubble sort. Approaches to sorting arrays are named in such a way that they illustrate what they are doing.

Bubble sort takes a look at the current value and the next value in the array as you iterate through it. If during your iteration you find that you have a current value greater than your next value you must swap those values.

Not swapping is not enough because we need to create something called a sentinel value. What a sentinel value does is it acts like a gate keeper. It controls the flow of your loop such that you need to continue looping while it is true or not true, depending on how you coded your sort.

So lets look at the code:

Going through each line of the code the first thing we notice is that the function takes an array as a parameter. Duh!

The next thing we have declared in our function is a value labeled trade which is our sentinel value. We initialize this variable as false meaning that no trades (swaps) have occurred. Next we are going to declare a variable labeled count which is simply going to track how many times we have iterated through the array. This is especially important and it took me awhile to understand that we will use this to decrease the length of the array as we iterate through it again. Why do we do this...I will explain this shortly.

Now the for the actual iteration. The iteration through the array will be nested in a while loop. While loops run until the parameter set within their parenthesis is no longer true.

Inside the while loop our condition is our sentinel value. We are stating that while trade is false or when no values have been traded, we can continue our while loop. Nesting a for loop inside a while loop will give us a time complexity of O(n²). We have a space complexity of O(1) though as we are not requiring any more space to sort.

Now it might seem weird to immediately reassign the trade value but the reason we do this is that in the case we iterate and we make no swaps, the true value will allow us to escape our while loop.

Now we iterate through our array, declaring i as 0 to start at the index of the array, the stopping condition is if we reach 1 less than the length of the array but wait... minus the count? I mentioned this earlier and the reason we do this is that if we are sorting and taking the larger values to the end then we can expect that we don't need to iterate through the full length of the array each time as we would end up iterating over the large values at the end which are already sorted. Again, this took me a second or twenty to understand. Finally, i++ because simply we are going through the indexes of the array one at a time.

Our conditional check! If the current value is greater than the next value it is time to make a trade! Create a variable and assign it the value of the current value. Why? We do this because we are about to lose access to that value so we must store it. Alright, reassign then current value to be next value in the array. Now, assign the next value in the array to be the current we declared just moments ago. We assign trade to the value of false to continue to stay in the scope of our while loop. Now we can continue to iterate and swap where necessary. When we finish one iteration of our array we increment the count by one which will allow us to reduce the length of the array we need to iterate through.

If and when we iterate through the array and no values have been traded we will break out of our while loop. That was quite the journey but don't forget to return the array to complete this algorithm!

Algorithm Approach : Palindrome

Eric Saldivar — Sat, 22 May 2021 03:00:45 +0000

Welcome to my first post in a series of post I hope to make once a week or at least once every other week. I want to approach popular algorithms and explain my approach to solving them. I hope you find this helpful, feel free to reply/comment about anything I did right, wrong, or what you may have done differently.

So let's get to it! First, the prompt:

Things we know:

The parameter is a string.
It will contain at least one character as it will be non-empty.
We must return either true or false. True if the string is a palindrome and false if it is not.

The approach:

Let's start with a case that we can immediately return as true. If the length of the string is 1 then we will return true as a string of 'a' for example will be 'a' as it really doesn't have a reverse order to read.

Now what do we do in the case where a string has a length greater than one?

I chose to declare a variable with the label of revStr (reversed string) which splits the string, reverses the order, and joins the string back together.

Let's break that down further.

The split method

string.split()

We use this string method to separate the characters of a string and make them values in an array. We pass in a parameter of '' to split every character. If we passed in ' ' we would separate every word. Look at the MDN docs linked above to understand the split method further.

Now if we had the string racecar we would have ['r','a', 'c', 'e', 'c', 'a', 'r']

We can use this because we are going to apply array methods now!

The reverse method

array.reverse()

We have reversed the array. No parameters, we just want all values in the array in reverse order.

The join method

array.join()

This methods connects all values in an array together. If a string parameter is passed in then the characters are joined together with the string between each value. We passed in '' so we join the values with no space or characters between them as a string.

So we chained all those methods and what do we have now?

We have the original string reversed!

Ex. original string = apple, reversed string = elppa

The last thing we do is return the boolean value of checking if the original string is exactly equal to the reverse string. If they are the same we return true if not then we return false.

And that is it! Thanks for hanging in there, I will try to be concise but I want to provide links to methods and my reasoning for doing things in as clear a way as possible!