DEV Community: George Brockman

An Introduction to Tailwind CSS

George Brockman — Thu, 15 Aug 2024 07:26:37 +0000

In the ever-evolving landscape of web development, Tailwind CSS has emerged as a game-changer for both seasoned developers and newcomers alike. If you’ve been following trends in CSS frameworks or exploring ways to streamline your design workflow, you might have encountered this powerful tool. But what exactly is Tailwind CSS, and why is it capturing so much attention in the web development community?

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides a collection of low-level utility classes to help you build custom designs all within your HTML. Unlike traditional CSS frameworks like Bootstrap or Foundation that come with predefined components and styles, Tailwind allows you to style your elements directly in your HTML with a series of utility classes.

For example, instead of writing custom CSS for a button, you can use Tailwind's utility classes to quickly style it right in the HTML:

<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded">
  Click Me
</button>

In this snippet, bg-blue-500 sets the background color, text-white changes the text color, font-bold makes the text bold, py-2 and px-4 control the padding, and rounded adds rounded corners. Each of these classes is part of Tailwind’s utility class system, allowing you to compose complex styles from simple, reusable pieces.

Why Choose Tailwind CSS?

1. Utility-First Approach

Tailwind’s utility-first approach is a departure from the component-based or semantic styles of traditional CSS frameworks. This method encourages using small, single-purpose classes that are highly composable. This means you can quickly build unique designs by combining these utility classes, rather than being constrained by predefined components.

2. Customization and Flexibility

One of the standout features of Tailwind is its flexibility. The framework is highly customizable through its configuration file (tailwind.config.js). You can define your own color palette, spacing units, breakpoints, and more. This level of customization ensures that your design remains consistent and tailored to your project’s needs without having to write additional CSS.

3. Responsive Design

Tailwind comes with built-in responsive design support. By utilizing responsive utility variants, you can apply different styles at various breakpoints. This makes it easy to create designs that work across all screen sizes without needing to write media queries manually.

<div class="p-4 sm:p-6 lg:p-8">
  <!-- Content here -->
</div>

In the example above, the padding will adjust according to the screen size, with different values for small (sm), medium (md), and large (lg) screens.

4. Rapid Prototyping

Tailwind’s utility classes facilitate rapid prototyping. Because you can quickly apply and adjust styles directly in your HTML, you can iterate on designs faster. This immediate feedback loop helps in refining and finalizing designs efficiently.

How Does Tailwind CSS Work?

Tailwind CSS works by using a build process that generates a CSS file containing all the utility classes you need. When you use Tailwind, you typically set up a build tool like PostCSS to process your CSS and produce a final output file.

Getting Started with Tailwind CSS

Here’s a basic guide to get you started with Tailwind CSS:

Install Tailwind CSS:

Using npm:

   npm install tailwindcss

Using yarn:

   yarn add tailwindcss

Create Your Configuration File:

Generate a configuration file using:

   npx tailwindcss init

Configure Your CSS:

Create a CSS file (e.g., styles.css) and include Tailwind’s directives:

   @tailwind base;
   @tailwind components;
   @tailwind utilities;

Build Your CSS:

Run the build process to generate your final CSS file:

   npx tailwindcss build styles.css -o output.css

Link Your CSS:

Link the generated output.css file in your HTML:

   <link href="output.css" rel="stylesheet">

Conclusion

Tailwind CSS offers a refreshing take on web design by providing a utility-first approach that simplifies the process of styling and customizing web pages. Its flexibility, ease of use, and powerful features make it a compelling choice for modern web development. Whether you’re building a new project or looking to streamline your workflow, Tailwind CSS is worth exploring for its potential to enhance both your design process and end results.

SQLAlchemy Constraints and Validations

George Brockman — Mon, 22 Jul 2024 22:50:21 +0000

When building robust applications that interact with databases, ensuring data integrity is paramount. SQLAlchemy, a powerful Python SQL toolkit and Object-Relational Mapping (ORM) library, provides a straightforward yet flexible way to manage databases through the use of constraints and validations directly from your Python code. In this guide, we'll explore how to leverage SQLAlchemy's capabilities for constraints and validations effectively.

