DEV Community: Edwin Henriquez

Flex With Flex Box 💪 😎 👊

Edwin Henriquez — Thu, 14 Jan 2021 14:59:09 +0000

When you initially create elements for a page, by default they appear stacked. You’ll see that the box of the element takes up the whole width of the page. You can tweak css properties or position elements with the position property to get your desired layout but this can become tedious work. Flex box can help with laying out elements in rows or columns. W3schools states, “The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without float or positioning.” In this blog I will demonstrate simple Flex properties that can help create layout for your UI.

Flex Container

#container{
    background-color: green;
    width: 100%;
    height: 100px;
    margin: auto;
    display: flex;
}

The display property set to flex, will identify the container as a flex container so you can utilize other properties to manipulate the way child elements take up space. Before you set your display property on the container element. Notice the elements are stacked on top each other. Once you set display to flex they will appear lined up in the container.

Axes of Flexbox

Flexbox properties work based off two axes. The main axis, which children of the flex container are laid out. By default the main axis is horizontal but can be vertical depending on the setting of the flex-direction property that I will show in this blog. The cross axis is perpendicular to the main axis. It can be horizontal if the main axis is vertical or vertical if the main axis is horizontal.

Flex Container CSS Properties

#container{
    background-color: green;
    width: 100%;
    height: 100px;
    margin: auto;
    text-align: center;
    display: flex;
    flex-direction: row-reverse
}

Flex-direction by default is set to row. Which will align elements left to right. When setting it to row reverse it does the opposite as shown above.

#container{
    background-color: green;
    width: 100%;
    height: 250px;
    margin: auto;
    text-align: center;
    display: flex;
    flex-direction: column-reverse
}

flex-direction can be set to column which will position elements order first to last and top to bottom. column-reverse will do the opposite as shown above.

Make sure the height property accommodates how many elements will be placed on the page so that elements don't fall off. This is why I changed the height to 250px.

#container{
    background-color: green;
    width: 50%;
    height: 60px;
    margin: auto;
    text-align: center;
    display: flex;
    justify-content: space-evenly
}

The justify-content property is set to flex-start by default but here I use space-evenly. Justify-content can be used to give space between and around elements in the container. There are many values you can set to justify-content. Feel free to explore them!

Flex Child CSS Properties

#three {
flex-grow: 4
}

You can also set properties on children of the flex container. You can set flex-grow or flex-shrink to change the size of an element. Negative numbers cannot be used. There are many more properties you can use on children elements. Check out https://yoksel.github.io/flex-cheatsheet/ for more!

Conclusion

Flex box can make your page responsive to any screen size. Based on research iv'e read that they are best paired with grid systems to get the job done. By setting a containers css property display to flex. You can then use other properties to align child elements or space them out. You can even rearrange the order of child elements , grow them, shrink them, and many other techniques. If your interested in Flex Box, dig a little deeper because there is always more room to grow! Thank you for reading.

Using React Hooks

Edwin Henriquez — Mon, 04 Jan 2021 15:02:20 +0000

Sometimes when working on a project you don’t really know what components will be stateful or stateless. This is something you might consider before hand so you can make a component either classed based or functional . Since state can only exist inside of class based components, you will have to refactor your functional component to be a class based component if you’ve come to the conclusion that it needs state. This can take valuable time away from you and sometimes a hassle to refactor. React hooks can help you make clean code and easily manage state inside of a functional component! In this blog I will show you how you can use the React hook useState to your advantage. Make sure you’re using react version 16.8 or higher to utilize hooks.

How To Use Hooks

import React, { useState } from 'react'

function ToDoListForm() {

    return (
      <div>
        <h1>My Todo List!</h1>
        <input/>
        <button>Add</button>
      </div>
    );
  }

  export default ToDoListForm;

                                          //ToDoListForm.Js

First, import the hook that you want to use in your functional component.
There are multiple hooks react provides like useEffect, useContext and useReducer. You can read more about them here.

import React, { useState } from 'react'

function ToDoListForm() {

    const [ inputTask, setInputTask ] = useState('')

    const submitHandler = () => {

      }

    return (
      <div>
        <h1>My Todo List!</h1>
        <input/>
        <button>Add</button>
      </div>
    );
  }

  export default ToDoListForm;
                                      //ToDoListForm.Js

Second, useState returns an array of two elements. The first element will be your current state. The second element will be
a function which will set your state. It would be best to use array destructuring for readability. I am also initializing my state to be an empty string. A key difference with state and a hook as opposed from class based state is you can initialize your state with anything you want. A string, array, boolean, or object. Where in class based, the state is always an object.In this case i'm initializing with an empty string since thats what I receive back from the onChange event.

