DEV Community: Joshua Garvey

From JavaScript to Python - Day 1

Joshua Garvey — Wed, 19 Feb 2025 04:17:05 +0000

I'm going to be converting my notes as I learn Python into blog posts by comparing it to a language I already know - JavaScript. I'm starting with freeCodeCamp’s Scientific Computing with Python course, diving straight into string manipulation and building a cipher.

Variables: No More `let` or `const`

In JavaScript, we explicitly declare variables using let, const, or (though not recommended) var:

// JavaScript Example
let number = 5;
const greeting = "Hello!";

Python, on the other hand, skips the keyword entirely—just assign a value and you’re good to go:

# Python Example
number = 5
greeting = "Hello!"

Strings: Mostly the Same

Strings in Python and JavaScript are similar in how they’re created:

// JavaScript Example
let str1 = "I'm a string in JavaScript";
let str2 = 'So am I';

# Python Example
str1 = "I'm a string in python"
str2 = 'So am I'

However, I did read that Python doesn't use template literals like in JavaScript but this isn't in the lesson so we will come back to it.

Printing: `print()` vs `console.log()`

Printing is straightforward in both languages:

// JavaScript Example
console.log("Hello, JavaScript world!");

# Python Example
print("Hello, python world!")

String Indexing: Familiar, But With a Bonus

String indexing is essentially the same as in JavaScript:

// JavaScript Example
let text = "Hello World";
console.log(text[8]); // "r"

# Python Example
text = "Hello World"
print(text[8])  # "r"

However, Python allows negative indices, which makes grabbing the last character much simpler:

# Python Example
print(text[-1])  # "d"

In JavaScript, you’d have to do:

// JavaScript Example
console.log(text[text.length - 1]); // "d"

This is a nice Python feature that makes things a little cleaner.

Finding String Length & Type

Python’s len() function is similar to JavaScript’s .length property:

// JavaScript Example
console.log("Hello".length); // 5

# Python Example
print(len("Hello"))  # 5

However, Python requires a function call (len()), whereas .length is a property in JavaScript.

Checking a variable’s type is also slightly different:

// JavaScript Example
console.log(typeof "Hello"); // "string"

# Python Example
print(type("Hello"))  # <class 'str'>

Methods vs Functions: The `.find()` Method

Like JavaScript, Python has built-in methods for string manipulation. I used .find() to locate characters in a string, which works similarly to JavaScript’s .indexOf():

// JavaScript Example
console.log("My brain hurts!".indexOf("r")); // 4

# Python Example
sentence = "My brain hurts!"
print(sentence.find("r"))  # 4

Both return the index of the first occurrence of a character.

Caesar Cipher & The Power of Python’s Simplicity

The first project was implementing a Caesar cipher, where each letter in a message is shifted by a fixed amount in the alphabet.

This involved:

Finding a letter’s position using .find()
Shifting the position by a set value
Grabbing the new letter using indexing

One key thing I learned was that Python’s string methods are case-sensitive. Running .find() on an uppercase letter failed since my alphabet string only contained lowercase letters. The fix? Using .lower() to convert the text before searching:

# Python Example
text = "Hello World"
alphabet = "abcdefghijklmnopqrstuvwxyz"
index = alphabet.find(text[0].lower())
print(index)  # 7

This is where we paused - We will continue with this lesson on Day 2.

Super cool portfolio site!

Joshua Garvey — Tue, 18 Jun 2024 00:51:08 +0000

Try it out and let me know what you think!
Live: Josh Garvey Website

A portfolio website coded with React, Three.js, React Three Fiber, and deployed to Netlify.

github repo
(current code is under modbranch)

Created by: Josh Garvey - @jgar514

Building a Full-Stack Web Application with Free Resources

Joshua Garvey — Tue, 11 Jun 2024 01:34:56 +0000

A full-stack web application using all free resources.

This project includes the following:

Payment Processing
Database
Content Management System (CMS)
Blogs
Domain Name Availability Search Tool
User Authentication

It can be viewed live here:
https://homie.mobi/
The code can be viewed here:
Github Repository

Front End

The front-end of our application is built using a combination of modern tools and frameworks to ensure a seamless development experience and efficient styling.

React
We chose React for our front-end development. React is a JavaScript library that allows you to write JavaScript syntax (JSX) inside functional components.

React Docs

Vite
To kickstart the project, we utilized Vite, a modern build tool offering a fast development environment with instant server start, fast hot module replacement (HMR), and an optimized build process.

Vite Docs

Tailwind CSS
To expedite the styling process, we incorporated Tailwind CSS. Tailwind CSS is a utility-first CSS framework that allows for rapid custom design directly within your HTML.

