DEV Community: Alex Hebert

Exploring Web Development: HTMX

Alex Hebert — Mon, 24 Jun 2024 07:02:50 +0000

What is HTMX

The last 2 weeks I have been exploring HTMX, a light-weight, front-end library that looks to bring the needs of a modern web app back to just HTML. While HTMX is written in JavaScript, using HTMX doesn't require you to write a line of JavaScript to create a fully fleshed, interactive front end. HTMX uses custom HTML attributes to allow any HTML element to perform AJAX requests, manipulate the DOM, trigger CSS transitions and animations, and handle WebSocket events. The key difference between a site running HTMX and a site running another front-end library React is ironically the server. HTMX relies on HTML responses from the server rather than JSON or any other data. HTMX allows you to take the HTML response from the server and insert or replace the element anywhere in the DOM. This means the dynamic parts of the view need to be generated by your server rather than the client.

The 4 "Whys" of HTMX

HTMX's inception was based on 4 questions that address problems with bare HTML as basis for modern web applications. HTMX provides solutions to these 4 questions. But first lets look at the HTML <a> element. You use this element to get some HTML from a server and render it, replacing the DOM with the new HTML. An <a> tag in bare HTML would look something like this:

<a href="/blog">Link to Blog</a>

HTTP Requests

Why should `<a>` and `<form>` tags be the only tags to make HTTP requests?

Modern web apps use AJAX requests to send and receive information from the different parts of the app. So why should <a> and <form> tags be the only elements that can perform these important actions. HTMX allows all elements to perform AJAX request using custom hx attributes. So we can take our <a> tag from earlier and turn it into a button that does the same thing.

<button hx-get="/blogs">Click to go to Blog!</button>

Triggers

Why should only click and submit events trigger AJAX requests?

Since only <a> and <form> can perform AJAX request in bare HTML, only click and submit events can trigger them. With HTMX events like mouse over, key presses, change can trigger AJAX requests. HTMX also has special events that can trigger element requests like load, revealed, and polling with hx-trigger. HTMX triggers can also include modifiers that can delay, throttle, and prevent multiple triggers. We can get the HTML from "/blogs" when hovering over a div instead of clicking a button.

<div
  hx-get="/blog"
  hx-trigger="mouseover"
>
  Hover to see the blog!
</div>

Verbs

Why should only _GET and POST methods be available?

Generally in bare HTML, <a> tags perform GET requests and <form> tags perform POST requests. With HTMX you can use any element to perform any request type.

Attribute	Verb
`hx-post`	POST
`hx-patch`	PATCH
`hx-get`	GET
`hx-delete`	DELETE
`hx-put`	PUT

Replacement

Why should you only be able to replace the entire screen?

When you receive HTML from a server when working with bare HTML, the response data replaces the entire DOM. HTMX allows you to insert or replace elements anywhere in the DOM. This allows server responses to to respond with a single HTML snippet rather than an entire page, HTMX can dynamically add, subtract or replace elements as needed to form the page from the snippets provided by the server. Elements can be targeted with CSS selectors and extended syntax that allow you to define the target easily. Keywords like closest and next allow you to avoid coming up with endless class names by targeting an element by referencing its relative position. The way to swap or insert can be defined with the hx-swap attribute. With this we can render the a list of blog posts in a div dynamically, adding new posts to the top of a container div with each button press.

<div class="blogs-container"><!--- Blogs Go Here ---></div>
<button
  hx-get="/blog"
  hx-target=".blogs-container"
  hx-swap="afterbegin"
>
  GET BLOG!
</button>

Final thoughts

I find HTMX to be a very appealing technology. It is a very light, independent library. I think relying on the back-end to handle data and front-end to simply render and ask for changes falls more in line with the spirit of REST and simplifying the front-end back to HTML and CSS is something I find quite novel in this era of web development. There is increased risk of XSS attacks if HTMX is not implemented and sanitized correctly, and it feels a bit sacrilegious to use JavaScript as the server with Node and remove the JavaScript from the front end with HTMX. Overall I am planning and excited to use HTMX in the future. If you are also interested in trying HTMX, see their great docs to get started. Good luck and happy coding!

