DEV Community: steviepee

We love to see it: A look at AR

steviepee — Mon, 14 Apr 2025 13:59:32 +0000

The Desert Of The Real

First, let's take mention of the elephant in the room (talking about AR, there truly could be one in here): Are AR and VR the same thing. The answer is yes, if you think scuba-diving is (metaphorically) the same as snorkeling.
VR is like scuba diving in that it's fully immersive. You suit your whole body up and plunge into the depths. In non-metaphorical terms, its equipment and package focuses on replacing as much of the real world as possible with its digital environment. If you've ever seen those videos of people running into walls or accidentally punching a friend or family member whilst wearing an Oculus, this, my friend, is VR.
AR, on the other hand, keeps most of the real world and adds a nice tweak here and there, in some ways, it can make the real world a little more immersive. Much like snorkeling, where you use the regular air at your disposal, usually, a part of your body is out of the water, and you get to experience the beauty of the waters while keeping your link to the land. AR augments a real environment and overlays it with digital elements. A good example of this is, well, an elephant in the room. Or a Picachu

The beginnings of AR were not as whimsical as catchin' them all. AR all started (heavily debatably) in 1992, when Louis Rosenburg's Virtual Fixtures were developed as digitally prehistoric flight simulators to aid USAF pilots. It sounds (and admittedly looks) like VR, but it's not. They did, however, require a full upper-body exoskeleton. As visuals are concerned, you can see the AR in it: binocular magnifiers that interacted with virtual overlays to place robotic arms where the pilots arms actually were

AR started to take more of the real world spotlight over the next few years. In 1994, AR was used in the theatre production, Dancing in Cyberspace, and, in 1998, history was made again when SportsVision developed and displayed their virtual 1st and Ten systems for the NFL. On-screen sports entertainment has never been the same since:

From there, the technology built more behind the scenes, making a triumphant return in 2016 with the spectacularly viral and afore-alluded-to Pokemon Go.
This mobile game took advantage of the advanced displays and tracking technology in our now every day phones, and set them to work creating a world where a player can catch pokemon and battle with then in real life environments. Since then, AR has been used from everything furniture placement to surgery assistance and training, and to classes around the world to facilitate immersive learning! But that's enough about what AR is, let's talk a little about how AR works:

Lights

Or, in this case, I suppose I mean markers.

Cameras

Now that we have the environment set up(or we have what we need to continuously set it up), we need something to Capture the images coming into the screen. We can't have an overlay without the underlying world to... lay it over, so AR requires the use of a camera object to render on top of. That's becoming increasingly easy to provide in an immersive fashion, though. Of course, we have our phones, but now there are many wearable technologies that could provide the optical assistance we need.. speaking of optical assistance, Glasses for one! There are a good few smart glasses being implemented by Rayban, Apple, and Reydar.

references:

Grind a little deeper: more Java, please!

steviepee — Mon, 31 Mar 2025 13:55:31 +0000

Last time, we took in a little hit of Java, just to see if we liked the taste. We checked out the basics and got a sniff of what the Hello World under Java had to offer. I don't know about you, but I could go for another taste! So, if you're up for it, let's grind a bit deeper, get under the grounds, and get into more of what makes Java, Java.

Recap

In the last entry, we went through the basics and came out with a simple "Hello World" in the Java language:

public class SayHello {
  public static void main(String[] args) {
//I'm using println instead of print so we move to the next line after
    System.out.println("Hello World!");
  }
}

This solidified the mainstays of Java for us: The making of classes, object specification, class types, datatypes, one special function-return type, and the world Java navigates to log (or, in this case, print out) a simple phrase. All of this is very important. It's the java of Java, but having a cup of Joe is more than just the Joe. In true Java fashion, we need to take all parts into consideration. In coffee terms, the first question could be, "Now that I've made the coffee, how can I bring it to the table?" It's a simple and often overlooked question for most, and, if we're used to interpretive languages like JavaScript, it's the kind of question we'd tend to ignore altogether. It's a very important quandary, though, and one that Java keeps in mind with each creation. The answer, of course, is a cup. As Java goes, this "cup" is referred to as a compiler

Compiling

We've said previously that Java converts its code into a form called java bytecode so that any computer with a JVM can interpret and run it. To do this, we must take the natural java form and pour, or, in this case compile it for transport. Here with Java, we do the compiling manually from the command shell. To start, we, from the shell, call the Java compiler, give it the path to our class, or the classpath so the compiler can find it, and finish it all with a .java

javac SayHello.java

That simple (so far)! the javac command calls the java compiler, then we steer it where it needs to go. We should remember though, that the Java compiler needs a door to walk through. That door is a door we've already built in our previous Java code: the main function. The compiler will always begin its work in the main function of the class it is pointed towards (in our case, the SayHello class). The flow of code compiling in Java will flow like so:

note: The Java compiler is checking your code while it transforms. If your code doesn't pass the series of checks, the cup will refuse you.

When the in-built compiler finishes a successful compilation, it creates a .class file. In our above case, the file would be called "SayHello.class", but you'll hardly ever refer to it this way when running it. The program makes it a bit easier for us instead, assuming we mean class and allowing us to simply type:

java SayHello

In order to get to the class file in question. If we follow these steps correctly, it would go something like this:

We create a class holding an object holding a function that prints to the equivalent of a console.

public class SayHello {
  public static void main(String[] args) {
//I'm using println instead of print so we move to the next line after
    System.out.println("Hello World!");
  }
}

We then move into the compiler in the shell, calling the compiler to come byte up this class.

javac SayHello.java

At this point, there are two SayHello files. One file class is SayHello.java, the other, SayHello.class. This is something you can check on your own with the shell's list command:

ls
SayHello.class  SayHello.java

The .class file represents the compiled class, while .java represents the original. To implement the compiled class file in the compiler we don't need to use .class, though.

java SayHello

Hello World!

And there you have it! One complete cup of "SayHello" styled Java to take wherever we need it to be.

Conclusion

Today, we've taken the juicy Java we created previously and given it a cozy compiled cup to rest in before it finds its new home wherever it goes. The versatility of Java takes attention to detail and flexibility that is optimized in its compilation program. Next, we'll move even further into the Java process and maybe even following it all the way to this new home and beyond. Stay tuned, and happy coding.

Resources

Wake up: Say "Hello World" with Java

steviepee — Tue, 18 Mar 2025 13:36:23 +0000

It feels like you can't go anywhere in the coding world without hearing about Java! Maybe I should stop doing all my coding in coffee shops, but I 'm not sure that would help as much as you'd think. I decided to get to the bottom of this programming language, but to do that, we've got to start at the top! If you've got a few minutes, come take a shot of Java. Yes, of course you can bring your own coffee, we're saying Hello to the World!

What is Java?

Java is a computing platform and a "high-level, general-purpose, memory-safe, object-oriented programming language. It was designed by James Gosling and first released by Sun Microsystems in May 1995. It's a very popular (third most popular programming language on Earth in 2022, according to GitHub) programming powerhouse, run under the mantra Write Once, Run Anywhere(we'll get to that in a bit). Java is used by platforms like LinkedIn, Amazon, and Netflix, coded in games like Minecraft, Runescape, and Angry Birds, and used by over 3 billion devices around the world. Run Anywhere, indeed. Okay, that's enough about where Java is run, now it's time to talk about how.

