DEV Community: Nicholas Ikiroma

Integrating Preline UI in Flask Apps

Nicholas Ikiroma — Sat, 29 Jul 2023 11:01:52 +0000

Writing CSS to build user interfaces can be fun for front-end developers, but it's a nightmare for most back-end developers. Thanks to frontend tools like Tailwind CSS(my favorite! 😍) and Bootstrap, building UIs can be a more rapid and spontaneous process. Tailwind takes things up a notch with support for plugins that extend the capabilities of the framework.

In this article, you'll learn to configure Preline UI, a Tailwind plugin, in your Flask application. You'll discover how to integrate Tailwind in your Flask app and configure Tailwind to use Preline UI.

Prerequisites

Basic knowledge of Python and the Flask web framework
Basic use of the command line
PIP(package manager for Python) and NPM(package manager for Node)

What is Tailwind CSS and How Does it Work?

Tailwind CSS is a utility-first CSS framework that empowers developers to quickly build user interfaces by using small utility classes that directly apply styles to HTML elements.

Think of it as having a collection of hundreds of pre-defined CSS classes that each serve specific purposes, such as creating buttons, adding text decoration, or adjusting margins and paddings.

Tailwind CSS offers these standardized classes, which can be easily combined in various ways, allowing for rapid and efficient web development.

What is Preline UI?

Preline UI is an open-source set of prebuilt UI components based on the Tailwind CSS. The extension features over 300 UI component examples that are compatible with HTML, React, Vue, and others. By the end of this article, you'll know how to power your Flask app with Preline UI.

You can code along or clone the project on Github: project repository

Set up Flask App

First, you'll start by creating a project directory that you can name flask-preline.



mkdir flask-preline
cd flask-preline

Next, create a virtual environment and activate it. Virtual environments are a great way to isolate Python dependencies associated with a particular project.



virtualenv venv
source venv/bin/activate

The commands above create a virtual environment called venv and activate it. If you don't have virtualenv installed you'd run into an error.

Install virtualenv with the command below then follow the previous steps to create and activate your virtual environment:



pip install virtualenv

Next, install Flask.



pip install flask

Then, create a file app.py and add the code below.



from flask import Flask, render_template


app = Flask(__name__)


@app.route('/')
def index():
    return render_template('index.html')


if __name__ == "__main__":
    app.run()

In the code above, Flask and render_template are imported from the flask package and a Flask object named app is created.

Using the Flask object, you define a view function called index that is triggered whenever you access the '/' route from your browser. The view function returns an HTML template using Flask's in-built render_template function.

Configure Tailwind CSS

With the Flask app set up, you can configure the app to use Tailwind. To get started, create two folders in the project directory.



mkdir templates static

As the names imply, the folders would store HTML templates and static files respectively.

At this point, the project structure would look like this:



flask-preline/
   - app.py
   - templates/
   - static/

Next, install Tailwind using NPM



npm install -D tailwindcss

Create a tailwind.config.js file with the command:



npx tailwindcss init

The previous command will create a Tailwind configuration file. Edit the config file with the code below to ensure Tailwind has access to your HTML templates.



/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./templates/**/*.html",
    "./static/src/**/*.js"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Finally, create a new static/src/ folder and add a new input.css file with the following content:



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

With this in place, your Flask app is ready to use Tailwind.

Set up Preline UI

Configuring the Preline UI plugin is also an easy process.

First, install Preline using NPM:



npm install preline

Then, include Preline UI in the tailwind.config.js file.



/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./templates/**/*.html",
    "./static/src/**/*.js",
    'node_modules/preline/dist/*.js',
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('preline/plugin'),
  ],
}

Based on the Preline UI documentation, the next step is to include a Javascript <script> to make UI components interactive.



<script src="./node_modules/preline/dist/preline.js"></script>

It gets tricky at this step when you're working with Flask. You'll see how this script behaves in your Flask app and a clever way to walk around the issue.

Before that, let's create an HTML template to test what we've done so far.

HTML Templates