Exploring Web Development: Ruby on Rails

Alex Hebert — Mon, 10 Jun 2024 04:07:21 +0000

What is Ruby?

Ruby is a general purpose programming language that features simple and beginner-friendly syntax while being a powerful tool for experienced developers. Ruby is an interpreted language and is dynamically typed similarly to JavaScript and Python making my transition to Ruby fairly simple.

There are a few things I found while learning ruby that I found interesting. For example, ruby has an unless statement along with the if statement that is a negated version of an if. Ruby is a generally more readable language than more symbol filled languages like JavaScript.

What is Rails?

Rails is a full-stack web framework for Ruby that is "Optimized for happiness." It uses the MVC framework pattern which they call "Active Records", "Action Views", and "Action Controllers". Ruby on Rails was made to take the tedium and repetition out of web development. The main way it does this is 'Convention over Configuration.'

Rails is a very opinionated and strict framework in order to make all its magic work. Things like naming conventions are very important to the Rails framework to make everything work correctly. To this end, the amount of customization you get with Rails is fairly limited compared to something like created a MERN stack app. But because the configuration is baked in its very easy to jump straight into the hacking with Rails.

The lack of configuration does not hold Rails back either, many very large and popular sites are built with rails like GitHub, AirBnB, Shopify and Square. Before jumping into project set up, lets take a look at the 3 main components of the Rails MVC framework.

Project Setup

Lets make a to-do app with Rails! We will walk through project setup, defining a route, generating a controller and writing a view.

Install Rails

Assuming you have Ruby and your preferred database installed, we need to install Rails. Running this command will download the gem:

$ gem install rails

Creating the App

Rails makes it very simple to get your development environment set up. The rails cli command will create your directory for you:

$ rails new <app-name>

And that's it, the skeleton for the app is set up. The majority of the work is done in the app directory. Here you'll find the models, views, controllers and helpers for your app. The config directory houses all the configuration for the app including for the database and routes.

Running the Server

Since rails took care of all the set up work for us, we can immediately run our server with:

$ bin/rails server

This will spin up a server on localhost:3000 that watches for changes made and restarts automatically.

Making the App

Define a Route

The first thing to do to implement new functionality to a Rails app is to make a route to accept and map a request to a controller. The route configuration is in config/routes.rb. Here is where you will define all the endpoints for your app. For now lets add a route to get the to-dos. Routes are written in Ruby DSL(Domain-Specific Language) and take the shape of <HTTP Verb> <enpoint>, to: <controller>#<action>. to map GET /todos to the index action of the TodosController we add this to config/routes.rb:

Rails.application.routes.draw do
  get "/todos", to: "todos#index"
end

Generate a Controller

With Rails, rather than writing controllers from scratch, they can be generated. When Rails generates a controller, it also generates associated unit tests and helpers for the controller. To generate a controller for the GET /todos route we just added, run the command:

$ bin/rails generate controller Todos index --skip-routes

This command generates a TodoController with an index action. We use --skip-routes since we already defined the route we want to use.
The controller we just generated is housed in app/controllers/todos_controller.rb. Right now our controller should look like this:

class TodosController < ApplicationController
  def index
  end
end

Notice the lack of code here. This is a great example of "Convention over Configuration." If an action does not render a view explicitly it will default to rendering the view that matches the controller.

Create a View

One of the things generated alongside our controller was the file app/views/todos/index.html.erb, the default view for the TodoController. Here we can use HTML and Ruby code to make a template for our data. For now lets just change the file to say hello by adding

<h1>Hello! Welcome to your Todo List!</h1>

Now we can navigate to http://localhost:3000/todos to see our welcome message. With a handful of commands and even fewer lines of code we now have a route that accesses a controller with an action that renders a view!

Final Thoughts

Rails is a genuinely fun framework to work with. Removing the tedium of writing the same logic over and over for each feature makes development lightning fast. Not only is Rails simple but its also fully fleshed out and powerful, no wonder so many companies opt to use rails for their web apps. While there is a bit of a learning curve once you get into the nitty gritty of fleshing out an app with Rails, I think it is well worth the work. If youre interested in continuing to explore rails, I recommend heading over to the Rails guides and following their getting started tutorial. Good luck and have fun developing!

