Forem: iAmGjert

Cascade with me down the sheet

iAmGjert — Wed, 06 Jul 2022 17:21:06 +0000

CSS

Have you ever sat down to read a document and thought, "Man, there is just so much black and white. This isn't fun to read..."? Well, you're not alone! Way back in 1994 Håkon Wium Lie thought the same thing and, while working with a computer scientist named Tim-Berners-Lee, invested the first iteration of CSS! While both men were working for CERN (Yes, the same CERN that recently started up their large hadron collider) they wanted to provide a way to style documents being presented. This led to the start of CSS, which mostly just allowed different fonts, font colors, and backgrounds.

CSS2 & CSS3

CSS2 was released in November of 1997 and addressed multiple issues with it's predecessor as well as updated it's styling options and design influences. It mostly centered around allowing CSS to be used on other media types so that it could be used for page layout design. Just a year and a half later CSS3 came out adding presentation-style properties. Key updates included rounded-borders and the ability to split text sections into multiple columns. CSS3 separated the CSS into individual modules, improving functionality. Without CSS, many web designers had to use techniques such as HTML tables to display information, which isn't always the easiest to read. CSS allows us to add more animation and less static properties to our webpages. Previously, we needed some additional programming and scripting, but now it can all be done in CSS3. One of the few downsides is that not all web browsers have the same default CSS stylesheet. In order to correct this and ensure your information is displayed the same way regardless of web browser, you'd have to use a CSS reset.

CSS Reset

CSS resets come in all shapes and sizes. Some are more thorough while others cover multiple properties and attributes you may not have even thought of. You can find a lot of different CSS reset templates online, but an example I use often is from MeyerWeb that coveres a large portion of what's needed in a CSS reset.

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

This CSS reset isn't perfect and doesn't cover all instances: notably it does not set a background. You may think it'd be a good idea to zero everything out via the universal selector, but doing so can cause you to miss some attributes. Some browsers will apply these styles to all elements, some will ignore them altogether on nested attributes and form elements. It's typically safer to explicitly list your elements and force the reset.

CSS4

Since we've already had three iterations of CSS, you may be asking yourself, "What about CSS4?!" Well, the answer is there is no CSS4. Since CSS was modulated, individual components have reached level 4, but others haven't needed to be or haven't been updated to that level and likely won't be updated or upgraded to that level. So, it's said that there is no and will be no CSS4.

A few Best Practices

Label the ends of your div. Sometimes it's helpful to have a comment label at the closing tags to help you keep track of your div's.
Test as you go! Test on multiple browsers as you're building so you don't have to make so many changes later on.
Use image optimization software to safe space without losing image quality.
Practice, practice, practice. There are always more then one way to style something, but some ways are more efficient then others! Practice makes perfect.
Try to keep all styling in one location. In-line style tags can be a pain. Avoid mixing CSS and HTML if possible outside of development.
JavaScript at the bottom! It was a common practice in the late 90's and early 00's to place your script tag in the head of your html. You want to place your JavaScript at the bottom of your documents. That will ensure that JS files will be loaded only when the content has properly been displayed.

Ways to Practice

There are plenty of ways out there to practice CSS, from styling your own projects to trying to recreate a webpage you're looking at. My favorite way to practice is CSSBattle. CSSBattle has new challenges everyday. It shows you a small 300x200px image and asks you to recreate that image using only CSS in as few characters as possible. It has a leaderboard for you to track your skills as you go and challenge your friends!

X marks the 'ngin'

iAmGjert — Wed, 06 Jul 2022 08:45:39 +0000

Getting Started

Web server: The computer that is serving web pages.

A web server delivers requested web pages. Users send requests along their local area network, and that request gets sent along to the webserver at the URL. That webserver will process the request and generate a response containing the requested URL's /endpoint index.

There are a plethora of webserver software out there, including XAMPP, Apache, Nginx, Tornado, Caddy, Microsoft Internet Information Services (IIS), and many more! The one you choose is typically up to personal preference, but today I'm going to focus on Nginx.

