Hello site! Problems with HTML and how to fix them.
Solving headaches with modern web development.
Why I am passionate about React and Next.js
I am really passionate about these programs because they make my life easier
as developers, and they challenge my brain.
I love competing in challenges with my friends to
make the coolest looking website, with the best possible code.
When I learn new things, I become creative. Even though these
are hard technologies to learn, they will improve your life in
the long run, and they can help you get a 6 figure job wherever you want.
You can get these same advantages too, if you learn basic programming
principles, and try hard (without quitting) to learn as much as you can.
The trick is to follow the rabbit hole wherever it leads you.
Problems with Standard Web Development
When developing a website, most think HTML is the only option.
This is not the case. While HTML is simple and can do some things,
you need Javascript to do much. When developing, you often run into
many roadblocks when using HTML and Javascript together.
Here is a simple example:
index.html:
The demo of this site's code.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test Website</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<h1>Price of Gas:</h1>
<h2 id="gasprice">Loading...</h2>
<script src="./gasprice.js"></script>
</body>
</html>
index.js:
const gasprice = 3.00 // $3 per gallon
var gaspriceElement = document.getElementById(‘gasprice’)
// notice the long, overcomplicated way to get the element from the HTML
document.eventListener(‘load’, () => {
gaspriceElement.innerHTML = gasprice
})
The demo of this site's code.
Possible Solutions
The way to add dynamic content to web pages is verbose, and overly complex. A way to fix this would be to allow the addition of variables to HTML. But, if the variable is undefined or has an error, what should the browser do? Default to a value like “error: undefined” or refuse to load the page? Well, this solution, the more you think about it, would not be viable. Another idea that solves the problem is to make a program that takes a special kind of HTML with variables inside it, and turn it into normal HTML with automatically generated Javascript to fill the gaps. This solution is great because it allows you to catch errors before they happen, since there is a program to parse this type of file. A team had the same problem, and created this idea.
React
React was started by a small group of developers at Facebook who struggled maintaining the large codebase of HTML and Javascript, and wanted a way to minimize the complexity of the codebase. They created a software that spit out a regular website that produces the same results as the React code, but you never had to touch the complex side, only dealing with the React codebase. React allows you to write HTML in Javascript, and include variables and functions which are either hardcoded if they never change, or have a state function attached to them to update the contents of a webpage when the variable changes.
DRY
DRY, or Don’t Repeat Yourself is a programming principle to make the lives of developers easier. It focuses on laziness. Basically, the principle states that you should repeat yourself as little as possible. This is helpful when you repeat a block of code, and need to change part of it, when you have to find it over and over in the code, it will be a pain. Instead, you can write a function to produce the same functionality but with a smaller footprint.
Why DRY in React is important
React solves the problem, but only partially. When you use React, you start noticing some common patterns that seem to be unneeded. For example, if you want to make a button, you always need to import React at the top of the script. This is frustrating, because you spend hours working on a cool button that says hello when clicked, to find that when you go to test it, you get an error saying React is undefined.
Next.js
Next.js is a “metaframework” built for React that solves this issue, and many more. Normally, if you intend to have multiple pages, you must write your own router, which tells React what file to load when the user navigates to a certain page. Next.js automatically implements this, imports React at the top of your files, and has several special features like SSR (server side rendering) that make your website more performant.
Next.js Extras
The team behind Next.js also made some helpful components for web pages. Have you ever noticed images that load super slow? Next.js provides an Image component, a function that returns some HTML, that tells the browser to lazy load images, and give them a lower priority. So, as opposed to the images loading first, then the other content, this will prioritize other content over images, unless directed otherwise.
Fun Facts
Elton John's website. Built with Next.js
- Next.js is a web development framework for creating reactive, server side rendered web pages to the client.
- Next.js was created October 26, 2016 by ZEIT. It was recently bought by Vercel, a popular deployment service for developers.
- Some famous people’s websites, like eltonjohn.com, are built with React and Next.js.
Elton John's website. Built with Next.js