Exploring Web Development: Python + Django

Alex Hebert — Sun, 26 May 2024 01:51:56 +0000

The more I have learned about full-stack development with stacks like MERN, the more curious I have become about how other tech stacks compare, how they look, and how hard would it be for me to learn them now that I have a foundational understanding of full-stack development. So I decided to challenge myself over the next 6 weeks: to learn 3 new tech stacks and write a todo app with each one. After 2 weeks of learning the tech and writing the app I will log my experience here, give a brief overview of what I learned, and share my opinions on working with the technologies.

The first tech stack I chose is Django. I chose Django for 2 main reasons:

I already know a decent amount of python from my college projects
Python is one of the most popular languages right now and freshening up a bit on my Python knowledge seemed like a pretty good use of my time

Excited to dive back into python after being fully immersed in JavaScript, I dove in head first.

Django Basics

Welcome to Django

Django is a python web-app framework that focuses on development speed. Their homepage says: "Django was designed to help developers take their applications from concept to completion as quickly as possible," and I feel that they are definitely succeeding in that goal. Developing with Django felt incredibly straight-forward and it did not take much time at all for me to get from an empty directory to basic functionality.

Setting up the app

Django makes setting up your workspace super easy. Once you're in your project directory run django-admin startproject todo-project to start a new project called todo-project. Django will make a new directory called todo-app with this file structure:

manage.py is a key part of django, running it is how we will make changes to our database, start our server and do most other interactions we will need to do with our app. __init__.py is an empty file that's used by python to denote the directory as a python package. For the time being we wont worry about settings, asgi, or wsgi, instead we should start our first app. In Django, projects are collections of apps and apps are the functional components. Apps are like modules that can be implemented into many projects - like web app Legos!

To start our app we can use manage.py to set up our app skeleton with python manage.py startapp todos that will generate this directory:

After our app is set up by Django we need to add it to our project. To do this we need to edit the INSTALLED_APPS array in the settings.py in the todo_project directory.

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'todo'
]

Next we need to add a url for the project to use the todo app. In urls.py add a new path to end of the urlspatterns array.

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('todos/', include('todo.urls'))
]

And just like that our app is integrated into our project! We can now start working on our functionality.

Building out the App

To get a something rendering we need to add a view to our app. In views.py we need to from django.http import HttpResponse. This will allow us to render a string to our page. All views take in a request and return some response. This response could be
a simple string like return HttpResponse('This is where I would put my todo... If I had one!') or can respond with html with django's render shortcut. For now lets send back that string by adding this to views.py:

from django.http import HttpResponse

def todo_render(req):
  return HttpResponse('This is where I would put my todo... If I had one!')

Now to actually access this view we need to set up an endpoint to use it. We can start by creating a new file in the todo directory called urls.py. This file is similar to the urls.py in the project directory but these endpoints will be added to the end of /todos. We can set up the view we just made as the default view for /todos by adding this to urls.py in todo:

from django.urls import path

from . import views

app_name = "todos"
urlpatterns = [
    path("", views.todo_render, name="index"),
]

And just like that we have a incredibly simple but functional app with Django!. Now lets go checkout all our hard work.

Running the app

To start our server to look at our site in the browser all we need to do is run python manage.py runserver and navigate to localhost:8000/todos/. Thats where this little tutorial will end but if this at all interests you should definitely go to Django Docs and follow their tutorial where they walk through building a polls app.

My Thoughts

I found working with Django to be an extremely streamlined process. Django handled a lot of the tedium of set up and lets you get right into the coding. This is both a blessing and a curse. I like to know how things are working behind the scenes and the degree of abstraction Django uses to get the development as quick as possible feels very hand wavy. I walked away from making the app knowing how to get all the code in the right places but not sure why or how the code works, which is a feeling I am not a big fan of. It reminds me of this gem from 2015.

Todd Howard It Just Works GIF - Todd Howard It Just Works Bethesda - Discover & Share GIFs

Click to view the GIF

tenor.com

