Forem: Zachary Ray Farrell

The Chaotic Neutral In React That Is CSS

Zachary Ray Farrell — Fri, 26 Aug 2022 16:54:28 +0000

As Software engineering students, we tend to focus on the functionality of our code rather than the way it is presented. While CSS is generally used based on the structured design of our React code, it can be used in a completely different way. For that reason I consider it a chaotic neutral. CSS can be used in React in a way that ignores restrictions and the general authority and order of our code. Many of the React components we have are children to a parent component. The child is generally under the authority of the parent, meaning that any restrictions or boundaries on the parent are passed down to the child component.
They are also initially rendered in a static position where the elements render in order, as they appear in the document flow. There are other position settings that can be used to change where in the document flow an element is or whether it is even included in the document flow at all. We'll discuss some more below.

main {
  width: 90vw;
  margin: 5rem auto;
  max-width: 620px;
}

This is something that I learned the hard way when styling my website application. Looking at the CSS above and looking at the code of my application, we created a structure for the size of the container inside of the parent component's tag which is the container for all our child components we render on the page inside of the body. Now there are multiple ways that you can display your code using React. For the images displayed on the site, some of the image sources are inside of our db.json while some others are coded directly into the React component itself. One thing they both have in common is that when displayed, they will follow the restrictions given to them from their parent component and its CSS styling.

`return (
    <>
      <div className="background-home"></div>
      <div className="home-page">
        <div className="head-logo">
          <h1>Welcome to The Reptile Store</h1>
          <img src="https://i.pinimg.com/736x/28/f0/2c/28f02c2fbaf3032fb199b544e8d48af0--woodburning-lizards.jpg" alt="lizard logo" />
        </div>
      </div>
      <div className="new-reptile-form">
        <h2>New Reptile</h2>
        <form onSubmit={handleSubmit}>
          'More code in here'
        </form>
      </div>
    </>
 )`

The code above is a child component rendered within our , therefore is restricted to the given container dimensions. What if we wanted to render something inside of a child that does not adhere to the order it is designed? When designing a website you want to do everything you can to make the application a pleasure to use. This means that not only does it need to function well but you also want it to be physically appealing to the user. The appearance helps to bring users to your site and makes it seem more professional. A great way to make your site unique is to give it a background image that catches someone's attention. That can be difficult however if what is rendered on the home page is a component with a container. Let's look at the home page coded below.

Looking at the picture above we can see what is rendered on the home page. When first attempting to display the background image it is displayed inside of the blue shaded container area. The image position is static when first placed and it had a relevant location rendering as another div in line with the other two in the component. This was a problem as its dimensions were controlled by the structures set in its parent component. This makes for a bad experience if you are someone trying to use the website and want a visually good experience. That was when it came time to learn about 'position:' when it comes to CSS.
Using position we can tell different elements inside of a component how to render based on its position to other elements or even the entire page. It can even be used to fix the element to the page or keep it from disappearing when scrolling. Great for navigation bars and background images!

