DEV Community: Chase

Embracing Tailwind CSS: A New Era of Styling for Web Developers

Chase — Mon, 21 Oct 2024 02:18:09 +0000

Let's start to get rid of that forever long CSS file and start enhancing your styling experience with Tailwind CSS! It makes styling your code directly in your html or React component easy to do and easy to organize.

What is Tailwind CSS?
Tailwind CSS is a utility-first CSS framework designed to enable developers to build custom user interfaces quickly.Tailwind CSS provides low-level utility classes that can be combined to create unique designs. This allows for users to be able learn and pick up quickly so, they lose no time in starting there coding!

Key Features of Tailwind CSS
Utility-First Approach: Each class corresponds to a single CSS property, allowing developers to compose complex designs directly within their HTML markup. For example, instead of writing custom CSS for margins, padding, and colors, you can apply utility classes like mt-4, p-6, and bg-blue-500 right in your HTML elements. This results in less context switching and more rapid prototyping, and if you ever are struggling with figuring out syntax you can always visit and explore Tailwind css cheat sheets that display all the syntax you could possibly need!

Responsive Design Made Easy: Tailwind CSS makes it incredibly easy to build responsive designs. With its mobile-first approach, developers can use responsive utility classes that adjust styles based on screen size. For instance, you can apply md:bg-green-500 to change the background color of an element to green when the viewport width reaches the medium breakpoint. This feature simplifies the development of responsive layouts without requiring additional media queries.

Customization and Theming: Tailwind CSS is highly customizable, allowing developers to be able create utility classes to create theming throughout there project. Such as, dark theme by creating a utility class that holds a dark theme you simple add customizable elements depending on wither you have a dark mode enable or light mode.

Built-In Purging: One of the concerns with using utility-first frameworks is the potential for bloated CSS files. Tailwind CSS addresses this issue with a built-in purging feature that removes unused styles in production builds. By integrating with tools like PurgeCSS, Tailwind can significantly reduce the size of your final CSS bundle, ensuring optimal performance.

Ecosystem and Plugins: The Tailwind CSS ecosystem is rich with plugins that extend its functionality. From typography and forms to custom animations, the available plugins can help you enhance your projects without reinventing the wheel. Additionally, Tailwind’s community is vibrant and continually growing, providing a wealth of resources, tutorials, and support.

Benefits of Using Tailwind CSS
Faster Development: With the utility-first approach, developers can prototype and iterate designs rapidly. Instead of writing separate CSS files or classes, developers can create fully responsive layouts directly in their HTML, which accelerates the development process.

Improved Consistency: By leveraging utility classes, developers ensure a consistent design language throughout the application. The use of standardized classes helps in maintaining a cohesive look and feel, reducing the likelihood of design discrepancies.

Less Context Switching: Traditional CSS frameworks often require developers to switch back and forth between HTML and CSS files. Tailwind CSS minimizes this context switching, enabling developers to focus on building rather than managing multiple stylesheets.

Enhanced Collaboration: Tailwind CSS promotes better collaboration among team members, especially in larger projects. Designers and developers can work together more efficiently, as the utility classes serve as a shared vocabulary that simplifies communication regarding styling decisions.

Easier Maintenance: With utility classes embedded in the markup, maintaining and updating styles becomes a straightforward task. Developers can quickly locate the styles affecting a component without needing to sift through large CSS files.

Getting Started with Tailwind CSS
To get started with Tailwind CSS, you can include it in your project via npm, Yarn, or by linking to a CDN. Here's a basic example of how to set up Tailwind in a new project:

Install Tailwind CSS:

npm install tailwindcss

npx tailwindcss init

Include Tailwind in Your CSS:

Create a CSS file and import Tailwind’s base, components, and utilities:

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

Build Your CSS:

Use Tailwind’s CLI tool to compile your CSS for development or production:

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Conclusion
Tailwind CSS is something every devloper needs to try in at least one project they're on, wither it's your next project or your current project just trust me and give it a try because I will for sure always use it in my projects from now on out.

Many to Many Relationship and Flask meet React