Nginx is an open source software developed in 2002. It is a webserver used for reverse proxying, caching, and load balancing. Nginx was designed with maximum performance and stability in mind. A few of the benefits of using Nginx are that it functions as a proxy server for emails. It uses a non-threaded and event driven architecture. It's simple to use and reduces overall load times for your clients.

Architecture

Architecture of nginx: master-slave architecure. Nginx supports asychronous, event driven, and non-blocking model

Reasons to use Nginx:
-Easy to install and maintain
the installation process is only three simple steps and you only need to remember one command to start/stop/restart the server.
-Reduced wait times for users
-Improved Performance
if you run multiple instances of the same server, nginx can route traffic for you in such a way that increases your overall speed.
-Load Balancing
some commercial load balancing programs are expensive. Nginx is free.
-Scalability
Some webservers are only able to handle a set number of concurrent requests. Nginx does not have that limitation and can will not throttle speeds depending on the number of incoming requests.
-No downtime during upgrades.
Nginx is able to restart without any downtime at all. Less downtime means less waiting and confusion for your clients.

Config

Core settings of Nginx are mainly configured in the nginx.conf file. The config is mainly structured in contexts. Some of the most important parts of the config file are:
Worker processes
-defines the number of worker processes that nginx will use.
-usually equal to the number of CPU cores
worker connections
-maximum number of simultaneous connections for each worker processes.
-tells worker processes how many people can simultaneously be served by nginx.
access & error log
-files used to log any erros and access attempts. Used for debugging.
gzip
-settings for gzip compression of nginx responses.

How to Install Nginx in 3 Steps:

Step 1: Install Nginx
sudo apt-get install nginx
Step 2: Adjust Firewall
sudo ufw enable
Step 3: Check your server.
sudo ufw app list
You should see a list of a few different applications. Nginx HTTP allows traffic along port 80 for unencrypted web traffic. Nginx HTTPS allows traffic along port 443 for encrypted traffic.
sudo ufw allow 'Nginx Full' is an example of the command to choose which configuration is choses.
You can use the command sudo ufw status to see the status of your firewall as well as all allowed traffic.

Manage the Nginx process

You can check that status of Nginx with the command sudo systemctl status nginx
this will output a message about nginx service and reverse proxy is active as well as some other useful information.

You're essentially setup! One of the last steps is defining your configuration and making sure your server files are accessible by nginx.

Navigate to and create a new file /etc/nginx/sites-available/YOUR APP NAME. Inside of this file you'll need to define a few parameters.