Tailwind CSS Docs

Hosting
After developing the front-end, we hosted our website for free using Google's Firebase Hosting. Firebase Hosting provides fast and secure static hosting for web apps.

Firebase Hosting Docs

Back End

Initially, the back-end was written using Node.js and Express. To reduce costs, we transitioned to Firebase Functions, allowing our server-side logic to run only when called, significantly reducing server space requirements. Firebase Functions integrate seamlessly with Firebase features and Google Cloud.

Firebase Functions Docs

Domain Name Availability Search

One of the features of our website allows users to search for a domain name to see if it's available to purchase. A Firebase Function takes the user's input and uses Name.com's API to check if the domain name is available and under $25. If the input passes these checks then the function returns back available and allows the user to purchase it for $25.

Database - Storing Customers

The first step of the checkout allows the user to input their email and name and then, after checking the information is valid, we use my pushFormDataToDatabase function to send it, along with their product selection, to a Firebase Realtime Database.

Firebase Realtime Database Docs

Accepting Payment

We added Stripe Payment Processing directly into our website using the Stripe API.

Stripe Docs

To communicate with Stripe we wrote our logic inside of a Firebase Function. The function gets triggered when the user selects buy and requests to create a payment intent.

In the second step of our checkout form, the user pays with their card information. This gets sent safely to Stripe who then confirms the payment and sends back that confirmation.

Blog

We used Route and Routes from 'react-router-dom' to add a /blog route to our website. To write and publish new blogs, we incorporated Sanity.io to be used as our Headless Content Management System (CMS).

Sanity.io Docs

Authentication

To offer certain capabilities to authenticated users we added Firebase Authentication.

We wrapped our project with an AuthProvider component using Firebase Auth. The user has the option to sign up with an email and password and they get stored as a user in our Firebase authentication tab in our Firebase console.

Firebase Auth Docs

This process included adding a /login route and a /register route to our project.

Now down the road, we can conditionally render content and privileges based on whether the user is logged in or not.

Additional Tools and Features

Email

We wanted to have an official business email attached to our domain. After trying a few different technologies we landed on Zoho Mail. We were able to create and register an email with our domain name.

Zoho Mail

Code

We use Visual Studio Code to write and edit our code.

Visual Studio Code Docs

We push our updates to a Github Repository.

About Github

We use Node Package Manager (NPM) to install and add dependencies and packages.

About NPM

Updating, Building, and Deploying

With this setup we can easily make adjustments to our website and push these changes to production thanks to Firebase's CLI (Command Line Interface).

Firebase CLI Docs

After making changes to our frontend application all we need to do is build it by running:
npm run build

If we are satisfied with the build we can push it to production with a simple command from firebase:
firebase deploy --only hosting
This allows us to separate the different parts of our projects and avoid having to deploy everything, every time.

If instead, we want to make changes to our functions all we need to do is edit the code, save our changes, and run the command:
firebase deploy --only functions

Sanity Studio can be accessed on a local server. We just navigate inside our sanity folder and run:
sanity start
Blogs added will become live once you publish them in the studio.

Version Control is done the same as any other project. Once you make your changes and save, you run the commands:

git add . // adds all the files to staging
git commit -m "this is your commit message" // commits your changes
git push origin main // pushes the updated code to our github repository.

helloworld

Joshua Garvey — Mon, 08 Apr 2024 06:15:44 +0000

yo

Understanding Git: A Short Guide

Joshua Garvey — Fri, 17 Nov 2023 05:21:52 +0000

Introduction

Git is a powerful version control system that plays a crucial role in modern software development. In this comprehensive guide, we'll explore key concepts and best practices associated with Git.

Git Basics

What is Git?

Git is a distributed version control system that enables collaboration and tracking of changes in software projects.

Key Components

Working Directory: The area where you make changes to your files.
Staging Area (Index): A middle ground to selectively prepare changes for the next commit.
Commit: Captures staged changes and stores them in the version history.

Git Workflow

Staging Changes

Staging changes allows for:

Selective committing.
Reviewing changes before making them permanent.
Creating atomic commits for better version history readability.

Example workflow:

# Make changes to files
# ...

# Stage specific changes
git add file1.js

# Stage all changes
git add .

# Commit the changes
git commit -m "Your commit message"

If there are changes in the remote repository that you need to incorporate into your local branch, use:

git pull origin your_branch_name

The Power of React: Simplifying Single Page Application Development

Joshua Garvey — Fri, 10 Nov 2023 07:55:28 +0000

Introduction