In the templates folder create a file index.html and add the following lines of code:



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flask and Preline UI</title>
    <link rel="stylesheet" href="{{ url_for('static',filename='dist/css/output.css') }}">
</head>
<body>
    <header class="flex flex-wrap sm:justify-start sm:flex-nowrap z-50 w-full bg-white border-b border-gray-200 text-sm py-3 sm:py-0 dark:bg-gray-800 dark:border-gray-700">
        <nav class="relative max-w-7xl w-full mx-auto px-4 sm:flex sm:items-center sm:justify-between sm:px-6 lg:px-8" aria-label="Global">
          <div class="flex items-center justify-between">
            <a class="flex-none text-xl font-semibold dark:text-white" href="#" aria-label="Brand">Brand</a>
            <div class="sm:hidden">
              <button type="button" class="hs-collapse-toggle p-2 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-600 transition-all text-sm dark:bg-slate-900 dark:hover:bg-slate-800 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white dark:focus:ring-offset-gray-800" data-hs-collapse="#navbar-collapse-with-animation" aria-controls="navbar-collapse-with-animation" aria-label="Toggle navigation">
                <svg class="hs-collapse-open:hidden w-4 h-4" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                  <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
                </svg>
                <svg class="hs-collapse-open:block hidden w-4 h-4" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                  <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
                </svg>
              </button>
            </div>
          </div>
          <div id="navbar-collapse-with-animation" class="hs-collapse hidden overflow-hidden transition-all duration-300 basis-full grow sm:block">
            <div class="flex flex-col gap-y-4 gap-x-0 mt-5 sm:flex-row sm:items-center sm:justify-end sm:gap-y-0 sm:gap-x-7 sm:mt-0 sm:pl-7">
              <a class="font-medium text-blue-600 sm:py-6 dark:text-blue-500" href="#" aria-current="page">Landing</a>
              <a class="font-medium text-gray-500 hover:text-gray-400 sm:py-6 dark:text-gray-400 dark:hover:text-gray-500" href="#">Account</a>
              <a class="font-medium text-gray-500 hover:text-gray-400 sm:py-6 dark:text-gray-400 dark:hover:text-gray-500" href="#">Work</a>
              <a class="font-medium text-gray-500 hover:text-gray-400 sm:py-6 dark:text-gray-400 dark:hover:text-gray-500" href="#">Blog</a>

              <div class="hs-dropdown [--strategy:static] sm:[--strategy:fixed] [--adaptive:none] sm:[--trigger:hover] sm:py-4">
                <button type="button" class="flex items-center w-full text-gray-500 hover:text-gray-400 font-medium dark:text-gray-400 dark:hover:text-gray-500 ">
                  Dropdown
                  <svg class="ml-2 w-2.5 h-2.5 text-gray-600" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
                  </svg>
                </button>

                <div class="hs-dropdown-menu transition-[opacity,margin] duration-[0.1ms] sm:duration-[150ms] hs-dropdown-open:opacity-100 opacity-0 sm:w-48 hidden z-10 bg-white sm:shadow-md rounded-lg p-2 dark:bg-gray-800 sm:dark:border dark:border-gray-700 dark:divide-gray-700 before:absolute top-full sm:border before:-top-5 before:left-0 before:w-full before:h-5">
                  <a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
                    About
                  </a>
                  <div class="hs-dropdown relative [--strategy:static] sm:[--strategy:absolute] [--adaptive:none] sm:[--trigger:hover]">
                    <button type="button" class="w-full flex justify-between w-full items-center text-sm text-gray-800 rounded-md py-2 px-3 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300">
                      Sub Menu
                      <svg class="sm:-rotate-90 ml-2 w-2.5 h-2.5 text-gray-600" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
                      </svg>
                    </button>

                    <div class="hs-dropdown-menu transition-[opacity,margin] duration-[0.1ms] sm:duration-[150ms] hs-dropdown-open:opacity-100 opacity-0 sm:w-48 hidden z-10 sm:mt-2 bg-white sm:shadow-md rounded-lg p-2 dark:bg-gray-800 sm:dark:border dark:border-gray-700 dark:divide-gray-700 before:absolute sm:border before:-right-5 before:top-0 before:h-full before:w-5 top-0 right-full !mx-[10px]">
                      <a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
                        About
                      </a>
                      <a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
                        Downloads
                      </a>
                      <a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
                        Team Account
                      </a>
                    </div>
                  </div>

                  <a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
                    Downloads
                  </a>
                  <a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
                    Team Account
                  </a>
                </div>
              </div>

              <a class="flex items-center gap-x-2 font-medium text-gray-500 hover:text-blue-600 sm:border-l sm:border-gray-300 sm:my-6 sm:pl-6 dark:border-gray-700 dark:text-gray-400 dark:hover:text-blue-500" href="#">
                <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                  <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
                </svg>
                Log in
              </a>
            </div>
          </div>
        </nav>
    </header>
    <script src="../node_modules/preline/dist/preline.js"></script>
