<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Kaleb Bolack</title>
    <description>The latest articles on DEV Community by Kaleb Bolack (@kalebbolack).</description>
    <link>https://dev.to/kalebbolack</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1171785%2F157705ef-a093-4178-9109-1981a7a4e72e.jpeg</url>
      <title>DEV Community: Kaleb Bolack</title>
      <link>https://dev.to/kalebbolack</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/kalebbolack"/>
    <language>en</language>
    <item>
      <title>Elevate Your Software Engineering Career: The Impact of Learning SQL and SQLAlchemy for Personal Projects</title>
      <dc:creator>Kaleb Bolack</dc:creator>
      <pubDate>Mon, 04 Dec 2023 20:09:07 +0000</pubDate>
      <link>https://dev.to/kalebbolack/elevate-your-software-engineering-career-the-impact-of-learning-sql-and-sqlalchemy-for-personal-projects-5cjo</link>
      <guid>https://dev.to/kalebbolack/elevate-your-software-engineering-career-the-impact-of-learning-sql-and-sqlalchemy-for-personal-projects-5cjo</guid>
      <description>&lt;p&gt;The ability to navigate databases is a fundamental skill that can significantly elevate your projects and career. Structured Query Language (SQL), paired with the powerful SQLAlchemy toolkit, offers a robust set of tools for developers to seamlessly interact with databases. In this blog post, we'll explore the importance of learning SQL and SQLAlchemy in the context of personal projects and how it can propel your career in software engineering to new heights.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1. Powering Personal Projects with SQL and SQLAlchemy&lt;/strong&gt;&lt;br&gt;
As a software engineer, personal projects are not only a creative outlet but also an opportunity to hone your skills and showcase your capabilities. Incorporating SQL and SQLAlchemy into your projects empowers you to build applications that interact with databases efficiently. Consider the following example using SQLAlchemy to define and query a simple database:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="kn"&gt;from&lt;/span&gt; &lt;span class="n"&gt;sqlalchemy&lt;/span&gt; &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;create_engine&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;Column&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;Integer&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;String&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;MetaData&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;Table&lt;/span&gt;
&lt;span class="kn"&gt;from&lt;/span&gt; &lt;span class="n"&gt;sqlalchemy.ext.declarative&lt;/span&gt; &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;declarative_base&lt;/span&gt;
&lt;span class="kn"&gt;from&lt;/span&gt; &lt;span class="n"&gt;sqlalchemy.orm&lt;/span&gt; &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;sessionmaker&lt;/span&gt;

&lt;span class="c1"&gt;# Create an SQLite database in-memory
&lt;/span&gt;&lt;span class="n"&gt;engine&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;create_engine&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;sqlite:///:memory:&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;echo&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="bp"&gt;True&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="n"&gt;Base&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;declarative_base&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;

&lt;span class="c1"&gt;# Define a basic User class mapped to the 'users' table
&lt;/span&gt;&lt;span class="k"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;User&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;Base&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
    &lt;span class="n"&gt;__tablename__&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;users&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;

    &lt;span class="nb"&gt;id&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;Column&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;Integer&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;primary_key&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="bp"&gt;True&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="n"&gt;name&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;Column&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;String&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="n"&gt;age&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;Column&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;Integer&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="c1"&gt;# Create the table in the database
&lt;/span&gt;&lt;span class="n"&gt;Base&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;metadata&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;create_all&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;engine&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="c1"&gt;# Insert data into the User table
&lt;/span&gt;&lt;span class="n"&gt;Session&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;sessionmaker&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;bind&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="n"&gt;engine&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="k"&gt;with&lt;/span&gt; &lt;span class="nc"&gt;Session&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="n"&gt;session&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
    &lt;span class="n"&gt;session&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;add_all&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;
        &lt;span class="nc"&gt;User&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;name&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;John Doe&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;age&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="mi"&gt;30&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
        &lt;span class="nc"&gt;User&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;name&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;Jane Smith&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;age&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="mi"&gt;25&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
        &lt;span class="nc"&gt;User&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;name&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;Bob Johnson&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;age&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="mi"&gt;35&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
    &lt;span class="p"&gt;])&lt;/span&gt;
    &lt;span class="n"&gt;session&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;commit&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;

