Forem: lakota

Comparing Flask SQLAlchemy and Flask RESTful

lakota — Sat, 27 Jan 2024 03:00:51 +0000

Comparing Flask SQLAlchemy and Flask RESTful
When I first started learning to code, I saw it as akin to learning a new language. Makes sense, right? After all, things like JavaScript, python, css, etc are literally called coding languages. However, as I have learned more about coding and written some code myself, I find it to be more akin to learning a craft like woodworking or sculpting. Sure, learning the individual syntax of a coding language is comparable to learning an actual language, but the way that code is implemented is less about learning how to express a thought the way a language would, and more about completing a task.
Software development is building; it is crafting. The different methods and functions, tips, and tricks you pick up along the way of practicing coding are all the different tools in the developer toolkit. Adding even more flexibility to this tool analogy are extensions that can be added to a language to change it to suite your own comforts and practices. Take python for example. Funnily enough, I found python’s syntax already much easier to follow than, say, JavaScript. And yet it boasts a bevy of extensions designed to make coding much more comfortable and easier on the backend. Two popular extensions, Flask SQLAlchemy and Flask RESTful, serve different purposes but are commonly used together in building web APIs. In this article, we'll compare the pros and cons of each to help developers make informed decisions based on their project requirements.

Flask SQLAlchemy
Pros

@app.route('/save-team', methods=['POST', 'PATCH'])
def save_team():
    if request.method == "POST":
        data = request.get_json()

        # Retrieve the trainer ID from the session
        trainer_id = session.get("trainer_id")

        if trainer_id:
            new_team = Team(name=data['team_name'], trainer_id=trainer_id)
            db.session.add(new_team)
            db.session.commit()

            for pokemon_name in data['pokemon_names']:
                new_pokemon = Pokemon(name=pokemon_name)
                db.session.add(new_pokemon)
                db.session.commit()

                new_poketeam = PokeTeam(team_id=new_team.id, pokemon_id=new_pokemon.id)
                db.session.add(new_poketeam)

            try:
                db.session.commit()
                return jsonify(message='Team and Pokemon Created'), 201
            except Exception as e:
                db.session.rollback()
                return jsonify(error=str(e), message='An error occurred, please try again'), 500

    elif request.method == "PATCH":
        data = request.get_json()

        team_id = data.get('team_id')
        existing_team = Team.query.get(team_id)

        if not existing_team:
            return jsonify(error='Team not found'), 404

        if 'team_name' in data:
            existing_team.name = data['team_name']

        if 'pokemon_names' in data:
            existing_team.poke_teams = []

            for pokemon_name in data['pokemon_names']:
                existing_pokemon = Pokemon.query.filter_by(name=pokemon_name).first()

                if not existing_pokemon:
                    existing_pokemon = Pokemon(name=pokemon_name)
                    db.session.add(existing_pokemon)
                    db.session.flush()

                new_poketeam = PokeTeam(team_id=existing_team.id, pokemon_id=existing_pokemon.id)
                db.session.add(new_poketeam)

Function Flexibility: SQLAlchemy’s overarching benefit over RESTful api largely comes down to the customization that it allows developers to implement into the routes they create. While the routes may be longer to code than RESTful, the extra visible lines of code allow ease of access to go back into and augment said routes to add or alter functionality. Developers can write complex database queries using SQLAlchemy’s expressive API, empowering them to efficiently retrieve and manipulate data from the database.
ORM (Object-Relational Mapping): SQLAlchemy provides a powerful ORM tool that allows developers to interact with databases using Python objects. Flask SQLAlchemy seamlessly integrates with Flask, enabling developers to define database models as Python classes and perform database operations using Python syntax, which simplifies database interactions and reduces boilerplate code.
Database Agnostic: SQLAlchemy supports various database systems, including PostgreSQL, MySQL, SQLite, and others. Flask SQLAlchemy abstracts the differences between these databases, allowing developers to switch databases without significant code changes.
Migration Support: SQLAlchemy offers migration tools such as Alembic, which enable developers to manage database schema changes over time. Flask SQLAlchemy integrates seamlessly with Alembic, allowing developers to generate and apply database migrations effortlessly.
Integration with Flask: Flask SQLAlchemy is designed to work seamlessly with Flask, making it easy to incorporate SQLAlchemy into Flask applications. It provides built-in support for creating database sessions, committing transactions, and handling database errors within Flask routes.