Understanding Constraints

Constraints in a database enforce rules regarding the data that can be inserted, updated, or deleted in tables. SQLAlchemy allows us to define these constraints both at the database schema level and within our application code.

Database-Level Constraints:

SQLAlchemy supports the full spectrum of database constraints such as NOT NULL, UNIQUE, PRIMARY KEY, FOREIGN KEY, CHECK, and DEFAULT. These constraints are defined when creating the table schema using SQLAlchemy's declarative syntax.

Let's start with an example database in which we have a User class and an associated Address class. In this case, we're going to set up constraints that require incoming data to follow certain rules. In our User model, the username has to not be null and must be a unique value, the email must also not be null, and the address_id has to be a Foreign Key. Meanwhile, our Address model is going to require that street and city be not null.

from flask_sqlalchemy import SQLAlchemy

db = SQLAlchemy(metadata=metadata)

class User(db.Model):
    __tablename__ = 'users'

    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String, nullable=False, unique=True)
    email = Column(db.String, nullable=False)

    address_id = Column(db.Integer, ForeignKey('addresses.id'))

    address = db.relationship("Address", back_populates="users")

class Address(db.Model):
    __tablename__ = 'addresses'

    id = db.Column(db.Integer, primary_key=True)
    street = db.Column(db.String, nullable=False)
    city = db.Column(db.String, nullable=False)

    users = relationship("User", back_populates="address")

In the above example:

nullable=False ensures fields are required (NOT NULL).
unique=True enforces uniqueness (UNIQUE constraint).
ForeignKey establishes relationships (FOREIGN KEY constraint).

Application-Level Constraints:

While database constraints are crucial, certain situations demand validation beyond what the database can enforce. SQLAlchemy allows us to define custom validators using Python's native capabilities or third-party libraries, enhancing flexibility in data validation.

Just like our constraints, validation ensures that data entering the database meets specific criteria, preventing erroneous or malicious data from compromising the integrity of our application.

For our next example, we're going to add a validation method to our User model that checks whether or not the email provided is actually a valid email address. Just for simplicity's sake, we're just going to check if email has an @ symbol in it.

from sqlalchemy.orm import validates

class User(db.Model):
    # ... (previous code)

    @validates('email')
    def validate_email(self, key, address):
        if '@' not in address:
            raise ValueError("Failed simple email validation")
        return address

SQLAlchemy's ORM layer supports validation through @validates and @validates_schema decorators. These decorators validate individual attributes or the object as a whole before persistence.

Here, @validates decorator checks the validity of the email format before committing to the database.

Conclusion

SQLAlchemy empowers developers to manage constraints and validations seamlessly, promoting data integrity and application reliability. By combining database-level constraints with application-level validations, we enforce rules at multiple layers, safeguarding our data against inconsistencies and errors.

Whether you're building a small-scale application or a large enterprise system, mastering SQLAlchemy's constraint and validation mechanisms is essential for creating robust, maintainable database-driven applications. Embrace these practices to elevate your data handling capabilities and ensure your applications operate with precision and reliability.

Exploring ORM - Object Relational Mapping

George Brockman — Sat, 15 Jun 2024 12:48:39 +0000

Databases are an immensely powerful tool for developers, as they allow us to store and access information across multiple uses of a program. Without them, most of the information that we create ends up becoming inaccessible once the application is run and closed. Amongst the information that would otherwise be lost is data related to class instances. Let's say you have an application that displays information about an account at a bank. One of the ways we can represent this account is by using a class that has variables for information such as the name, balance, account number, etc.

In order to store this data, and eventually retrieve and reassign it to an instance, we will need to implement Object Relational Mapping, or ORM for short. ORM simply refers to the method by which we set up classes to store and retrieve information to some database. For the case of this specific blog post, we will be looking at how to implement ORM using Python and SQLite.

Setup