&lt;span class="c1"&gt;# Query the User table
&lt;/span&gt;&lt;span class="k"&gt;with&lt;/span&gt; &lt;span class="nc"&gt;Session&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="n"&gt;session&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
    &lt;span class="n"&gt;users&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;session&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;query&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;User&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;all&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
    &lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="n"&gt;user&lt;/span&gt; &lt;span class="ow"&gt;in&lt;/span&gt; &lt;span class="n"&gt;users&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
        &lt;span class="nf"&gt;print&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;user&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;name&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;user&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;age&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Integrating SQL and SQLAlchemy into personal projects allows you to manage and retrieve data seamlessly, enhancing the functionality while also adding sophistication of your applications!&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. Versatility Across Technologies&lt;/strong&gt;&lt;br&gt;
As a software engineer, you may encounter various projects with different data storage requirements. SQL, with the help of SQLAlchemy, provides a consistent and adaptable approach to database interaction, allowing you to work effortlessly with different DBMSs such as MySQL, PostgreSQL, SQLite, and more.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3. Skillset Enhancement for Career Growth&lt;/strong&gt;&lt;br&gt;
While SQL is traditionally associated with database administrators and data analysts, incorporating it into your skill set as a software engineer can set you apart in the job market. Many software engineering roles require an understanding of database interactions, and proficiency in SQL and SQLAlchemy can be a valuable addition to your resume. It showcases your ability to work with databases, a skill highly sought after in most modern software development.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;4. Efficient Data Handling in Applications&lt;/strong&gt;&lt;br&gt;
Efficient data handling is a crucial aspect of software engineering, and SQL, with its declarative nature, simplifies the process of interacting with databases. SQLAlchemy takes this a step further by providing an ORM system, allowing you to work with databases using Pythonic objects. This not only enhances code readability but also streamlines database interactions within your applications.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;5. Seamless Integration with Web Development Frameworks&lt;/strong&gt;&lt;br&gt;
For software engineers involved in web development, SQL and SQLAlchemy seamlessly integrate with popular frameworks such as Flask and Django. These frameworks leverage the power of SQL for data storage and retrieval. By mastering SQL and SQLAlchemy, you can build robust web applications with efficient database interactions, which is critical for a sophisticated portfolio!&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;6. Future-Proofing Your Software Engineering Career&lt;/strong&gt;&lt;br&gt;
In the ever-evolving landscape of technology, future-proofing your career is essential. SQL and SQLAlchemy have demonstrated enduring relevance in the software engineering field. As new technologies will always emerge, the principles of database interaction remain the same, making the skills acquired with SQL and SQLAlchemy adaptable and enduring throughout your carrier!&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;7. Personalized Learning for Project Success&lt;/strong&gt;&lt;br&gt;
Learning SQL and SQLAlchemy for personal projects allows you to tailor your skill development to the specific needs of your applications. Whether you're building a portfolio website, a content management system, or a custom application, the ability to incorporate and leverage databases effectively enhances the overall functionality and user experience of your projects.&lt;/p&gt;

&lt;p&gt;On a personal note, I've found significant success incorporating SQLAlchemy and Flask into my projects. The integration of these technologies has not only simplified database interactions, but has also allowed me to create dynamic and feature-rich web applications.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Conclusion&lt;/strong&gt;&lt;br&gt;
In conclusion, learning SQL and SQLAlchemy isn't just about acquiring technical skills, it's about unlocking the full potential of your software engineering projects and career. By  integrating these tools into your personal projects, you not only enhance the efficiency of your applications but also position yourself for career growth. So, embark on the journey of incorporating SQL and SQLAlchemy into your projects, as these skills can become the gateway to your success in the dynamic field of software development.&lt;/p&gt;