Cons

Complexity: SQLAlchemy's biggest benefit also ties into its biggest flaw in comparison to RESTful api: complexity. While the more fleshed out, more spelled out nature of SQLAlchemy lends itself to higher levels of customization, that very explicit nature of how SQLAlchemy is written naturally makes it more complex. Developers may need to strike a balance between using SQLAlchemy's features and writing RESTful for optimal performance and simplicity.
Learning Curve: SQLAlchemy's ORM can have a steep learning curve for beginners due to its advanced features and concepts. Developers unfamiliar with ORMs may find it challenging to understand SQLAlchemy's querying syntax and ORM mapping conventions.

Flask RESTful
Pros

class PlantByID(Resource):

    def get(self, id):
        plant = Plant.query.filter_by(id=id).first().to_dict()
        return make_response(jsonify(plant), 200)

    def patch(self,id):
        record = Plant.query.filter_by(id=id).first()
        data = request.get_json()
        for attr in data:
            setattr(record, attr, data[attr])
        db.session.add(record)
        db.session.commit()
        return make_response(record.to_dict(),200)

    def delete(self,id):
        record = Plant.query.filter_by(id=id).first()
        db.session.add(record)
        db.session.commit()
        response_dict = {"message":"plant deleted"}
        return make_response(response_dict, 204)

api.add_resource(PlantByID, '/plants/<int:id>')

Streamlined Syntax: Flask RESTful follows a resource-oriented design approach, where resources are modeled as classes and mapped to HTTP methods (GET, POST, PUT, DELETE). This design promotes a clean and structured API architecture, making it easier to organize and manage endpoints for different resources.
Unique to Flask RESTful is the concept of method view classes, where each HTTP method (GET, POST, PUT, DELETE) is implemented as a separate method within a class. This approach promotes code organization and readability, making it easier to understand and maintain API endpoints.
Content Negotiation: Flask RESTful supports content negotiation, allowing clients to specify their preferred response formats (JSON, XML, etc.) using HTTP headers. This feature enables developers to build APIs that can serve multiple response formats based on client preferences, enhancing interoperability and flexibility.
Integration with Flask: Flask RESTful is designed to seamlessly integrate with Flask, providing decorators such as serializers and validators to define RESTful endpoints within Flask applications. Developers can leverage Flask's existing features and extensions while building RESTful APIs, ensuring compatibility and ease of use.

Cons

Limited Built-in Features: As a counter to SQLAlchemy, while Flask RESTful provides essential features for building RESTful APIs, it may lack some advanced features found in other API frameworks. Developers may need to implement additional functionality or use third-party extensions to meet specific requirements, such as authentication, rate limiting, or pagination.
Learning Curve: Flask RESTful introduces additional concepts such as resources, request parsers, and method view classes, which may require some learning for developers new to building RESTful APIs. While these concepts promote a cleaner API design that can be quicker to code, they can add complexity for beginners.
Conclusion
Both Flask SQLAlchemy and Flask RESTful offer valuable features for building web applications and APIs with Flask. Flask SQLAlchemy simplifies database interactions and provides powerful ORM capabilities, while Flask RESTful promotes a clean and structured approach to building RESTful APIs.
When choosing between the two, developers should consider the requirements of their project, including the complexity of database operations, the desired API architecture, and the level of abstraction needed for handling HTTP requests and responses. Ultimately, the decision between Flask SQLAlchemy and Flask RESTful depends on factors such as project complexity, developer familiarity, and specific use case requirements.

A Friendlier Interface with Inquirer for Python

lakota — Sun, 07 Jan 2024 12:06:11 +0000