First and foremost, we need to do a little bit of setup. We start by installing sqlite3 into our workspace. Once that is done, we need to import it into our file and initialize our connection to our database file and a cursor on this connection to execute commands like so:

import sqlite3

CONN = sqlite3.connect(database.db)
CURSOR = CONN.cursor()

create_table

With that setup done, we can move on to actually creating our mapper. Let’s continue with our earlier example of a Customer class. First, we need to actually create a table to store the data in. We can create a class method that will handle that for us:

@classmethod
def create_table(cls):
    sql = “””
    CREATE IF NOT EXISTS customers (
        id INTEGER PRIMARY KEY , 
        name TEXT, 
        account_number INTEGER,
        balance REAL
        )
    ”””

    CURSOR.execute(sql)
    CONN.commit()

Running this method on our Customer class will give us a table that we can actually store and retrieve data from.

delete_table

But before we start doing that, let’s make a method to delete our table in case we want to have a fresh start:

@classmethod
def delete_table(cls)
    sql = “””
        DROP TABLE IF EXISTS customers;
    ”””

    CURSOR.execute(sql)
    CONN.commit()

Both of these class methods above have three main elements, the SQLite code that we want to run, our CURSOR to execute that code, and out CONN to commit the changes to our database.

save and delete

Now that we have methods to create and delete our table, let’s create corresponding methods to create and delete table rows for our class attribute. Instead of class methods, these two methods are only meant to be called on an instance of a class, not the class object itself:

def save(self):
    sql = “””
        INSERT INTO customers (
            name, account_number, balance
        )
        VALUES (?, ?, ?)
    ”””

    CURSOR.execute(sql, (
        self.name, self.account_number, self.balance
    ))
    CONN.commit()

    self.id = CURSOR.lastrowid
    type(self).all[self.id] = self


def delete(self):
    sql = “””
        DELETE FROM customers
        WHERE id = ?
    “””

    CURSOR.execute(sql, (self.id,))
    CONN.commit()

    del type(self).all[self.id]
    self.id = None

In our save method, we are introducing a few new steps. First are the question marks in sql. These are there to act as place holders for the data we want to pass through. We pass the information through when we call execute as the second parameter. You may have noticed that there is an extra comma in the delete method after self.id. This is because the second argument for execute needs to be a tuple, so we have to include the comma even if we’re only passing a single variable.

After we add our information to the table, we set the id of our instance equal to its corresponding id in the table. We use that id to save our instance to a dictionary object that is a class attribute. Our attribute, called all, is defined as an empty dictionary at the top of our class and is used to keep track of all existing instances of our class. Without it, we could end up wasting a lot of memory by accidentally creating multiple identical instances.

We also use id to find the row in our table that we want to delete. After deleting the info from the table, we need to remove the object from our all dictionary and remove the instance’s id.

instance_from_db and find_by_id

Now that we have our methods to manipulate information within the table, the last of our necessary methods are going to handle the retrieval of data from the table and creation of a new instance. Both of these methods are going to be class methods:

@classmethod
def instance_from_db(cls, row):
    customer = cls.all.get(row[0])

    if customer:
        customer.name = row[1]
        customer.account_number = row[2]
        customer.balance = row[3]
    else:
        customer = cls(row[1], row[2], row[3])
        customer.id = row[0]
        cls.all[customer.id] = customer

    return customer 


@classmethod
def find_by_id(cls, id):
    sql = “””
        SELECT * FROM customers
        WHERE id = ?
    ”””

    row = CURSOR.execute(sql, (id,)).fetchone()
    return cls.instance_from_db(row) if row else None

Let’s break these last two methods down. Starting with instance_from_db, we take our row provided from find_by_id and try to find a corresponding instance that already exists in our all dictionary. If one does exist, it takes the information from the table and updates the instance to make sure they match. If it doesn’t exist, it goes ahead and makes and returns a new instance.

Finally, there’s our find_by_id method which takes an id as a parameter and returns a customer instance. Most of the code in it should look familiar, but there is one new thing. The fetchone method at the end takes the executed code and returns a list containing the information from the first row that meets the WHERE condition.