import React, { useState } from 'react'

function ToDoListForm() {

   const [ inputTask, setInputTask ] = useState('')

   const submitHandler = () => {

   }

    return (
      <div>
        <h1>My Todo List!</h1>
        <input
          type="text"
          value={inputTask}
          onChange={ event => {
              setInputTask(event.target.value)
            }
           }
        />

          <button >Add</button>
      </div>
    );
  }

  export default ToDoListForm;                 
                                  //ToDoListForm.js

Third, set the state every time the user types. You can use an onChange event for this. onChange will retrieve values from whatever is typed in the input. We can get this value through event.target.value. Remember how useState returns a second element which is a function that will update the state? Well here we can simply invoke it passing through event.target.value.

import React, { useState } from 'react'

function ToDoListForm(props) {

   const [ inputTask, setInputTask ] = useState('')

   const submitHandler = () => {
     props.addUserTask({task: inputTask});
   }

    return (
      <div>
        <h1>My Todo List!</h1>
        <input
          type="text"
          value={inputTask}
          onChange={ event => {
              setInputTask(event.target.value)
            }
           }
        />
          <button onClick={submitHandler}>Add</button>
      </div>
    );
  }

  export default ToDoListForm

Finally, we will use the prop (props.addUserTask) passed down from the parent component that will retrieve the input values to an array of task once the user clicks the button. All we need to do is pass in the first element useState returns ,which is the current state, to props.addUserTask. I pass in an object because thats the way i'm carrying my data to the sibling component in the parent component. There I will take the value out and render it to the screen. I hope you now have a good understanding how hooks work! Thanks for reading and happy coding.

What is AJAX ?

Edwin Henriquez — Tue, 22 Dec 2020 14:58:19 +0000

Imagine scrolling down on twitter when suddenly the whole page refreshes on you! Imagine this happening every ten seconds just so twitter can show you new tweets. You were probably reading comments or a post that you were very interested in, but now lost your spot because the whole page just refreshed on you. If this happened, you will probably think the website is broken and never want to use it again. To prevent this bad experience, Twitter and Instagram use AJAX. AJAX stands for Asynchronous Javascript and XML. It uses an asynchronous processing model to render dynamic components of a page without having to refresh the entire page. The features that update itself without having to refresh the browser like amount of followers, new tweets, and new post are all results of using AJAX.

Working AJAX

Since you don’t have to load the whole page the data will load faster! This improves the users experience and also allows users to do other things on the page until that section of the page comes back with new data. AJAX gets the browser to request data from the server. Then the server sends back data that is in HTML , XML or JSON format. You can read more about AJAX response data formats here . Once the browser has successfully received the data it needs, it will fire an event that renders the new data to the page.

This AJAX call is enclosed in a jQuery on click event.
There are some settings you must set before making the AJAX call. The first to take a look at is the url property. You must have the correct endpoint to get back data from your server. In this, i'm using a joke api to render random jokes to my plain Jane page. The type property will take a HTTP verb GET or POST to retrieve data depending on what you need back. GET will retrieve data already saved to the database and POST will update the database with new information retrieved. Timeout will do what it says, timeout after five seconds if the server doesn't respond. BeforeSend method will display loading if it takes a while to load or an error occurs. Finally if the request come back correctly the success function will run which appends my jokes to the web page. If there is a problem with the request, the error function will fire off!

Now when you click the joke button it will request new jokes from the server.

Conclusion

My example was plain but I wanted to show at the simplest level how AJAX is used. This can be a powerful technique due to its asynchronous processing model. You can improve the users experience by having components on the page render without refreshing the page entirely. It also makes your data load faster. Also, using Ajax with Jquery can also make things easier when requesting and appending data back onto the page. Thank you for reading ! Happy coding!

A peek at Bloom Filters

Edwin Henriquez — Mon, 14 Dec 2020 14:39:30 +0000

I talked with a peer about a bloom filter and it sounded interesting so I decided to explore further. A bloom filter , not a snapchat filter, is a data structure that prevents expensive queries on a database. In this blog I will talk about the inner workings of the bloom filter that make the bloom filter so efficient. I also have never made a bloom filter nor am I an expertise on bloom filters. This is my understanding of how bloom filters work based on the research I have done.

How it's made ?

The bloom filter uses an array to store a one at a certain locations in the array based on the hash value. Remember arrays are zero based indexed so the first bucket will be 0 bits. The hash value will be a number that is less than the the size of the array. Based on the length of the array and the amount of hash functions used will determine the probability of a false positive. A false positive in this case would mean that the bloom filter will return true for a member in the data set when really it isn’t. This happens occasionally. The good news is that it will never give you a false negative. Returning false for a member that’s actually in the data set.

