Forem: Hroney

No Script Needed: CSSing is Believing

Hroney — Thu, 08 Aug 2024 19:13:24 +0000

Introduction

CSS, or Cascading Style Sheets, is the unsung hero of web development. It’s the tool that transforms plain, unstyled HTML into the visually appealing and user-friendly interfaces we interact with daily. While HTML structures content and JavaScript brings it to life, CSS breathes beauty into the mix. Over time, CSS has evolved from a simple styling language to one capable of handling more complex tasks, some of which previously required JavaScript. This blog will explore the basics of CSS and then delve into some clever tricks that allow you to create interactive UI elements with CSS alone, minimizing your reliance on JavaScript.

The Basics of CSS

Before diving into advanced tricks, let’s revisit the core of CSS. Understanding these basics is crucial as they serve as the foundation for more complex techniques.

Selectors and Properties

CSS selectors are the means by which you target HTML elements to apply styles. Whether you’re styling a specific element, a class of elements, or using advanced selectors to target elements based on their attributes, knowing how to effectively select elements is key.

For example, the difference between a class selector (.class-name) and an ID selector (#id-name) is important, as is understanding combinators like the child (>), adjacent sibling (+), and general sibling (~) selectors.

Properties, on the other hand, define what styles you want to apply to those elements. Properties like color, font-size, background-color, and border are some of the most commonly used, but there are hundreds of properties available, each with their own quirks and nuances.

The Box Model

The box model is a critical concept in CSS. Every HTML element is essentially a rectangular box, and understanding the box model helps you control the space around these boxes.

The box model consists of the following parts:

Content: The actual content of the box, like text or images.
Padding: The space between the content and the border.
Border: The edge surrounding the padding (and content).
Margin: The space outside the border, separating the element from its neighbors.

Understanding how to manipulate these properties allows you to fine-tune your layouts, ensuring elements are spaced and aligned exactly how you want them.

Positioning

Positioning is how elements are placed in relation to their surrounding elements or the viewport. CSS provides several ways to position elements:

Static: The default positioning, where elements follow the normal flow of the document.
Relative: Elements are positioned relative to their normal position.
Absolute: Elements are positioned relative to their nearest positioned ancestor.
Fixed: Elements are positioned relative to the viewport, staying in place even when the page is scrolled.
Sticky: A hybrid that toggles between relative and fixed, based on the user’s scroll position.

These positioning techniques are foundational for more advanced layouts, like creating sticky headers, footers, or complex page designs.

Flexbox and Grid

Flexbox and Grid are two layout modules that have revolutionized responsive design. Before their introduction, developers relied heavily on floats and inline-blocks, which were often tricky to manage.

Flexbox is a one-dimensional layout method for laying out items in rows or columns. It simplifies the process of aligning items within a container, evenly distributing space, and handling dynamic sizes.

Example:

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

Grid is a two-dimensional layout system, providing a grid-based layout with rows and columns. Grid is more powerful when it comes to creating complex layouts, allowing for both horizontal and vertical alignment in a single container.

Example:

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

Both Flexbox and Grid are essential tools for creating responsive designs that adapt seamlessly to different screen sizes.

Going Beyond the Basics with CSS

Now that we’ve covered the basics, let’s explore some more advanced features of CSS. These tools allow you to add interactivity and animations to your websites without relying on JavaScript.

Transitions and Animations

CSS transitions and animations bring your designs to life with smooth, dynamic effects. While JavaScript can also create animations, CSS does so with less overhead and often with simpler code.

Transitions allow you to change property values smoothly (over a given duration). For example, you can create a hover effect that gradually changes the background color of a button:

button {
    background-color: #3498db;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #2ecc71;
}

Animations take things a step further, allowing you to define keyframes that specify the start and end states of the animation, as well as any intermediate points:

@keyframes slidein {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

.element {
    animation: slidein 1s ease-in-out;
}

With animations, you can create complex sequences that run automatically, or trigger based on user interaction.

Hover Effects

Hover effects are a common way to indicate interactivity on web elements like buttons, links, or images. With CSS, you can create impressive effects without a single line of JavaScript.

For example, a simple zoom-in effect on an image:

.image-container img {
    transition: transform 0.3s ease;
}

.image-container:hover img {
    transform: scale(1.1);
}

Such effects improve user experience by making the interface feel more responsive and polished.

Responsive Design

Responsive design ensures that your website looks good on all devices, from desktops to smartphones. Media queries are the key tool in this regard, allowing you to apply styles based on the device’s screen size.

Example:

@media (max-width: 600px) {
    .container {
        flex-direction: column;
    }
}

By combining Flexbox, Grid, and media queries, you can create layouts that adapt seamlessly to different screen sizes, improving accessibility and user experience.

Replacing JavaScript with Clever CSS

Now for the fun part: using CSS to do things that most people think require JavaScript. With some creativity, CSS can handle many interactive elements on its own.

Checkbox Hack

The checkbox hack is a popular technique where a hidden checkbox input is used to toggle UI elements. By pairing the :checked pseudo-class with labels and other elements, you can create toggles, dropdowns, and even simple modal windows.

Example of a simple toggle:

<input type="checkbox" id="toggle">
<label for="toggle">Toggle Content</label>
<div class="content">
    <p>This content is toggled on and off with CSS only!</p>
</div>

.content {
    display: none;
}

#toggle:checked + .content {
    display: block;
}

This technique allows you to create interactive elements without writing any JavaScript, simplifying your codebase and improving performance.

CSS Tooltips

Tooltips are commonly implemented with JavaScript, but CSS can handle them elegantly using the :hover pseudo-class and the ::after pseudo-element.

Example:

.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip:hover::after {
    content: 'Tooltip text';
    position: absolute;
    background-color: #333;
    color: #fff;
    padding: 5px;
    border-radius: 3px;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

This method creates a simple, effective tooltip that requires no extra HTML elements or JavaScript.

Dropdown Menus

Dropdown menus are another feature often implemented with JavaScript, but CSS can handle them using the :hover pseudo-class and careful positioning.

Example:

.menu {
    position: relative;
    display: inline-block;
}

.menu-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.menu:hover .menu-content {
    display: block;
}

This CSS-only approach to dropdowns keeps your codebase lean and avoids potential issues with JavaScript event handling.

Accordions

Accordions are a common UI element, often used in FAQs or to hide/show sections of content. With CSS, you can create an accordion using the :target pseudo-class or the checkbox hack.

Example with :target:

<div class="accordion">
    <h3 id="section1">Section 1</h3>
    <div class="content">
        <p>Content for section 1</p>
    </div>
    <h3 id="section2">Section 2</h3>
    <div class="content">
        <p>Content for section 2</p>
    </div>
</div>

.content {
    display: none;
}

#section1:target ~ .content:nth-of-type(1),
#section2:target ~ .content:nth-of-type(2) {
    display: block;
}

This approach lets users expand and collapse content sections without needing JavaScript, making for a simpler and more accessible solution.

CSS Counters

CSS counters can replace JavaScript for simple numbering tasks, such as

automatically numbering list items, sections, or figures.

Example:

ol {
    counter-reset: section;
}

ol li {
    counter-increment: section;
}

ol li::before {
    content: counter(section) ". ";
    font-weight: bold;
}

CSS counters are a powerful tool that can simplify your HTML structure by eliminating the need for manually adding numbers or JavaScript logic.

Real-World Examples

Let’s look at a few real-world examples where CSS has replaced JavaScript, resulting in cleaner, faster, and more maintainable code.

Example 1: Pure CSS Modal

A modal window is often implemented using JavaScript to control its visibility. However, using the checkbox hack, you can create a modal with just HTML and CSS:

<input type="checkbox" id="modal-toggle">
<label for="modal-toggle" class="modal-button">Open Modal</label>
<div class="modal">
    <label for="modal-toggle" class="modal-close">×</label>
    <p>This is a modal dialog created with pure CSS.</p>
</div>

.modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

#modal-toggle:checked + .modal {
    display: block;
}