</body>
</html>

The HTML code above was gotten from the Preline UI website. It implements a responsive and interactive navigation bar. There are two aspects of the code that are worth highlighting.

<link rel="stylesheet" href="{{ url_for('static',filename='dist/css/output.css') }}">: This part of the code uses Jinja2 templating engine to locate and access the CSS file that will be generated when you run Tailwind.
<script src="../node_modules/preline/dist/preline.js"></script>: Here, a Javascript file located in the node_modules is included in the HTML file. As mentioned, this script ensures the components from Preline UI are interactive.

Test the Code

To test the code, you need to spin up your Flask server in one terminal. Then, in another terminal, run your Tailwindcss.

In the first terminal:



flask run --debug

In the second terminal:



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

If everything was done right, you'd see the screen below when you access the route http://127.0.0.1:5000 on your browser.

Going through the request logs you'd see a 404 error when Flask attempts to access the Javascript file from node_modules.

For some reason, Flask cannot access folders other than static or templates.

One way to solve this problem is to copy the Javascript file from node_modules and paste it into the static folder which is accessible to the running Flask app. This approach would work, but it births another issue.

The preline.js file is updated whenever new UI components are added to your templates. Thus, new UI components added to your template will not be interactive. Hence, the need to manually update the file whenever changes are made to the template.

Thankfully, there's a better way to bypass this issue. Update app.py with the following lines of code:



from flask import Flask, render_template, send_from_directory


app = Flask(__name__)


@app.route("/")
def index():
    return render_template("index.html")


@app.route("/preline.js")
def serve_preline_js():
    return send_from_directory("node_modules/preline/dist", "preline.js")


if __name__ == "__main__":
    app.run()

In the code above, a view function named send_from_directory is defined. When the client makes a request to the /preline.js route, the view function is triggered and the preline.js file is safely sent over to the client using Flask's send_from_directory function.

The send_from_directory function allows you to serve static files (e.g., JavaScript, CSS, images) directly from a specified directory on the server.

send_from_directorytakes a directory path as the first argument. In this case, preline.js is located in "node_modules/preline/dist". It means that Flask will look for the "preline.js" file in the "dist" folder within the "node_modules/preline" directory. The second argument to send_from_directory is the name of the file to be served, which is "preline.js" in this case.

Finally, in the index.html, update the script tag with the following line:



<script src="{{ url_for('serve_preline_js') }}"></script>

Save your files and test the code again.

Wrapping Up

UI components from Preline UI can indeed save you valuable time when building frontends for your applications, allowing you to focus on other critical aspects of your project. If you're familiar with other cool UI templates, help a struggling backend developer by sharing them in the comments. Happy Coding! 😀

Cooking Up Code: A Beginner's Guide to Programming Concepts

Nicholas Ikiroma — Wed, 28 Jun 2023 10:09:44 +0000

Are there any parallels between cooking and programming? On the surface, they may seem vastly different, but in reality, they share many similarities.