Visuals

Looking at the array you will see 0s and 1s filled in the buckets. Items are hashed and stored in the set. Hash functions will always hash the same inputs to the same values (hash value). In the above picture x, y, and z are present in the data base. We know this by looking at the hash values for the letters which reference where the one will be stored in the array. If there is a one at every location in the array, it will return true. In the case where a member is not in the set like W. When looking at the locations and if zero is the value. The bloom filter will return false immediately. Preventing an expensive query. Sometimes an input value that is not in the database can be hashed to the same value as one that is in the database. This is where returning a false positive can happen. Rarely this happens but determining how many items you want to store and hash functions you want to use before hand will prevent the chances of this happening.

Conclusion

The bloom filter is an approximate data structure because occasionally you can get a false positive. It’s efficient because it checks an array to see if an input item has been there before. If it hasn’t it can immediately return false. This prevents going through the whole data base which can take a lot of time and programmers are all about optimizing time complexity. Many companies use bloom filters like Bing, Medium, and bitcoin. Here is a link on how those companies put the bloom filter to use https://en.wikipedia.org/wiki/Bloom_filter#Examples. Thanks for reading!

Prototype Delegation

Edwin Henriquez — Thu, 19 Nov 2020 04:53:28 +0000

Intro

In JavaScript, a prototype is a hidden property on an object that references an object or is set to null. If the script runs and can’t find a property/method in the targeted object. It then checks to see if the prototype could potentially have the property/method. In the following examples I will demonstrate how prototype delegation works.

The Prototype

Here I will set car to be the prototype of different types of cars. We can use car to behave as a storage of many different methods but in this case we will have an accelerate method that will print to the console how fast a particular car accelerates. The keyword this will refer to the object that's at the left of the dot at call time.

Prototypal inheritance

To use the accelerate method on the hellCat object you have to set hellCat's prototype to car. A way to accomplish this is to create a property with the key as two underscores on each side of the word proto and the value the desired object. Car is now the parent to the hellcat object! When accelerate gets invoked with hellCat to the left of the dot, the script will run to see that it does not have the method inside hellCat. Since car is set to the prototype. Hellcat inherits the accelerate method so "Hellcat accelerates 0 to 60 in 3.6 seconds" gets printed to the console.

Prototype chain

Here Zr1's prototype is set to hellcat. When the script runs it will see that the accelerate method is not in Zr1. Although, Zr1 did inherit hellCat's characteristics. Which hellCat inherited characteristics from car object. This demonstrates the script going up the prototype chain until it finds the method in car.

I hope I could help you understand how prototype delegation works. This is also a form of prototypal inheritance which some programmers might not agree with. Maybe I'll post on that but until next time thanks for reading! Peace!

Intro to Bootstrap

Edwin Henriquez — Mon, 31 Aug 2020 13:57:14 +0000

Styling a website can be tedious in the first days of becoming a programmer. Maybe you just want to focus on the functionality of your website but still have a presentable website. You can do this with Bootstrap. A popular HTML, CSS, and JavaScript framework that can give us a responsive website without needing to write much code. In this blog I will show you how to plug in a navigation bar, form, and buttons to quickly make your website look appealing with Bootstrap.

Installing Bootstrap

There are two ways you can install Bootstrap. You can download the file and link to it locally in the link tag, otherwise link to a CDN that is provided on the Bootstrap website https://getbootstrap.com/. Also, if you want the drop down bars to work or any kind of functionality that comes with it. You must download jQuery and the JavaScript file that's provided on Bootstrap. I will only be using the css file in this blog.

A Simple Nav Bar

In Bootstrap you chose your styling by the name of the class. Since code is already pre defined, all you have to do is reference the class of a particular style. This format was grabbed from the components section on Bootstrap. You can adjust the default of that class. You would just have to go into the css file and make the changes you want whether it be a color, font size, etc. Heads up! It will be tons of classes already defined so I would use the find bar on your code editor to target the class quickly and make your tweaks. There are many components you can add to your navbar. Notice the anchor tag with a class of "navbar-brand". This allows the user to click the brand and redirect them to the link in your href attribute. You can also add drown down menus or add more links in your nav bar.Refer to the nav bar section under components to explore your options https://getbootstrap.com/docs/4.5/components/navbar/.

Adding A Jumbo Tron Because Why Not?

This jumbo tron was quickly created within seconds. Although the html structure looks simple to make, it is the "jumbotron" class that has properties to make it presentable. Note that there is a div with a class of "container" to center this jumbotron in the middle of the page. Without this class, it would take up the entire width of the screen. Bootstrap provides a grid system to position your components but you can use this class for now to center your components, add spacing, and padding around your elements.To find more formats refer to components section.
https://getbootstrap.com/docs/4.5/components/jumbotron/.