As a new programmer, the primary allure of python over javascript is how readable its code is. Indeed, much of the syntax of python is so close to just being a basic sentence that it can be read and understood without any coding experience:
Unfortunately, while it may have javascript beat on the readability of its syntax, python alone is not able to interface as well as javascript, if for nothing else because of the lack of a clear frontend with which the user can interface. Javascript allows users to interact through front end websites filled with navigation bars filled with buttons that change colors to denote they've been clicked, scroll down menus, search bars and forms they can fill out. Python, on the other hand, is more often used for projects without the need of the frontend for users to interface with, and for that reason it does not have much in the way of user friendly interfacing on its own. For projects where readability to the user and ease of use are important, we have inquirer.
Originally a npm package used in javascript, inquirer for python is a pipenv package used to create a more user friendly interface system on the command line (command line interface).
To start using inquirer for python is as simple as navigating to the root directory of the project you want to use it with, then entering the install command:

pipenv install inquirer

From there, any file in your project that you would like to use inquirer with, simply at this code at the top of the file page:

import inquirer

Straightforward, right? From here we can make user interfacing with the program easier and friendler than ever before.Let's look at my top three favorite features:

Confirm:
Sometimes the simplest tool tends to be the one you use the most, and a simple yes or no prompt at the command line can be one of the most powerful tools for allowing the user to easily nagivate your program. The code to allow this, and all inquirer features, is formatted more or less like this:

questions =[
    inquirer.Confirm("boho", message="Is this the real life?"),
    inquirer.Confirm("rhap", message="Is this just fantasy?", default=True),
]

answers = inquirer.prompt(questions)

The result on the command line will be:

[?] Is this the real life? (y?N): Y
[?] Is this just fantasy? (Y/n):

Checkbox:
Ever wish you could take the check box from a javascript website app and put it into your python code for your users? Well checkbox is inquirer's answer! With this, you can allow your users to check off whatever they want from an O to an X, here's how to code it:

questions = [
    inquirer.Checkbox(
        "interests",
        message="What would you like in your boba tea?",
        choices=["yogurt","cheese top","boba","mango popping 
         boba", "oreo", "grass jelly", "The souls of the 
         innocent", "marshmallow fluff"],
   ),
]
answers = inquirer.prompt(questions)

This will return what amounts to the sort of interactive menu you would see on something like doordash:

[?] What would you like in your boba tea?
O yogurt
O cheese top
O boba
O mango popping boba
O oreo
O grass jelly
O The souls of the innocent
O mashmallow fluff

Further, by adding in a single line of code, we can set a few of our items to automatically be selected:

questions = [
    inquirer.Checkbox(
        "interests",
        message="What would you like in your boba tea?",
        choices=["yogurt","cheese top","boba","mango popping 
        boba", "oreo", "grass jelly", "The souls of the innocent", 
        "marshmallow fluff"],
        default=["boba", "oreo"],
   ),
]
answers = inquirer.prompt(questions)

List:
This is my personal favorite, and one of the most versatile. List works very similarly to checkbox in its format, offering the user a list of options to choose from that they are able to scroll up and down through using the up and down arrow keys. But what makes list a particularly useful feature is that it is perfect for setting up dialogue trees, wherein selecting a certain answer prompts a linked, new question:

 questions = [
                inquirer.List(
                    "chosen_menu",
                    message = "Welcome to the RPG weapon perking 
                    simulator, what would you like to do?",
                    choices = [
                        "View Weapons List",
                        "View Perk List ",
                        "View Perked Weapons",
                        "Exit"
                    ]
                )
            ]
            response = inquirer.prompt(questions)
            if response["chosen_menu"] == "View Weapons List",
                view_weapon()
            elif response["chosen_menu"] == "View Perk List",
                view_perk()
            elif response["chosen_menu"] == "View Perked Weapons",
                view_perked_weapons()
            else:
                exit()

"view_weapon()", "view_perk()", and "view_perked_weapons()" are all themselves lists that link to even more lists in a dialogue tree that allwos the user to very efficiently and easily navigate the app fromt the command line.

With these tools out your disposal, its never been easier to make python as user friendly to interface with as javascript's frontend!

Component Trees and the Benefit of Mind Maps

lakota — Sat, 09 Dec 2023 01:23:07 +0000

Taking Notes. Organization. Do you recall the last time you made a list? What about the last time you had to take notes on something? When was the last time you had to make notes from which you could study? Perhaps you're taking notes now. What is the format of these notes? For the longest time, I took notes like the vast majority of people. I had a notebook, and within it I organized my thoughts line by line, a veritable, verticle column of thoughts with a wonderful array of Headers and footers, bulletpoints and indentations, commas and colons to try my best to denote difference, characterize and categorize in order to order my thoughts.
And then, perhaps a year ago and for the first time in my life, I was thrust abruptly into a situation in which it was truly important I learn and memorize something thoroughly and quickly. Something so intensely complex that a lifetime, nay many lifetimes could be spent in the adept and rigorous study of its facets: Magic The Gathering.

In a panic, but determined to beat my brother and his fiance at their own game, I grabbed a pen and paper and with as much dexterity as I could muster, I scrambled down notes of what my companions were telling me of the rules of the game. Quickly, out of necessity, ordered list turned into paragraph here, to note there, to line pointing here or there. Concepts left the great verticle column of order that had defined notation for a lifetime, wandering into a web of connected thoughts, distinct across the page in space but connected by branching paths. It wasn't a list of information anymore. It was a map. Complete with doodles and everything. And while it at first seemed a mess, quickly I came to realize how much more beneficial to me it was to have my concepts, the components of my thoughts, in distinct places, with connective throughlines to work with. What I had accidentally created was a mind map.

By CS Odessa - http://www.conceptdraw.com/solution-park/resource/images/solutions/bubble-diagrams/Spray_diagram_Student_%20learning_charasterictics.png, CC BY 4.0, https://commons.wikimedia.org/w/index.php?curid=42804280

A mind map is simply a means of organizing information into a hierarchy. It typically relies on concepts visually branching from one another, connecting on ways that denote that they are related, as well as their order of importance. As I continue further into my journey of learning to code, I have found that there are many visual learners like myself who benefit from the use of mind maps, and struggled with finding information and intuiting the relationship between elements of code in vanilla javascript, html, and css. Nesting often simply just doesn't cut it as far as visually denoting the relationships between functions, objects and the like:

    function raceDetails(raceInQuestion) {
    //    const proficienciesArray = []
    //    const bookProfs =document.createElement("P")
    //    const rightPage = document.querySelector("#right-page")
    //    rightPage.innerhtml = ""

    //    const bookLanguages =document.createElement("P")
    //    let languageString = ``


        current = raceInQuestion
        const raceName = document.querySelector("#form-race")
        let primaryAbilityField = document.querySelector('#primary-ability');
        let secondaryAbilityField = document.querySelector("#secondary-ability")
        let languages = document.querySelector('#languages');
        languages.innerHTML = ""
        const optionalProfs = document.querySelector(`#optional-profs`)
        const selectableProfs = document.querySelector(`#selectable-profs`)
        selectableProfs.innerHTML = ""
        const optionalAbility = document.querySelector(`#optional-ability`)
        const halfElfAbility = document.querySelector(`#half-elf-ability`)
        const primaryAbility = raceInQuestion.ability_bonuses[0].ability_score.index
        totalProfs = 0
        //confirms that racial proficiencies exist before populating that section of the form
        // let abilityString = `${primaryAbility}`
        // const bookAbilities =document.createElement("P")
        // const bookNames = document.createElement("h3")
        // bookNames.textContent = `${raceInQuestion.name}`

        if (raceInQuestion.starting_proficiencies[0]) {
            raceInQuestion.starting_proficiencies.forEach((proficiency) => {
                const newChoice = document.createElement("tr")
                const defaultProf = document.createElement("td")
                const choiceSelect = document.createElement("td")
                // proficienciesArray.push(proficiency)

                defaultProf.innerHTML = `${proficiency.name}`

                choiceSelect.innerHTML = `
        <input id="prof-${totalProfs}" type="text value="" placeholder="Your Choice Here"></input>
        `
                totalProfs++
                newChoice.append(defaultProf)
                newChoice.append(choiceSelect)
                selectableProfs.append(newChoice)

                optionalProfs.hidden = false
            })
        } else {
            optionalProfs.hidden = true
        }
            // bookProfs.textContent= proficienciesArray
            // rightPage.append(bookProfs)
        //confirms that the race has a secondary (or teritiary) ability bonus before populating the form with it
        if (raceInQuestion.ability_bonuses[1]) {
            // abilityString = abilityString + " " + raceInQuestion.ability_bonuses[1].ability_score.index
            secondaryAbilityField.value = raceInQuestion.ability_bonuses[1].ability_score.index
            secondaryAbilityField.options[`${raceInQuestion.ability_bonuses[1].ability_score.index}`].innerText = raceInQuestion.ability_bonuses[1].ability_score.index.toUpperCase()
            optionalAbility.hidden = false
            halfElfAbility.hidden = true
        } else if (raceInQuestion.index === "half-elf") {
            halfElfAbility.hidden = false
            optionalAbility.hidden = false
        } else {
            optionalAbility.hidden = true
            halfElfAbility.hidden = true

        }

        // all races have languages by default, so this will generate a section on the form
        // to customize the language, setting the initial values to the racial defaults
        totalLangs = 0
        raceInQuestion.languages.forEach((language) => {
            // languageString = languageString + " " + `${language}`
            const newRow = document.createElement("tr")
            const newLanguage = document.createElement("td")



            newLanguage.innerHTML = `
        <select name="language-${totalLangs}" class="language-${totalLangs}">
            <option value="abyssal">Abyssal</option>
            <option value="celestial">Celestial</option>
            <option value="common">Common</option>
            <option value="deep-speech">Deep Speech</option>
            <option value="draconic">Draconic</option>
            <option value="dwarvish">Dwarvish</option>
            <option value="elvish">Elvish</option>
            <option value="giant">Giant</option>
            <option value="gnomish">Gnomish</option>
            <option value="goblin">Goblin</option>
            <option value="halfling">Halfling</option>
            <option value="infernal">Infernal</option>
            <option value="orc">Orc</option>
            <option value="primordial">Primordial</option>
            <option value="sylvan">Sylvan</option>
            <option value="undercommon">Undercommon</option>
        </select>
        `
            newRow.append(newLanguage)
            languages.append(newRow)
            document.querySelector(`.language-${totalLangs}`).value = language.index
            totalLangs++
        })



        raceName.value = raceInQuestion.name

        primaryAbilityField.value = primaryAbility
        primaryAbilityField.options[`${primaryAbility}`].innerText = primaryAbility.toUpperCase()

        // bookLanguages.textContent = languageString
        // bookAbilities.textContent = abilityString
        // const bookRace = document.createElement("P")
        // bookRace.textContent = `${raceInQuestion.name}`
        // rightPage.append(bookRace)
        // rightPage.append(bookProfs)
        // rightPage.append(bookAbilities)
        // rightPage.append(bookLanguages)
    }

I don't know about you, but this is very difficult for me to follow. That is why I prefer the use of React.js Component Trees.

Looking at this image, we can see that instead of having all of our javascript bunched together in a single file, with React we are able to take the individual elements that compose our javascript and separate them out into distinct files known as components that are listed to the left.
We are then able to link these distinct components of our code through the use of imports and exports. Virtually all of our components are given the ability to export their information, typically through the use of a bit of code tapped out at the bottom of the page, such as in our component BlogCard from the top of our components list in the picture above:

import React from "react";

function BlogCard({blogs}) {
  return (
    <li className="card">
      <div>{blogs.title}</div>
      <div>{blogs.author}</div>
      <div>{blogs.date}</div>
      <div>{blogs.video}</div>
      <div>{blogs.divider}</div>
    </li>
  );
}

export default BlogCard;

Here, we are exporting the function BlogCard, which means that if it is imported, or called by another component, that component now has access to the results of that function. Here, the function BlogCard returns a list of values from an array in our dbjson. However, were we to import this function into BlogList, like so:

import React from "react";
import BlogCard from "./BlogCard";
import PostCard from "./PostCard";

function BlogList({blogs,posts}){
    const mappedPosts = posts.map((posts)=>{
        return <PostCard key={posts.id} posts={posts} />
    })    
    const mappedBlogs = blogs.map((blogs)=>{
        return <BlogCard key={blogs.id} blogs={blogs} />
    })

    return (
        <ul className="cards">
            {mappedPosts}
            {mappedBlogs}
        </ul>
    );
}

export default BlogList;

We can now use that array of values from BlogCard with the function present in BlogList. Here, BlogList is being used to map through the entirety of the "blogs" portion of our backend to return an array of BlogCard return functions, one for each object in our blogs array.
We can think of this relationship like a branch on our mind map, in which a function that is imported into another function is a further part on the branch of the diagram. We can also see here that BlogList imports another function, PostCard, and returns the same thing with that function as BlogCard. We can think of this relationship visually as BlogCard and PostCard being two forks off the main branch, BlogList. For visual learners like me, being able to use this simple import/export system to create a mind map of my code has been extremely helpful and allowed me to create things that would be far too complicated for me with vanilla Javascript:

Get in to the Grid: Style Elements Made Easy

lakota — Fri, 17 Nov 2023 23:27:30 +0000

It has always been the case that as the skill of a trade is developed, it becomes more technical. The carpenter begins with the humblest of tools: chisels, saws, picks. In time, the ambition of the carpenter grows. The simple tools he is accustomed to no longer suffice, and the use of more technical power tools is required. On and on the carpenter's ambition is driven, and on and on it is supported by the adoption of more and more technical tools to accomplish the task. In no time at all, the carpenter finds his hand tools on the shelf, himself sat at a computer, calloused fingers now tapping away in blender, sculpting the next grand vision to be exported to candl. slicer software to chart how a milling machine will precisely carve the components of the next masterpiece.

When it comes to digital expression, the laymen have many options that simplify the process of creating a website. Numerous website builders exist that can make designing a website as simple as dragging and dropping elements to pages. However, as with all things, there are sacrifices that come with this ease of use, such as a lack of uniqueness, poor code optimization, and a lack of interactivity.

Inevitably the ease of using such services is replaced with a feeling of limitation tied to the templates and buttons on offer. But what is there to do? Creating a style-less website is hard enough on its own, but making a website look and feel exciting using nothing but absolute coordinates and pixel counts is a recipe for disaster.

But there is a happy medium. Where goes our carpenter, so go the musician, the painter, and the cohort of creatives into a world that is increasingly using software to express itself. And there too, with the Grace of Grid, go I.

Think of Grid as a tool within a tool. From within the vast and daunting possibilities for creation present in the html and css script, I have found that Grid is a great way to easily simplify and organize the process of developing the style and look of a website.

Let's look at my most recent efforts at learning to code: Dungeons and Dragons, naturally! The idea of the site is to pull data from a public API and use it to help users create their own characters with unique origins and stats. To my mind, such a process of creation, in perhaps one of the most colorful settings in all of fantasy, required a vibrant and thematic presentation.

For inspiration, we turned to the official Dungeons and Dragons website to see what elements we thought we could use:

The official website manages to fill itself with interesting and eye-catching visual designs without the user getting lost or the site itself feeling cluttered. Subjects are organized neatly, represented with bombastic colors that draw the eye, separated by clean, sharp lines that contrast the vibrant interactable elements against the washed out, muted colors of the background.

                 Composing Your Grid

Using Grid made creating a simulacrum of this design extremely easy, even for a beginner like me. It all starts with creating your grid in your html. The process can be done in several ways, but the easiest way to create my own grid was to imagine my webpage split into four rows and three columns.

Creating the code for this is as simple as defining how many rows and columns there will be in your css:

grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 1fr 1fr 100px;
grid-gap: 10px;
padding: 10px;
box-sizing: border-box;

Here, each "fr" represents an equal division of the page into three columns. You can see in our design that the top and bottom rows are not as robust as the middle two; we could change the dimensions of our grid divisions here by simply writing out how many pixels high they should be. Since our top and bottom rows will be our header and footer banners to the website, we decided they can be smaller than the central grid divisions, where the interactive elements and user information will be:

Woah! What happened to our symmetrical divisions? With Grid, it's easy to designate an element of your webpage to take up multiple divisions of the grid as you see fit. All I did was designate a starting position and ending position for my elements. Take my header for example:

.header {
grid-row-start: 1;
grid-row-end: span 1;
grid-column-start: 1;
grid-column-end: 4;
}

You will see that I have set the header to begin at the topmost row, 1, and the left most column, also denoted with a 1 because it is the first column moving from left to right. I have set the header to end at 4. How does that make sense? Aren't there only three columns? You are as correct as you are perceptive! In fact, when we denote our start and endpoints for our grid elements, we actually designate them by the margins of our grid. In a row of three columns, there would be two outer margins and two inner margins, meaning that to have our header stretch the full width of our grid, we would have it end at the fourth and right-most margin:

Great, that makes sense, but what about grid-row-end? What is "span 1"? Span is used to denote how many row or column margins the element will stretch across, or span, before it ends. So, for header, we see that the grid-row-start is the very first row margin, the top of the grid/page, and spans to the next margin, which encompasses the first row. As we can see, there are multiple ways to designate the dimensions of grid elements, finding what works best for you is all a part of getting grids.

                     Imagining Images

Notice that, even when muted, the backgrounds of all the elements of the official website have images of this dungeon or that dragon. It allows for negative space to exist on the page, without giving up a good deal of the website to completely blank, boring white page. With grid, we can do that too! Though there is more than one way to accomplish this, the way I was able to get my main grids to have similar muted images was by simply setting the background of each grid to be the image:

.wizard-list-background {
background-image: url("https://lh3.googleusercontent.com/pw/ADCreHeN4cO4Hc5c98h6VVxUPMs2FrUEDOKF2WYw5U1a9DYhsWgSOIQfEggUKtxVHlphFcHlC8hOkwDIzxROJuFJOhUf8vXdGSCei0f9YPO8CGguydMxkOc=w2400");
grid-row-start: 2;
grid-row-end:span 1;
grid-column-start: 1;
grid-column-end: span 1;
border: 10px solid tan;
border-style: outset;
padding: 10px;
}

I decided to use a photo editing program to wash out the colors of the images before uploading, however with the power of grid we could create the same effect without the need of any external software. One way we could accomplish this is by taking advantage of the z-index. Think of the z-index as the third dimension of your grid. Increasing the value of the z-index pushes that grid forward, allowing it to stack on top of other grids and occupy the same space:

.wizard-list-background {
background-image: url("https://lh3.googleusercontent.com/pw/ADCreHeN4cO4Hc5c98h6VVxUPMs2FrUEDOKF2WYw5U1a9DYhsWgSOIQfEggUKtxVHlphFcHlC8hOkwDIzxROJuFJOhUf8vXdGSCei0f9YPO8CGguydMxkOc=w2400");
grid-row-start: 2;
grid-row-end:span 1;
grid-column-start: 1;
grid-column-end: span 1;
border: 10px solid tan;
border-style: outset;
padding: 10px;
}

#wizard-list {
grid-row-start: 2;
grid-row-end:span 1;
grid-column-start: 1;
grid-column-end: span 1;
z-index: 2;
border: 10px solid tan;
border-style: outset;
padding: 10px;
font-family: eternalFont;
color: rgb(159, 4, 4);
}