With that said, I can see myself learning more and using Django in the future to quickly get an idea into practice. One of the things I really like about Django is the included admin view that allows you to interact with your app in an easy to use GUI. I also like the html templating that I find to be very straight forward and easy to pick up. Django is a well-oiled machine and makes web development much more accessible by removing the most intimidating parts, setup.

Resources

I relied on the Django Docs to learn. The documentation is great and the tutorial covers everything you need for the basics.

I hope you try out Django, it is a powerful tool to have in your back pocket if you need an idea in code quickly. Have fun and good luck!

Godot: Lowering the Barrier to Entry of Game Dev

Alex Hebert — Sun, 21 Apr 2024 19:00:50 +0000

Now that I am getting towards the latter third of my coding bootcamp, I have been asked a few times: "What do you want to do when you're done?" And while I feel it may be a bit early to make that kind of decision, it is certainly not too early to start considering my options.

One that has always enticed but intimidated me was game development. I have been playing video games for essentially my whole life and game design seems to be a perfect blend of exploring my creativity and software engineering. However, any foray into the world of game design in my past has led me to back away from the prospect because of the intimidating complexity and saturated market. In recent years, with the extreme success of smaller studios starting to outclass the success of large game studios, I have begun to gain some hope that I could find some success as a smaller creator. This combined with my newly gained confidence with coding, I figured now was as good of a time as any to leap back into learning about game development, this is where I found Godot.

What is Godot?

Godot (pronounced "guh-doh") is a game engine that has gained a lot of popularity in the last couple of years. Godot makes game development accessible to anyone who wants to give development a try. There is a very low barrier to entry since the engine is free and can run on most modern systems. No need for a subscription or a beefy PC. Godot has also fostered an active and talented community because of the open source code, allowing the community to develop Godot to their needs, furthering the accessibility and functionality of the engine. I don't think I could do better than the Godot developers themselves at describing their product. Their short write-up says:

Godot Engine is a feature-packed, cross-platform game engine to create 2D and 3D games from a unified interface. It provides a comprehensive set of common tools, so that users can focus on making games without having to reinvent the wheel. Games can be exported with one click to a number of platforms, including the major desktop platforms (Linux, macOS, Windows), mobile platforms (Android, iOS), as well as Web-based platforms and consoles.

Godot is completely free and open source under the permissive MIT license. No strings attached, no royalties, nothing. Users' games are theirs, down to the last line of engine code. Godot's development is fully independent and community-driven, empowering users to help shape their engine to match their expectations. It is supported by the Godot Foundation not-for-profit. Godot Docs

Now, that has a lot of jargon packed into a short space, so let's break it down before getting into the basics of Godot.

Godot is a feature-packed, cross-platform game engine

Godot provides a lot of the same features that other engines like Unity or Unreal provide but trims the fat leaving only the key features that developers need. This package is wrapped up in a download that is only just over 1.4 GB, less than half of other engines. This small and efficient size allows Godot to be run on most modern systems. Godot also supports all operating systems including Linux.

... to create 2D and 3D games from a unified interface.

Godot has one interface whether working in 2D or 3D and neither feels like it takes precedence over the other. Godot provides equally useful and intuitive tools for working with either style and concepts transfer seamlessly from developing in one to the other.

Games can be exported with one click to a number of platforms

Godot allows developers to make games for any modern platform including PC, iOS, and Android, as well as consoles like PlayStation, Xbox, and Switch. Since there is support for all these platforms, it is possible to develop a single game and export it to all these platforms with little work from the user.

Godot is completely free and open source

Of the major game engines, Godot is the only completely free and open-source software. This means all the source code for the Godot engine is completely available and can be copied and edited to the needs of the developer without any paywall to access this. This allows for an expansive extension library from the Godot community that provides developers with even more tools. Godot's community is quite large and very passionate, in some ways the Godot engine feels more like a community project rather than a for-profit software.

Godot Basics

Now that you have an understanding of what Godot Engine is, let's take a look inside and see how game development works in Godot.

Games are comprised of scenes made of one or more node trees. The nodes can be wired together using signals.

Scenes