Example 2: CSS-Only Carousel

Carousels or sliders are typically powered by JavaScript, but you can create a simple one using CSS animations and the :checked pseudo-class:

<div class="carousel">
    <input type="radio" name="slides" id="slide1" checked>
    <input type="radio" name="slides" id="slide2">
    <input type="radio" name="slides" id="slide3">
    <div class="slides">
        <div class="slide" id="slide-1">Slide 1</div>
        <div class="slide" id="slide-2">Slide 2</div>
        <div class="slide" id="slide-3">Slide 3</div>
    </div>
</div>

.slides {
    width: 300%;
    display: flex;
    transition: transform 0.5s ease;
}

#slide1:checked ~ .slides {
    transform: translateX(0%);
}

#slide2:checked ~ .slides {
    transform: translateX(-100%);
}

#slide3:checked ~ .slides {
    transform: translateX(-200%);
}

These examples show how powerful CSS can be when it comes to creating interactive elements without relying on JavaScript.

Conclusion

CSS has grown far beyond simple styling. With a solid understanding of its basics, you can leverage CSS to handle tasks that once required JavaScript, simplifying your code and improving performance. From hover effects to interactive UI components like dropdowns, accordions, and modals, CSS offers elegant solutions that are both lightweight and accessible. I encourage you to experiment with these techniques in your own projects. You might be surprised at how much you can achieve with just CSS!