Notice that these two elements cover the exact same grid rows and column dimensions, however because #wizard-list has a z-index value of 2, it appears stacked on top of .wizard-list-background. How does this help us with changing the color of our grid to a more muted tone? We need simply add a background color to our #wizard-list, designate it as white, and increase the opacity. Just like a pair of white tinted sunglasses, or #wizard-list is now tinting .wizard-list-index below it.

.wizard-list-background {
background-image: url("https://lh3.googleusercontent.com/pw/ADCreHeN4cO4Hc5c98h6VVxUPMs2FrUEDOKF2WYw5U1a9DYhsWgSOIQfEggUKtxVHlphFcHlC8hOkwDIzxROJuFJOhUf8vXdGSCei0f9YPO8CGguydMxkOc=w2400");
grid-row-start: 2;
grid-row-end:span 1;
grid-column-start: 1;
grid-column-end: span 1;
border: 10px solid tan;
border-style: outset;
padding: 10px;
}

#wizard-list {
background-color: rgba(255, 255, 255, 0.674);
grid-row-start: 2;
grid-row-end:span 1;
grid-column-start: 1;
grid-column-end: span 1;
z-index: 2;
border: 10px solid tan;
border-style: outset;
padding: 10px;
font-family: eternalFont;
color: rgb(159, 4, 4);
}

              It's What's Inside That Counts

