DEV Community: Jack Henza

Diving into TypeScript and Tailwind

Jack Henza — Wed, 17 Jan 2024 21:55:29 +0000

Introduction

In the dynamic world of full-stack development, I recently embarked on an exciting project involving a React frontend and Flask backend. This journey was not just about building a web application, but also about embracing and mastering new technologies on the fly: TypeScript and Tailwind CSS. In this blog post, I want to share my experiences, challenges, and learnings from integrating these powerful tools into my development workflow.

The Project Setting

The project was a web application with React's dynamic UI capabilities paired with Flask's straightforward and efficient backend. The challenge? I decided to integrate TypeScript for stronger type safety and Tailwind CSS for a more efficient styling process, both of which were (relatively) new to me.

Integrating TypeScript

Why TypeScript? TypeScript, as a statically typed superset of JavaScript, appealed to me for its ability to catch errors early in the development process.

The Learning Process: Initially, TypeScript's strict typing seemed like a constraint compared to JavaScript's flexibility. I faced a steep learning curve understanding its interfaces and types, especially when applying them to existing React components.

Overcoming TypeScript Hurdles: I tackled this by starting with simple components and gradually scaling up. I heavily relied on TypeScript documentation, community forums, and trial and error. The real value of TypeScript becomes evident when it prevents you from deploying code that looks fine but causes runtime errors.

Embracing Tailwind CSS

Choosing Tailwind CSS: I was intrigued by Tailwind CSS's utility-first approach, which promised a faster and more manageable styling process.

The Transition: Shifting from traditional CSS to thinking in terms of utility classes in Tailwind was initially challenging. It required a different mindset and approach to styling I found myself starting to create an id or a class that would only be used a few times before remembering (with no small amount of joy) that I could simply slap a few utilities right in the tsx.

Merging TypeScript with React and Flask

Handling API Responses: One of the more intricate tasks was ensuring TypeScript accurately reflected the data structures exchanged between React and Flask. I defined TypeScript interfaces to mirror Flask's response objects, enhancing type safety across the full stack. This made it easy to spot potential issues with how components might misbehave before requests are returned.

State Management in React: TypeScript brought clarity and predictability to state and props management in React. It proved invaluable in managing complex components and state logic, significantly reducing potential runtime errors.

Key Takeaways

Begin with Small Steps: Start with simple integrations and gradually expand your use of new technologies.
Dive into Documentation: The comprehensive documentation for TypeScript and Tailwind CSS is a goldmine of information. Use it.
Leverage the Community: The developer community is rich with practical examples and advice that proved invaluable.
Learn Iteratively: Adopting TypeScript and Tailwind is a continuous learning process, best approached with patience.
Apply What You Learn: Practical application cements theoretical knowledge. Using these technologies in real scenarios was crucial for my understanding.
Don't be pridefull: Sometimes you just have to ask somebody. Bonus points if they're a real person.

Conclusion

Integrating TypeScript and Tailwind CSS into my React/Flask project initially seemed intimidating, but it turned out to be an enriching and edifying experience. This journey underscores the fact that the key to success in the tech world is a willingness to continuously learn and adapt. I hope others will be inspired to embrace new technologies and explore the endless possibilities in the realm of full-stack development.

First Fullstack App

Jack Henza — Fri, 22 Dec 2023 13:15:18 +0000

Introduction

Embarking on the journey of building a full stack web application has been both challenging and rewarding. In this blog post, we'll explore the process of creating a modern full stack app using Flask, SQLAlchemy, React, and Vite. Each of these technologies plays a crucial role in different layers of the application, combining to deliver a seamless and performant user experience. Other technologies could easily be incorporated, such as tailwind css, flowbite, or bootstrap. Various hosting services can be used, like render, netlify, or even supabase.

Getting Started

We'll be separating our codebase into two main divisions: server and client. Go ahead and create your server directory now, but don't cd into it in your terminal yet. Your python virtual environment should be set up in the root directory. We'll create the client directory later when we scaffold our React app using Vite.

Setting Up the Backend with Flask and SQLAlchemy