Utilizing Generative AI for Coding Questions

Hroney — Tue, 11 Jun 2024 15:12:17 +0000

Using Generative AI to Best Edit and Utilize for Coding-Related Questions

Index

Introduction
Why use Generative AI for Coding
Best practices
- Starting Off
- Scope
- Clear Context
- Sharing Relevant code snippets
- State clear objectives
- Highlight errors and issues
- Ask Targeted Questions
- Include Input and Output
- Use Comments
Examples of Effective AI utilization
- Debugging a Flask Route
- Optimizing a React Component
Conclusion

Introduction

We've now been living with generative AI's for nearly 2 years. It's here to stick around and I've grown accustomed to utilizing it for all manner of questions. I'd like to share with you today the required skillset for getting the information you want using your acumen to discern good and proper answers.

Resources used: Chatgpt 3.5, 4, and Perplexity.ai

This will blog post will be centered around coding but following this ruleset will allow you to tease out the proper information from a generative AI.

Why Use Generative AI for Coding?

Generative AI's save time. Quick solutions to coding problems if given the right context. They are a great learning tool. My background is in education with a focus on pedagogy. Hiring and training tutors is what I'm good at, utilizing these AI tools to mold them into good tutors is essential to understanding how to get the answers you need.
These AI tools are also fantastic for debugging - Stuck on a logical problem? They can offer a solution or, if you don't want an outright solution, suggestions on how to approach the topic to allow for the learner/user to remain in that zone of proximal development.

Best Practices for Utilizing AI in Coding

Starting off

Be nice to your AI :) Say please an thank you (Or at least I will, should be lose the technology arms race against our binary counterparts I wish to have been known as Cordial).

Following a simple speaking and presenting pattern can help you sum most of what I'll say. This may look familiar to a lot of you:

Tell'em what you're going to tell'em.
- Start off by telling the AI the outcome you want from your problem
Tell'em
- Give the AI the context of the problem (code, math problem, etc.)
Tell'em what you told'em
- Summarize your requirements be adding additional specific context on how you want the problem presented to you (As code, as an answer, as an outline, etc)

Scope

It's important to share code snippets and not your entire code base. You can share your code base as context for something like Add comments to my code or provide a read me. But limiting your scope of questioning will ensure good answers more often and maintains your personal autonomy to know how the code is developed. Asking an AI tool to write you code will only have you endlessly error handling and playing catch-up. Instead, write what you can - ask for help when you must.

Please fix the bug in this component **[provide snippet]** it's not doing **[XYZ]** is a much better query than Here's my code **[entire code-base]**. Why isn't it working?

Provide Clear Context

Starting off, every query to a generative AI needs clear context. Context on what you're attempting to accomplish or want to get out of the exchange.