The basic concept of programming revolves around defining a set of instructions to complete some specific task. As simple as it sounds, these basic principles have helped NASA launch rockets into space, automobile companies have created self-driving cars, and biomedical engineers have developed nanobots that help increase the success rate of critical surgeries - the list is endless!

A century ago, humans didn't bother about the internet, TikTok, or smart AI Chatbots that could write poems and create art. Today, we live and breathe tech, and these computer programs have become interwoven in our daily lifestyle that it's almost impossible to imagine life without them.

In this article, we will explore the basic concepts of programming and relate them to the art of cooking, using the metaphor of culinary arts to make the complex world of coding more relatable and understandable. So, put on your chef's hat and get ready to cook up some code!

Programming Is Like Following a Recipe

Just as a recipe is a set of instructions that, when followed correctly, results in a delicious dish; similarly, a computer program is a set of instructions that, when executed correctly, results in a specific task or computation.

If a cook forgets an ingredient or skips a step in a recipe, the dish may not turn out as desired. Likewise, if a programmer makes a mistake in their code, the program may not perform as intended.

For example, let's consider a simple set of programming instructions written in python:

# Guess a number

print("Guess the secret number: ")
secret_number = '3'

while True:
    user_guess = input()
    if user_guess == secret_number:
        print("You guessed right!")
        break
    else:
        print("Try again...")

Python is a programming language that finds its application in several fields. The execution of a python program typically starts from the top and executes line by line until the end of the program is reached (or it encounters an interrupt that stops the flow).

By merely looking at the block of code above, you can somewhat make an educated guess of what the program is trying to achieve. Let's break it down.

Code breakdown:

The first line prints the string in quotation marks to the screen, prompting the user to guess the secret number.
Then, we set the secret number to '3' (hoping the user makes the right guess). The third line declares a never-ending loop with a while statement which allows the program to continue receiving input from the user until the secret number is guessed.

Next, we prompt the user to input a number, then, the numbers are compared. If they are the same, the program prints "You guessed right!" and the program escapes the infinite loop using the break statement. If the guess was wrong, the program takes input until the correct number is provided.

Output:

Guess the secret number:
1
Try again...
2
Try again...
3
You guessed right!

We'll use this piece of code throughout this article to explain other essential programming concepts like variables, conditional statements, flow control, and functions in programming (with a slight modification of the program).

Variables Are Like Ingredients

In cooking, ingredients like flour, sugar, and eggs naturally store or possess unique qualities that can be used to make a cake or other foods, depending on how you combine them.

Likewise, in programming, variables are used to store data that are crucial in the execution of a program. For example, a variable can be used to store a person's name, age, or address.

Just as ingredients can be combined and used in different ways to create different dishes, variables can also be manipulated and used in different ways in a program. A cook might use flour, sugar, and eggs to make a cake, but also use the same ingredients to make cookies or bread.

Similarly, a programmer might use a variable to store a person's name in one part of a program, and then use that same variable to store their age in another part of the program.

It's also worth mentioning that ingredients have different properties, such as sugar being sweet or flour being a thickening agent, and some ingredients are used in small quantities and some are used in large quantities. Similarly, variables in programming also have different properties. Some are used in small quantities and some are used in large quantities.

Our guessing program used variables 'secret_number' and 'user_guess' to store the secret number we chose and the number the user guessed, respectively, which were later compared. In this case, these variables were used to store string data types. Variables and data types go hand-in-hand, you can follow the link to learn more about data types.

...
user_guess = input()
    if user_guess == secret_number:
...

A programmer can utilize several variables to create various programs, just as a cook can use various ingredients to create different dishes. Additionally, a chef might experiment with various ingredients to create new dishes, also, a programmer can experiment with different variables to create new programs.

Conditional Statements Are Like Taste Testing

Conditional statements are like taste testing in the sense that they both allow for decisions to be made based on certain conditions. While cooking, you may taste-test a dish to determine if it needs more seasoning.

In like manner, conditional statements, in programming, are used to make decisions based on certain conditions. For example, a program may check if a user's input is a number, if a file exists or if a certain condition is met.