server {
listen 80 default_server;
listen [::] default_server;
root /var/www/**YOUR FILE NAME**;
index index.html;
server_name **YOUR SERVER NAME**;
location / {
try_files $uri $uri/ =404;
}

We need to make a copy of that file and put it in our sites-enabled directory. Use the command:
sudo ln -s /etc/nginx/sites-available/**YOUR FILE NAME** /etc/nginx/sites-enabled/**YOUR FILE NAME**

Lastly, there's already a default file being served on port 80. You'll have to move that file out of the /etc/nginx/sites-enabled directory to somewhere else.

sudo mv /etc/nginx/sites-enabled/default /home/default
This command will move that file out of the sites-enabled directory and put it in your home directory.

Now, restarting nginx with the command sudo systemctl restart nginx you can restart the nginx server (with no downtime) and it should now display the application you were attempting to serve.

VR/MR/AR/XR in Javascript?

iAmGjert — Tue, 28 Jun 2022 14:19:13 +0000

Starting with the basics

VR is Virtual Reality. Virtual Reality intends to bring it's users into a new reality to explore and experience things unavailable in the real world.

AR is Augmented Reality. AR uses a combination of sensors, cameras, and mapping software to brings virtual objects and images into the real world.

MR is Mixed Reality and aims to do a little of both of the above.

XR or Extended Reality is a sort of larger umbrella term used to describe tech that takes in human-to-PC interface and modifies it by either immersing you in a virtual world (VR), brings new things to or adds to your existing environment (AR) or does a combination of those things (MR).

The selling points of any good XR experience is how immersive it is to the user. Early on there were limitations in the hardware and users were only able to experience 3 Degrees of Freedom (3DoF) with devices like Google Cardboard or Oculus Go. That meant that while inside the experience the virtual world would rotate with the movement of your cameras, but if you were to physically walk forward or crouch up and down the world would move with you.

Over time a new system of inside out tracking allowed for 6 Degrees of Freedom (6DoF). Now, not only did the hardware track the rotation of your cameras, but also it's relative position in space and could translate that data into your XR experience.

Web-Based AR/VR

Getting started with AR/VR development can be tough, and there are a few arguments to be made for why starting out web-based may be the way to go.
1) Nobody has to download an app! Just click the link and your user is already on the way to using your AR/VR experience.
2) No fees to host your product on an app store! No waiting/review period to see if your app makes the cut!
3) Web Dev is cross-platform and can quickly get your product into more end users hands.
4) Web 2.0 effect. Apps are constantly building on and integrating each other. Developing open-source projects online allows for other users to potentially use your product in a more grand design.

Historical Challenges to Web-Based AR/VR

Historically web applications live in a browser sandbox, and aren't given much access to the external hardware that would be needed to build out an AR/VR experience worth coming back to. More modern day devices make this less of problem then it used to be, but AR/VR require a lot of processing power. They can be very CPU/GPU intensive and that could lead to poor performance in a browser application. On top of those cons, building for the web means you're going to have less access to the mature building blocks that already exist and make building VR/AR applications easier. (Things like Vuforia, UNREAL engine, Unity, or ARKit)

Things are changing, though...

Options for building Web AR applications

Most simple AR applications use a Marker system to anchor your AR objects in space. These systems use a camera to locate a symbol nd generate content relative to that symbols location.

More modern Markerless AR content also exists. AR that through an understanding of the world around it can recognize and map out horizontal surfaces.
It uses SLAM (Simultaneous Localization and Mapping) tracking. Using ARkit and SLAM tracking we're able to make unique AR experiences such as "portals" that have been seen on popular apps such as Snapchat and Instagram.

Three.js is a JavaScript based 3D library that allows you to write JavaScript code to instantiate 3D graphics and objects.

aframe is an Entity Component System that can run on top of three.js

An Entity Component System is a "Data oriented architectural systems that lend themselves well to game development because instead of of object oriented objects that derive their identity from a class or subclass they inherit from, entities derive their identity by their association with named sets of data (i.e. components) and you can mutate or assign those components to other entities on the fly and those entities wills start to adopt behavior that comes from those data sets through the systems that process those components." -Don Shin, CrossComm

Three.js has a free editor.
aframe has a visual inspector.
Below is an example of a primitive entity object.

<a-entity id="box1"
        geometry="primitive: box"
        material="color: #FF9999; shader: flat"
        position="0 0.15 -5"
        rotation="0 45 0"
        ></a-entity>

These tools are not as well polished as unity, but gives hope for the future of web development as better ecosystems for building 3d environments through web based technologies continue to emerge.

AR.js is a JavaScript framework (abstraction of JSARToolKit5) for building AR applications.

AR.js has 3 key features out of the box -

Image Tracking using Natural Feature Tracking (NFT)
Location Based AR
Simple Marker (patterns, QWR codes) tracking

You can use AR.js on top of aframe of just AR.js alone.

Below are some rendered objects using aframe

Building your own Authentication!

iAmGjert — Fri, 17 Jun 2022 08:48:31 +0000

What is authentication?

Authentication is the process of verifying that a user is who they are. Nowadays almost everyone is getting so used to clicking "Login with Google" or "Login with Facebook" etc. that it's becoming second nature. Most everyone has a Google or Facebook account so it makes it easier on the user to not have to go through another tedious account creation. Similarly, it makes it easier on the end developer because most of what they'd need from a user to create a basic account is provided by those services when you use them to authenticate users on your application. What happens, though, when your user doesn't have an account with one of these 3rd party services? Are you expecting all your end users who don't have a Google or Facebook account to sign up for that service, to now use your service? That's expecting a lot from an end user! Recently I looked into different ways of building your own authentication service for your application and it was a bit simpler to setup then I'd originally thought. Using a package called bcrypt, a password hashing package that was first developed back in the 90s, I was able to build a mock database of user information very quickly.

Setup

To start, I made a basic express service using the npm init command to start my project and then npm i express bcrypt nodemon to install the necessary dependencies.
Next, use command touch server.js to create your server file. At the top of server.js, import express and bcrypt.
Create your express app and use the .json() middleware to parse incoming json.
Create your database that will hold all of your user information. It will contain an array of user objects. Typically you'd use some type of database like mongo or sql to house this data, but for the sake of this example I will be using a local users array.

const port = 3000; // <--- run the app an any unused port
const app = express(); // <--- create express app
app.use(express.json()) // <--- middleware to parse incoming JSON
app.listen(port, ()=>{
  console.log(`Server listening 👂 http://localhost:${port}`)
})

const users = []; // <--- fake local database

The hard part is done! Now, for the final part we need to ensure we have a script for you in your package.json file to run your server, and keep it running while we work!
If you've been following along you should have a "test" script in your package.json file. We're going to rename that script "start" and pass it a value of "nodemon server.js"

"scripts": {
    "start": "nodemon server.js"
  }

Test your script by running npm start in the terminal.

Now, we just need to build out a few endpoints for your server to hit and test some information. Paste these functions into your server.js file under your database declaration:

app.get('/', (req, res) => {
  res.status(200).send('Your server is working!');
})

app.get('/users', (req, res) => {
  if (users.length > 0) {
    res.status(200).send(users);
  } else {
    res.status(418).send('No users currently.')
  }
})

app.post('/users', async (req, res) => {
  try {
    const salt = await bcrypt.genSalt(); // <-- value can be incremented for more encryption.
    const hashedPassword = await bcrypt.hash(req.body.password, salt); // <--can be modified to take in # of 'rounds' instead of salt (default 10)
    console.log(salt);
    console.log(hashedPassword);
    const user = {
      name: req.body.name,
      password: hashedPassword,
      email: req.body.email
    }
    users.push(user);
    res.status(201).send(user);
  } catch {
    res.status(500).send();
  }
})

app.post('/users/login', async (req, res) => {
  const user = users.find( user => user.name = req.body.name );
  if (user === undefined) {
    return res.status(400).send('Username not found. Please check your credentials.')
  }
  try {
    if (await bcrypt.compare(req.body.password, user.password)) { //passwords match
      res.send('You\'ve successfully logged-in.');
    } else  { //passwords don't match
      res.send('Login failed, please check your credentials.');
    }; // <-- compare is secure to avoid 'timing attacks' bcrypt handles for you
  } catch {
    res.status(500).send();
  }

Now that we have these functions written, we have a few endpoints we can hit:

GET '/' Should return a status 200 and a message letting you know your server is working.
GET '/users' Should return a status of 200 and the entire array of users.
POST '/users' Should take in a user object with a name, password, and email property. This endpoint will salt and hash your password, as well as create a user in the users array and store the users information + salted/hashed password.
POST '/users/login Should also take in a name, password, and email address. This endpoint will first check if the name exists in the database, then if it does it will attempt to check if the password provided matches the de-hashed password stored in the users database. Will return status 400 and message that username doesn't exist if name isn't in the database. Will return message stating successful login on successful password/username match. Will return message stating login failed on unsuccessful password match.

I've included some comments in the code itself to try to help explain some of the hashing/seeding methods. For more information check this link

Vim? Vim who?

iAmGjert — Mon, 06 Jun 2022 11:17:08 +0000

Preface

There are a plethora of terminal editors out there to choose from and if you'd like to explore a few more thoroughly I'd recommend checking out this list published last year by Aaron Kili. At the end of the day most editors accomplish he same goal and the one you use is up to personal preference. I am still learning everyday and by tomorrow my opinion could be completely different!

Over the course of the last few weeks the projects I've worked on have had me editing files directly in the terminal. At first, the terminal editors I used was dictated by what tutorial video I was watching and whether or not they had me download some editor. Now, when I need to edit a file directly in the terminal I almost always use Vim. Vim is available on any Linux machine and is a powerful text editor. I've taken a little time to learn the basics of Vim to quickly navigate and edit specific lines in my files. Even knowing just the simplest of commands that the Vim editor has to offer has made it a tool that I use daily as a developer.

History of the Vim editor

Interestingly, Vim wasn't always intended to replace vi. Vim started out as "Vi IMitation" on systems as early as "Amiga", a personal computer introduced in 1985. Vi was originally written way back in 1976 by a programmer named Bill Joy, but since around 1992 when Vim was first released it has been almost completely replaced. Over time Vim was renamed to "Vi IMproved" as it was ported throughout many other platforms. Vim's original author and, according to this Wiki article, "benevolent dictator for life of Vim" is Bram Moolenaar. (pictured below)

Learning all that Vim has to offer could take a long time, but could be highly beneficial as a programmer if you've got the time. There are hundreds of commands and it's highly customizable. It has a shallow memory fingerprint and it's commands can perform highly complex tasks with just a few keystrokes. With just a few basic tutorials I was surprised how easily I could manipulate text documents easily in environments that I wasn't able to access a UI. I can also rest well knowing that most all machines I access will have the Vim editor pre-installed and I can use the commands I've learned on these systems.

Most useful commands

Some of the commands I find myself using the most are gg and G. These commands bring you to the first and last line of the document respectively. Traversing the vim terminal may seem tedious at first, but commands like 5gg or 5G will bring you directly to line 5. Since by default you can't just click where you'd like your cursor to be memorizing some of the commands to move around the terminal will speed up your hacking time. If you lose your cursor zz will center it on the screen. Pressing i puts you into 'insert' mode so you can type at the position where you cursor was, and I does the same, but at the start of the line your cursor is on.

Enable mouse in vim

Vim actually does have mouse support, you just have to know how to enable it! navigate to your .vimrc file and add a line. It's that simple! There are a few different options on what line you can add to give your mouse functionality in the different modes that vim has. The commands below enable special use cases as you see fit:

a = all
n = normal mode
v = visual mode
i = insert mode

There are plenty of other commands you can enable if you want. To view them all use the help command or click this link to view a command cheat sheet.

A Virtual Machine a day keeps the Docker away

iAmGjert — Mon, 02 May 2022 13:07:55 +0000

What is docker?
Docker is a set of platform as a service (PaaS) products that use OS-level virtualization to deliver software in packages called containers. These containers can run reliably in any environment.

What does that mean?
When you've build an app on your machine running windows and you now need to test your app with one of your testers, but they are using an entirely different system. How can replicate the environment your software needs on any machine? That's where Docker, or any other containerization platform comes in.

Once upon a time if you wanted to run or start any web application you'd have to start off buying a physical server. Once your server was configured and running your application, you may want to expand and setup multiple servers to help manage traffic to your application and ensure you don't crash, so you buy and setup more physical servers. Well, that process was all taken into the virtual world with the introduction of cloud based computing. We were able to find a way to setup these physical servers, virtually in the form of virtual machines. We would use software called hypervisors to divide our server's physical resources into separate self contained virtual machines, each with their own OS, CPU, Memory resource, and most importantly, it's own kernel (the core of a system's operating system. Operating System is a system software. Kernel is system software that is part of the operating system. Operating System provides interface between user and hardware. Kernel provides interface between applications and hardware.). Now lets say we wanted to do that for 3 different applications on our server, if would look something like this:

All those virtual machines take up a lot of resources and also take a while to start and setup, each needing it's own copy of various libraries to lay the groundwork for your applications. The introduction of Docker Containers changed that. Instead, Docker containers are able to carry a lot less resources while still maintaining it's ability to run the application quickly, and in a quarantined state by allowing all the resources to flow through one kernel. The Docker Engine uses something called the docker daemon (which in my understanding, functions similarly to the hypervisors with virtual machines) to act as a sort of 'brain' for your docker. It will manage the docker image itself and help allocate resources from your host machine, looking something like this:

Since each docker container doesn't have to contain it's own OS, the docker daemon is able to communicate directly with the host machine's OS and allocate the appropriate resources for running each container. It also ensures each container is still isolated from the host machine and other containers. We're saving a ton of disk space by not saving a separate OS in each container.

These containers are ultra portable. A container has all of the information and dependencies needed for your application to run and can be run on any system environment with the same result. You can now send your container to your testers and regardless of the system they're running your app should perform as expected on the host machine.

Similar to how NPM is both an application and a library, Docker offers an extensive library of applications and builds that come pre-packaged for you as a docker container called the Docker Hub. The Docker Hub is a public repo of Docker images that boasts over 100,000 container images from software vendors, open-source projects, and individual developers alike. One day, even you could have your very own application image hosted on the Docker Hub for other users to pull down and tinker around with. I hope this brief explanation of Docker and it's uses has shed some light on the power of docker and it's uses in web development and deployment.

Rumor is there's an "event bubbling" up!

iAmGjert — Mon, 25 Apr 2022 12:36:47 +0000

I'm sure at this point we've all got a pretty good idea what an event is: something that happens. That could mean hovering your mouse, a keystroke, a click, etc. Tracking events help us make our webpages interactive. That being said, have you ever heard of "Event Bubbling?"

Event Bubbling is a term used to describe the fact that when an event happens in a child node, that same event is tracked throughout it's parent nodes all the way to the top. Since we're already talking about bubbles, I'm going to use a water/diver analogy to help explain what I mean by event bubbling. In this analogy the top or surface of our webpage will be the <body>, and all <div> inside will be divers of different experience levels.

<body>
    <img src="/images/surface.png" width="300" height="100">
    <div>
      <img src="/images/beginnerDiver.png" width="100">
      <div>
        <img src="/images/experiencedDiver.png" width="100">
        <div>
          <img src="/images/expertDiver.png" width="100">
        </div>
      </div>
    </div>
</body>

At the top level, we have our body/surface. Nested one level lower we have the beginner diver. One level lower then that, we have the experienced diver. Finally, in the deepest depths, we have our expert diver.

Now that we have our webpage, let's add some events! The simplest would be a click event, so I'll go ahead add an onclick event to the surface level. Since the surface level is the body of the webpage, clicking anywhere should trigger this click event. I'm also going to add a click event to the expert diver level. This is what our code looks like now:

<body onclick="alert('Surface')">
    <img src="/images/surface.png" width="300" height="100">
    <div>
      <img src="/images/beginnerDiver.png" width="100">
      <div>
        <img src="/images/experiencedDiver.png" width="100">
        <div onclick="alert('Expert')">
          <img src="/images/expertDiver.png" width="100">
        </div>
      </div>
    </div>
</body>

The experienced diver is nested pretty deep down! If he was to let up a bubble (in this case: the click event) what do you think would happen? If you guessed that it will alert "Expert" you'd be partially correct!

We also get an alert for the surface level!
The reason being, both alerts are tied to the same event; in this situation the event was a click. That event "bubbled" its way from the expert diver to each of it's parent nodes (experience diver and beginner diver), but neither of those nodes had a click event so nothing happened. It reached the top and that same click event bubbled through the surface click event and alerted us! If I was to add an onclick event to each level of the nest and then click on one level, you'd see it execute at each level and then it's parents shortly after.

<body onclick="alert('Surface')">
    <img src="/images/surface.png" width="300" height="100">
    <div onclick="alert('Beginner')">
      <img src="/images/beginnerDiver.png" width="100">
      <div onclick="alert('Experienced')">
        <img src="/images/experiencedDiver.png" width="100">
        <div onclick="alert('Expert')">
          <img src="/images/expertDiver.png" width="100">
        </div>
      </div>
    </div>
</body>

That, in a nutshell, is event bubbling!

What is NPM?

iAmGjert — Mon, 18 Apr 2022 12:52:42 +0000

Starting out in my JavaScript journey there were a few things I was told to just "accept" and not worry about how they work. There are plenty of processes and moving parts when writing code and one that I never quite understood was NPM. NPM stands for Node Package Manager, and is used in a few ways. NPM provides an online database of 'packages' or JavaScript tools that can be published by anyone and used in your projects. On top of being an online database, NPM is also a command line tool used to interact with that database and install/manage the packages you install from the database!

What is a package, though?

Think of packages like the brick and mortar of your applications. You can install and combine multiple packages together in order to create the most efficient program for your end users and all those packages are easily maintained by NPM. The NPM database helps keep all your packages up to date by allowing the packages to be managed and updated by their publishers and other developers. Whenever an update or improvement is made to a package and uploaded to NPM's database, all users who currently use that package can easily fetch those updates from the server and always keep their packages up to date. NPM also helps handle package dependencies.

What is a dependency?

Some packages are built directly upon other packages in NPM and 'depend' on them to function properly; these relationships are called dependencies. Dependencies would typically cause problems when trying to use different packages, but NPM handles all the hard work for you. When installing packages through NPM the service will automatically search for and install all required dependencies for any packages you're attempting to use/install.

In conclusion:

NPM is a wonderful tool for developers to not only share reusable code, but to keep that code updated and working for all future projects. There are hundreds of packages to chooses from and plenty that can be built and expanded upon. Who knows, maybe one day you'll be posting and updating a package of your own for the world to use!

A few of the most popular libraries (in no particular order, just ones I'd heard of or used before) are:
jQuery: a small and fast feature-rich JavaScript library making HTML document traversal, manipulation, and event handling much easier.
Express: noted as one of the best NPM packages offering a server framework for web applications.
Lodash: A particularly useful tool, especially when working with lots of numbers or arrays. Makes the creation of complex functions much easier.
React: a declarative, efficient, and flexible JavaScript library for building user interfaces.

Copy by Value vs Reference

iAmGjert — Fri, 18 Feb 2022 19:15:30 +0000

Intro
There are two ways to pass a value to a variable in JavaScript and understanding how they operate is fundamental to your success at manipulating data in your code. In this short blog I will explain the differences between the two and provide examples along the way. Variables will either be passed a copy of the value of they're being assigned, or be passed a reference to the value they're being assigned.

Copy by Value
When working with primitive data types (numbers, strings, Booleans, null, and undefined) your variables will be making a copy of the value they're being assigned and represent that specific copy of the value. Any changes to the original data will not effect the copy that was made and stored in the variable we've created. Vice versa, these values stored into our variable can be manipulated without any changes to the original data.

In the image above, b is being assigned the value stored in the a variable. Since the a variable is storing a primitive data type b is assigned a copy of that value. Any changes made to a later on will not effect b's value.
a === 1 //true b === 1 //true



a = undefined;
console.log(b); // prints 1, not effected by a being reassigned.

Copy by Reference
When working with complex data types (Objects, arrays, functions) your variables will not make a copy of the value they're being assigned to, but instead will make a reference to that data. Any manipulation of our variable will effect the original data since our variable is just a reference to the original data. Similarly, any changes to the original data will effect our variable as well.



let a = {
   name: 'Object',
   color: 'blue'
}
let b = a;

In the code above, the a variable has been assigned to an object with two properties. Just under that, we've assigned the b variable to the a variable. When the b variable is assigned here, it will be assigned a reference to the same object the a variable is already assigned to. Any changes to the b variable will effect the original data stored in the a variable.
b.color = 'orange'
Since both variables point to the same object, the color of the object both variables point to will be assigned to 'orange'.



console.log(a); // prints {name: 'Object, color: 'orange'} 
console.log(b); // prints {name: 'Object, color: 'orange'}

In Summary
It's important to know whether the data you're working with is a copy or a reference. If you're working with a copy it's less detrimental to the overall program as your changes are localized to that copy of the data. When working with a reference your changes effect the overall data and can produce unwanted changes later in your code if not caught.