Example:

I am working on a web application that manages tutoring sessions using Flask and React.

The above gives the AI context on which areas to focus: flask, React, Web application, POST all give the AI the groundwork on where to build out THEIR context on how to share information. Since we've put in flask and React the answers delivered back to you will be entirely centered around these context languages and framework (Javascript, Python, etc.)

Share Relevant Code Snippets

After establishing where the groundwork is with context, you need to next provide the Tell'em. Give the context of the code in question.

Example:

@app.route('/sessions', methods=['POST'])
def create_session():
    data = request.get_json()
    new_session = Session(
        tutor_id=data['tutor_id'],
        tutee_id=data['tutee_id'],
        start_time=data['start_time'],
        end_time=data['end_time']
    )
    db.session.add(new_session)
    db.session.commit()
    return jsonify(new_session.to_dict()), 201

State Clear Objectives

Clarify what you want to achieve with the code. It's important to explain to the AI the outcome that you want. This is all part of the process on getting back relevant answers.

Example:

I want to add validation to ensure that the session times do not overlap for the same tutor.

Make note It's important to know that you will often get 'wrong' answers. It will at first be hard to discern what a 'wrong' answer looks like. Thus, you will need to be at the very least comfortable with discerning WHAT an issue looks like. As my dad would call it - your BS meter needs to be good at sniffing out potential problems. Knowing your vocabulary, data structures, and what the input / output of your components is, will better help you maintain code autonomy.

Highlight Errors or Issues

Next, provide context on what is happening negatively to your snippet (If you so desire)

Example:

Currently, the code does not check for overlapping session times, which can lead to scheduling conflicts.

Ask Targeted Questions

Be specific in your queries to get precise answers. The AI tools are just that, tools. They can't read your mind (yet). Give them an actionable command.

Example:

How can I modify this route to check for overlapping sessions before creating a new one?

Include Input and Output

Provide sample input and expected output to help the tool understand WHAT is going through the modules/components. It not only provides better and more context (Keyword of the day!) it also helps you maintain that code autonomy I've been mentioning all over the blog.

Example:

Sample Input: {"tutor_id": 1, "tutee_id": 2, "start_time": "2024-06-11T10:00:00", "end_time": "2024-06-11T11:00:00"}
Expected Output: {"error": "Session times overlap for the same tutor."}

Use Comments

Highlight specific parts of the code you are unsure about using comments. Your comments add extra context WITHIN the query. They pinpoint the problem for the AI tools to better target where you believe the issue may lit.

Example:

# This is where I need to check for overlapping sessions

Examples of Effective AI Utilization

Example 1: Debugging a Flask Route

I'm working on a Flask web application, and I'm encountering an error in one of my routes. I'm using Flask for the backend and React for the frontend. The specific route causing the issue is /api/get_data. Here's the code snippet for the route that's causing the problem:

# This is the route for retrieving data from the database
@app.route('/api/get_data', methods=['GET'])
def get_data():
    # Some code here that's causing the error
    return jsonify(data)

I need help identifying and fixing the error in this route so that it returns the expected data when accessed. The error I'm encountering seems to be related to a KeyError when accessing a dictionary in the route function. I'm not sure why this error is occurring. Can you help me identify what might be causing the KeyError in this route function? Any suggestions on how to fix it?

Example 2: Optimizing a React Component

I'm working on a React project, and I've noticed that one of my components is rendering slowly. The component in question is a dashboard displaying real-time data, and it's impacting the overall performance of the application. Here's the code snippet for the component that's rendering slowly:

// Dashboard Component: Renders real-time data
import React from 'react';

const Dashboard = () => {
    // Component code here
    return (
        <div>
            {/* Dashboard content */}
        </div>
    );
}

export default Dashboard;

I'm looking for suggestions on how to optimize this component's performance to improve rendering speed and overall application performance. The main issue I'm encountering is that the dashboard component takes a long time to render, especially when fetching and displaying large amounts of real-time data. What are some best practices for optimizing React components, particularly those that render real-time data? Are there any specific techniques or libraries I should consider using?