We can write as many methods as there are different ways of interacting with the table using SQLite. However, with these methods, you have the bare bones of a basic ORM. Good luck and happy coding!

React createContext and useContext Hooks

George Brockman — Wed, 24 Jan 2024 03:39:47 +0000

When we want to share data between multiple React components, there are a couple of ways to do it. One of the simplest ways to accomplish this is to pass down data from a parent component to a child component as a prop. This, however, can become remarkably tedious when we want to pass data from a parent component to a grandchild component. We end up passing a prop through an entire component only so that the child of that component can use it. This problem only gets worse when we have code with deeply nested components. Luckily, React provides us with a couple of hooks that allow us to share data between any number of components without having to pass it through as props.

createContext()

The first of these hooks is createContext(). To use this hook, we first need to import it, call it, and then assign the return value to a variable. This must be done outside of any component:

import { createContext } from “react”;

const SomeContext = createContext()

The createContext() function takes a default value as a parameter, and if none is provided, it will default to null. The React documentation suggests we always pass a parameter through, even if it’s null, however this is not required for the code to work. This default value is almost never used, however, since the data that we want to share is assigned in the Provider component (more on this in just a bit). createContext() returns a context object that does not really hold any information itself. It simply points to a location from which context will be read or provided. In order to provide data to the context object, we use SomeContext.Provider. In our code, it will look like this:

<SomeContext.Provider value={”some value”}>{children}</SomeContext.Provider>

In this bit of code, ‘some value’ is where we assign our data that we want to share amongst components, and ‘children’ is where we place said components.

useContext()

Now to actually access the data we assigned earlier, we need to use useContext(). Once again, we first need to import the hook and then assign the return value to a variable, but this time we create the variable inside of our component that we want to access the shared data from. Furthermore, we need our SomeContext variable also imported so that we can pass it as a parameter to useContext(). Doing so results in code that looks like this:

import { useContext } from “react”;
import { SomeContext } from “/somewhere”

function SomeComponent(){
    const information = useContext(SomeContext) 

    return (something);
}

Here, we pass our SomeContext variable as a parameter to useContext() so that it knows where to grab data from, and it returns the information that we had previously passed to our component in the value prop.

Additional Usage Information

When using Context from React, there are certain rules that must be followed. First and foremost, we must remember to only use useContext() in our children components. We can have as many children under the parent, however. Doing so will result in code that looks something like this:

const SomeContext = createContext(null);

function App(){
    return(
        <>
            <header>
                <NavBar />
            </header>
            <SomeContext.Provider value={information}>
                <Child1/>
                <Child2/>
                <Child3>
                    <Child4/>
                </Child3>
            </SomeContext.Provider>
        </>
    )
}

In this example, Child1, Child2, Child3, and even Child4 can all access whatever value is assigned to ‘information’. Meanwhile, because NavBar is outside of the Provider component, it cannot access said data. Also, only a single variable can be passed as a prop through the context provider, meaning if we want to provide multiple pieces of information, we will have to assign it either to an Array or Object. From there we can destructure the information within our children components.

useState()

We can combine React Context with the useState() hook not only so that we can access state variables in other components but also allow multiple components to be able to update it.

const SomeContext = createContext();

function App(){
    const [info, setInfo] = useState(some data)

    return(
        <SomeContext.Provider value={{ info, setInfo }}>
            <Child1/>
            <Child2/>
        </SomeContext.Provider>
    )
}

In this example, we are able to call setInfo() in both of the Child components, and doing so will cause the App and subsequent children components to be rerendered.

Conclusion

Luckily, we have Context available to us through React to make our lives easier. When used properly, we have seen how it is able to let us access and alter information across multiple components, all while keeping our code clean and minimal. There are still cases where we do not want to use this to share information, however. Sometimes it is just easier to pass a value as a prop to a couple children instead of going through the entire set up process for Context. While it is not always the right choice for every job, when properly used, it is one of our most versatile tools in React. Hopefully after this short read, you can feel comfortable and ready to use it in your own code.

