DEV Community: sholm

Custom Css loader themes on steam deck

sholm — Mon, 19 Dec 2022 03:26:24 +0000

intro

In this article I will going over how to create custom CSS elements on the steam deck UI. You will need to have Decky-loader installed to start, you can find the instructions at there github. Now firstly lets understand what css loader is if your not already familiar.

what is css loader

Css Loader is a npm module mostly used for web-pack that interpretes @import and url()'s to import/require, but when it comes to the Decky-loader, it is a plugin that allows for the download of custom css elements like curved borders, custom backgrounds, color changes, and more. If you have not installed css-loader through Decky-loader now is the time.

Creating custom themes

I highly recommend using this template repository to begin messing around.

When creating a custom theme the file structure falls upon a theme.json and shared.css file, example below

//theme.json
{
  "name": 'menu color theme'
  "author": "Me",
    "manifest_version": 1,
    "target": "Other",
    "description": 'changes steam menu color'
    "inject": { "shared.css": ["MainMenu"] }
}

//shared.css
// \/ the class name.
.mainmenu_Menu_23IDi { background: #36146e}

The shared.css file will use the class names to add on or edit the way it appears, the theme.json file will determine where everything will be displayed and apply options (if any) to the theme. The method to obtain the class names of the steam deck ui is through the CEF debugger.

How to use the CEF Debugger

The CEF Debugger allows you to directly mess around with the styling of the steam deck UI, here is the steps to enable and start working with it.

Enable CEF debugger

In the Decky-loader general settings enable "Allow Remote CEF Debugging"

(optional) You can also enable auto-enable on the CEF remote debugger in the steam deck developer setting in miscellaneous

Connect to your steam deck

Obtain your steam deck IP by going to internet settings and clicking on the connected network

once obtained in a browser go to {browser}://inspect (chrome://inspect, brave://inspect, arc://inspect)

click configure on Discover network targets and insert {steamdeck ip}:8081, once done a new remote target should appear with your decks ip attached like so.

Understanding the debugger Now that were connected we have access to the main UI tabs, keep in mind that to access the tabs correctly your steamdeck must be on and viewing said tab.

SP
SP is the steam decks main user interface to the current page being viewed, this includes but is not limited to home, library, settings, and store
MainMenu
This tab represents the 'steam' button menu
QuickAccess
The quick access menu is the '...' button menu

To understand how to make live edits the styling im going to go through an example of changing the color styles of the MainMenu.

To start I will need to inspect the MainMenu tab and make sure the steamdeck has the tab in view.
Its best to use the select element button to find and make changes to specific css elements.

I used the select element to get the main div and class name of the main menu and filterd the class name through the styling debugger.

now all i have to do is change the background style to my selected color.

This is the main process to viewing and styling the steam deck UI. The shared.css and theme.json files are used to upload the theme to the css loader plugin in decky. To get a better understanding of that process, please go to the CSS loader themeDB repository for more information

conclusion

I hope this dev post made it a bit easier to begin creating your own custom styling, once again do not be afraid to use the template repository and official css loader themDB repository to expand your knowledge of this new technology to the fullest.
Thank you for reading!

What's Inside Your Desktop?

sholm — Mon, 12 Dec 2022 15:37:22 +0000

Intro

In this DEV post I will be going over the components in a computer, there functionality, and how they communicate with each other. So of course lets start with the hardware.

Hardware

A computer has a multitude of different parts to accomplish specific functions. Operating systems have a larger roll in how our hardware communicates with each other, but for now lets examine these parts and what they do!

CPU
People call the Central Computing Unit the brain of a computer, and for good reason. Its main task is to calculate instructions from our ram, and execute those instructions to our other hardware components for say rendering with our GPU or collecting data from our ram or storage devices.
Motherboard
The motherboard is the glue keeping all our components together.
Its where we place all our parts so that they can communicate with each other. Motherboards come in varying sizes and different CPU chip slots (Intel, AMD).
Power supply
The PSU (power supply unit) converts AC power from the wall outlet to unregulated DC while reducing the voltage by using a input power transformer. This power is transferred to the rest of the parts.
GPU
The Graphics processing unit has dedicated memory to a variety of graphically intensive tasks, but most popularly VFX rendering and graphically intensive video games.
RAM
The Random access memory stores temporary memory till the computer is shutdown, an example of this is the copied text in the clipboard
HDD/HHD/SSD (storage)
A hard disk drive, hybrid drive, and solid state drive all have the important task of storing long term memory for continues use. All software on a computer is stored here from the operating system to .txt files.

Software

Our software contains the operating system and applications we download on that system to communicate to our hardware. Common operating systems run in an infinitely loop to continuously run, common operating systems in use are Windows, Linux, and Mac-OS. The browser is another important piece of software allowing connection to the world wide web for installation of other software. The software is a critical component to operating a computer, but the communication between the hardware is just as if not more important.

communication between hardware and software

All software installed are constantly making checks through the CPU for user input. CPU's usually contain integrated graphics to allow for rendering of the basic's like the operating system, but the process is usually done by the GPU.

When a user input is made like moving the mouse, the CPU calculates the current position of the mouse on the screen and gets the GPU or integrated graphics to re-render the location of the mouse. Clicking on applications like a browser, references the original file in the storage device and the RAM keeps track of the number of tabs in the browser.

This is only a small example of the amount work done by your computer to keep everything running in order smoothly, and the process of can alter depending on the software in use.

conclusion

The desktop computer uses all its parts in tandem with each other to keep installed software running effectively and smoothly. My personal favorite part about these machines are the ability to upgrade any part individually when ever you want. The links below are the sources used for this DEV post and I hope I gave you a better understanding of the computer you may be on right now.

The techniques used in Ai

sholm — Mon, 28 Nov 2022 15:01:13 +0000

intro

In this article I will be going over the basic fundamentals of how AI is created, specifically the techniques used to create it. To begin lets understand.

How AI is made

There are many different types of AI generation that cause this question to range in how complex the functionality is. A basic definition would be continuously attempting to reach the desired functionality, with previous mistakes and algorithms guiding the end result to the desired functionality.

To achieve this functionality some of these techniques are used in tandem with each other.

Machine learning
Machine learning is what's used to learn and adapt to data without being specifically programmed to, an example of this would be face recognition.
Deep learning
Deep learning uses Neural networks to learn patterns in complex data, an example would be speech recognition.
Neural network
A neural network is a group of interconnected nodes that process information by referencing the external input. This information is relayed between these units until a output is determined based on the weight of the nodes.

To better understand, were going to go through an example to get a better understanding of how these techniques are employed together.

how image generation is made

There are two types of image generation when we think about AI.

There is generating a new image from a text input like asking for "a dinosaur with a jetpack", and generating a image off of a "prompt" like asking for "starry night in Banksy style".
This method is not true AI-generation since it uses pre existing images to create essentially a filter, Because of this I'm going to mainly focus the text input method.

This method uses two neural networks to achieve its functionality. One generates an image based off of the text input, this obviously uses machine learning to understand what the inputted text means. The second compare's the generated image to reference images, building an accuracy score till it generates an image with a high enough score to be sent to the user as a result.

This iterative process of creating and recreating till the end result is the desired functionality, is how most if not all AI computation is structured, in our next section ill discuss this more closely.

Automating tasks with AI

Task automation is possibly the biggest use case for AI in recent years. Huge advents in deep learning technology has made previously time consuming or dangerous tasks easily completed with AI. Since the variety of things we need, or want an AI to do are countless, there isn't a specific way to create and AI to automate tasks, but what is unanimous across these use cases is the iterative process of doing it over and over again.

An example we could think of is a AI that plays snake, by giving the AI the data of the controls and the basic objective. After making needed adjustments in-between iterations, like telling the AI to stay away from the boarder the AI should successfully reach the apple.

This process continues until the desired result from the AI is returned a high percentage of the time. As expected this is how variety of functionality from AI is achieved, through continues adjustment from the developer and improvements from the AI.

conclusion

I hope this article gave you a better understanding of what techniques are used in AI and the methods used to employ them.
To continue gaining knowledge on this subject, checkout the sources I used for this post. (:

sas - Ai
Aws - Neural-netowork
levity - AI autimate

The SteamOS Konsole

sholm — Mon, 17 Oct 2022 06:46:40 +0000

SteamOS

In 2013 a linux based operating system developed by the software company Valve was created. This operating system was used by one of Valve's first hardware ventures the Steam Machine to give it a more console interface, this was valves first venture into the gaming computer space, but would not be the last.

In 2021 the Steam Deck was announced and up for reservation with the new steamOS 3.0, with this operating system came a variety of user friendly design features to make the steam deck one of the best portable gaming computers on the market. It also came with a terminal that we will be using in this dev post.

Enabling The SSH server

With the steam deck comes a built in SSH server. the only thing needed to be done is quick and easy steps to set up your password.
So to start go into the desktop mode by going through.

Power > Switch to Desktop

Then search for konsole on the home button.

To set up the password input the following.

(deck@steamdeck ~)$ passwd

the terminal will then ask for a password that you must input twice, keep in mind you wont see the characters on screen.

Then initiate the SSH with,

(deck@steamdeck ~)$ sudo systemctl start sshd

this will start the SSH at systemctl. to stop the SSH replace start in the command with stop. Now with putty or a Linux terminal you can connect to the SSH server!

Commands for the console

But that is just the tip of the iceberg. since steamOS is a Linux based operating system, all Linux/cli commands work out of the box! So lets take a look at just some basics to get you navigating the konsole.

ls | This command will return the names of the files in your current path

 (deck@steamdeck ~)$ ls

Applications  Documents  Games  Pictures  Templates 
Desktop  Downloads  Emulation  Music  Public  Videos

cd | This command will change the path your currently in

(deck@steamdeck ~)$ cd Emulation/
(deck@steamdeck Emulation)$ ls

bios  hdpacks  roms  saves  storage  tools

cat | this command will read the file specified

(deck@steamdeck ~)$ cd Desktop/
(deck@steamdeck Desktop)$ cat Dev-blog
linux commands (:

These are all just very basic commands so I definitely recommend learning more, here are 40 basic ones that you can test out right now!

conclusion

The Steam Deck is a incredibly powerful machine and I cant wait for the continued support from valve to add even more value to this operating system. With the steam deck already being somewhat available for desktop pc's I'm excited to see where this software goes. I hope that you learned something from this dev post and continue doing great things!

SOURCES I USED AND YOU SHOULD TOO

shendrick.net

40 Basic Linux Commands Every User Should Know

Linux commands are programs or tools that run from the command line. Learn the 40 most common commands in Linux by checking out this article.

hostinger.com

What is SteamOS? Everything You Need to Know

You'll often find SteamOS mentioned in the list of gaming Linux distributions. Learn everything about this uncommon distro.

itsfoss.com

Basics of Bots

sholm — Mon, 10 Oct 2022 04:45:47 +0000

Intro

In this DEV post I will be covering the basics of internet bots.
From the difference of good to bad bots, but also the process they use to manipulate web applications for malicious purposes. Now of course to start we must discuss how these bots are made.

How Its Made

There are a variety of internet bots that each complete different tasks, a bot that searches through webpages for example is an essential part to keeping search engines working, but for every good bot there is a bad bot, like a key logger bot to steal passwords or a bot to send malicious traffic to a server. So what are the steps taken to create such code. Well there are three main components that a bot needs to do its respective job correctly.

App logic
This is the code that the developer creates to tell the bot what to do when it comes across a specified situation, like a chatbot that recognizes user input and needs to send a message back.
Database
This is where a collection of data for the bot is stored to know what actions to take or to store data that the bot will use later, for our chatbot example, storing data on Starwars if the user asks a Starwars related question, or keeping images of something to respond with if the user asks for say 'a picture of the millennium falcon'.
API
An API solves a big problem for a lot of internet bots out there and that's external information. When a lot of functionality wants to be added to a bot like this, the best course of action is to use an API. this stores data that the developer doesn't have to create to add functionality like an amazon shopping list or YouTube search.

Now these components are the blueprint of a lot of internet bots out there but with the many use cases that bots can bring its hard to nail down one formula. especially with malicious bots, since %50 percent of all internet traffic are bots getting an accurate depiction of what percent of that is malicious is difficult, but we can still take a look at the key differences that make a good and malicious bot.

Good Vs Bad Bots

Since bots are just software that completes a specified task, there are a vast amount of internet bots being created all the time, with some people using these applications for illegal means that take advantage of the requests of a web application made to get sensitive information like credit card details, or Voice bots that attempt to bypass 2FA. Filtering out bad bot traffic to a web application is an extremely important task, with good and bad bots having similar functionality. The best approaches to the problem of bad bot traffic is to create a list that stores the information of the good bots to differentiate between the bad ones. Since good bots are usually upfront about there information and what they do, this is done with a simple .txt file that stores the name/data of what that bot is there for. but with the advent of AI malicious bots can be used just as effectively outside of web applications.

The Advent of AI

With AI being created and used more liberally throughout the internet the use of good but of course malicious bots have gotten more creative. From auto generated videos that get posted on YouTube in the thousands per month on a single channel, to the undetectability of cheating aimbot software that uses a third party camera to detect enemy players. The main reason that software like this has gotten so possible is because of how impossible from a technical standpoint it is to differentiate player to AI. Since bots are used for the automation of tasks good AI can be completely missed by an anti cheat or malicious bot txt file. With AI being such a new field in the access to the general public a solution for a counter measure hasn't been definitively decided yet.

Conclusion

The process of creating internet bots is a fairly easy task depending on the functionality of said bot. I hope this DEV post gave you a better idea of how to create a blueprint of that functionality and the importance of keeping bad bots away from your traffic. The sources I used are down below and I highly recommend them to continue of getting a brooder idea!

SOURCES THAT I USED AND YOU SHOULD TOO

How Is An Internet Bot Constructed
The Malicious Use of Artificial Intelligence
How To Manage Good Bots
What Is Bot Traffic

What is Emulation (doing in the background)

sholm — Mon, 03 Oct 2022 05:12:47 +0000

Intro

In this DEV post I'm going to explain what emulation is, and what its doing in the background to get anything running at all. With some of the biggest headway in emulation happening in the past 7 years, emulation has come a very long way, but first we must ask.

What Is Emulation

Emulation is software that enables a computer system (called the host) to act like a different computer system (called the guest). An example of this would be running PlayStation 2 software on a computer's hardware.
Running old video game consoles on a computer is possibly the most famous approach to emulation, but virtual machines are also a form of emulation that are done fairly often in there own regard as well.

How Emulation Works

While not all emulators work in the same way, they all can be put into 2 different categories to give us a better understanding of what's going on in the background. That would be Low and High level emulation.

High Level
High Level emulation is when our host replicates specific functions of our guest and attempts to piece together everything automatically. to be more specific, our emulator will have functions that communicate to our host's hardware to act as close as it can to the guest hardware. This essentially tricks the ROM(game) into thinking its being run natively. This method of emulations is great because the hardware that could run the emulation would just have to be slightly better then the native hardware. Since this is the case emulation of retro titles can be done all within a browser.
Low Level
Low Level emulation is when our host software replicates the guest's hardware kind of like a virtual machine to get the ROMS running on the virtual hardware. This approach can be very important when these older games rely on a hardware bug of some kind to produce the same functionality each time. with a virtual machine being booted on startup each time, the hardware of the host would have to be several times greater then the guest hardware to run effectively without any slowdown or frame drops.

So to break it down,
HLE or High level emulation is when the host uses functions to get as close to the same result as the native guest hardware.
While LLE or Low level emulation is creating virtual hardware to be used by the rom to get the exact same result as if you were on the real thing.

Emulation On Newer Hardware

Emulation of a newer device like a Ps4 or Nintendo switch is still in development, and will most likely take multiple years before becoming anything close to playable for a vast majority of its library. Current versions of Ps4 emulation are impressively enough able to currently run 2d and indie titles (somewhat)perfectly fine with AAA titles having unplayable graphical issues. Current Nintendo switch emulation is also capable of running less hardware intensive games with more intensive ones most likely not even booting.

Conclusion

Emulation is an extremely important task for the preservation of older software and video games, and with so many incredibly talented people keeping software of many kinds alive to this day through emulation, but that does not mean that emulation should be used to illegally download operating systems like the ps2 bios or any roms found through the internet. There are many ways to legally get hold of your console of choices rom/bios file through backing up the data to a cloud that you own and inserting it into the proper file. I hope that this DEV post was helpful in understanding a bit more how emulation works and please check the "Sources Used" section to further your understanding.

Emulators to try

Depending on the type of software you want, your going to need a different emulator. So here are a few you can try out, but keep in mind there are many out there!

Sources Used

IGN - How emulators work
Academic - High level emulation
Bago games - How do emulators work, a beginners guide
Stackoverflow - how do emulators work and how are they written

Educational Programming

sholm — Mon, 22 Aug 2022 04:45:56 +0000

Learning a programming language for the first time is a tough feat, and getting good at it is even tougher. With a Varity of different programming languages to start with and not even knowing the correct syntax to get things rolling, it can feel incredibly difficult to start getting into a language. That's where educational programming comes in. Helping someone understand the basic syntax, but also how to think about getting a problem solved. So before we get into some examples, lets get a basic understanding of the types of scripting in these applications.

Scripting Types

When it comes to most learning applications they tend to fit into two categories, visual-scripting, and text-scripting. Each of these are beneficial in things well get into soon, but they both accomplish the same goal of being an instrument of learning!

Text-Scripting Text-based programming is what we initially think of when it comes to most programming languages. These are more helpfull in the actual algorithmic problems and creating apps. some examples would be

Python
Java/Java Script
C++
Swift

Visual-Scripting Visual-scripting aka block-based programming are great for beginners understanding how things are interacting with each other. while block-based programming is mostly used for educational purposes, Unreal engines blueprint is possible the most famous example for using block-based programming.

Examples

Now we get into the examples. There are many ways to practice programming, but "programming" your brain to correlate things you already do with say JavaScript will make the process much easier to get into.

Text-based Examples

Khan Academy

Khan academy has been true innovators in the online learning space. with math, science, history being retally available to millions of people around the world, and for a while now they also have free courses on JavaScript, SQL, and html/css to just to name a few.

Codewars

Algorithmic problems are very important when challenging yourself and getting better with programming. Code wars assists with exactly that from novice problems to job interview preparation in multiple languages.

Block-based Examples

Unreal Engine

While Unreal Engine is not necessarily a education program for learning block-based coding. it is possible the best source to find tutorials and create features without using other block-based educational applications, that tend to be more focused towards children. Think of a feature that you want to implement in your test application in unreal engine and look up tutorials on that feature and follow along. by the end of it at the very least you'll have a understanding of how the blocks connect together to create your feature.

Blockly

Blockly Teaches introductions of a multitude of programming concepts in a fun game based learning space. Blockly also proved text-based coding for the problems you've solved using the blocks helping the information click to help understand what real world problem was solved.

Conclusion

I hope this dev blog gave you some recourses to begin some practice material and an idea of what block-based and text-based coding are. understanding and maintain knowledge on these topics are what makes the more difficult concepts in programming much easier. So once again I hope this helped you and thank you for reading!

Simply Learning UI/UX

sholm — Mon, 15 Aug 2022 11:51:37 +0000

UI and UX are important to designing a good application. They provide great value to the user in keeping them using our application in the long run. But understanding what these design "styles" mean can be a bit overwhelming. So with this dev-post I hope to give a simple overview and understanding on what UI/UX are, and add value to your application with UI and UX design.
So first, lets start by understand what UI and UX mean!

What is UX

UX stands for the type of design called user experience. UX is not exclusive to digital products and represents a basic understanding of "How great a product is to use". UX isn't just one thing, its an amalgam of how an application "feels" when it comes to using it.
This becomes very apparent when you relies that us, the users decide whether we like a application in 50 milliseconds.

What is UI

UI stands for the user interface. This type of design prioritizes getting the user "to where they need to be". you wouldn't use Google if you had to go through menus and click stuff 7 times before you got to search anything. keeping the user sufficiently satisficed with the information were telling them, keeps our website simple and intuitive to use.

Now if you are still a little confused on what exactly UI and UX are, that's completely fine. The differences between UI and UX cant completely be covered since they are so closely connected, but we can look at good examples to start differentiating them in our head. So here lets look at,

Examples of good UI/UX

UX DESIGN
Good UX design is about solving problems for your users. when our applications are cluttered or not informative enough we start creating problems for our user, like "how do I get to this page" or clicking on multiple tabs till finally finding the one you need. So having these examples of what good UX design is hopefully helps you.

Simplicity
Googles home page has kept it simple since 1998. The initial first look of your application does matter in if people will continue to use it, at least compared to a competitor.
User Choice
Imagine how annoying Netflix would be if autoplay didn't exists and you had to click the episodes individually to watch them. that would be an example of bad UX design at least to the majority of users, but giving the choice of having autoplay off gives great benefit to people who can only watch one or two episode. this is great UX design because it solves multiple problems for multiple different types of users.

UI DESIGN
UI design is much more reliant on good UX to succeed then vice versa. while UI is much more seen as the visual aspect of our application. it adds much more value when coupled with great UX design. So please keep in mind your UX design when brainstorming on better UI choices

Consistency
When going onto an application for the first time, we start to learn how to properly use it within our fist mouse movements. so keeping our application familiar to our users is key in good UI.
If our expected user was a YouTube viewer. keeping pause and play on space and 'k' would make for a good design choice. keeping the expected user in mind is also a very smart decision when creating your application.
Interactivity
UI is also sometimes thought of as "User interaction", while this idea is false interaction of our application is a key component in good UI. an example of this would be ferrari's website. the animations at the navbar giving a bigger view of what the next choice could be makes the selections easier and honestly just fun to use.

CONCLUSION

I hope this dev-post made it a bit easier to understand what UI/UX are and some general ideas that you can use for your application.
if you would like to continue learning about UI/UX here are the sources that I used to make this post and YOU SHOULD TOO!

SOURCES

UX vs. UI Design: What's the Difference? [2022 Guide]

Wondering what the difference is between UX and UI design? This guide explains and contrasts User Experience Design with User Interface Design.

careerfoundry.com

User Interface (UI) Design | Insights & Inspiration | Adobe XD Ideas

Learn about the different types of user interface design as well as fundamental design requirements for each type. Read more at Adobe XD Ideas.

xd.adobe.com

What is User Experience (UX) Design? | Interaction Design Foundation (IxDF)

What is User Experience (UX) Design? User experience (UX) design is the process design teams use to create products that provide meaningful and relevant experiences to users. UX design involves the...

interaction-design.org

What Makes Good UI Design? | Fuzzy Math

In this guide, Fuzzy Math describes the core components that go into good UI design. Learn more and view shining examples of a clean interface.

fuzzymath.com

Beginning Particles.js in JS

sholm — Mon, 08 Aug 2022 05:55:00 +0000

In this Dev post I will be helping you understand, use, and implement Particles.js into your workspace of choice. Particles.js is a great JavaScript library created by Vincent Garreau to spice up the look of your webpage, so before we get into implementation lets get started by first.

Messing around with Particles.js

Before we do anything I highly recommend you mess around with the premade examples on Vincent Garreau's particals.js demo here.

Inside these demos it illustrates some cool things we can do with particles.js like not only having particles of any size float around our webpage, but also adding mouse interaction that push those particles away on hover, or add new particles on click. Once you've messed around with it, its now time to.

Implement Particles.js

Before we can actually enter into the meat of this library We must start by implementing it into our workspace. Now keep in mind this is not the only way to implement particles.js, we can use npm or Bower or a bunch of other packages to get particles.js working, but for this Dev blog I'm just going to show manual implementation.

Downloading Particles.js

You can download the latest release of the particals.js zip file with the link below on the right side of the page called 'Releases'

VincentGarreau / particles.js

A lightweight JavaScript library for creating particles

particles.js

A lightweight JavaScript library for creating particles.

`Demo / Generator`

Configure, export, and share your particles.js configuration on CodePen:
http://vincentgarreau.com/particles.js/

CodePen demo:
http://codepen.io/VincentGarreau/pen/pnlso

`Usage`

Load particles.js and configure the particles:

index.html

<div id="particles-js"></div>
<script src="particles.js"></script>

app.js

/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
particlesJS.load('particles-js', 'assets/particles.json', function() {
  console.log('callback - particles.js config loaded');
});

particles.json

{
  "particles": {
    "number": {
      "value": 80,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src":

…

View on GitHub

Once downloaded unzip the file and copy it into your project folder and paste the code below into the head of your html file.

<head> 
       <script src="/particles.js"></script>
</head>
<body>

</body>

Creating our config

Now I recommend creating a particles.cfg.json file and adding the basic settings provided in the Particles.js GitHub in the "Usage" section. This will add a bunch of settings to our particles that you may or may not want, but either way its probably a good idea to mess around with it to get familiar with the library.
Once our json-config file is created we should add a particles div with a appropriate height and width to let our webpage know the area that our particles can render in like so.

<head> 
       <script src="/particles.js"></script>
</head>
<body>
       <div id='particle-div'></div>
</body>


|||||||||||||||||||||||||||||||||||||
Css

particle-div {
width: (number)px;
height: (number)px;
}

Now everything is ready to go! ...Well almost, we still need to load our particles onto our page. and depending on how you want your particles to show up, you may not want it on the initial load of your webpage. So here is the basic syntax for getting the particles to load, but ill leave the rest to you on whether you want it on a "on-click" function or just the start of your webpage entirely

       //our particle div \/   our config file \/
particlesJS.load('particle-div', 'particles.cfg.json')

CONGRATS! You have successfully implemented particles.js,
But that's not all. Now its time to

Learn our options

Your best way to get a clear view of all the options you have when it comes to particles.js, is going to be in the main GitHub created by Vincent Garreau. But Since this is my Dev blog and I still want to help you learn a thing or two, I'm going to break down the more popular options for particles.js to help you get a better understanding how they work and how to use them. Note, you should be adding/editing these options into your particles.cfg.json file NOT YOUR CSS FILE.

Particles.number.value

Takes in a number value and changes the amount of particles rendered based on that value.

Particles.color.value

Takes in a string value of a color, RGB-object, HSL-object, array-hex, and a 'random' string to change all particles colors to the value.

Particles.shape.type

Takes in a string value of "edge"(square), "triangle", "circle", "star", "polygon", or "image". and sets the particles to that shape type. with arrays of values being allowed as well, EXAMPLE(['circle', 'star', 'polygon']). Note(you can also add width/height elements to your shape with particles.shape.stroke.width/height/or even color.

Particles.opacity.value

Takes in a number value from 0-1 and changes the opacity based on that value.

Particles.size.value

Takes in a number value and changes the size of our particles based on this value.

Particles.line_linked.enable

takes in a Boolean value and adds a linked line between multiple particles near it.

Particles.move.direction

Takes in a string like "top", "bottom-right", ect to move the particles in that direction. similarly there are particles.move.random or particles.move.straight that tell the particles to move randomly or in a stright line. We can actually see stright line example in the demo of particles.js Nyan-Cat.

CONCLUSION

I truly do hope this article made navigating, implementing, and using particles.js easier for you in whatever project you may or may not be working on. Understanding new libraries can be a bit difficult to get into but keep in mind that there are always people out there trying to make your learning experience easier. THANK YOU FOR READING!!!!

** Sources I used and you Should Too!
Vincent Garreau particle.js website/demos
Geeks4Geeks how to use particles.js
Creating particle effects video
Reasons why you shouldn't use particles.js

THIS IS THIS!

sholm — Fri, 10 Jun 2022 18:51:02 +0000

If you have been learning JavaScript you might have come across the keyword this and wondered what it does and most importantly how it works. the most simple answer to that question is " this refers to an already declared property in the scope of where it is being used", but even that can be slightly misleading when trying to fully understand this. so that is why this dev post exists, to get you understanding how to use this and become a better developer by the end.

The way this interacts with objects

Open your Chrome Developer console
(windows: ctrl + shift + j)
(mac: cmd + option + j)
and type the following

console.log(this);

This should have returned the global window object. The global window object is the Global object in the browser. this is also where all our variables are stored (not const), but the reason that the window object is returned is because this is being used outside of a declared object. so lets see an example with one.

let cereal_bot = {
cereal: "Frosted flakes"
milk: "2% milk"
make_bowl: function() {
console.log(`${this.milk} + ${this.cereal} = cereal and milk`)
  }
}

console.log(cereal_bot.make_bowl)
// returns => 2% milk + Frosted Flakes = cereal and milk

In the code above I declare an object and use the this method inside the function to use some of the values in the object. this happens because the value of this is set to the closest parent object the method is called on. meaning that if we have nested objects with the same propertys like the one below,

let cereal_bot = { // outer object
cereal: "Frosted flakes",
milk: "2% milk",
make_bowl: function() {
console.log(`${this.milk} + ${this.cereal} = cereal and milk`)
  },
cereal_bot2: { // inner object
milk: "almond milk",
cereal: "coco puffs",
topping: "berries",
make_bowl: function() {
console.log(`${this.milk} + ${this.cereal} + ${this.topping} = cereal and milk with ${this.topping}`) 
            }
}
}

console.log(cereal_bot.make_bowl) 
=> "2% milk + Frosted Flakes = cereal and milk"

console.log(cereal_bot.cereal_bot2.make_bowl) 
=> "almond milk + coco puffs + berries = cereal and milk with berries

this will correctly correspond with the object its being used by. cereal_bot still logs the correct values
assigned to this, and our new cereal_bot2 uses its own object values without any issue even though the property's have the same name, this is another reason this is a helpful tool to use

The way this interacts with Constructors

Constructor functions in JavaScript are used to create a multitude of objects with slight variations between them like the one below.

//constructor parent
function Human (first, last, age, talent) {
this.first = firstName,
this.last = lastName,
this.age = age,
this.talent = function(talent) {
return console.log(`I am talented at ${talent}`)
}
}

//child of constructor function
let charlie = new Human('Charlie', 'Day', 46, 'actor)
let rob = new Human('Rob', 'McElhanney', 45, 'actor)
let glenn = new Human('Glenn', 'Howerton', 46, actor)

console.log(charlie) 
logs => {
first: 'Charlie',
last: 'Day',
age: 46,
talent: function(talent) {
return console.log(talent)
}

The constructor function above is what we use to make our new human objects. when the this keyword is used in a constructor function it is bound to the new object being created.

The way this works with call,apply,bind
call(), apply(), and bind() all allow us to explicitly set the value of this in one way or another. They are all somewhat similar but its important to understand the differences.

call and apply are invoked immediately, while bind returns a function with the context of this bound already. this is useful when we don't know all our arguments up front. but an example will make it more clear.

Call
When we use call the first parameters is what this is bound to.
the subsequent parameters are passed to the function we are calling.

function add(c, d) {
console.log(this.a + this.b + c + d}


let obj = {a: 1, b: 2};

//function, this, argument, more arguments?
add.call(obj, 4, 3)
// logs => 10

Apply
apply is similar to call where the first parameter is what this is bound to but the subsequent parameters is an array of arguments to be used in the function being called.
You can even use apply to concatenate arrays.

function add(c, d) {
console.log(this.a + this.b + c + d}


let obj = {a: 1, b: 2};

add.apply(obj, [3,4])
// logs => 10

let arr1 = [1, 2];
let arr2 = ['a', 'v'];

arr1.push.apply(arr1, arr2);
console.log(arr1) // logs => [1, 2, 'a', 'v']

Bind
bind's parameters are identical to call but bind is not invoked immediately. instead bind returns a function with the context of this bound already. Bind is best used when we don't know all our arguments.

let object = {
a: 1,
func: function(b, c, d) {
   console.log(this.a+b+c+d);
  }
}

let increase = {
a: 100
}

let binding = object.go.bind(increase,2);

console.log(binding) logs => 
function(b,c,d) {console.log(this.a+b+c+d)
}

In Conclusion

This is a hard to understand concept in JavaScript that is very specific to the context its being used in, but I hope that this dev-post made it a bit more clear on when/how to use this and in what context. but if you are still unsure just remember these few things

the value of this is usually determined by a functions context
in the global scope, this refers to the global window object
when a construction is used this is bound to the new object being created
you can set the value of this using call,bind,apply
google and continue to read articles on what you don't understand

Thank you for reading this dev-post and I hope my post helps you in your programming career. - Sidney :)