Flask, a micro web framework for Python, provides a solid foundation for our backend. To persist and manage data, we'll use SQLAlchemy, a powerful SQL toolkit and Object-Relational Mapping (ORM) library.

Install Flask and SQLAlchemy:

>pipenv install
...
>pipenv shell
...
>cd server
>pip install Flask SQLAlchemy
...

Create a Flask App:
Create an app.py file in your server folder. This will hold your backend logic, communicating with your database and serving data to your front end.

# app.py
from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

if __name__ == '__main__':
    app.run(debug=True)

Initialize SQLAlchemy:
Create a file called models.py. This will hold the code that builds your database.

# models.py
from flask_sqlalchemy import SQLAlchemy

db = SQLAlchemy()

class Post(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.String(100), nullable=False)
    content = db.Column(db.Text, nullable=False)

Frontend Setup with React and Vite

Vite is a next-generation frontend build tool that we'll use to set up our React application.

Create a Vite App:

>cd ..
>npm create vite client --template react
>cd client

Install Dependencies:

>npm install

Connecting the Frontend and Backend

Now that we have our backend and frontend set up, let's connect them to ensure smooth communication between the two.

CORS Handling in Flask:
Cross Origin Resource Scripting, or CORS, prevents unauthorized access to your back end and database. You'll need to configure it to allow your front end to access your back end.

Install the flask-cors extension to handle Cross-Origin Resource Sharing (CORS):
Make sure you're in the root directory and run

>pip install Flask-CORS

Update app.py to include CORS:

#app.py
from flask_cors import CORS
CORS(app)

Fetching Data in React:

Fetching data from the front end is relatively straightforward, but can be made simpler with libraries like axios. Personally, I don't mind vanilla React fetches, so let's look at one of those.