Scenes are reusable sets of nodes that can represent any entity in the game. Characters, items, and environments are all scenes. Scenes use a root node that children and sibling nodes are added to to build out the scene. Scenes are then able to be nested to add things like the character and items to the environment.

Nodes

Nodes are the building blocks of the Godot engine. Nodes join together to form scenes through relationships called trees. Nodes can be added to other nodes to provide the parent node with the functionality of the child node. For example, a basic player scene could use a CharacterBody2D node as the root node. To add a sprite to the player you can add a Sprite2D node as a child. Adding things like a collision node and camera node will add more functionality to the player allowing it to interact with other scenes with collision shapes and providing a locked camera to the player. Nodes can also have attached scripts to further enhance the node's functionality and interact with signals.

Signals

Godot nodes use a system of signals that trigger whenever certain events occur. These signals can be used to have nodes communicate without connecting them through code. Signals can also be used to trigger code execution. For example, buttons emit signals when pressed, this can be used to trigger a code execution to exit the game, change scenes, open a menu, or any number of other actions. Other signals like collisions make coding out interactions between scenes very straightforward.

GDScript

Godot's purpose-built scripting language. GDScript was inspired by Python and it shows in its simple syntax and use of indentation to structure code blocks but has many differences that make it great for game development. Baked in linear algebra use, fast compilation times, and no garbage collection are a few of the features of GDScript that, in conjunction with the simple syntax and low learning curve, make GDScript a vital part of making Godot accessible to beginners

Conclusion

This is a very cursory glance at Godot engine, if this interests you at all, I strongly encourage you to take a crack at making a game. There are more than a handful of tutorials out there that can walk you through your first game. I followed freeCodeCamp's on Youtube that, while a little out of date, covered everything in good detail. Checkout Godot's docs if you want to read more and download the engine.

Happy Coding!

RegEx: Decoding the Symbols

Alex Hebert — Sun, 14 Apr 2024 19:20:03 +0000

My first encounter with regular expressions was in a solution for a coding problem on Codewars, specifically Count the smiley faces!
Which asks you to count the number of smiley faces in a given array but the catch is each smiley can have 1 of 2 kinds of eyes (: or ;), may or may not have a nose represented by 1 of 2 symbols (- or ~), and 1 of 2 symbols (D or ) ) for the smile. In total there are 12 different combinations that are a valid smiley. I, being the young and naive programmer I was, hard coded all 12 of those faces and checked every element against that list. And it worked! But the top solution included some strange syntax that I had never seen before

function countSmileys(arr) {
  return arr.filter(x => /^[:;][-~]?[)D]$/.test(x)).length;
}

What in the world is /^[:;][-~]?[)D]$/? How does this jumble of characters do anything to filter the array? After looking at it for a little while I noticed a some things that made some sense. All the symbols that can make up a face are there, grouped together by the facial feature they represent but as for how all the other symbols played into filtering out the non faces, not a clue.

After this brief run in, I saw it a few more times in other solutions but I still couldn't understand them. I did figure out that these were Regular Expressions or Regex. Researching did little to help me read them, alot of symbol and explinations that went right over my head, but I did get a better understanding of what regular expressions could do from MDN: "Regular expressions are patterns used to match character combinations in strings." So thats what the solution for Count the Smiley Faces was doing, it was searching each string for a pattern that is a valid smiley.

Now I understood that RegEx is a tool that I can use to find patterns in strings and javascript allows me to do various things with them, like testing if the pattern exists in the string or getting an array of all the times that pattern appears in a string. I still didn't know how to write regular expressions but I could identify when I might want to use them and it took a little while but that time came in the form of rewriting JSON.parse. I figured parsing a JSON string would be a great use for regular expressions since I can look for patterns like open and close brackets for arrays or curly braces for objects. While I was unsuccessful in parsing json with regular expressions, (nested arrays and objects with multiple entries put the nail in the coffin there) I did finally learn how to write regular expressions and wrote these 3 monsters to parse out object keys, /(?<!(: ?)|["\w]|(: ?{))(".*?")(?=:)(?!,|})/g, /(?<= |:)(\[.*?])|(?<=: ?)([^\s]*?}*)(?=,|( *}))/g, and /({.*?})|(\[.*?]+)|((?<= ?).*?(?=,| ))|((?<=, ?)[^\s]*)/g. And I learned that while intmidating at a glance, regular expression are actually not that hard to read and understand.