</description>
      <category>careerdevelopment</category>
      <category>python</category>
      <category>programming</category>
      <category>sql</category>
    </item>
    <item>
      <title>Unlocking the Power of Python: The Vital Role of SQLAlchemy</title>
      <dc:creator>Kaleb Bolack</dc:creator>
      <pubDate>Mon, 13 Nov 2023 23:28:44 +0000</pubDate>
      <link>https://dev.to/kalebbolack/unlocking-the-power-of-python-the-vital-role-of-sqlalchemy-jhd</link>
      <guid>https://dev.to/kalebbolack/unlocking-the-power-of-python-the-vital-role-of-sqlalchemy-jhd</guid>
      <description>&lt;p&gt;In the dynamic world of programming, Python has emerged as a powerhouse, winning the hearts of developers for its simplicity, readability, and versatility. As Python continues to dominate various domains, its integration with relational databases becomes increasingly crucial. Enter SQLAlchemy, a powerful and flexible Object-Relational Mapping (ORM) library that seamlessly bridges the gap between Python and databases. In this blog, we'll explore why SQLAlchemy is a vital part of learning Python and how it empowers developers to efficiently interact with databases.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Understanding the Basics&lt;/strong&gt;&lt;br&gt;
At its core, SQLAlchemy provides a set of high-level API (Application Programming Interface) for Python developers to interact with databases using an object-oriented approach. This means you can manipulate database records as Python objects, making the code more readable and maintainable. For those just starting their Python journey, SQLAlchemy introduces a paradigm shift in database interaction, emphasizing the use of Python classes and objects instead of raw SQL queries.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Abstraction and Simplification&lt;/strong&gt;&lt;br&gt;
SQLAlchemy abstracts away the intricacies of dealing with different database engines, allowing developers to write code that is agnostic to the underlying database technology. Whether you're working with SQLite, MySQL, PostgreSQL, or another supported database, SQLAlchemy provides a consistent interface, streamlining the development process. This abstraction shields developers from the nuances of various SQL dialects, making it easier to switch between databases without rewriting significant portions of code.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Object-Relational Mapping (ORM)&lt;/strong&gt;&lt;br&gt;
One of the standout features of SQLAlchemy is its ORM capabilities. ORM is a programming paradigm that enables developers to interact with databases using objects in their programming language, rather than relying on SQL queries. This approach aligns perfectly with Python's object-oriented nature, as it allows developers to model their data as Python classes, creating a more intuitive and expressive representation of the database schema.&lt;/p&gt;

&lt;p&gt;Consider a scenario where you have a User table in your database. With SQLAlchemy, you can define a corresponding Python class, creating a direct mapping between the table and the class. This abstraction makes it easy to manipulate user data as objects in your code, enhancing readability and reducing the cognitive load associated with raw SQL queries.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="kn"&gt;from&lt;/span&gt; &lt;span class="n"&gt;sqlalchemy&lt;/span&gt; &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;Column&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;Integer&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;String&lt;/span&gt;
&lt;span class="kn"&gt;from&lt;/span&gt; &lt;span class="n"&gt;sqlalchemy.ext.declarative&lt;/span&gt; &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;declarative_base&lt;/span&gt;

&lt;span class="n"&gt;Base&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;declarative_base&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;

&lt;span class="k"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;User&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;Base&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
    &lt;span class="n"&gt;__tablename__&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;users&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;

    &lt;span class="nb"&gt;id&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;Column&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;Integer&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;primary_key&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="bp"&gt;True&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="n"&gt;username&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;Column&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;String&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="n"&gt;email&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;Column&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;String&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Querying Made Simple&lt;/strong&gt;&lt;br&gt;