Chase — Mon, 23 Sep 2024 22:11:08 +0000

Today we’re going to be talking about many to many relationships in Flask and connecting that with React, When and where to use them and how they should be declared depending on which actions that you want your database to be able to handle.

For starters, many to many relationships are joined together with join tables. Join tables are used to connect 2 tables together via foreign keys. There are 2 methods of doing so either connect the tables using db.Table() or create a class table. When trying
to conclude when to use db.Table() vs creating an entire new class comes into play if you are wanting a submittable attribute inside the Join table.

For Example,

Teacher_student = db.Table('teacher_students',

db.Column('teacher_id', db.Integer, db.ForeignKey('teachers.id'), primary_key=True),

db.Column('student_id', db.Integer, db.ForeignKey('students.id'), primary_key=True),

)

This join table's sole purpose is to connect the tables “teachers” and “students” to have a many to many relationship. As you can see besides foreign keys there are no other submittable attributes. If you are looking too add said attribute to your Join table
then it would be best to create a new class that holds your foreign keys and the attribute, such as,

Class Teacher_student(db.Model){

tablename = ‘teacher_students’

Id = db.Column(db.Integer, primary_key = True)

db.Column('teacher_id', db.Integer, db.ForeignKey('teachers.id')),

db.Column('student_id', db.Integer, db.ForeignKey('students.id')),

Attr = db.Column(db.String)

}

This example of a Join table has both the foreign keys and the attribute that allows a user to be able to submit some type of data that the database can connect back to both tables that share a many to many relationship.

Now, time to connect all this to our frontend! You should be somewhat familiar setting up your database and connecting that with your frontend already; but here we are strictly talking about setting up some kind of form that will need to be submitted by the user that will append data to our backend many to many table. For example you use Formik if you want speed that process up of creating a simple form just to test the difference in the above examples. If you are not aware of how to set up Formik in your environment
you can reference there official website here Formik:

Tutorial | Formik

Learn how to build forms in React with Formik.

  <div class="color-secondary fs-s flex items-center">
      <img
        alt="favicon"
        class="c-embed__favicon m-0 mr-2 radius-0"
        src="https://formik.org/images/favicon.png"
        loading="lazy" />
    formik.org
  </div>
</div>

You might be asking, Why would do I need to use Many to many relationship in code? or Why do I need to care how to implement things to a frontend? The reason why it is important to use many to many relationship is because when working with data and databases, everything needs a place to go. Sometimes those places need to be associated with different tables in the databases so when users or programmers need to search for certain data they can have multiple ways of searching that while still following single source of truth. As to why you need to know how to connect these things to a frontend is simply because the users need someplace to be able to see the data themselves as they will not have access to the actual data bases that you will create.

In conclusion, Many-to-many relationships in Flask are crucial for building complex applications where entities have interconnected data. They allow for efficient modeling of real-world scenarios, such as users participating in multiple events or items belonging to various categories. Using SQLAlchemy, developers can define these relationships with association tables, ensuring scalability and flexibility in database design. This structure reduces redundancy and improves data integrity by avoiding the need to store duplicate information. Ultimately, many-to-many relationships empower developers to handle dynamic, interconnected data, making Flask applications more versatile and capable of managing diverse user interactions and associations.

Why Python Is Easier (Loops edition)

Chase — Mon, 13 May 2024 00:38:33 +0000

Introduction
Python is a much simpler syntax language than all other programming languages, this I know you have heard before, probably many times throughout your search on which language you should learn first. One of the most common answers to that question is python and that comes with good reason. Let's talk about why python is so great compared to other languages.

Unlike languages like Javascript or React that can’t use Object-Oriented Programming (OOP), Python can! Which lets you create and store data inside of classes that can be assigned to a piece of data. Not only does the language have that advantage over the common frontend languages but Python’s ability to handle backend programming as well makes it a well diverse language; but Python’s syntax within itself allows you to create mini short cuts throughout your code that other languages don’t have. The first one being List Comprehension and Dictionary Comprehension. Let’s talk a bit about these and why they are so useful in python when creating for loops.