In the ever-evolving landscape of web development, Single Page Applications (SPAs) have gained immense popularity for delivering seamless user experiences. However, with the rise of SPAs comes the need for more efficient tools to tackle their complexities. This is where React.js, a powerful JavaScript library, enters the scene, revolutionizing the way we build SPAs.

What is React?

React.js, often simply referred to as React, is an open-source JavaScript library maintained by Facebook. It is designed for building user interfaces, specifically for creating reusable UI components. React's component-based architecture and declarative syntax make it an ideal choice for handling the dynamic nature of SPAs.

The Benefits of Using React for SPAs

1. Declarative Syntax

React adopts a declarative approach to building UIs. Developers describe the desired outcome, and React takes care of updating the DOM efficiently. This simplifies the process of defining and updating the application's state, reducing the likelihood of bugs and making code more readable.

2. Component Reusability

One of React's key strengths is its emphasis on component-based development. React components are modular and encapsulated, promoting reusability across the application. This not only streamlines the development process but also makes it easier to maintain and scale the application.

3. Virtual DOM

React introduces the concept of a Virtual DOM, a lightweight copy of the actual DOM. When changes occur, React first updates the Virtual DOM and then efficiently determines the minimal number of updates needed to synchronize it with the real DOM. This optimization significantly enhances the performance of SPAs by minimizing unnecessary DOM manipulations.

4. Unidirectional Data Flow

React's one-way data binding ensures a clear and predictable data flow within the application. This makes it easier to trace the flow of data and understand how changes to the state affect the UI. Developers can avoid common pitfalls associated with bidirectional data binding, leading to more maintainable code.

5. React Router for Navigation

React Router is a powerful library for handling navigation in SPAs. It enables the creation of dynamic and seamless user experiences by allowing developers to define the navigation structure declaratively. With React Router, transitioning between views becomes a smooth and predictable process.

Real-world Examples

Numerous successful applications have been built using React for SPAs. Facebook, Instagram, and Airbnb are just a few examples of large-scale applications that leverage React's capabilities to deliver a responsive and engaging user experience. These real-world examples highlight React's versatility and reliability in handling complex SPA requirements.

Overcoming Challenges

While SPAs offer many advantages, they also present challenges such as initial loading times and SEO concerns. React, however, provides solutions to these challenges. Techniques like code splitting and server-side rendering can be employed to optimize performance and enhance SEO for React-based SPAs.

Conclusion

In conclusion, React has proven to be a game-changer in the realm of web development, particularly for building SPAs. Its declarative syntax, component reusability, Virtual DOM, unidirectional data flow, and the support for efficient navigation through React Router make it an invaluable tool for developers seeking to simplify the complexities of SPA development. As you embark on your SPA journey, consider exploring React and tapping into its capabilities to create modern, responsive, and maintainable applications.

Additional Resources

React Documentation

Hello World

Joshua Garvey — Fri, 10 Nov 2023 06:28:46 +0000

Hello world.

code block 
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 w-full">
                    {gallery.map((item, index) => (
                        <div key={index} className="group relative overflow-hidden rounded-lg hover:shadow-lg transition-transform transform hover:scale-105 p- bg-gray-500  h-96">
                            <img src={item.imgUrl} alt={`Gallery Item ${index}`} className="w-full h-auto border-0 border-black" />
                        </div>
                    ))}
                </div>

Test Quote

Test Heading

unordered list

bold
_italic

<div className="test">
yo
</div>

DEV Community: Joshua Garvey

From JavaScript to Python - Day 1

Variables: No More let or const

Strings: Mostly the Same

Printing: print() vs console.log()

String Indexing: Familiar, But With a Bonus

Finding String Length & Type

Methods vs Functions: The .find() Method

Caesar Cipher & The Power of Python’s Simplicity

Super cool portfolio site!

Building a Full-Stack Web Application with Free Resources

A full-stack web application using all free resources.

Front End

Back End

Domain Name Availability Search

Database - Storing Customers

Accepting Payment

Blog

Authentication

Additional Tools and Features

Email

Code

Updating, Building, and Deploying

helloworld

yo

Understanding Git: A Short Guide

Introduction

Git Basics

What is Git?

Key Components

Git Workflow

Staging Changes

The Power of React: Simplifying Single Page Application Development

Introduction

What is React?

The Benefits of Using React for SPAs

1. Declarative Syntax

2. Component Reusability

3. Virtual DOM

4. Unidirectional Data Flow

5. React Router for Navigation

Real-world Examples

Overcoming Challenges

Conclusion

Additional Resources

Hello World

Test Heading

Variables: No More `let` or `const`

Printing: `print()` vs `console.log()`

Methods vs Functions: The `.find()` Method