SQLAlchemy provides a powerful querying system that mirrors SQL syntax but is expressed through Python methods. This not only simplifies the process of retrieving data from the database but also makes the code more readable and maintainable. Developers can leverage the expressive power of Python to construct complex queries with ease.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="kn"&gt;from&lt;/span&gt; &lt;span class="n"&gt;sqlalchemy&lt;/span&gt; &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;create_engine&lt;/span&gt;
&lt;span class="kn"&gt;from&lt;/span&gt; &lt;span class="n"&gt;sqlalchemy.orm&lt;/span&gt; &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;sessionmaker&lt;/span&gt;

&lt;span class="c1"&gt;# Assuming 'engine' is a configured SQLAlchemy engine
&lt;/span&gt;&lt;span class="n"&gt;engine&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;create_engine&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;sqlite:///:memory:&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="n"&gt;Base&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;metadata&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;create_all&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;engine&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="n"&gt;Session&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;sessionmaker&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;bind&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="n"&gt;engine&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="n"&gt;session&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;Session&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;

&lt;span class="c1"&gt;# Querying all users with a specific email
&lt;/span&gt;&lt;span class="n"&gt;user_list&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;session&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;query&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;User&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;filter_by&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;email&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;example@email.com&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;all&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Integration with Web Frameworks&lt;/strong&gt;&lt;br&gt;
For developers venturing into web development with Python, the integration of SQLAlchemy with popular web frameworks such as Flask and Django is a game-changer. These frameworks leverage SQLAlchemy to provide seamless connectivity between web applications and databases, allowing developers to focus on building features rather than dealing with database intricacies.&lt;/p&gt;

&lt;p&gt;Flask, for instance, has extensive support for SQLAlchemy, making it the go-to choice for web developers looking to build scalable and maintainable applications. The ability to define models, perform database migrations, and execute queries with ease simplifies the development workflow and accelerates project delivery.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Database Migration and Schema Evolution&lt;/strong&gt;&lt;br&gt;
As applications evolve, so do their database schemas. SQLAlchemy facilitates the process of database migration and schema evolution, allowing developers to modify database structures without the need for manual intervention. With tools like Alembic, a database migration framework for SQLAlchemy, developers can version-control their database schema changes and apply them seamlessly across different environments.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Conclusion&lt;/strong&gt;&lt;br&gt;
In conclusion, SQLAlchemy stands out as a vital component in the Python ecosystem, especially for those delving into the world of database interaction. Its ability to abstract away the complexities of database engines, provide a powerful ORM system, simplify querying, and seamlessly integrate with web frameworks makes it an indispensable tool for developers.&lt;/p&gt;

&lt;p&gt;By learning SQLAlchemy, developers not only enhance their ability to interact with databases efficiently but also adopt a coding paradigm that aligns with Python's object-oriented principles. As Python continues to assert its dominance in the programming world, SQLAlchemy proves to be an invaluable ally, unlocking the full potential of Python in database-driven applications. So, whether you're a novice exploring Python or an experienced developer looking to enhance your skills, embracing SQLAlchemy is a journey worth taking for a more streamlined and expressive coding experience.&lt;/p&gt;

</description>
      <category>python</category>
      <category>sqlalchemy</category>
      <category>programming</category>
      <category>database</category>
    </item>
    <item>
      <title>Understanding React Props: A Fundamental Building Block</title>
      <dc:creator>Kaleb Bolack</dc:creator>
      <pubDate>Fri, 20 Oct 2023 20:47:25 +0000</pubDate>
      <link>https://dev.to/kalebbolack/understanding-react-props-a-fundamental-building-block-236</link>
      <guid>https://dev.to/kalebbolack/understanding-react-props-a-fundamental-building-block-236</guid>
      <description>&lt;p&gt;When it comes to building dynamic and interactive web applications, React has become the go-to library for many developers. One of the core concepts in React that you'll encounter early on is "props," short for properties. Understanding how to work with props is crucial for creating modular and reusable components, making your code more maintainable and efficient.&lt;/p&gt;