Conclusion

Bootstrap is used by many companies. Learning to use this framework will only benefit you and make your website look more appealing. Why work harder when you can work smarter? You can focus on the functionality of your website or app more. This is an excellent tool especially if you want to throw some css into your app quickly without devoting too much time to styling. Thank you for reading!

A Peek At jQuery

Edwin Henriquez — Tue, 25 Aug 2020 14:03:21 +0000

Learning how to program can be a bit intimidating at first, but no worries I've found an amazing tool that can inspire you to dig deeper into programming. That tool is j Query! A JavaScript library or framework designed to make manipulating the DOM easier and solve browser compatibility problems.

Getting Started

Start up your code editor and in your html file put a script tag inside your head tag. In the script tag you will link your src to a local file or a CDN (Content Delivery Network). For further instructions check the j Query download page https://jquery.com/download/

Selecting Elements

You can select any element in the DOM using $("value"). In this example i'm doing something very simple by just changing the header but only for you to understand the syntax. I follow up with .text("") method to change the text to "King of the Jungle"! You can select by specifying the $("element") , $(".className") , or $("#idName").

Styling

The way you style with j Query is by using the .css() method.The first argument will be the name of the property and the second a value. This can be very effective in manipulating multiple things at once or even just one element at a time without the use of writing loops in JavaScript.

Events

The .on() method is a popular method that will carry out code based on the specified event. Since we want a li to change color if it gets clicked. We must use the keyword this, which refers to the specific li that was clicked. If we were to use Vanilla JavaScript (JavaScript without j Query) there would be more code to carry out this event. This is more understandable, concise, and easy to write.

Conclusion

It is a great debate if new comers should learn j Query. Developers say it's easy to write spaghetti code because of it's simplicity. It was made to solve browser compatibility problems in 2006 but we don't have those problems anymore. Although, Uber, Twitter , Reddit and many more companies still use j Query.I suggest to learn j Query especially if you want to be on the front end.Then when you get a better understanding of things learn some JavaScript to have more control of your code.Even take a look into j Query's cousins React and Angular. There are many resources and YouTube videos that can help you. Why not learn something new? Happy Coding. Thanks for reading!

Copy by Value vs Copy by Reference

Edwin Henriquez — Tue, 30 Jun 2020 13:31:15 +0000

We hold values in memory using the keywords var, let, or const. These variables can behave differently depending on where you use it in your code but they all store data the same.
In JavaScript datatypes can fall under two categories, primitive datatypes (simple) and complex datatypes.

Primitive datatypes consist of:

Strings
Numbers
Boolean
NaN (Not a number)
Undefined
Null

Complex consist of:

Objects
Arrays
Functions

Based on the type of data you are storing in your variable they can behave differently when referenced to carry out a desired task.

Copy by Value

When a variable stores a simple datatype it scans the value making a replica , like Bumblebee does in Transformers, to keep unless it gets reassigned another value. Note you can reassign let and var. Const must be assigned immediately a value and can't ever be changed.

On line two, num2 copy's the value in num1 because num1 contains a simple datatype. Then on line four num2 gets reassigned the number seven but that doesn't change num1 since they both hold their own copies of a number.

Copy by Reference

When a variable is assigned a complex datatype it is really pointing to the address in memory where that complex datatype is
stored.

Although they have the same guts. These two objects have their own address in memory. Therefore it is the address they copy and not the value.

Let's step in line by line. On line one obj1 is technically pointing to the address of this object. Line two, obj2 is assigned obj1. Which must mean that they both now point at the same address. On line three obj2 is then accessed to update the number property to seven. Since obj1 and obj2 refer to the same object address. When we log obj1, the console will print the updated version of the object altered on line three.

Pass By Value

Simple datatypes get passed to a function by value. This means that the parameter (number) copy's the value. Making the parameter independent and able to do whatever it wants with its new value plus ten. The variable number on line five is not altered.

Pass by Reference

You may wonder why obj1 isn't an empty object. Well, it was passed in by referencing the address on line ten. Jumping into the function , on line seven obj is still pointing to the same address obj1 is pointing to. At this point obj1 now has a number property with the value of seven. On line eight it gets reassigned to point to a completely different object address in memory.

Conclusion

This concept can be confusing if your just starting to code in JavaScipt but that's okay. Be patient and practice. I suggest writing code that deals with copying by value and copying by reference so you can get solidify your understanding. Especially passing values to functions ! Just remember that variables copy simple datatypes and point to complex datatypes address in memory. Thank you for reading!