Conclusion

Generative AI is a tool like any other - skilled wielders will be able to utilize the tool to a much greater effect. Knowing your subject area allows you to better focus the AI to get the answers you want. As such, Anyone can ask a Generative AI to write a webpage, but not everyone can then take that code to style it, deploy it, expand on it, change it to the customers wishes, etc.

Following the above practices will give your AI the best Context for understanding and providing you with the best answer or at least one you can adapt.

I'd love to hear about your journeys with AI tools and how you have learned to best prompt them for information

All Things Python (in-so-far as I've been using it!)

Hroney — Fri, 15 Mar 2024 20:02:28 +0000

Hello!

Here marks another phase completed with #flatironschool! I feel as though this phase (phase 3) was quite a different approach to the learning process.

First off - this phase was done in a new language, Python!

Now... At first (And possibly even still...) It's not my favorite of the languages I've been introduced to. That being said - I adore object oriented programming and I thought I'd share some of what I've learned.

But, before we dive into Object-oriented programming - let's mark out something I have enjoyed about Python.

It's clear and concise in its language! If I wanted to consume every cookie in the cookie jar, it's as easy as looping through it like so:

for cookie in cookie_jar:
    consume(cookie)

That same could be done in javascript but would look something like...

cookie_jar.forEach((cookie) => {consume(cookie)};
// or
for (let cookie of cookie_jar) { consume(cookie);

The javascript is far less readable out the box.

This is just one example.

Printing to the console is straightforward in both. But Python just reads more easily.

print("foo")

console.log("foo"

Checking the length of an array or string makes more sense to be a wrapper around the object rather than a function OF the object.

len(["1","2","3"])

["1","2","3"].length()

But I enjoy most of all - classes.

Let's look at an example of a class and break it down line by line.

Person.py

1. # lib/person/Person.py
2. from lib.person._Person import PersonMethods
3. 
4. class Person(PersonMethods):
5. 
6.     def __init__(self,name):
7.         self.name = name
8. 
9.     @property
10.     def name(self):
11.         return self._name
12. 
13.     @name.setter
14.     def name(self, name):
15.         if isinstance(name, str) and len(name):
16.             self._name = name
17.         else:
18.             raise ValueError(
19.                 "Name must be a non-empty string"
20.             )

Breakdown

Line 1: A Single line comment indicating the file path.

Line 2: from lib.person._Person import PersonMethods Imports the PersonMethods class from the _Player module.

Line 4: class Person(PersonMethods): Defines a new class named Person that inherits from the PersonMethods class imported on Line 2. Inheritance allows a class to inherit attributes and methods from another class. In this case, separating methods from Getters / Setters.

Line 6: __init__ is a Constructor. This is a special method that is called when a new instance of the class is instantiated. There are two parameters to the constructor here, self and name. self refers to the instance of the class and is not expressly passed into the constructor upon creation. name is a string (in this case) that is passed into the constructor when initializing the instance.

Line 7: self.name = name This line assigns the value of name that was passed in on line 6 into an attribute of the current instance self.

Line 9 - 11: @property is a decorator used to define a property. Properties provide a way to customize attribute access. For example:

person = Person("John")
print(person.name) # This will print "John"

However this is equivalent to calling the name() method on the instance.

print(person.name()) # This will also print "John"

By using the @property decorator, it allows us to more cleanly access the attribute as though it were a direct attribute.

Line 13: @name.setter is a decorator that defines a setter method for the name property.

Line 14: def name(self, name): defines the name method as a setter based on the decorator in line 13.

Line 15: if isinstance(name, str) and len(name): This is our first bit of logic! This line checks if the value passed into the setter, name, is a non-empty string. isinstance() is a function to check if the value is an instance of the string class and the len() function checks if the string has a length greater than 0

Line 17 - 20: else: raise ValueError("Name....") this line only fires if the value passed into the setter method is not a valid string. It will raise a ValueError with the message attached.

All in all, by defining a setter method for the name property, the name attribute of an instance Person can be modified using assignment syntax. For example:

person = Person("John")
person.name = "Alice" # Changes the name of person

_Person.py

1. # lib/person/_Person.py
2. 
3. class PersonMethods:
4. 
5.     def say_name(self):
6.         return f"My name is {self.name}

Breakdown

Line 1: A Single line comment indicating the file path.

Line 3: class PersonMethods: defines a new class PersonMethods that, unlike Person, does not inherit any methods. Instead, this class has a single method say_name().

Line 5: def say_name(self): definds a method named say_name within the method that has the self parameter, indicating that this is an instance method (a method specifically used by each instance of the class rather than the class itself).

Line 6: return f"My name is {self.name}" returns a string formatted using string interpolation.

All together now!

So! By inheriting from PersonMethods, instances of the Person class gain access to the methods defined in the PersonMethods class! For example, the say_name() method we created earlier can be invoked directly on instances of the Person class!

person = Person("John")
print(person.say_name()) # Output: "My name is John"

This illustrates how the Person class in Person.py benefits from the methods encapsulated in the PersonMethods class defined in _Person.py!

A Caveat to Python...

While I love the object oriented programming paradigm... Python has a major annoyance for my organized brain...

The indentation! 4 spaces!? With Javascript, just wrap everything in curly braces {}. Boom! You know where your scope lines are.

This whitespace sensitivity to define block structure is a real visual problem for me. I appreciate the explicit block delimiters that javascript has with {}.

I learned a lot more about Python but this is just a neat little explanation of something I found fun to learn.

React-Router-Dom as told by a noob :)

Hroney — Mon, 22 Jan 2024 22:35:43 +0000

I began my Phase 2 project by deciding to build out a webpage using an open source D&D 5e API. I learned pretty quickly, that the documentation was amazing but, some of the structures inside the JSON were rather difficult to parse out... But that's a topic for a different time.

I wanted to focus on the React-Router-Dom library and my routes and try to explain, As best as I can, how it works to give myself a better understanding and perhaps help some other soul who happens to find themselves here.

Below is my Routes.js file.

const routes = [
    {
        path: '/',
        element: <App />,
        children: [
            {
                path: '/',
                element: <Home />
            },
            {
                path: '/classes',
                element: <Classes />,
                children: [
                    {
                        path: "/classes/:id",
                        element: <ClassInformation />
                    }
                ]
            },
            {
                path: '/spells',
                element: <Spells />,
                children: [
                    {
                        path: "/spells/:id",
                        element: <SpellInformation />,
                        children: [
                            {
                                path: "/spells/:id/:id",
                                element: <Spell />,
                            }
                        ]
                    }
                ]
            },
            {
                path: '/pick-a-class',
                element: <Classform />
            },
            {
                path: '/party',
                element: <Party />
            }
        ]
    }
]

Fairly straightforward but, what the heck does it all mean?

Well let's start from the top.

routes is an array of route configurations (an object).
Each route configuration is itself an object with properties such as path and element.
The Path property represents the URL path for the route.
The Element property represents the React component to be rendered when the route is matched.

Now, let's break down the nested structure!

The top-level route has a path of '/' and its element is the <App /> component. It also has children, which are nested routes.

The first Child route has a path of '/' (the Root path) and its element is the <Home /> component.

The Second Child route has a path of '/classes' and its element is the <Classes /> component. It ALSO has a nested route under the children property with a Dynamic parameter labeled :id (used to capture the Class ID) and its element is the <ClassInformation /> component.

HOLD ON NOW

What's a Dynamic Parameter?! Well dear reader, I'm glad I foresaw your question!

In the context of routing, a dynamic parameter refers to a placeholder in the URL path that can capture different values as part of the route.

In the code I provided, the dynamic parameter (/classes/:id) in certain route paths is a dynamic parameter. It means that the route will match any path that follows the pattern "/classes/" and is followed by some dynamic value.

For instance, if the URL is "/classes/123" the value of :id would be "123". In my code that's not labelled here - the :id is itself fairly dynamic because I wanted to reuse the Class Sidebar I created!

<Link className={"link-text"} to={`${linkInfo}${characterClass.index}`}>{characterClass.name}</Link>

My ${linkInfo} is passed into this component and is the string of the first start of the URL. In the case above it would be /classes/ while the ${characterClass.index} is the index value of the class in the higher component (in this case, it's each individual class in the ClassList that was rendered out from the API).

This means that each Character class is given its own unique webpage URL that is rendered out from the component I made for them! Pretty neat!

BACK TO THE ROUTES

So going down the list you can see the pattern. Each of my components is given a Route and URL. Each component is rendered when the URL is changed. Each URL is changed based on the NavBar or other navigations in my web application. All in all, it's really neat!

The "Is this a word" check of my Phase 1 Flatiron Project

Hroney — Mon, 13 Nov 2023 22:56:13 +0000

Hello!

I thought I'd break apart my "isAWord" function in my project as this is where all of the magic happens.

My project can be found here: https://github.com/Hroney/flatiron-phase-1-project

The Object

For reference: The Object that is the word and its functions are seen here.

class Word {
    constructor(name) {
        this.name = name;
        this.definitions = [];
        this.nameArray = [];
    }

    addDefinition(definition, partOfSpeech) {
        this.definitions.push({ definition, partOfSpeech });
    }

    splitTheWord() {
        this.nameArray = this.name.toUpperCase().split('');
    }
}

The Function

We start off by creating an Async function as isAWord calls the dictionary api multiple times while writing information to a db.json.

The passed in userInput is grabbed from an event listener text input and put to lowercase to standardize the usage.

async function isAWord(userInput) {
    let word = userInput.toLowerCase();
    ...

Next the user input word is checked against the db.json and pulls the relevant data instead of calling the dictionary api a second time for information we've already gathered.

Each definition and the related partOfSpeech in the db is grabbed and is passed into the object theWord

theWord is split using splitTheWord which turns the name of theWord into an array so each letter can be appended to it's own Div.

   if (db && word in db) {
        const dbWord = db[word];
        theWord = new Word(dbWord.name);
        dbWord.definitions.forEach(({ definition, partOfSpeech }) => {
            theWord.addDefinition(definition, partOfSpeech);
        });
        theWord.splitTheWord();
        return theWord;
    }

If the word is not in the db.json it is checked first to make sure it is a word.

This function checks the passed in userInput and determines if any of the elements in the userInput are themselves a space, a punctuation mark, or a number. All of which would not return a proper word.

The returnValue defaults true as to assume it's a valid word until proven otherwise.

function isASingleWord(userInput) {
    let charArray = userInput.split('');
    const punctuation = /[!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~]/;
    const numbers = /\d+/g;
    let returnValue = true;

    if (charArray.some(element => element.includes(' '))) {
        returnValue = false;
    } else if (charArray.some(element => punctuation.test(element))) {
        returnValue = false;
    } else if (charArray.some(element => numbers.test(element))) {
        returnValue = false;
    }
    return returnValue;
}

Once the word passes the isASingleWord if statement, the dictionary api is called.

The response variable is created and assigned the fetched status. If the response is ok (a read only property of response) and it's boolean returns false, the api call was unsuccessful.

const response = await fetch(apiUrl);
            if (!response.ok) {
                throw new Error(`HTTP Error! Status is: ${response.status}`);
            }

If it passes as true however, the data variable is assigned the response passed through the built in json() function.

This data is checked for the title of the word and if the title returns No Definitions Found then while it is a word, it is not a definable word in the dictionary and will return an empty object Word.

try {
     const data = await response.json();
            if (data.title === "No Definitions Found") {
                return new Word('');
            }

If however it does have a title that isn't the api's default No Definitions Found, then theWord is instantiated with the word data from the api call. The definitions and parts of speech are grabbed and build the object.

It is then added to the database with the addToDB function so that successive api calls do not call words already added to the db.json.

            else {
                theWord = new Word(data[0].word);
                data[0].meanings.forEach(object => {
                    object.definitions.forEach(definitionArray => {
                        theWord.addDefinition(definitionArray.definition, object.partOfSpeech);
                    });
                });
                theWord.splitTheWord();
                addToDB(theWord);
                return theWord;
            }

Lastly, the try-catch block is finished, where the catch grabs an error if one exists and if the isASingleWord function returns false, it fires the else statement to return an empty Word Object to clear out the gamefield.

catch (error) {
            console.error('Error fetching word data:', error);
            return new Word('');
        }
    } else {
        return new Word('');
    }

This project was a lot of fun and I learned a lot about async and promise and yet, I feel as though I have so much to learn on the subject.

Thank you if you stuck with me! I'm sure there's a better way to do the project I've created as I essentially brute forced my way through on the API calls, my Json-server crashes often I believe because of my anti-virus, and the async functions often are slow. I look forward to challenging myself and learning to know what I did wrong where how to improve.

I'm bad at blogging

Hroney — Fri, 29 Sep 2023 19:45:14 +0000

Wowee!

It's been 10 days. Note to others - Life gets in the way of even the best intentions.

I'm chugging along with Javascript at Flatiron! Currently on-track with the 10 month long process. I don't get any time off to actually dig into the material and just plow through it sadly. That being said - I learned quite a bit about objects that I didn't know prior. In fact - It's the first time that objects has finally clicked with me. I first tried C and C++ in my undergrad and it just never made any sense. But, this is so simple now. It's like the language just keeps unfolding and it's so internally consistent.

I'm sure I'm wrong and I'll learn soon just how wrong I am. But, don't burst my bubble quite yet!

Returning to a Journey

Hroney — Tue, 19 Sep 2023 17:25:23 +0000

Hey Y'all!

This is a first for me. I've hardly ever felt it necessary to write down my thoughts or exploits as it's mostly just lived within my skull. However, as I and my kids are aging it is becoming increasingly difficult to remember not just my life but theirs as well.

So! Without further ado.

My Name is Hayden and I went to school for Philosophical Logic from 2015-2018. I got my Bachelors and graduated Summa Cum Laude. During my time in the program I took electives in Java, C, and C++. I enjoyed the structure of taking arguments and scoped logical problems and adapting them to a computer to then give back to me what I could do with propositional and predicate logic.

I'm returning now after marrying and with 2 kids in the mix. I can't afford to live on the salary I am and I'm looking to not only change my lot in life through this medium - I am also looking to expand my skillset to be more than an abstract set of Jeopardy facts.

I started the Flatiron school's Software Engineering course 9/18/23 and I'm excited to give this a proper try.

I'll keep you all updated once a week.

-Hayden

Forem: Hroney

No Script Needed: CSSing is Believing

Introduction

The Basics of CSS

Selectors and Properties

The Box Model

Positioning

Flexbox and Grid

Going Beyond the Basics with CSS

Transitions and Animations

Hover Effects

Responsive Design

Replacing JavaScript with Clever CSS

Checkbox Hack

CSS Tooltips

Dropdown Menus

Accordions

CSS Counters

Real-World Examples

Example 1: Pure CSS Modal

Example 2: CSS-Only Carousel

Conclusion

Further Reading and Resources

Utilizing Generative AI for Coding Questions

Using Generative AI to Best Edit and Utilize for Coding-Related Questions

Index

Introduction

Why Use Generative AI for Coding?

Best Practices for Utilizing AI in Coding

Starting off

Scope

Provide Clear Context

Share Relevant Code Snippets

State Clear Objectives

Highlight Errors or Issues

Ask Targeted Questions

Include Input and Output

Use Comments

Examples of Effective AI Utilization

Example 1: Debugging a Flask Route

Example 2: Optimizing a React Component

Conclusion

All Things Python (in-so-far as I've been using it!)

Person.py

Breakdown

_Person.py

Breakdown

All together now!

A Caveat to Python...

React-Router-Dom as told by a noob :)

HOLD ON NOW

BACK TO THE ROUTES

The "Is this a word" check of my Phase 1 Flatiron Project

Hello!

The Object

The Function

I'm bad at blogging

Returning to a Journey