&lt;p&gt;What Are Props?&lt;br&gt;
Props are a fundamental concept in React that allow data to be passed from a parent component to a child component. Think of them as parameters or inputs that you provide to a component, which it can then use to render itself or perform certain actions. Props are essentially read-only, and a child component cannot modify the data it receives through props.&lt;/p&gt;

&lt;p&gt;The Anatomy of Props&lt;br&gt;
To grasp the concept of props fully, it's essential to understand their anatomy:&lt;/p&gt;

&lt;p&gt;Parent Component: This is the component that provides the data or information to be passed down to the child component. It can be a higher-level component that renders the child component.&lt;/p&gt;

&lt;p&gt;Child Component: The component that receives and uses the data passed through props. It's the component that you're building and want to make dynamic by injecting data into it.&lt;/p&gt;

&lt;p&gt;Props: Props are essentially JavaScript objects containing key-value pairs. The keys are defined in the child component and serve as access points to the data passed down from the parent component. Props are passed as attributes to the child component when it is being used.&lt;/p&gt;

&lt;p&gt;Using Props&lt;br&gt;
Let's walk through a simple example of using props to understand how they work in practice.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="c1"&gt;// ParentComponent.js&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;ChildComponent&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./ChildComponent&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;ParentComponent&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;data&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Hello, World!&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;ChildComponent&lt;/span&gt; &lt;span class="na"&gt;text&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt; &lt;span class="p"&gt;/&amp;gt;&lt;/span&gt;
  &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this example, we have a ParentComponent that renders a ChildComponent. The ParentComponent passes data to the ChildComponent using a prop called text.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="c1"&gt;// ChildComponent.js&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;ChildComponent&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;text&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The ChildComponent takes in the props parameter, and within its render method, it displays the value of the text prop provided by the parent. This is a basic example, but it illustrates the essential concept of props and how they facilitate data flow between components.&lt;/p&gt;

&lt;p&gt;Reusability and Maintainability&lt;br&gt;
One of the key advantages of using props in React is the ability to create reusable components. By passing data via props, you can use the same component with different data in various parts of your application. This promotes a cleaner and more maintainable codebase, as you don't need to duplicate components with slight variations in their functionality.&lt;/p&gt;

&lt;p&gt;For instance, if you have a Button component, you can use it throughout your application with different labels, styles, or even click handlers by passing the necessary data through props. This reusability reduces redundancy and simplifies your codebase.&lt;/p&gt;

&lt;p&gt;Prop Validation&lt;br&gt;
React provides a mechanism called "prop validation" to ensure that the props passed to a component conform to a specified format. This can help catch errors and bugs early in development.&lt;/p&gt;

&lt;p&gt;You can define the types of props your component expects using the propTypes property provided by the prop-types library. Here's an example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;PropTypes&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;prop-types&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;MyComponent&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;text&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nx"&gt;MyComponent&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;propTypes&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;text&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;PropTypes&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;string&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this example, we're using PropTypes to specify that the text prop should be a string. If the prop provided to MyComponent doesn't match this type, React will issue a warning in the console.&lt;/p&gt;

&lt;p&gt;Default Props&lt;br&gt;
In addition to prop validation, React allows you to define default values for props using the defaultProps property. This is useful when you want to provide a fallback value for a prop in case it's not provided by the parent component.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;MyComponent&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;text&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nx"&gt;MyComponent&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;defaultProps&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;text&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Default Text&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this example, if the text prop is not provided by the parent component, it will default to "Default Text."&lt;/p&gt;

&lt;p&gt;Conclusion&lt;br&gt;
Props are an essential concept in React that enable data to flow between parent and child components, making your application more dynamic and maintainable. They support reusability, prop validation, and default values, all of which contribute to writing clean and efficient code.&lt;/p&gt;

&lt;p&gt;As you delve deeper into React development, you'll find that props are a versatile tool that empowers you to build complex, interactive user interfaces. So, embrace the power of props in React and unlock the full potential of component-based development in your web applications.&lt;/p&gt;