Syntax

Java syntax is largely influenced by C and C++, but any JavaScript programmer is bound to see a few similarities (note: though they sound like it, Java and JavaScript actually have no direct relation to each other. Further, Java is a compiled language, as JavaScript is interpreted). The comment/pseudocode structure is the same in both languages, and the basics seem pretty intuitive when coming from a JavaScript background, with a few caveats. Let's take a look at how Java makes a standard Hello World statement.

Hello World!

I know I said JavaScript programmers would feel somewhat at home, but there are big differences. Take logging "Hello World" into a console for instance.

Doing this in JavaScript is pretty straight forward:

console.log("Hello World");

See? Nice and succinct, straight forward (and built in). With Java, we have a few more steps to work through.
-Have some class
First off, as was said earlier, Java is an object-oriented language, meaning, especially in the case of Java, that every data item is an object. Still, in the Java structure, an object item will live inside of a class, and all code is written inside of a class. With that in mind, before we do anything, we'll need to specify a class. Java does this like so:

public class SayHello{}

To specify a class, Java must designate what sort of class it is. Public is the most permissive sort, and any other class can access a public class. Other classes include, but are not limited to: final, static, abstract and concrete.

Choose an object -ive

Now that we have and understand our class, we need to add an object to it.
Remember, every data item is an object, so we must specify what kind of object it is:

public static main(){}

there are a couple of things to mention here about this specification, and specifications of this in the future:

Public: This is the same as the class designation above, and signifies public access
Static: Static signifies that this method belongs to this class itself, and not a particular instance of it.
main: The name of the method. The runtime sees main as the starting point of the program.

With these three things, we have our object, and we should add it to the class. There's still a couple of things missing here before we can finally move on to the actual command..

opening arguments

We should allow the potential for other things to be passed into this method. To do that, we must specify the datatype of the arguments, or args. The reason for this is that, in Java, we need to tell the runtime what datatype to expect on its way to read the methods, or really anything, for that matter:

public class SayHello{ /*did I mention variables capitalize every word, instead of leaving the first word lower-cased*/
public static main(String[] args){} 
}

what's your type Here, we've designated the type of arguments to be an array of strings, so now we should be good to... wait a minute. Didn't I say we needed to tell the runtime what datatype to expect for "really anything"? What should we tell it about what to expect to come out of this function? Well, like the console log in our javaScript example, we don't really expect anything to come out of the other side of this method. So do we really need to tell the runtime to expect nothing?