Basic Syntax

Let’s take a look at some of the basic syntax for regular expressions.

Creating a Regular Expression

In JavaScript, regular expressions are actually a complex data type like arrays and objects, as such there is 2 ways to create a new regular expression. The most common way I’ve seen is with literal syntax, encapsulating your pattern with forward slashes and adding the optional flags at the end like so: /pattern/flags. You can also use the new keyword and define a regular expression like so: new RegExp(“pattern”, “flags”). Either way you can save them as variables and have access to the .test() method of regular expressions in JavaScript.

Composing the Pattern

Writing a pattern involves a combination of simple characters and special characters.

Simple Characters

Simple characters are the literal characters you see in the string. For example /a/ will find the first lowercase a in a string whereas /cat/ will find the first time the letters c-a-t appear in the string.

NOTE : its important to keep in mind the the regular expression above is not looking for the word “cat” explicitly, just the letters c-a-t. So a word like “catastrophe” or “educate” will pass a test with that regular expression.

Special Characters

Regular expressions also use many special characters to represent multiple characters, group characters together and modify the pattern in some way.

Character Classes

Regular expressions have many character classes that can represent a group of characters with a single symbol. Each character class has a negated form that is used by capitalizing the letter. The character classes are:

\w => word character, includes all capitalized and lowercase letters.
\d => digits, incudes numbers 0-9
\s => white space character, includes space, tab, and any other white space Unicode character (like \n)
. => includes all characters except \n

Custom character classes can be made with the use of brackets. These custom character classes match one of the included characters. For example, [a4t] will accept an “a”, “4” or a “t” in that point in the pattern. Looking back at the regex in the solution for Count the Smiley Faces earlier /^[:;][-~]?[)D]$/, we can find 3 custom character classes [:;], [-~] and [)D]. Creating custom character classes to represent the eyes, nose and mouth of the smiley faces. But if you remember from the prompt, the nose may or may not be included. That is where quantifiers come into play.

Quantifiers

Quantifiers are added after a character to affect the amount of that character the regex will look for in the string to match the pattern. Like character classes you can make your own custom quantifiers but there are shorthands for some of the most common quantifiers.

* => 0 or more times
+ => 1 or more times
? => 0 or 1 times

Custom quantifiers use curly brace and take 3 different forms.

{n} => exactly n times
{n,m} => n to m times
{n,} => n or more times.

Back to the solution for Count the Smiley Faces /^[:;][-~]?[)D]$/ incudes a ? following the character group for the nose symbols to say there can be no nose or exactly 1 nose in a valid face.

Anchors

Anchors preform a little differently than other parts of the pattern as they deal with the position within the string as opposed to a character within the string. Anchors can be used to ensure the pattern occurs at a certain location in the string.

^ => beginning of the string
$ => end of the string
\b => word boundary, position between a word characters and non-word character including the beginning and end of the string.
\B => opposite of \b

The solution we have been breaking down (/^[:;][-~]?[)D]$/) includes both the ^ and $ anchors to ensure nothing comes before or after the smiley face in the string.

Capture Groups

Regex allows you to group a part of the pattern together to apply a quantifier to the whole group. Simply placing parentheses around part of the pattern groups it together. For example if you wanted to extract my first name and my last name if its there you could make a regex that looks like this: /Alex( Hebert)?/. In this example “ Hebert” is in a capturing group so the ? quantifier apples to that whole group.

Changing Settings with Flags

The other part of regular expressions are the flags. Flags are added to the end of a regular expressions and can affect how certain special character work, how the entire pattern is read, or where in the string is looked for the pattern. Flags are powerful but ultimately optional and many regular expressions forgo flags. Some of the most common flags are:

g => global flag, searches the string for all matches - rather than just the first.
i => case insensitive - all letters are matched without regard to case
s => “dotall” mode, the “.” character includes all characters including “\n”

While there are other flags like y,u and m, I find that they are less common - and more complicated - than the g, i, and s flags.