</description>
      <category>reactnative</category>
      <category>beginners</category>
      <category>react</category>
      <category>props</category>
    </item>
    <item>
      <title>CSS Styling: A Journey of Discovery and Problem-Solving</title>
      <dc:creator>Kaleb Bolack</dc:creator>
      <pubDate>Fri, 29 Sep 2023 15:43:54 +0000</pubDate>
      <link>https://dev.to/kalebbolack/css-styling-a-journey-of-discovery-and-problem-solving-374d</link>
      <guid>https://dev.to/kalebbolack/css-styling-a-journey-of-discovery-and-problem-solving-374d</guid>
      <description>&lt;p&gt;Creating visually appealing and functional web pages can be a bit tricky at times, especially for beginners. Your first web project can feel daunting, but with the power of CSS (Cascading Style Sheets), you can transform your vision into reality. In this post, I'll share my journey of using CSS to style my first web page, highlighting key techniques that helped me overcome design challenges. These techniques include div highlighting, creating a vertical line down the middle of the page, floating divs, and understanding margins and padding. This is just the beginning of my coding journey, so please keep that in mind! I'll also emphasize the importance of Chrome DevTools in this process.&lt;/p&gt;

&lt;p&gt;A bit of context: I'm currently enrolled in Flatiron coding school, and I had just completed the basics of vanilla JavaScript, passing my first test with the advanced deliverables, getting all points available! Talk about a confidence boost! My teacher had then assigned a project where we needed to integrate JavaScript and an external API into a frontend website, while being in a team environment. I got teamed up with my partner, Dane, and while browsing through a list of APIs, we stumbled upon something that peaked our interest: the Scryfall API, a Magic the Gathering card database. That's when we decided to create a deck builder application, utilizing HTML, CSS, and JavaScript. In this post, I'll dive into my CSS journey.&lt;/p&gt;

&lt;p&gt;One of the first techniques that proved incredibly useful while building the HTML structure was highlighting all div elements with a red border. This simple yet effective approach allowed me to visualize the layout of my web page. By adding the following CSS rule:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="nt"&gt;div&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;border&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;2px&lt;/span&gt; &lt;span class="nb"&gt;solid&lt;/span&gt; &lt;span class="no"&gt;red&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;With this, I outlined all the divs on my page, making it easier to see the structure and hierarchy. This helped me identify any nesting issues or unwanted gaps in my design, enabling me to bring my vision to life effectively. It also helped me troubleshoot later on down the line! So whenever I did not need it I would comment that out, and whenever I did need it I would just remove the comment tags, and then the red lines would appear! You can comment in something in css by doing this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="c"&gt;/* &amp;lt;--- Start Comment syntax for CSS
This will not be seen by the code,
I can put A-N-Y-T-H-I-N-G in this. 
Whether I want to comment something to other Devs,
or remove a line of code momentarily to troubleshoot.
I can remove these tags to make the code see this again!
I can end this comment by simply writing this:
End Comment syntax for CSS---&amp;gt; */&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;After I had created my starting div's I wanted to add not only a title but a logo with this title. Because it was a personal project and NOT something that is being posted, I decided to use the official Magic: The Gathering logo. At first I had just set the top div to be centered. Which worked for the time being... Here is that code:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="nf"&gt;#top&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;text-align&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;center&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;At some point in the project I wanted to also add in the color wheel icon (MTG Mana Color Symbols). But when I added the image in, it was going in the center next to the other logo. I ended up going inside of my HTML and giving this image its own ID called logo2, as well as the first logo which had the ID called logo. &lt;br&gt;
I then did this to further specify to CSS what I wanted this image to do.&lt;br&gt;
Here is that code:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="nc"&gt;.logo&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;width&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;300px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;height&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;auto&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;float&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;center&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nc"&gt;.logo2&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;width&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;150px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;height&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;auto&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;float&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;left&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Next, I wanted to divide my page into two distinct sections: a quick-add section and an image and information section. The idea was to display card details on the right side, and have an add to inventory button. On the left side of the vertical line, enable users to quickly add the cards to their Deck. Creating a vertical line down the middle of the page was surprisingly straightforward in CSS:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="nf"&gt;#vertical-line&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;border-left&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;2px&lt;/span&gt; &lt;span class="nb"&gt;solid&lt;/span&gt; &lt;span class="no"&gt;black&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;height&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;100%&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;position&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;absolute&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;left&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;50%&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;By applying this CSS rule to an element with the ID &lt;code&gt;vertical-line&lt;/code&gt;, I effortlessly positioned a vertical line precisely in the center of my page. This added a clean and visually appealing separation between the two sections.&lt;/p&gt;