Let's talk about it
When you want to take a for loop that doesn't have very complex features going on then list comprehensions is the best thing for you! Let's take a look at an example

For loop:

days = ["mon", "tues", "wed", "thur", "fri"]

for day in days:
    print(day)

List comprehension:

days = ["mon", "tues", "wed", "thur", "fri"]

[print(day) for day in days]

This is only a small and simple example of list comprehensions.

Pros and Cons

Cons

The biggest and most obvious con is that with anything too complex list comprehension probably won't be the best option.
Another con is that the readability of your code can be a bit more difficult as having it as just one line of code instead of being spread out over multiple lines as in a regular for loop.

Pros

Time, the time it takes to process the one line of code over a for loop in much better.
Easier to write, it is much easier to write just one line of code compared to multiple and that making it easier to find where in your code you could've went wrong in your loop.

Lets break it down further
the average template for list comprehension is this

[(output of loop) for (item) in (list)]

but did you know that you could add conditions to a list comprehension? Well now you do! and that looks something like this...

[(output of loop) for (item) in (list) if (condition)]

This is best use if you are needing to filter through the list that you are given in need for a smaller more accurate result.

In all, the use of List comprehension is something to be used in certain situations to make your coding project or learning easier to understand and easier to manage.

Now just like list comprehension you can also do the same thing with dictionaries! Although it looks just a bit different because as you know dictionaries have a key and a value.

Let's Take A Look
For starters lets look at an example:

  keys = ['a','b','c','d','e']
  values = [1,2,3,4,5]  

  dictionary = { k:v for (k,v) in zip(keys, values)}

As you can see this makes iterating over a dictionary much simpler and in turn faster. This is why Python can be such a strong and diverse language, with simple syntax that it offers people who want to start learning programming it makes it welcoming and not as scary as other languages such as, Java, C or C++.

In Conclusion, if you are wanting to get into python programming and feel as if you're going to struggle, don't worry everyone feels that way. Python's syntax is here to make sure beginners feel welcome no matter your programming back ground. List and Dictionary comprehension isn't the only shortcuts that python has to offer! So, go out and try to discover your own little tips and tricks within the language and let others know what you've found to be helpful. You never know, something that you learn on your own might just be the answer someone else is looking for in their code.

Thanks for taking time to read my blog about python loop syntax and happy coding!

React.js

Chase — Wed, 14 Feb 2024 00:23:48 +0000

Today I wanted to talk about all the wonders that React gives for frontend development. First off the pure organization that components allow a programmer are amazing. Do you have a big application that is fairly complicated? or a simple project that just has too much going on? Components! They break up your code in a manner that is easy to read and follow. They also allow the user to pass information through them in a controlled state. So, lets talk about what exactly is a component. A component is a function like block of code that returns JSX. JSX is a markup language that is similar to HTML but with a mix of JavaScript added into it. Futhermore, a component can also take in props as arguments. like this,

import React from 'react';

function Home(props.name){

  return (
    <div>
      <h1>{props.name}</h1>
    </div>
  )
}
export default Home;

Now, this is extremely useful but you can refactor this more with destructuring, which would just look like this,

import React from 'react';

function Home({name}){

  return (
    <div>
      <h1>{name}</h1>
    </div>
  )
}
export default Home;

You just simple get rid of the "props" at the beginning of the word. As you can see in the examples above you may notice that I have my <h1> wrapped inside of a <div> this is because React components only return one element in the return statement. You could also just use a plain tag like this, <> if you prefer that over using a <div> element.

React components also can return other components inside one another. Such as,

import React, {useState} from 'react';
import Search from './Search';

function Home({name}){

  return (
    <div>
      <h1>{name}</h1>
      <Search />
    </div>
  )
}
export default Home;

In the example above I am importing a Search component and then inside of the return I am calling that component with the <Search /> , this is where you could also pass down info as props from the home to the search component. You also may have noticed that components start with a capitalized letter and the reason for this is because when we reference that components inside the return statement if it were to lower case it would return an HTML tag instead.