Binary: How Computers Count

Alex Hebert — Sun, 07 Apr 2024 19:12:47 +0000

Many people are familiar with the trope of a tunnel of green 0s and 1s zooming by as a movie character hacks the mainframe or enters the computer world, but few know the signifigance these 0s and 1s have to comuting. Most modern programming languages have abstracted away the need for directly interacting with the binary foundation they rely on, so many programmers are left without an understanding of how the binary number system works or its importance to computing.

What is Binary

Simply, binary is counting with base 2. The counting system we are familiar with is base 10. A counting systems base can be thought of as the number you count to before moving to the next position. For example, in base 10, counting from 0 to 9 only uses a single position but counting from 10 to 99 uses two. The term base comes from the fact each position of the number is representative of an amount of the base raised to a power. In base 10 the ones place is representative of 10^0, the tens place is 10^1, the hundreds is 10^2 and so on. This allows us to construct numbers to represent a certian combination of the base 10 exponents based on the position of the digit. So 143 is 1*10^2 + 4*10^1 + 3*10^0 or 100 + 40 + 3.

This carries over to binary but instead of using 10 as the base, we use 2. So the first place is 2^0, then 2^1, 2^2, and so on. This is where the zeros and ones come in. Since in binary you only count to 1 before moving to the next place the only digits seen in binary counting are 0 and 1. In binary 143 would be 1*2^7 0*2^6 0*2^5 0*2^4 1*2^3 1*2^2 1*2^1 1*2^0 or 128 + 8 + 4 + 2 + 1 or 10001111.

Why is binary imprortant?

Computing is all about logic and binary provides a great representation of the simplest unit of logic, true and false. Since there can be no in between with true and false, binary is the perfect fit since it only uses two numbers. Before digital computers were even considered a possiblity, 1854, George Boole published a paper utilizing binary to formalize what is known as Boolean Algebra. Boolean Algebra would later become the cornerstone to digital computing, providing an avenue for completing ariethmetic and logical calculations with digital circuts. These are still the foundations of modern computing, all made possible thanks to binary.

Further Reading:
Wikipedia article detailing the binary number system

https://en.wikipedia.org/wiki/Binary_number# Paper detailing boolean algebra
https://plato.stanford.edu/entries/boolalg-math/ Simulator to help understand Binary
http://mathszone.net/mw/bases/binary/index.html

Intro to Git: Command Basics

Alex Hebert — Fri, 01 Mar 2024 16:21:45 +0000

Understanding the workflow using git is essential in modern software engineering. Git is an immensely useful tool whether working solo or collaboratively.

So, What is Git?

Git is a way to track changes and save a set of files inside a directory. Git creates a timeline of snapshots of the files it tracks. Each of these snapshots is called a commit, and commits are saved along a timeline called a branch. Git allows multiple of these branches to run in parallel and be merged later allowing for experimental changes and cooperative coding. Git is the backbone of cooperative coding because it allows multiple people to work on a project simultaneously without interfering with one another.

Setting up your first repository

To set up your first repository (or repo) is quite simple. To start, install git here:

git-scm.com

For Windows users, this will give you access to a terminal called git bash. Open git bash and navigate to the directory you want to track with git. To do this use ls to get a list of files inside the current directory and cd <directory> to enter a child directory. To go back into the parent directory use cd ... If you want to make a new directory use mkdir <name> to create a directory inside the current directory. Once at the directory you want to track with git use the command git init to initiate a new git repository. Congratulations, you now have a git repo!

Making commits

To save changes to your repository you need to make a commit. First make sure your terminal is at your repo, using ls is a quick way to do this. Then use the git add <file> command to stage the changes you've made to that file. If you have multiple files that have modifications you can use git add . to add all of them in one command. Once all your changes are staged use git commit -m <message> to make the commit. Each commit needs a message that briefly explains the changes made since the last commit. This commit will be added to the branch, you can see the commits that make up the current branch with git log which will show you a list in reverse chronological order of the commits on the current branch.

Branching out

Git allows you to make branches separate from the main codebase allowing you to make changes without affecting the main branch. To see a list of all the branches you can access use git branch the current branch you're on should be highlighted. To make a new branch use git branch <name> and then to switch between these branches use git switch <branch>.