Sources

useContext: https://react.dev/reference/react/useContext
createContext: https://react.dev/reference/react/createContext
useState: https://react.dev/reference/react/useState

Asynchronous Programming: Using Fetch and Then

George Brockman — Wed, 20 Dec 2023 22:23:41 +0000

When building a webpage, we almost always want to access information found in other places on the internet. Not only does it create a more interesting and engaging application, it also prevents us from having to have all of the information needed for our site on a single server. In order to access data remotely with JavaScript, we use the fetch() function.

Fetch

The fetch() function is a global method implemented by Window and WorkerGlobalScope. Because of this, fetch() is available to use in virtually every context in which you might need it. It takes time to access information online, however. Generally speaking, we usually don't want our code to have to wait for a single fetch request to finish before moving on to other steps. Luckily for us, fetch() is an asynchronous function, meaning it returns a Promise instance while the next lines of code can run.

Promises

A Promise instance is exactly what it sounds like; it's a promise that the data will be passed to the code as soon as the information from the fetch() request is received.

That leaves us with another problem, however. If the rest of the code runs while the Promise is waiting to resolve, then the information received by fetch() will be left with no code to handle it. To solve this issue, there are a couple of tools we can use: await and then().

Await and Then

Await is an operator that is useful when attempting to assign a Promise instance to a variable, while then() is used to immediately call a callback function when the Promise resolves. For this blog, we're going to be looking at how fetch() and then() interact with each other and leave await for another time.

Using Fetch

Building on what we read earlier, the fetch() function can take a couple arguments but only needs one. For simplicity's sake, we will only be looking at the required argument, but keep in mind there are other options that can be added to manipulate the functionality.

The first and main argument passed to the fetch() function is the resource, or the URL of the information that you are trying to access.

fetch('http://localhost:3000/data')

As stated earlier, fetch() will attempt to access the data, and while doing so, will return a Promise instance that will be replaced with the real information at a later time. We call this resolved request the Response object.

Using Then

Once we have a Promise instance, it can then be passed to the then() function to be used. then() is a method used by Promise instances that has one mandatory argument and an optional one: a callback function to be used on successful resolutions and/or one for rejected resolutions of the Promise. We will start by only looking at instances of then() using only one argument.

Combined with a fetch request, it looks something like this:

fetch('http://localhost:3000/data')
.then(res => res.json())

In the example above, we took the response from the fetch() request and passed it to an arrow function. This callback function changes the JSON string that is the response and returns a usable object for later use. Remember that this response is only translated once the Promise passed to the then() function resolves.

From here, we can link together at many then() functions as we desire. This is because each then() function immediately returns a Promise instance.

fetch(`http://localhost:3000/data`)
.then(res => res.json())
.then(response => someFunction(response))
.then(someValue => console.log(someValue))

As each Promise is fulfilled, the callback functions will be called in the order that they are chained.

As mentioned earlier, we can add another call back function as an argument to a then() function to be used in case our original Promise does not resolve. In that case, we would have something like this:

fetch(`http://localhost:3000/data`)
.then(res => res.json(), () => console.log("fetch unsuccessful"))

Resolving Promises

A then() function will choose either of the callback functions depending on how the Promise passed to it resolves. These are the ways Promises can be handled:

•If a value is returned, the Promise is fulfilled with the returned value as the value of the Promise.
•If no value is returned, the Promise is fulfilled with undefined as the value.
•If an error is thrown, the Promise is rejected with the error being its value.
•If a fulfilled Promise is returned, the Promise is fulfilled with the returned value as its own value.
•If a rejected Promise is returned, the Promise is rejected and shares the returned value.
•If another pending Promise is returned, the Promise remains pending and becomes fulfilled as soon as the previous Promise resolves.

There are various different ways to alter the behavior of the fetch() and then() methods beyond what has been discussed in this blog. For example, we can add more arguments to fetch() such as a method, headers, body, etc. However, for simplistic use, this blog covers most of what you need to know. Thank you for reading!