public class SayHello{
public static void main(String[] args) {}

Yes, in fact we do. and the void keyword does just that. Now that the runtime knows what to expect, and the class, object and arguments are well typed and defined, we can move on to the actual method.

Take a byte

In the JavaScript example, we simply invoked a console function to get our iconic phrase, why is that? Because JavaScript runs on web applications, and thus, can expect there to be a console. Java doesn't make these sorts of expectations. As Java goes with its WORA mantra, it can't really expect what system it will be run in. No matter the code here, when we're done and compiled, Java will convert it all into a form called Java bytecode. This preps it for its eventual journey through its VM (virtual machine) and into whatever kind of web environment, game system, or anything in the vast internet of things we've created in the world. So how do we print to the console with no console... well, maybe no console.. Where are we anyway? What's a "code"??.. Sorry, got lost in the vastness. The answer is we don't need to call a console to tell our program to print, we can just do it directly:

System.out.print("Hello, World!");

All together now

See what we did here? We simply called the system, whatever system it may be (System) to use its output(out) equivalent of a console to print our key phrase. As complicated as it has to be, given the staggering amount of environments Java can potentially find itself in, but pretty simple when it's broken down. Let's put it all together and see what we get:

public class SayHello {
  public static void main(String[] args) {
//I'm using println instead of print so we move to the next line after
    System.out.println("Hello World");
  }
}

And there we have it! A good 'ol "Hello World" from the wonderful land of Java.

Conclusion:

Java is an amazingly versatile programming language that deftly uses specifics and expectations to work itself into any environment in which it may find itself. Thanks for coming by to say hello, and I hope you come away with more understanding than you got here with. Till we code again!!

PS: Funny coincidence, it turns out that the release-candidate for the absolute newest build of Java (24) just came out... TODAY! If you're up to take a stroll on the cutting edge, I've left a link to the Build download below. Happy Coding!

Resources:

https://www.java.com/en/download/help/whatis_java.html
https://en.wikipedia.org/wiki/Java_(programming_language)
https://www.geeksforgeeks.org/types-of-classes-in-java/
https://www.geeksforgeeks.org/java/ ####Get the latest Release-Candidate Build for Java 24!
https://jdk.java.net/24/

LET'S GET REGULARexpressions!!

steviepee — Mon, 03 Feb 2025 19:42:47 +0000

In many circles of the coding realm, regex lurks as a mystery behind the scenes, cloaked in shadows until it shows it's Lovecraftian face to us and we lose our digital minds to the madness that is the Regular expression. I've endeavored to change that, if only a bit, so come with us as we explore a first look at the real face of Regex

REGEX

Regular expressions, or Regex, originated in 1951, when mathematician Stephen Cole Kleene described regular languages using his mathematical notation called regular events.
Its first appearance was a program setting in Ken Thompson's version of the QED text editor in the mid 1960's, and,since then, it has been used in pattern recognition software all over the coding world. So what exactly are Regexes, or a Regex, and how can we learn more about them

A regular expression is a sequence of characters that define a search pattern. It sounds simple... And that's because it IS simple! It's essentially a simplification of possible occurrences for the sole purpose of recognizing those occurrences any time (or just once or so when) they happen to arrive.
definition, use cases, mention it as a matcher talk about simpler parts of it and how it's not the same in every place it's used. Maybe find an example of different versions of the same regex

But why

Regex is used in a wide variety of text processing tasks, from serving as the language of lexers in parsing, to data validation, data scraping, wrangling and more. It is very heavily utilized for its simplicity in describing and searching for patterns in as few characters as possible. Let's take, for example, the above regex. What does it refer to? Well, by the end of this post, I'm hoping we can figure it out together. But first, lets look at the tools in the regex toolbox

Tools

quantifier- Regex quantifiers check to see how many times you should search for a character.

Here some examples of quantifiers:
? – Zero or one

– one or more
– zero or more {N} – Exactly N number of times (where N is a number) {N,} – N or more number of times (where N is a number) {N,M} – Between N and M number of times (where N and M are numbers and N < M) *? – Zero or more, but stop after first match

regex group- When searching with a regex, it can be helpful to search for more than one matched item at a time. This is where “groups” come into play. Groups allow you to search for more than a single item at a time. Groups are defined by parentheses; there are two different types of groups–capture groups and non-capturing groups:

(...) – Group matching any three characters
(?:...) – Non-capturing group matching any three characters
The difference between these two typically comes up in the conversation when “replace” is part of the equation.

pattern collector- Pattern collections allow you to search for a collection of characters to match against. For example, using the following regex:

My favorite vowel is [aeiou]
You could match the following strings:

My favorite vowel is a
My favorite vowel is e
My favorite vowel is i
My favorite vowel is o
My favorite vowel is u
But nothing else.

Here’s a list of the most common pattern collections:

[A-Z]– Match any uppercase character from “A” to “Z”
[a-z]– Match any lowercase character from “a” to “z”
[0-9] – Match any number
[opspk]– Match any character that’s either “o”, “p”, “s”, "p", or “k”
[^asdf]– Match any character that’s not any of the following: “a”, “s”, “d”, or “f”
You can combine these to:

[0-9A-Z]– Match any character that’s either a number or a capital letter from “A” to “Z”
[^a-z] – Match any non-lowercase letter

regex tokens- While keys like “a” to “z” make sense to match using regex, what about the newline character?

. – Any character
\n – Newline character
\t – Tab character
\s– Any whitespace character (including \t, \n and a few others)
\S – Any non-whitespace character
\w– Any word character (Uppercase and lowercase Latin alphabet, numbers 0-9, and _)
\W– Any non-word character (the inverse of the \w token)
\b– Word boundary: The boundaries between \w and \W, but matches in-between characters
\B– Non-word boundary: The inverse of \b
^ – The start of a line
$ – The end of a line
\– The literal character “\”

metacharacters
Repeaters
The asterisk symbol (*) tells the computer to match the preceding character (or set of characters) for 0 or more times (to forever).1

'+'- The Plus symbol tells the computer to repeat the preceding character (or set of characters) at least one or more times(to forever).1
'{' - The curly braces tell the computer to repeat the preceding character (or set of characters) for as many times as the value inside this bracket.1
'^'- The caret symbol tells the computer that the match must start at the beginning of the string or line.(Example : ^\d{3} will match with patterns like "901" in "901-333-".
)1
'$'- The dollar symbol tells the computer that the match must occur at the end of the string or before \n at the end of the line or string.1
'.'- The dot symbol can take the place of any other symbol, that is why it is called the wildcard character.1
'|'- Regex OR operator:
'?'- ** Optional character symbol tells the computer that the preceding character may or may not be present in the string to be matched.1**
'()'- Grouping Characters ( )
A set of different symbols of a regular expression can be grouped together (within parentheses) to act as a single unit and behave as a block...1
'[]'- [set_of_characters]: Matches any single character in set_of_characters. By default, the match is case-sensitive.1
'\'- The Escape Symbol

**If you want to use any of these characters as a literal in a regex, you need to escape them with a backslash. If you want to match 1+1=2, the correct regex is 1+1=2. Otherwise, the plus sign has (the) special meaning.4
Here are some other helpers

\number
Backreference: allows a previously matched sub-expression(expression captured or enclosed within circular brackets ) to be identified subsequently in the same regular expression. \n means that group enclosed within the n-th bracket will be repeated at current position.

Comments:

Comment ( ?# comment )
Inline comment: The comment ends at the first closing parenthesis.

# [to end of line]
X-mode comment. The comment starts at an unescaped # and continues to the end of the line.

\\d+[\+-x\*]\d+\b#Here, we really match the + sign

Here are some other helpers

Comments- In any sort or language of programming, it's important to know just how to leave notes without interfering with the code at large. Here's how to do it in Regex:
Comment ( ?# comment )
Inline comment: The comment ends at the first closing parenthesis.

# [to end of line]
X-mode comment. The comment starts at an unescaped # and continues to the end of the line.

\\d+[\+-x\*]\d+\b#Here, we really match the + sign

regex flag- A regex flag is a modifier to an existing regex. These flags are always appended after the last forward slash in a regex definition.

Here’s a shortlist of some of the flags available to you.

g – Global, match as many times as the pattern emerges
m – Force $ and ^ to match each newline individually
i – Make the regex case insensitive
s - Match new lines.
x - allow spaces and comments.
J - Allow duplicate group names
U - Ungreedy match

Breakdown:

So, what does this mean in the first place? Let's break it down:

[w._%+-] #the w tag refers to characters/numbers, then essentially anything goes

+@ # match as many times as possible, then match the @ symbol directly
+\. #this '.' is escaped, so match it exactly

[a-zA-Z] # then any letter

{2,4} # at least two times, but no more than 4.

Put them together and what do you get?? It's a checker for an email address!(regu$ala9@gmail.com) See? not so bad!

conclusion

Today we've peered into the bewildering abyss that is the regular expression and come out with our sanity. Jokes aside, the regular expression is an extremely useful and interesting tool for data-matching and parsers all over the world use them as a default. Once the grammar and groove of what these symbols hold are understood, there can be a whole new world of pattern matching ahead of us. I hope it's a bit easier for you to take a few steps into that wilderness after today. Happy coding!

References

What's up with Markdown? A parsing glance

steviepee — Mon, 27 Jan 2025 14:01:18 +0000

In the Beginning:

In 1991, Tim Berners-Lee (pictured above), a CERN physicist, developed the first version of his Hypertext Markup Language, or HTML. This fledgling version only sported 18 tags, whereas today, this cornerstone language boasts over 120!! This is great for HTML, but, somewhere around 87 or so, things start to be a little hard to keep up with for a good many of us. In addition HTML's 3.0 version tended to slow browsers

There's got to be a better way!

A statue of Aaron Swartz in his natural habitat

In 2004, John Gruber and Aaron Swartz, motivated by a dream to set a markup language meant to be "as easy-to-read and easy-to-write as it is feasible", created Markdown.
In many ways, it seems like they'd succeeded at their goal. Their plain-text markup was widely embraced and accepted over the years. How-ToGeek, in 2022, wrote of the language:
In short, Markdown makes it easier to format text for web pages because its tags are simpler than HTML, and they convert to HTML automatically. This means you don't have to know HTML to write something for a web page because Markdown translates your tags into HTML for you.

Since its inception, Markdown has been adopted and utilized by well-known sites like Slack, Reddit, GitHub, Stack Overflow, Medium and, of course, Dev.to. Let's take a look at why.

Comparisons:

Here are a few examples of Markdown and HTML producing the same outputs

Paragraphs

HTML

<h2>This is a heading tag 2</h2>
<p>A paragraph is essentially a welcome space to add text to your page.</p>

Markdown

## This is a heading tag 2
A paragraph is essentially a welcome space to add text to your page.

These will both look like this on the web page:

This is a heading tag 2

A paragraph is essentially a welcome space to add text to your page.
Emphasis

HTML

<p>this is a simple statement. 
<i>This one is italicized.</i>
<b>And this statement is bold</b>
</p>

Markdown

this is a simple statement.
*This one is italicized.*
**And this statement is bold**

Will render like so:
this is a simple statement.
This one is italicized.
And this statement is bold

Lists

HTML

<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>

<ol>
<li>one</li>
<li>two</li>
<li>three</li>
</ol>

Markdown

* one
- two
+ three
// any of these symbols signal an unordered list

1. one
1. two
1. three

one
two
three

one
two
three

Markdown cuts the tags and makes for a more plain text approach, so it's easy to see why text-heavy sites would opt to include it in their code. You may be wondering, if it's so simple, why don't we all just use Markdown and get rid of HTML altogether? Well, that's the funny thing:
Markdown IS HTML!

Parsers

Parsing, syntax analysis, or syntactic analysis is the process of analyzing a string of symbols, either in natural language, computer languages or data structures, conforming to the rules of a formal grammar. A parser takes input data and builds a data structure. In this case, our parser will take in the plain text Markdown as data and build HTML. That's the simple version: The more fun version involves 3 parts, if you count the tree. Just stay with me, we'll get there soon enough.

Lexer:

The lexer is the first stage of parsing, or the first parsing, depending on how you think of it. A lexer will take in the input data, in this case, Markdown plain text, and search for specific patterns. The lexer is set specifically to find just the patterns needed(hashtags, asterisks, spaces..). So the lexer will search through the document and make tokens based on the exact pattern its calibrated to. I keep saying exact because of things like this. See, we're in Markdown right now, and I've already shown how to make a numbered list, so let's use that as an example of patterning. "Exact" is why this happens:

No problems here for a numbered list, but that space after the number is extremely important for pattern recognition. Without it, 1.this is just another number 1, and the lexer doesn't set this bit as a part of the list at all.

So, the lexer takes in the information, converts it into a series of tokens, then brings all of the tokens to the parser proper. Then it's the parser that interprets the necessary Grammar to turn that starting information into... An Abstract Syntax Tree

An Abstract Syntax Tree, or AST, is a data structure used in computer science to represent the structure of a program or code snippet. It represents the text structure in an abstract manner, so it doesn't quite represent every exact detail, but just the structural ones. Once the AST is generated by the parser during the source code translation and compiling process, it is then sent to the interpreter for further processing, such as contextual analysis, optimization, and code generation.

Then the Interpreter, in this case, returns the HTML. Wild ride to shed a few tags, right?

Downloadable parsers

If you'd like to get a look at this structure working at its best before your eyes, there are plenty Markdown Parsers all over the digital world for you to choose from.
Here are just a few:

Marked: One of the most popular for javascript, also available as a CLI tool.
markdown-it: written in javascript and compatible with node.js. "fast, easy to extend, and safe by default"
MDX and react-markdown: MDX allows use of JSX, and react-markdown is a react component that renders the conversion for you

Conclusion

Today, we've gone through a long and interesting (I hope) journey through information interpretation. only to end up right back where we started. Right here in Dev.to, right here in Markdown. But I'm hoping that you, like our input, have come back changed. Happy coding, and thanks for giving this article a parsing glance.

Observer Pattern: a quick peek

steviepee — Mon, 20 Jan 2025 03:13:27 +0000

If you're a person of the code, you've without a doubt encountered many
forms of software design. From constructor, to factory, to Prototype, to Module and Mediator, Memento.. Okay, maybe I'm getting carried away. The point is that there are so many different designer patterns to choose from. It's an ocean of potential code patterns, and here's a chance to dip your feet in, for just a bit.
Let's start by talking about just one pattern. The Observer Pattern

What is Observer Pattern

According to Wikipedia, the Observer Pattern is a behavioral pattern ... in which an object, named the subject, maintains a list of its dependents, called observers, and notifies them automatically of any state changes, usually by calling one of their methods.1 Think of it as if the subject is a Parent that can't wait to call up all its children when something cool happens. Or, to put it into more stern terms, the Observer Pattern ...lets you define a subscription mechanism to notify multiple objects about any events that happen to the object they’re observing.2

Within this pattern, the purpose of the observer is simply to take changed subject state information and inform all of its "subscribers". I say subscribers here, because the Observer pattern is only used when there is one-to-many relationship between objects2. Here's an example of how a Subject relates to its observers:

//let's start with the subject(observable)
let Subject = {
constructor() {
  this._state: 0, 
// ^^represents what the observers are... observing, and checking for changes
  this._observers: [], //An array to hold the list of subscribers to inform of changes
}
  // now we need a function that adds an observer to the list. Let's give it a simple push
  subscribe: (observer) => {
    this._observers.push(observer)
  },
  // and a function that takes a target observer out of the list
  unsubscribe: (targetObserver) => {
    this._observers.filter((sub) => {
      return sub !== targetObserver;
    })
  },
  // also, a function that returns the current state wherever's necessary
  getState: function() {
    return this._state;
  },
  setState: function() {
    this._observers.forEach((observer) => {
      observer.update(this) // We'll set signal as an observer method

    })
  }
};

// And now, the observer
let Observer = {
  update: (subject) => {
    let currentValue = subject.getState()
    console.log(currentValue)
  }
}

How is Observer Pattern?

As was said earlier, the Observer Pattern defines a one-to-many relationship between a subject and its observers. Now that we know what it does, let's take a little look at just how that relationship is realized.

Two Paths diverge

There are essentially two ways the Subject and its Observers can communicate, or interact, with each other. In one model, the Observers query for and take in the information they seek. In the other, the Subject simply sends its specific bits of state information to each of its subscribers. Because of their modes of action, these models of interaction have simply been dubbed pull and push. We'll explore these models through one of the simplest info blocks I can think of: a coin toss.

Pull

In a pull interaction model, Observers register themselves with the Subject as they are created. Whenever the Subject changes, it broadcasts to all registered Observers that it has changed, and each Observer queries the Subject for that subset of the Subject's state that it is responsible for monitoring.3

 let Subject = {
    constructor() {

      this._state = {
        heads: 0,
        tails: 0,
        edge: 0
      },
      this._observers = []
    },
/* here, getState is an object, holding each state value  
 individually, waiting for an observer to choose which value it needs */
    getState: {
     heads: function() {
      return this._state.heads;
},
tails: function() {
      return this._state.tails;
},
edge: function() {
      return this._state.edge;
}
}
    },
    setState: function() {
      this._observers.forEach((observer) => {
        observer.update(this);
      })
    }
  }

  let Observer = {
    constructor(result) {
      this[result] = 0
    },
// each observer will now use its update method to pull its designated value from the _state when informed
      update: (subject) => {
        let currentValue = subject.getState[result];
        this[result] = currentValue;
        return this[result];
      }

  }
}
const flipTally = new Subject;
const headCheck = new Observer(heads);
const tailCheck = new Observer(tails);
const edgeCheck = new Observer(edge);

possible depiction of the pull method in action(picture by Refactoring Guru(4).)

Push

In the push interaction model, *The subjects send detailed information about the change to the observer whether it uses it or not. * In this case, the observers will essentially sift through the given information for the bit each one needs.