These are a few of the most common commands you'll use when working with git. Your journey into git shouldn't stop here. To read up more on git check out this free e-book that will walk you through everything git!

git-scm.com

Intro to Control Flow

Alex Hebert — Thu, 22 Feb 2024 02:36:34 +0000

What is control flow?

Control flow is the order in which code is executed. Control flow in JavaScript generally runs from line 1 to the last line of code in order, however there are many statements that can affect the control flow and are a key part of programming.

If, Else, and Else If

One of the most basic and intuitive control flow statements is the if, else, and else if statements. These are used to prevent or allow blocks of code to be executed if a defined condition is met. Some if statements are accompanied by an else statement that will only execute if the condition of the accompanying if statement is not met. These if-else statements can be chained together to check for one of multiple conditions where only the first code block with a met condition will execute, by-passing all subsequent blocks in the else if chain. If statements without else statements can be chained together to check for multiple conditions where every condition that is met will run a code block.

if(condition_1){
  codeBlock;
}
else if(condition_2){
  codeBlock;
}
else{
  codeBlock;
}

The syntax for if else statements start with the word if followed by a condition in parentheses that will be evaluated to and type coerced to a boolean value. Following this is a block of code encapsulated by curly braces. Then the next condition is preceded by “else if” and then follows the same general syntax. The final else statement does not have a condition and just has a code block.

Switch

Similar to if else statements, switch case statements execute code blocks based on a defined condition, however switch case conditions all share a common condition whose value determine which code blocks are run. Like else if statements, switch cases can be used to execute mutually exclusive blocks of code by ending each block with the break statement. Unlike chained if statements, all code following the passing case will be run until a break statement is reached, regardless if the following cases are true.

switch(expression){
  case A:
    codeBlock;
    break;
  case B:
    codeBlock;
  case C:
    codeBlock;
    break;
  default:
    codeblock;
}

The syntax for switch statements starts with the word switch followed by an expression in parentheses. Inside a set of curly braces a set of case statements followed by a case expression to match against the switch expression precedes a block of code. In this example A is mutually exclusive from B and C but if the expression evaluates to B then both the B code block and C code block will be executed since the B code block does not have the break statement. At the end there is an optional default case that will run if the expression does not evaluate to A B or C.

DEV Community: Alex Hebert

Exploring Web Development: HTMX

What is HTMX

The 4 "Whys" of HTMX

HTTP Requests

Why should <a> and <form> tags be the only tags to make HTTP requests?

Triggers

Why should only click and submit events trigger AJAX requests?

Verbs

Why should only _GET and POST methods be available?

Replacement

Why should you only be able to replace the entire screen?

Final thoughts

Exploring Web Development: Ruby on Rails

What is Ruby?

What is Rails?

Project Setup

Install Rails

Creating the App

Running the Server

Making the App

Define a Route

Generate a Controller

Create a View

Final Thoughts

Exploring Web Development: Python + Django

Django Basics

Welcome to Django

Setting up the app

Building out the App

Running the app

My Thoughts

Todd Howard It Just Works GIF - Todd Howard It Just Works Bethesda - Discover & Share GIFs

Resources

Godot: Lowering the Barrier to Entry of Game Dev

What is Godot?

Godot is a feature-packed, cross-platform game engine

... to create 2D and 3D games from a unified interface.

Games can be exported with one click to a number of platforms

Godot is completely free and open source

Godot Basics

Scenes

Nodes

Signals

GDScript

Conclusion

RegEx: Decoding the Symbols

Basic Syntax

Creating a Regular Expression

Composing the Pattern

Simple Characters

Special Characters

Character Classes

Quantifiers

Anchors

Capture Groups

Changing Settings with Flags

Further Readings

Binary: How Computers Count

What is Binary

Why is binary imprortant?

Intro to Git: Command Basics

So, What is Git?

Setting up your first repository

Making commits

Branching out

Intro to Control Flow

What is control flow?

If, Else, and Else If

Switch

Why should `<a>` and `<form>` tags be the only tags to make HTTP requests?