Not only can we make the Grid itself into an eye-catching design, but we can also fill the grid elements up with plenty of eye-catching elements as well! By simply appending text, images, or even other grids into our grid elements, we can create interactive, layered pages. Take, for example, the .content-large grid element; this element is composed of 5 grids!

At the very back, the .content-large grid uses it's background image to create the library. -Stacked on top of that is another grid, #the-Book-Of-Races, which has the open book image as its background image. -Next at a z-index of 4 are #left-page and #right-page, each set to the dimensions of one page, and each nesting another grid element to append information such as text and images to!

.content-large {
background-image: url("https://cdn.openart.ai/stable_diffusion/b012323c5ffa3fd5cad34cff7c9d929e106675c6_2000x2000.webp");
background-size:cover;
grid-row-start:2;
grid-row-end:span 1;
grid-column-start: 2;
grid-column-end: span 2;
border: 10px solid tan;
border-style: outset;
padding: 10px;
font-family: eternalFont;
color: rgb(159, 4, 4);
display: grid;
}

#the-Book-Of-Races{
background-image: url("https://lh3.googleusercontent.com/pw/ADCreHc9HyyVNt_GSvSgKf-FODysDzW0oPbN_EHVlV_IR6afnAvPowQVUApF-0LseGT0A-LzCAcYW66viSGcjiVJuqHssJApGVZfJS9EbtXXymVL20_O5J0=w2400");
background-size:cover;
display: block;
margin: auto;
width: 60rem;
height: 30rem;
grid-row-start:2;
grid-row-end: span 1;
grid-column-start: 2;
grid-column-end: span 2;
z-index: 2;
}

#right-page {
/* background-color: rgba(0, 0, 255, 0.432); */
grid-row-start:2;
grid-row-end: span 1;
grid-column-start: 3;
grid-column-end: span 1;
z-index: 4;
}
#right-page-info {
margin-top:100px;
}

#left-page {
/* background-color: rgba(0, 0, 0, 0.37); */
grid-row-start:2;
grid-row-end: span 1;
grid-column-start: 2;
grid-column-end: span 1;
z-index: 4;
}
#left-page-info {
  width: 17rem;
margin-top: 6rem;
margin-left: 15rem;
}

And, if we click on one of the fantasy race names in the navbar on the left, we see images and text populate our pages!

The craziest thing about all of this is that it is just the way that I decided to design my website using Grid. For each example given here, there is at least one other way to accomplish the same goal, and likely more efficiently. But I'll spare you anymore reading, go out and give Grid a try for yourself!