&lt;p&gt;To further structure my layout, I needed to float two divs on either side of the vertical line. Here's how I did it:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="nf"&gt;#left-div&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;height&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;25%&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;width&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;49%&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;float&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;left&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nf"&gt;#right-div&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;height&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;25%&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;width&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;49%&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;float&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;right&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Floating the &lt;code&gt;left-div&lt;/code&gt; and &lt;code&gt;right-div&lt;/code&gt; elements ensured that they aligned correctly and occupied their respective halves of the page. This technique was crucial for creating multi-column layouts that looked organized and spacious.&lt;/p&gt;

&lt;p&gt;As the project progressed, we added working buttons for adding and deleting cards and decks. However, the delete buttons initially appeared below the cards and decks, creating a suboptimal visual design. I was confused for sometime, as I had already defined this part of the div to be in a row. To improve the appearance of the delete buttons, I needed to understand the differences between margins and padding. Chrome DevTools came to my rescue.&lt;/p&gt;

&lt;p&gt;DevTools provided an invaluable illustration of margins and padding, making it easier to comprehend their significance. I also used my red outlines and saw the div did not have enough space created to put those buttons in the right place. I learned that margins control spacing outside an element, while padding controls spacing inside. As well as increasing the space of this specific div. Here's an example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="nc"&gt;.eachCardAmountInput&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;width&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;100px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;height&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;50px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;margin&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0&lt;/span&gt; &lt;span class="m"&gt;10px&lt;/span&gt; &lt;span class="m"&gt;0&lt;/span&gt; &lt;span class="m"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;font-size&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;25px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this CSS rule for &lt;code&gt;.eachCardAmountInput&lt;/code&gt;, a margin of &lt;code&gt;0 10px 0 0&lt;/code&gt; adds 10 pixels of space to the right of the element. The four values in the margin property can be thought of like directions on a compass: top, right, bottom, left. This subtle adjustment created space between adjacent elements, enhancing readability and the overall aesthetics of the page.&lt;/p&gt;

&lt;p&gt;In conclusion, my journey of using CSS to style my web page was filled with valuable lessons and techniques. The skills I've mentioned are fundamental to web development and can significantly enhance your design capabilities. Additionally, Chrome DevTools proved to be an invaluable tool for identifying and resolving styling issues. Armed with these new tools and techniques, I encourage you to embark on your own coding adventures and build something that you find amazing. Remember that some of the best tools you'll discover as a developer are waiting on the other side of what you don't know yet.&lt;/p&gt;

&lt;p&gt;*P.S If you would like to view this project, and the coding behind it, I have left a Github link to my own personal repository. It does run off a personal server and not its own website. In order to run the server go into your terminal and type this command:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight console"&gt;&lt;code&gt;&lt;span class="go"&gt;json-server --watch db.json
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://github.com/ItzaWolf/phase-1-magic-the-gathering"&gt;https://github.com/ItzaWolf/phase-1-magic-the-gathering&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Happy coding, everyone!&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>beginners</category>
      <category>css</category>
      <category>productivity</category>
    </item>
  </channel>
</rss>