Just as a cook may add more salt or pepper to a dish based on their taste testing, a program can execute different instructions based on the outcome of a conditional statement.

For example, if a user enters a correct password, the program may proceed to the next step, but if the user enters an incorrect password, the program may display an error message.

This allows for greater flexibility and adaptability in both cooking and programming. In cooking, a cook can adjust the seasoning of a dish based on personal preference, or to suit different dietary restrictions.

Similarly, in programming, a program can adapt to different inputs, or change its behavior based on the outcome of a conditional statement.

...
if user_guess == secret_number:
        print("You guessed right!")
        break
    else:
        print("Try again...")

The number of keywords available for conditional statements depends on the programming language. Some languages like C and JavaScript feature Switch statements in addition to the more common if and else statements.

Furthermore, Conditional statements in programming also allow for the creation of branches and loops, giving the programmer the ability to change the flow of the program, which is essential for creating complex and dynamic applications.

In the same way, a cook can make multiple variations of a dish by adjusting the recipe accordingly, a programmer can create multiple outcomes by adjusting the code accordingly.

Loops Are Like Mass Production

Similar to mass production methods, loops allow a set of instruction(s) to be executed multiple times. For example, our guessing game sets up a while loop that prompts the user to keep guessing until the secret number is guessed.

while True:
    user_guess = input()
    if user_guess == secret_number:
        print("You guessed right!")
        break
    else:
        print("Try again...")

Moreover, a program might use a loop to display a list of items or to perform a calculation multiple times.
Furthermore, mass-production techniques in a kitchen ensure consistency in the dishes produced.

Similarly, loops in programming ensure that the same set of instructions is executed multiple times in the same way, which helps to maintain consistency in the results obtained.

Also,loops in programming can also be nested, where one loop can be inside another, this produces even more complex and dynamic operations, similar to how a kitchen can have multiple stations, each with its specialized tasks, that work together to produce a final dish.

Functions Are Like Specialized Tools

In a kitchen, specialized tools like a mixer, a food processor, or a whisk are used to organize and compartmentalize specific tasks. Likewise, in programming, functions are used to organize and compartmentalize a program by breaking it down into smaller, reusable chunks of code that play a preset role in the program.

To illustrate the use of functions, we've modified our guessing program to include a function:

# Guess a number

print("Guess the secret number: ")
secret_number = '3'

def try_again():
    print("You guessed wrong! Try again...")

while True:
    user_guess = input()
    if user_guess == secret_number:
        print("You guessed right!")
        break
    else:
        try_again()

If you examine the program, you'd notice two lines of code have been added. The first line; "def try_again()", is a python declarative that introduces a function named "try_again" in our program. The specific method of declaring a function depends on the programming language.

The function we have defined performs one specific task. It prints "You guessed wrong! Try again…", where ever it is called in our program.

In this case, we've called our function just after the else statement because we want our program to print a preset text to the screen whenever the user enters the wrong number.
A function can be called multiple times throughout a program to perform the same task. This allows for reusability in both cooking and programming.

Furthermore, specialized tools in a kitchen can be used in combination with other tools to create different dishes.

Comparably, functions in programming can be used in combination with other functions and code to create different programs. This introduces modularity programming. If a section of your code fails, you can easily spot the function causing the problem and fix it without having to examine the entire code.

It's also worth mentioning that functions in programming can take inputs and return outputs, similar to how specialized tools in a kitchen take ingredients and produce dishes. Programmers can use this to create more complex and dynamic operations.

Wrapping Up

Although programming may seem like a complicated activity only understood by a select few, we've been able to see that it's not the case. The art of programming finds similarities in many activities we indulge in daily.

It's important to note that while the comparison between cooking and programming is not direct, it serves as a way to help understand and grasp the concepts that can be difficult to understand at first glance.

We've been able to highlight the similarities between these two fields and how they are both based on following instructions, using logic and some problem solving techniques to achieve a desired outcome. Readers are also encouraged to consider a career in programming or to pursue it as a hobby.