//app.jsx
import React, { useEffect, useState } from 'react';
const App = () => {
  const [data, setData] = useState(null);
  const fetchData = async () => {
  try {
    const response = await fetch(/*url*/);
    const theData = await response.json();
    setData(theData);
  catch (e) {
    console.log(e)
  }

Database Integration with Flask and SQLAlchemy

Now, let's integrate the SQLAlchemy models with Flask to perform CRUD operations.

Create a Database and Migrate:
'Migration' is the term given to creating and changing a database's schema, that is its table and column setup.

flask db init
flask db migrate -m "Initial migration"
flask db upgrade

Define API Endpoints in Flask:

This code will define endpoints in vanilla flask/SQLAlchemy, though the process can be made more pythonic with another plugin called flask-restfull.

# app.py
from flask import jsonify, request

@app.route('/api/posts', methods=['GET'])
def get_posts():
    posts = Post.query.all()
    return jsonify([post.serialize() for post in posts])

@app.route('/api/posts', methods=['POST'])
def create_post():
    data = request.json
    new_post = Post(title=data['title'], content=data['content'])
    db.session.add(new_post)
    db.session.commit()
    return jsonify(new_post.serialize()), 201

Conclusion

Building a full stack app involves seamlessly integrating multiple technologies. Flask, SQLAlchemy, React, and Vite come together to create a robust and efficient application. As you continue to develop, explore additional features such as authentication, state management, and deployment, you will find that you have your own takes and preferences on this process, as the one outlined here is very barebones.

Now that you have a foundational understanding, feel free to dive deeper into each technology to unlock their full potential. Happy coding!

Learning Back-End Basics

Jack Henza — Fri, 01 Dec 2023 16:06:33 +0000

For phase 3 of Flatiron School's Software Engineering Program, the final project is a handmade ORM operable by a CLI built with Python and SQLite. Bringing these tools together creates an excellent opportunity to practice object oriented programming, interfacing between multiple languages, and manipulating data at a low level. This was a valuable exercise, as it allowed us to use python to control the full life cycle of a SQL database, from creating tables through adding and updating data to deleting data and dropping tables.
Even more fun, it allowed us to determine our own model for handling many-to-many relationships and join tables. For our project, we elected to use one class to control a primary table and two join tables between it and two other primary tables. This allowed us to use the class as a single source of truth for all the relationships between the three tables, though it created some challenges to overcome around controlling the contents of the join tables and creating instances of the class based on all three associated tables. Overall I think it allowed us to create a more intuitive, pythonic method of controlling the data.
I would recommend this excercise to anyone studying Python, SQL, and/or Object Oriented Programming in general. In the process of building our project, we learned a lot about how all the concepts interact, and were prompted to research and learn new techniques related to all of them.

ObjectObject

Jack Henza — Mon, 13 Nov 2023 01:29:22 +0000

As a student of the Flatiron School's software engineering program, I have been enjoying the opportunity to learn the React framework. It feels worth noting however that the lack of emphasis on Object Orientation before starting React left many of my classmates without the full picture of what makes React such a brilliant tool. Vanilla JavaScript was not developed with Object Oriented Programming (OOP) in mind, and it appears in the language only as an optional construct for better organizing data. You know, if you really want to. Unfortunately, it is taught the same way at Flatiron, which is to say as an optional module that is easily skipped. I know I am not typing anything revolutionary when I say that OOP is a thing of brilliance and beauty, but I think perhaps seasoned devs take it for granted, not always realizing the paradigm shift it requires of new students of code. It offers an opportunity to get learners thinking in a brand new way. Instead of viewing lines of code as sequential instructions, they can see it nonlinearly, with discreet entities being created that carry out their specific tasks.
React's Java-like structure has the potential to help new coders understand the general lines of reasoning behind more formal languages and larger projects where organization is key, all while they get to feel like they are breezing through creating nifty user interfaces that once would have been much more ponderous to write. I believe, however, that OOP is the bridge between the two, and that being able to see its paradigm even in JavaScript is an invaluable tool for grasping programming's finest forms of problem-solving.

A Never Ending Beginning

Jack Henza — Fri, 20 Oct 2023 22:10:32 +0000

I have been a baker, an outdoor educator, and a cashier. I have been a plastics processing technician, an aircraft assembler, and a carpenter. I have studied acting, physics, and renewable energy. I have begun again and again and again, never being happier than when I am first learning a new skill. Most recently, I taught computer science in a public high school for a year. I got to have the ultimate beginner experience -- there is nothing quite like teaching while both learning to teach and learning your material at the same time. I also learned two very important lessons -- that I have an affinity for coding, and that I never want to work in a public high school again.

So here I am once more, taking a crash course in HTML, CSS, JavaScript, React, Python, and Flask through Flatiron School. We have just finished our third week, with the first phase of the class culminating in a simple one-page web app designed to interact with an API. I have found that I really enjoy all the tinkering and troubleshooting -- the "wouldn't it be cool if" followed by figuring out how to get there. Any concern I had about losing interest as my rate of learning slows has completely fallen away as I have realized that coding is a literally bottomless fractal. Just as importantly, so is the community around it -- anywhere you turn, there is an expert in something, or even just an intrepid coder who figured out that thing I had been tearing my hair out over, who has already shared their knowledge. As time goes on and I learn more about whatever language(s) I wind up using most, more tools will be created, more languages will be written, and more literature will come out, forever expanding the field exponentially faster than any one person could keep up with. It is, in many ways, the ultimate expression of the role diversification and specialization that humanity has been working on for millenia -- and it affords mercurial fools like me the opportunity to be beginners for life.

PS: A question for seasoned devs

One thing I have really been wondering about as I have gotten to write more interesting projects is global variables. I have heard they are somewhere between generally frowned upon and vehemently detested -- depending on who you ask -- but at this stage I am struggling to see why. I understand that an over-reliance on them would be sloppy and certainly cause the potential for name reuse and terrible bugs, but used well, it seems like they could reduce the issue of hot potatoing objects from function to function. When passing variables through function call after function call, I have created errors that could have been avoided if I had stored more information in the global context. Perhaps I am being too zealous in my separation of concerns, and should collapse multiple functions into one? At any rate, if you happen to read this, I would appreciate your thoughts.