Another wonderful thing about React is the {useState}. Which lets you assign an initial value to you a variable and then later change the value if you so wish. So, say you're creating a search bar in your project, you can assign the initial value of that search bar to empty but later change its state to equal whatever the user has entered into the search bar. This is also very useful when creating a controlled form for a user to submit on your application as well.

const [variable, setVariable] = useState("");

as seen above the useState takes in two properties, one being the variable itself and the other being a setter variable which is used whenever you want to change the value of the first variable.

Just like the {useState} hook there is another react hook called {useEffect} this is what allows a developer to fetch data and it looks like this,

import React, {useState, useEffect} from 'react';

function Home({name}){
const [variable, setVariable] = useState("");

useEffect(() => {
fetch('placeholder')
.then(res => res.json())
.then(data => setVariable(data))
}, [])

  return (
    <div>
      <h1>{name}</h1>
    </div>
  )
}
export default Home;

There is a lot going on in this example so let me help break it down for you. We first import both the React hooks {useState} and {useEffect} and then we declare a variable with an empty value using state. Next, we fetch our data using the useEffect hook just like normal JavaScript but then we assign the returned data to the variable using the setter variable. You also may of noticed the square brackets at the end of the useEffect. This is very important to do because otherwise if you don't do that then the server will continually fetch the data infinitely and I'm sure you could figure out why that would not be a good thing to happen.

Array Methods in JS

Chase — Mon, 18 Dec 2023 19:46:39 +0000

My name is Chase and I am new Software Engineering student this blog is going to be about the interesting utilities of the forEach(), map(), reduce(), filter() methods that javascript offers. Starting with, the forEach() method for those who are new to Javascript the forEach() method is used to iterate through array and for each element of the array it executes a provided function. The forEach method once started looping through can not be broken unless it runs into an error. Another interesting fact about the method is that the forEach() method is the fastest method out of the main 4, which is (reduce(), filter(), forEach(), map()). Also, the forEach() will always return undefined.

let arr = [2,4,6,8];
arr.forEach(num, i] => ({
  if(num === 2){
    return i; >>> undefined
})

the next method I want to speak about is the map() method now like the forEach() method the map method is very similar in what they do. They both will loop through an array and execute the passed in function but the difference lays within the results. the map() method will return the results as a completely new array. Which would look something like this...

let arr = [1,2,3,4,5];
let map = arr.map(x => x + 1);

console.log(arr); >>> [1,2,3,4,5]
console.log(map); >>> [2,3,4,5,6]

Continuing on the next method example I want to speak about is the reduce() method. In my opinion the reduce() method has been the most difficult method to fully grasp. Even now as I am typing this I still don't fully understand everything there is to know about reduce(). What I do know is that the reduce() method is used to reduce an array down to just a single value. Weird I know, but this can be useful in instances like wanting to find the average within a given array or to remove duplicates in an array. The reduce() method will take in an accumulator and an initial value as its parameters.

filter() method is next on the list. The filter() method does exactly what is sounds like. It filters through an array and grabs whichever elements within pass the test of the provided functions parameters. the filter() method takes in a callBackFn as a parameter which will contain which ever test you are wanting the array to pass.
filter(callBackFn)
The filter array method works especially well whenever you need to search through a list of data such as, a company directory and find something specific, the filter method will loop through and find the items that match the data you presented.

My opinion on my most used vs least used
Throughout my learning so far as a student. The method that I find myself using the most would be the forEach() as it makes making repetitive processes within building websites much easier to do. Like, when you want to make multiple cards that display the same information on a page the forEach() method is perfect. The method I never find myself using so far would be the reduce() method. As I have still not made myself very confident it implementing it within my code. That doesn't mean there isn't a use for it, as I stated before 2 very good examples of when it would be best to use it, I just haven't found myself in the position of needing it yet is all. another method that I don't find myself using very often is the map() method. I haven't done many projects yet that are in need for me to use this method although it does have its uses I just have not found them at this time either. The filter method however, is very useful whenever making a search bar for your application I find having it search through API data for usernames comes in very handy.

I hope you enjoyed this little read about my thought process on array methods that I have worked with thus far in my learning journey. I will keep this blog updated with future learning that I will go through.