 let Subject = {
      constructor() {

        this._state = {
          heads: 0,
          tails: 0,
          edge: 0
        },
        this._observers = []
      },
       /* in this example, getState is a function that will return the entire _state object to each observer, no matter what they're on the look out for...*/
      getState: function() {
        return this._state;
      },
      setState: function() {
        this._observers.forEach((observer) => {
          observer.update(this);
        })
      }
    }

    let Observer = {
      constructor(result) {
        this[result] = 0,
        this.tempState = {}
      },
        // ^^set a temporary state to hold the info given by getState
        update: (subject) => {
          // here, the observer sets a variable to receive the _state object
          let currentValue = subject.getState();
          // then, place that value as its own tempState 
          this.tempState = currentValue;
          /*after that, an observer will take the value it is searching for
and return only that specified information*/
          this[result] = this.tempState[result];
          return this[result]
        }

    }

  const flipTally = new Subject;
  const headCheck = new Observer(heads);
  const tailCheck = new Observer(tails);
  const edgeCheck = new Observer(edge);

Choose your destiny

The coding world certainly is fraught with tradeoffs. It is up to the programmer(you) to choose which model would work best for your needs. In the "pull" model, the observer makes a query after being notified by the subject, adding to complexity and providing a space for inaccuracy in cases where a new change can occur between these moments of communication... If changes are made in the subject state after the observer is notified, it will be refreshed with an old state.5. In the push model, the subject could possibly send mountains of unnecessary data to each observer upon each change, requiring more direct coupling for a more tailored passing of data, which makes using the model for observers that need different information more problematic. In short, the "push" model compromises reuse, while the "pull" model is less efficient.3 It's up to you to decide which path is better for your particular program.

Conclusion

Today, we've taken a closer look at one of many design patterns we use every day in our programs. And I must say, as I've said before, that the coding world is fraught with tradeoffs. There is always a decision to make about what is best for your system, and what can help your program excel at its intended purpose. There are so many more designs and so many more decisions to make, and this is the reason why our programs feel so alive and real, reacting to our every choice in measurable ways. The beauty of change in action, demonstrated here with a dip in the ever-changing waters of the code. Thanks for taking a dip with me. Maybe next time, we can make it a dive. Until then, happy coding.

1.https://en.wikipedia.org/wiki/Observer_pattern

2.https://www.tutorialspoint.com/design_pattern/observer_pattern.htm

3.https://sourcemaking.com/design_patterns/observer

4.https://refactoring.guru/design-patterns/observer

5.https://www.oodesign.com/observer-pattern/

Python: Explained in javascript

steviepee — Mon, 02 Dec 2024 15:03:09 +0000

We see it all the time. Check job listings for programmers and very soon, you'll see the word: Python. If you, like me, started your digital journey in the wilds of javascript, and you'd really like to know what this new language has to offer, then you're in luck. I'll try to explain it as javascriptually as I can. Let's begin!

Why Python at all

The first question on this javascripters mind is: Why python? Why not just stick with javascript? Well, the thing is, Python is a general-purpose programming language that can accommodate a variety of programming paradigms. Data science, artificial intelligence, machine learning, computer science education, computer vision, image processing, medicine, biology, and even astronomy all use it.1
In addition to being widely used, it's mentally ergonomic. Python is a simple to use interpreter-based high-level programming language. It's also very simple to understand a Python program.1
It's also heavily utilized in back-end programming, and more and more often heavily utilized in general. A poll by StackOverflow points out that the popularity of Python as it goes with programming language is extremely high! Second only to HTML and, of course, good ol' javascript.

As you can see, Python is certainly here to stay, being utilized by tech giants like Instagram, Spotify, Reddit, and YouTube, this snake will come to bite you at many different angles. Now, before we really jump in, lets see
which benefits each language provides

Python pros/cons

*Python is a widely used general-purpose, high-level programming language. It was initially designed by Guido van Rossum in 1991 and developed by Python Software Foundation *6 *(he got the name from *Monty).
Python has been an inspiration for many other coding languages such as Ruby , Cobra, Boo, CoffeeScript ECMAScript, Groovy, Swift, Go, OCaml, Julia , etc.6

Here are some pros to Python:

Easy to learn and read: Python's code looks a bit like English, which makes it easier to get what it's doing. This helps a lot when you're trying to find and fix mistakes.
Interpreted execution: Unlike some languages that need to be fully built before you can see if they work, Python lets you try things out one step at a time. This is great for making changes and seeing results quickly.
Dynamic typing: You don't have to tell Python what type of data (like numbers or text) you're using upfront. It figures it out as you go, making things more flexible.
Vast libraries and frameworks: Python has a big collection of extra tools for different jobs - from making websites with Django or Flask to handling data with NumPy and Pandas, or even doing machine learning with TensorFlow.
Cross-platform portability: Python works on different computers like Windows, Linux, and macOS without needing changes. This makes sharing your work easier.
Supports multiple programming paradigms: Python lets you write code in different styles, whether it's focusing on actions, objects, or rules. This means you can pick the best way to solve a problem.

And some Cons:

Python can be slower than languages that are built all at once before running. This might matter for tasks that need lots of computing power.
If you're into making websites, knowing JavaScript is key because it's the main language for creating interactive web pages. Python is more for the behind-the-scenes stuff.
Python isn't the go-to for making apps on phones compared to other languages specifically for Android or iOS.

Javascript pros/cons:

Everywhere in web dev: JavaScript is a must-know for anyone making websites.
See results fast: When you change something, you can see the effect right away, which is great for learning.
Do more than just websites: With Node.js, you can work on servers and more, not just web pages.
Lots of help available: Being so popular, there's a ton of guides and communities to help you out.
Skills that transfer: What you learn in JavaScript, like how to use functions and store data, helps with other languages too.

But also:

Handling many things at once: The way JavaScript does multiple tasks at the same time can be confusing.
Old habits die hard: Some outdated JavaScript ways are still around and can be puzzling.
Too many choices: With so many tools and frameworks, it's hard to know where to start.
Not great for math stuff: JavaScript doesn't have as many built-in tools for math or data science as Python.

Variables

Case-sensitive
python underscore practices

Datatypes

"strings" or text
numbers or integers
Boolean True, False

in operator(.includes, .contains, .hasOwnProperty)
and = &&
or = ||
not (kinda like) !
Functions
indentation
len()
input() always returns a string
if/elif/else
print()
int()/str()
upper()/lower()
find()
.replace()
float()
loops
for item in numbers:
print(item)
i = 0
while i < len(numbers):
print(numbers[i])

Conclusion

We've looked at some facets of Python and Javascript and how they compare to each other, but the real judge is you at the end of the day.
Code on, and prosper!!

References:

https://www.simplilearn.com/tutorials/programming-tutorial/javascript-vs-python

2.https://blog.finxter.com/python-cheat-sheet/

3.https://daily.dev/blog/python-and-javascript-choosing-your-first-language

4.https://radixweb.com/blog/python-vs-javascript

5.https://inveritasoft.com/article-python-vs-javascript:-what-to-choose-in-2021

https://www.geeksforgeeks.org/history-of-python/

Test and test can be two different variables
booleans are written as True and False
typescript-ish, as you can add type annotations optionally
these do not change the code, but they help to remember if you only want a certain type for a variable...
e.g. name: str = "Roy"sg

I.A.M., But Who Are You?? Authentication and Authorization on the internet

steviepee — Tue, 19 Nov 2024 00:29:41 +0000

Picture this: You're invited to a party at a posh, exclusive club.
You spend hours getting ready and preparing just to make sure you make the right impression. You get an Uber, and they say your name to make sure it's you. You make it to the club, you see a loong line, but it's okay: You were invited. There's got to be some perks that come along with that. You walk right up to the front of the line and tell the doorman, "Hey, I'm supposed to be here." He looks you up and down, and the next few moments will be a real-life version of what servers do millions of times a day, all over the internet. I.A.M.

What is IAM?

I.A.M stands for Identity and Access Management, and this is precisely what our bouncer/server is about to practice with you. First, he'll either ask for your name, or an ID. This is known as Authentication. Let's break down what that would mean in our digital world.

Website Authentication

Website authentication is the security process that allows users to verify their identities in order to gain access to their personal accounts on a website2. Authentication, as swoopnow states, is a*huge component involved in keeping user accounts safe and accessible2.* It's a very important factor in maintaining security on websites. Back to the bouncer, what kind of club would it be if he just took everybody's word for it and let them in if they said what you did? Authentication normally takes the form of Matching someone’s login information like their username and password with their identity in the database,1 essentially checking your ID. There are other methods, of course. Different websites have contrasting needs depending on what the site accesses and what the user will tolerate. There are two key factors to consider when creating or updating your website authentication systems— user experience (or UX) and security2. And, based on that delicate dance, there are a few methods of authentication you'll see all over our digital landscape.

Username/password:

Of course, the most prominent form of authentication to date is the Username/password combination. It's an extra boost for security to have both a name you've made for yourself and a password of your choice to access your information, however, oftentimes a username is replaced by the user’s email address, such as in the example to the right. This is often more convenient for the user, although not as secure. It's not too difficult to track down a user's email address, but it is quite easy for you to remember yours, so it means less of a hassle to get you to your information. It's more like the Uber driver that checked your name before getting you where you needed to go. Easy for you, but relatively easy for others.

Multi-factor authentication

There are, of course other ways to prove yourself. Some sites opt to use Multi-factor authorization. Multi-factor authorization will oftentimes ask for the customary username/password combo, but they'll also want another piece of information.This “piece of information” can be anything from a one-time passcode to a physical token that acts as a second confirmation to verify users are who they say they are.4
It's more secure, but more of a hassle. Speaking as someone who needed to get into their email after my phone was stolen, it can sometimes be difficult to make up for that second factor. Which is a good thing, when it works. Kind of like the bouncer who asks for your name, then checks your ID. It's a great idea-- kind of bad for you if you forgot your ID at home, though.

Inheritance

The third form of authentication we'll discuss is called inheritance authentication. Inheritance factors are often referred to as biometric factors, which allow the user to verify their identity using physical characteristics that are unique to each individual. Popular methods include fingerprint scanning or facial recognition.This is a great improvement over the last issue we just spoke about, as you're not too likely to forget your thumb at home, but everything has pros and cons.
According to Swooop, some cybercriminals have found ways to get around these factors using a “master fingerprint” or a high-quality image. And in the case that someone else does get a hold of your biometric markers, that method will never be secure again. You can’t just change your fingerprint!2

Authorization

We've now talked about a few forms of confirming identity, but there's another part to verification, both on the internet and in real life. Take our example from above. There are many ways that bouncer could have confirmed our identity, but there's still one more thing to do: Check the list for your name!

Yes, you're you, but should you be here?

Authorization should be used whenever you want to control viewer access of certain pages.1 If we didn't have that, either no one would have access, or everyone would.. equally frightening concepts. Though authorization is much more cut and dry than authentication issues, it's no less important, and often, they're arm-in-arm. Authentication and Authorization are often used together. For example, students at Boston University are required to authenticate before accessing the Student Link. The authentication they provide determines what data they are authorized to see. The authorization step prevents students from seeing data of other students.1

Come on in!

Once your identity and your credentials have been verified, you're free to head to the party safe in the knowledge that all or most guests there have been properly vetted, and that's really what's at the heart and soul of IAM. Of course, there are many other things we can discuss when it comes to the wide wide world of verity, like tokens, and cookies (cookies are like when you leave the club for a minute and they just let you right back in), but we'll save these for another time. Party safe, and I'll see you next time. Don't forget your ID!

references:

1 https://www.bu.edu/tech/about/security-resources/bestpractice/auth/

React Components: The Cycle of Life

steviepee — Tue, 12 Nov 2024 15:43:18 +0000

What is React? React is an open-source, component-based front end library responsible for the view layer of (an) application.1

What are components? React dev itself defies components as the base class for the React components defined as JavaScript classes.4 A more human definition, though, could be that they are all the little pieces that make up a web page

component life cycle: A component's Lifecycle is defined as the series of methods that are invoked in different stages of the component’s existence2 Most developers would say that a React component's life cycle has four stages (which is technically true, the best kind of true), but if you boil it down, each component pretty much lives life much like we do: They're born, they learn, they die.
[Note: There are two ways to syntactically refer to React components, those being class-based and functional components. Current good practices, and React itself for that matter, would recommend defining components as functions instead of classes4, but many legacy systems refer to components as classes. Further, the class structure more directly refers to the component's status and life cycle stages, so we'll be opting for class structure. Just for now.]

They're Born:

1.initialization phase.

According to javatpoint.com, this phase*is the birth phase of the
lifecycle of a ReactJS component.1, but it works like more of a pre-
natal phase, as this is the phase where *... a component contains the
default Props and initial State1**, gaining traits in-digital-utero
that will be used after its birth into the DOM.
These are some methods that are utilized at this stage of life:

static defaultProps():previously getDefaultProps()es5 It is used to specify the default value of this.props. It is invoked before the creation of the component or any props from the parent is passed into it.(1)

class MyComponent extends React.Component {
static defaultProps = {
name: 'Jack',
age: 35
};

initialState(): *previously getInitialState()es5
It is used to specify the default value of this.state. It is invoked before the creation of the component.(1) We may also use the ES6 class Constructor() method in the component's creation, much like any other class instantiation.

class Clock extends React.Component {
constructor(props)
{
// Calling the constructor of
// Parent Class React.Component
super(props);

    this.state = { date : new Date()/*initial state*/ }; 
}

}

from Imgflip Meme Generator

2.mounting phase.

Now, here's where the real life begins! This is the phase when the component is rendered for the first time, added to the DOM, and ready to see the world. At this point of the life cycle, we tend to use methods like, of course, render(), which is invoked to examine this.props and this.state and return one of the following types: React elements, Arrays and fragments, Booleans or null, String and Number. and may (be) call(ed) at any moment and many moments, not just at mounting time. Also, we can use componentDidMount(), which sounds a little like a first birthday, but is really a method ** invoked after the initial mounting of the component in the DOM tree. It's a great place to call API endpoints and to do network requests.3**. Here is the method in action, curtesy of tutorialspoint.com:

componentDidMount() {
this.timeFn = setInterval( () => this.setTime(), 1000);
}

In this example, the component(a clock, in this case,) is set to update its time every second right after it is first rendered.

They Learn:

From here on in, they'll live a life kind of like ours: Lauding their achievements, questioning their decisions, remembering their past, and re-rendering as many times as their environment requires. This may sound poetic, but React seems to have that way about it. You see, React follows a default procedure in the Naming Conventions of these predefined functions where the functions containing “Will” represents before some specific phase and “Did” represents after the completion of that phase2, not to mention "Should", usually before a life-rendering change is at hand. GeeksforGeeks depicts a great snippet of the component life cycle, with these Conventions presenting throughout:

import React from "react";
import ReactDOM from "react-dom/client";

class Test extends React.Component {
constructor(props) {
super(props);
this.state = { hello: "World!" };
}

componentDidMount() {
    console.log("componentDidMount()");
}

changeState() {/*sets a new state for the component*/
    this.setState({ hello: "Geek!" });
}

render() {
    return (
        <div>
            <h1>
                GeeksForGeeks.org, Hello
                {this.state.hello}
            </h1>
            <h2>
                <a
                    onClick={this.changeState.bind(
                        this
                    )}
                >
                    Press Here!
                </a>
            </h2>
        </div>
    );
}

shouldComponentUpdate(nextProps, nextState) {/*checks for a change in props. If there is one, the method will return true and the component will render again with the new information*/
    console.log("shouldComponentUpdate()");
    return true;
}

componentDidUpdate() {
    console.log("componentDidUpdate()");
}

}

const root = ReactDOM.createRoot(
document.getElementById("root")
);
root.render();

As you can see, React facilitates a component life cycle with the potential for many dynamic changes based on environment and needs in a cogent and understandable phrasing structure.

from Imgflip Meme Generator

They Die:

A component's death and its birth have one thing in common: they can only happen once. Once a component is unmounted, it cannot be re-mounted. Because of this, React includes some clean-up procedures to get the component's house in order before its final moments. The componentWillUnmount() method is good for performing cleanup tasks before a component is unmounted. Its duties include: Canceling network requests, clearing timers, removing event listeners, an cleaning up subscriptions. this is a highly recommended option in order to avoid side effects, bugs, and memory leaks.Note: this should be done after the componentDidMount() method and mirror it, and invoked just before unmountComponentFromNode(). Kind of like writing a will, it sets up cleanup for anything the component gains control of in life.

Moving through the path of a component's life cycle is a very useful way to get into seeing the ins and outs of how React works. I hope that likening the lives of these components to our own has aided in your understanding of the environment React provides, as well as an appreciation for the Great Cycle of Life. Until we mount again!

References:
1.https://www.javatpoint.com/react-component-life-cycle
2.https://www.geeksforgeeks.org/reactjs-lifecycle-components/
3.https://www.tutorialspoint.com/reactjs/reactjs_component_life_cycle.htm
4.https://react.dev/reference/react/Component
5.https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

Operators

steviepee — Wed, 09 Oct 2024 15:44:57 +0000

Okay, so we've got variables, we've got values of all sorts, and we've got our good, good programmatical intentions, but how do we refer and compare our values and variables to each other (and themselves) to make our digital dreams come true?? The answer, my friend, is simple, yet complex. Operators!! Welcome to their wonderful and comparative world!! Don't feel overwhelmed, though. We're gonna take it by the numbers.

Prelude: Operands

We don't really mention operands too often, but that doesn't mean they're not super important! An operand is the data that is being operated on. The operand combined with the operator makes an operation(1), and without that information, there's no program at all. This is true whether we're referring to many bits of data, or just one.

1- The unary

These operators require only one operand for operation.(1). This means we'll start by organizing, contemplating, morphing, and/or comparing data to itself. In Javascript, we can do a good few things with a single operand to deal with. Most of these things have to do with the types of variable we're dealing with. Check out these examples:

+: The unary plus (+) converts an operand into a number, if possible. It is commonly used to ensure numerical operations on variables that may contain numeric strings(2).*If the operand is a string that represents a valid number, it will be converted to a n umber(2). If it can't be converted, it returns NaN (not-a-number).

-: (2)The Unary Negation (-) operator is used to convert its operand to a negative number if it isn’t already a negative number. The unary negation operator *(first) converts its operand to a number(2).* If it can't convert, it'll still return Nan(there's no -NaN).

++: The unary increment operator (++) adds 1 to its operand’s value and evaluates to the updated value(2). It can activate before or after an expression, depending on whether it is placed as a postfix or prefix operator(2).

(2)Postfix: In postfix, the current value of the variable is used in the expression, and then the variable’s value is incremented by 1.(2)

Prefix: In prefix, the variable’s value is first incremented by 1, and then the updated value is used in the expression.(2)

--: The unary decrement operator (–) subtracts 1 from its operand’s value and evaluates it to the updated value. Like increment, this can also be used as a postfix or prefix operator(2).

Postfix: In postfix form, the current value of the variable is used in the expression, and then the variable’s value is decremented by 1(2).

Prefix: In prefix form, the variable’s value is first decremented by 1, and then the updated value is used in the expression (2).

!: The logical NOT (!)(a.k.a. the "BANG" operator) *negates the Boolean value of an operand, converting true to false and false to true(2).*This is mostly used in "if" statements and other truth-based operations.

typeof: (2)The JavaScript typeof operator returns the data type of its operand in the form of a string. The operand can be any object, function, or variable.(NOTE: the typeof operator sees arrays([]) and objects({}) as objects, and will resolve "object" in both cases. Be cautious when this is the answer.)

delete: (2)The delete operator in JavaScript removes a property from an object. If no other references exist, the property’s memory is automatically released.

void: The void operator evaluates the given expression and then returns undefined. It is often used to ensure that an expression has no return value.(2)*

2- Binary:

Ah, programming languages, operating in the binary since '01. Jokes aside,
binary operators are the ones that require two operands for operation(1). Most of our operations are done using these operators, since most of our more complicated operations distill down to one-on-one comparisons (those that I've seen, so far). Binary operators come in many shades, so, as to save you a bit of time, I whipped up a few tables.

Let's begin with the binary operators you're already familiar with:

Arithmetic Operators: Arithmetic operators are binary operators(1) that work pretty much the same as you likely learned them in grade school. As such, they're normally used with numbers, though there are some exceptions.The first operand is on the left of the operator, and the second operand is on the right.

Name	Operator	Usage	Example
Addition	+	adds operands	4 + 6: 10
Subtraction	-	subtracts operands	8 - 6: 2
Multiplication	*	multiplies operands	10 * 2: 20
Division	/	divides operands	20 / 2: 10

%: Modulo: The modulo operand (commonly mis-named "modulus")behaves similar to division, in that it divides, but there's more, I promise! It divides the first operand (the dividend) by the second operand (the divisor) and returns the remainder(5). Think of it like grouping what's on the left into groups of what's on the right and answering what's left over.

Comparison/Relational Operators: All comparison operators also require two operands(1). The value of operands with a comparison/relational operator between them will be in the form of a boolean, so I like to think of the operators as asking a question. Here are some examples:

Name	Operator	Usage	Example
Less-Than	<	is left less than right?	4 < 6: true
Greater-Than	>	is left greater than right?	8 > 6: true
Less-Than or equal to	<=	is left < or equal to right?	10 <= 10: true
Greater than or equal to	>=	is left > or equal to right?	20 >= 2: true
Loosely-equal	==	does left have same value as right?	10 == '10': true
Strictly-equal	===	does left have same value and type as right?	10 === "10": false
Strictly inequal	!==	does left have diff value and/or type as right?	10 !== "10": true
Inequal	!=	does left have diff value than right?	10 != "10": false

=: (1)The assignment operator: Will not return a boolean. It's the O.G. equals and creates truth wherever it goes. If a didn't = b earlier, it for sure does now (errors aside).

The assignment operator likes to bring all of its math class friends along, re-assigning the countryside in its wake. If your = shows up with a math-y operator (+, -, *, /, %), when they're done, the left operand will come back changed.

In each of the exercises in the following table, each operation is assumed to follow (let x = 10);

Name	Operator	Usage	Example
Plus-equal	+=	Left = its previous value + right	x += 7: x = 17
Minus-equal	-=	Left = its previous value - right	x -= 6: x = 4
Divide-equal	/=	Left = its previous value - right	x /= 2: x = 5
Multiply-equal	*=	Left = its previous value * right	x = 10: x = 100*
modulo-equal	%=	Left = its previous value % right	x %= 4: x = 2

Logical Operators:

Sometimes, when we're setting conditions, we want to add more conditions to save time and expensive mental energy. In these cases, logical operators are the. . . ahem. . . logical solution.

&&: The AND operator is placed after an operand. AND returns true if both operands are truthy and false otherwise:(6)

||: Want to add a condition to an operand, but either one is good enough for you? OR is the perfect solution! Add a || to your statement, then your additional stipulation(s). then, if any of its arguments are true, it returns true, otherwise it returns false:(6)

??: The nullish coalescing (??) operator is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand.(7)

3- Ternary:

* The Ternary:

There's only one ternary operator in Javascript, used as shorthand for [if statements]. It's pretty simple, and tends to look like this: conditionalExpression ? truthyValue : falsyValue(4)
Here, I'll show you how it works:

~- And More!

There are so many ways to refer to our bits and pieces of data to give them just the right relevance in just the things we happen to need them for when we write and implement code. I may have only shared the ones and twos (and a three) with you, but with this, as with coding in general, the sky's the limit! No, scratch that: the sky's too small. Even the stars are a stopping point to the edge, so don't be afraid to reach out. Buckle up, intrepid coders, we're heading To Infinity, and BEYOND!!

(1). https://www.freecodecamp.org/news/unary-binary-ternary-operators-
javascript/
(2). https://www.geeksforgeeks.org/javascript-unary-operators/
(3). https://stackoverflow.com/questions/12122293/list-of-all-binary-
operators-in-javascript
(4). https://www.freecodecamp.org/news/javascript-ternary-operator-
explained/
(5). https://www.freecodecamp.org/news/javascript-modulo-operator-how-to-
use-the-modulus-in-js/
(6). https://javascript.info/logical-operators
(7). https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing

What's In The BOX?!: Variables

steviepee — Sat, 10 Aug 2024 00:45:01 +0000

Little Boxes

What is a variable? Most (especially mozilla web docs(MDN)) would describe it as "a container for a value". A named code that refers to a program of any kind from simple values to functions.

var foo = "I pity the...";
const group =['Rhonda', 'Jamey', 'Kori', 'Greg'];
let greed = function (root) {
console.log("of all evil");
}

Picture by MDN

It's common practice to describe a variable "being like little cardboard boxes that you can store things in.(MDN)" Without those boxes, our values would shrivel and die in the heat of the code, ceasing to exist soon after implementation. As said in the tome Eloquent JavaScript(EJS), the variables would need to "...be used immediately or (they) will dissipate" and there are two ways to create these containers for lasting expressions:

Declaration: Means just what it sounds like. Declaring a variable confirms its existence and name, but little else. The box isn't open, so we can't see it's contents, or value. Because the box is closed, but we expect something to be inside,(Schrodinger vibes, anyone?) we give these boxes the justly named value undefined.

var question;
let box;
const cat;

Initialization: Initialization is the JavaScript way to say "There's a box here, and this is what's inside." This box is brought into existence wide open, and we can easily see its contents. "The = operator"(EJS) is used to denote what's inside the box. Which could be anything, really. Or nothing.. To say "This box is open, but there's definitely nothing in it" we use the term null. Here are some examples of initialization:

var question = true;
let box = null;
const cat = 4 + 3;

The reading of = will always give what's on the left of it the value of what's on the right. That's how we know that there's nothing in box
Now, like any open box, its contents can shift at just about any time you like. "* The = operator can be used at any time on existing (variables) to disconnect them from their current value and have them point to a new one:*"(EJS)

let greenLight = false;
//*the greenLight box contains the false value*
greenLight = true;
//*greenLight is now set to the value true*

The false value used to inhabit this box, but with one simple change, there's a whole new value inside. It's just that easy!
Okay, it feels like we've thoroughly explored and internalized the container, box concept. Now let's explore why it's wrong.

Learn the box. Forget the box.

The "container" philosophy for variables is pretty good for a lot of things, as you may have seen. Still, at some point, boxes start to get complicated:

let a = 5;
let b = a;
a = 7;
console.log(b);// 5

If box b has box a inside it, and box b is filled with a new value, isn't the same true for a? I mean, two boxes put together tend have the same contents inside when filled, right? Wrong. The box concept of variables becomes confusing when you think about these kinds of things, because often, variables don't really behave like boxes at all.

Bindings and tentacles

Really, in this case, it would be better to think of the data as having been there all along. In essence, a variable just kind of makes that piece of data important and accessible. The programs are floating in the vast reaches of techSpace, and it's up to our variables to "catch and hold (them)"(EJS). It's a little strange at first, but it makes a lot of sense when you think about it. Eloquent JavaScript describes it like this:

"You should imagine bindings as tentacles rather than boxes. They do not contain values; they grasp them—two bindings can refer to the same value. A program can access only the values to which it still has a reference. When you need to remember something, you either grow a tentacle to hold on to it or reattach one of your existing tentacles to it."

Now, attach is a little deceiving here, since these "tentacles" only "grasp" at values that are small enough to hold (64 bits). These values are called "simple dataTypes"(EJS) and include Numbers, Strings, and booleans. If a value is simple, our tentacle will wrap around and hold on to it.. Kind of.. An act we call Pass by value(GFG). I say kind of because if a value our tentacle looks for is simple enough, it won't bother holding on to the same one, it'll just make a copy and hold it for itself:

In the above example, our b tentacle didn't bother grasping the same 5 that a had, so when a changed its stripes and that 5 disappeared into space, b was still left with the copy of 5 it was originally holding. Now lets try something a little different:

var a = [13, 40, 27];

var b = a;
b.push(5, 1)//push is a method that moves these values into the end an array

console.log(a);//[13, 40, 27, 5, 1];

This example is a bit more complex. Our complex dataTypes(arrays, objects, functions) are much to big to go around making copies of them to wrap our tentacles around, so what we do is simply point to the original. An act we like to call Pass by reference(GFG). In this example, b can't hold on to its own array, so when it goes through a change, the original array it points to feels that change pass through it.

This was a small introduction to how we name, grasp, point to, and otherwise utilize data for our own brilliant purposes. It's easy to overlook, but without variables, we would all be lost in a sea of code, digital waters all around us, grasping away as digital water falls right through our fingers. Variables are the boats that carry us all to our destination, and I, for one, appreciate the ride.

References by initial
(MDN)
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Variables
(EJS)
https://eloquentjavascript.net/02_program_structure.html
(GFG)
https://www.geeksforgeeks.org/pass-by-value-and-pass-by-reference-in-javascript/