.background-home {
  background-image: url("https://wallpapercave.com/wp/8pH3E4U.jpg");
  background-size: cover;
  position: fixed;
  left: 0;
  width: 100%;
  top: 56px;
  height: 100vh;
}
.home-page {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  padding: 1rem 1rem;
  margin: 5px 50px;
  border: solid;
  border-radius: 10px;
  border-width: 2px;
  background-color: rgba(245, 245, 220, 0.7);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.new-reptile-form {
  box-sizing: content-box;
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  padding: 2rem 1rem;
  margin: 5px 160px;
  width: 250px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  border: solid;
  border-width: 2px;
  border-radius: 10px;
  background-color: rgba(22, 124, 22, 0.5);
}

Man that's a lot of code there! The most important piece of CSS in all three of these classes is the position. If you notice for the .background-home class, position is fixed. The element is positioned relative to the browser window so it takes up no space in the document flow. At the same time we set the position of each other div to relative where the element is positioned relative to its normal position.

Overall, React has been an important tool to learn in Software engineering but just as important is CSS in making an application special. It is what makes someone's code individualist and a form of art. What makes it more difficult is that we have plenty of guidance on the fundamentals of coding in JavaScript and React but very little on CSS. So if you are able to learn a lot about CSS it demonstrates to others your determination and creativeness.

Understanding Array Methods will improve your Code

Zachary Ray Farrell — Fri, 05 Aug 2022 18:50:49 +0000

Imagine for a second that you are outside in your backyard raking leaves. Now think about all of the operations performed within your body that allow for that to happen. More specifically think about what your brain tells the rest of your body. In a way your body communicates using a type of code. And that code allows your brain to pass information to parts of the body telling it when to pull back the rake and how far to move it. Your body then sends information back to your brain informing it of the movement in the form of sensory and visual information. For our purposes, you can consider the information being passed from the brain to the body as our arrays. The parts of the brain and body that do something with the information or arrays we can consider the lines of code or the program. While you need to know where the arrays are coming from, the ability to manipulate and edit that information once passed can make it useful in many ways than simply displaying it once received.
An array is a single variable that can hold many elements inside of itself. These elements can generally be a combination of numbers, Booleans, strings, symbols, objects, null and undefined. Arrays are a great tool because you can use all of these at the same time in the same array. You can even use key/value pairs or multiple objects with objects nested inside of them as well.

Array methods are the tools you will use to access and change the information contained within an array based on specific selections. The more proficient you are at using array methods the more options you will have that allow you to create functions and events that require less code making it easier to read.

comboNames = ["Apple", "Pear", "Apple", "Melon", "Apple"];
let map = comboNames.reduce((cnt, cur) => (cnt[cur] = cnt[cur] + 1 || 1, cnt), {});
console.log(map)
//{"Apple": 3, "Pear": 1, "Melon": 1}

In the code displayed above we use the .reduce() method on an array of fruits. This method allows you to take an array that contains many of the same value and reduces it to that variable and the amount of it that was contained in the array. It then displays them as key/value pairs in a new array that we created.

If you have something inside of a large array that you want to use it would help if if there was a way to find its specific location within that array. You could then run a different method to do something with it based on the found location. See below:

comboNames = ["Apple", "Pear", "Apple", "Melon", "Apple"];
let index = comboNames.indexOf("Apple");
console.log(index);
//[0]
    if (index > -1) {
        comboNames.splice(index, 1);
    }
console.log(comboNames)
//["Pear", "Apple", "Melon", "Apple"];

Now in the code displayed above we have an array of fruit. Some of the fruit is in the array multiple times. If for some reason you have to remove one of the fruit from that array you have to find it first. There's more to it than just finding it on the screen. Sometimes you'll work with very large arrays and for the computer to remove it, you have to find the specific index of that item within the array. For that we can use .indexOf() at the end of the array variable. In the parentheses you place whatever it is you need to find. Using .indexOf() will return the index value for the location of the first item that matches what it is looking for.
Index of displays an index for an array starting at 0 for whatever it searches for. If it does not locate what it is told to it will return a -1. Using that we can create an if statement telling it to only run some code if the index that is returned is greater than -1. We can use the .slice() method on the array when the if statement returns true. There are so many intricate ways you can use array methods to improve your code. It simply takes some problem solving skills tied in with your knowledge of the methods you can employ to make the code work for you.

One interesting thing to note about arrays is that it can also be used to retrieve both functions and callback functions when called upon properly. See below:

const your_function = function(){ console.log("I am your function")};
const group = [0, "string", false, your_function];
group[3]();
//"I am your function"

As shown above you can call the function using a variable that is inside of the array. Simply call the array variable name and its index. Once it returns that value it then will run the function the variable calls on. This is just another example of how you can manipulate an array to do what you want in a different way. But the main thing to note is that practicing the various methods like those not shown here is how you improve your code.

Graphene-The "Magic" Material

Zachary Ray Farrell — Thu, 04 Aug 2022 14:58:32 +0000

With a Simple Twist, a “Magic” Material Is Now the Big Thing in Physics by David H. Freedman, published in Quanta Magazine is an enticing article which explains the recent discoveries surrounding a material called Graphene. Graphene is a one-atom thick sheet of carbon in a hexagonal lattice. This material has many unique properties. It is roughly 200 times stronger than steel while also being a great conductor of heat and electricity. The biggest recent breakthrough in the field of solid-state physics was made by Jarillo-Herrero who in 2018 found superconducting properties in graphene when taking two sheets and placing them on one another then rotating them slightly. A superconductor is any material that can conduct electricity without heat, sound, or any other kind of energy being dissipated from the material. The difficulty with superconductors is the need for the material to be very cold in order to superconduct.
Graphene is the next step because it is a path toward higher-temperature superconductivity. This material if perfected as a superconductor will revolutionize many industries. The most important observation was the angle of twist in the bi-layered graphene has to be 1.1 degrees for superconductivity to occur.
Antonio Castro Neto another physicist, who in 2007 suggested the possibility of creating different properties when pressing two misaligned layers of graphene together was quite surprised at Jarillo-Herrero’s findings. Castro Neto said of the findings, “It would have been crazy to predict superconductivity based on what we knew but science moves forward not when we understand something, it’s when something totally unexpected happens in experiment.” In 2011, Allan MacDonald, a theoretical physicist, was studying the behavior of bi-layered graphene an the “magic angle” and found that a free-flowing electron could move in between the two sheets without gain or loss of energy at 1.1 degrees. After his paper was published not many experimenters tried to test his theories out as they saw it as being too simple of an explanation. Most shied away from it and moved onto other research but not Jarillo-Herrero. He was adamant that there was more to graphene than they had found. He kept trying to improve the process of creating the sheets of graphene and the way that they sustain the required angle. Then a student of his in 2014 showed him a graphene device that when subject to an electric field became an insulator and when the strength of the field was increased its properties changed from insulator to superconductor. They spent six months secretly recreating the results and getting their measurements perfected. Then they submitted their paper for review and publishing. In March 2018, when the paper was published by Nature, they discussed their findings with the rest of the physics community.
The most important aspect is that the physics community is learning more about the properties of superconductors from their experimental findings. With a small tweak of an external electric field on the bi-layered graphene they are able to change the properties of the graphene from conducting to insulating to superconducting. The changing of its conducting properties due to an electric field shows that the fee electrons are being slowed to a near halt, and when that happens it allows the electrons to pair up and create a kind of electron superfluid. That superfluid they now believe is the main feature of all superconductors and is most likely why they need to be at a low energy state or really cold to work.
The work done by these physicists is truly amazing in the field of superconductors. But most importantly it is a breakthrough that will lead to more breakthroughs which in turn will revolutionize every industry and change daily life for the better. To create a room temperature superconductor that can also be mass manufactured will have important effects on the world. Graphene has many broad applications already and when it becomes used as a superconductor it will be ever more important. Batteries, transistors, computer chips, energy generation, supercapacitors, DNA sequencing, water filters, antennas, touchscreens (for LCD or OLED displays), solar cells, Spintronics-related products are all areas that can be improved by graphene already. If we can get the graphene to be a superconductor at room temperature then we will be able to improve even more. In Michio Kaku’s book, Physics of the Future, he talks about how superconductors will help to improve our future. He explains how they will allow us to create advanced quantum computers which will be useful for many complex calculations and scientific advancements. Another important achievement will be the ability to create a hand-held MRI machine utilizing superconductors. This will lower costs in general and allow for more accurate use. Graphene being an extremely strong material will also be used for building and machinery.
Kaku, Michio. Physics of the Future. 1st ed., New York, Anchor Books, 2011.