DEV Community: ayubf

Create a Flask App in 5 Minutes

ayubf — Thu, 17 Mar 2022 21:42:08 +0000

When learning to build an API with a language like Python, Flask is a solid option. Starting out is simple and implimenting database queries and insertions are easier than you'd think thanks to ORMs (Object-Relation Mapper). Flask and other unopinionated frameworks in general shine when it comes to simplicity but can sometimes make your projects lack structure and direction compared to opinionated alternatives like Django.

Before we can start this tutorial you should check if you have the required tools

Python & Pip

Python comes pre-installed on most Linux distros, and always pre-installed on macOS. You will have to install using the Python website for Windows if you don't have it installed already. To check if Python is on your system you can use python --version or python3 --version. Pip (Pip Installs Packages), is Python's package manager and comes with Python.

Step 1: Prepping Your Setup

First open a new window with the terminal/command line application that comes with your operating system.

Then Create a new directory for your project.

mkdir flaskapp

From here you have to move into this new directory

cd flaskapp

Then you create a new virtual environment in this directory using Python's builtin virtual environment tool

macOS/Linux	Windows
`python3 -m venv venv`	`py -3 -m venv venv`

After the environment is created we activate it

macOS/Linux	Windows
`. venv/bin/activate`	`venv\Scripts\activate`

Lastly comes installing Flask. Flask is the framework we'll be using today. It's a lightweight, unopinionated framework and really easy to use.

Install it using pip install Flask or pip3 install Flask depending on your Python version.

Step 2: Creating The Flask App

Create a new filed called app.py and type in the following:

from flask import Flask

app = Flask(__name__)

@app.route('/')
def HelloWorld():
    return "Hello World!"

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

The first line in the file imports the Flask object from the library. The next line initializes our Flask object as a variable we can use, add routes to and run. @app.route('/') names the route and the function HelloWorld is the function routed to the string in the decorator. It returns a string that will show when the URL is visited. The last two lines are sort of a safe guard in Python scripts to prevent unwanted execution, and will only do app.run(debug=True) when the file itself is being run rather than imported.

Step 3: Running Your Flask App

Open a window of your terminal/command line application and run

python flask.app

Your terminal should show this:

 * Serving Flask app 'app' (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: on
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 135-059-029

And if you visit http://localhost:5000 or you should see this:

Python comes pre-installed on most Linux distros, and always pre-installed on macOS. You Congratulations! You just built a flask app. With an understanding of REST APIs you could add new routes that return different information, or even files. Using ORMs you could add functionality to create, retrieve, update or delete from a local or cloud database. With a framework like Flask, the limit is up to you.

Sources

Python
Flask
Venv

Question Mark (?) Operators ASAP

ayubf — Mon, 24 Jan 2022 00:58:22 +0000

If you've ever used conditionals in your code you've seen if statements, and if you've seen if statements you've seen them nested several layers deep. In your personal project this could be simply annoying and cause problems down the road but in production code this can be really problematic.

The ternary operator, ?:, is one Question Mark operator and a feature in some programming languages that makes conditional statemnts cleanier and easier to read. The basic syntax goes like this:

condition ? if true : else;

In use this would look like this:

const foo = true ? 1 : 0;

In this snippet, foo is 1, since the condition is true, and true is (obviously) a truthy value.

If you're not sure what truthy/falsy values are just think of it this way:

0, false, undefined, NaN, empty strings, arrays, objects etc are falsy. All other values are truthy.

If an expressions result is a falsy value then the statement itself is falsy.

0 == 1

This is a falsy statement, because it returns false.

In this article I'll teach you how to use Question Mark operators, and their uses in ES2020.

Usages

Ternary Operator (`?`)

The first implementation of the ? in JavaScript is the simplest one, the one I showed at the beginning of the article, the ternary operator (?:).

conditon ? true : false;

If the condition here is true, then the first value after the ? is either assigned or called.

Nullish Coalescing/Assignment (`??`)

The next implementation is the ?? or nullish operator, which is used in Nullish Coalescing.

Nullish coalescing looks something like this:

const value = true ?? false;

value will become true. You may be wondering now what's the difference between this and the Logical Or operator (||)? The || operator worked well but a problem a lot of people run into sometimes is that it considered values like empty compound types ({}, [], "") and 0 as falsy so the need for a logical operator that only considered null and undefined as falsy naturally arose.

Logical Nullish Assignment (`??=`)

x ??= y;

The third question mark operator is called the Logical Nullish assignment operator, ??=. The gist of this operator is to assign a value y to a value x if x is null or undefined, and only if it is.

let val = null;
val ??= 10;

// val is now 10, because it was null before


let num = 0;
num ??= 20;

// num stays as 0, because 0 is neither undefined nor null

let egg;
egg ??= "scrambled";

// egg is now "scrambled" becuase uninitialized variables are undefined

Optional Chaining (`?.`)

The last and latest question mark operator is a very useful feature. It allows us to access a value on the value of an object only if it exists. It gets rid of if statements and try..catch statements .In the event of a null or undefined value being returned, there is no error thrown, the value is just null or undefined.

const John = {
    firstName: "John",
    lastName: "Doe",
    age: 21,
    parents: ["Jack", "Jane"]
}

console.log(John.lastName);

// => "John"

console.log(John.bestFriend?.age);

// => undefined

console.log(John.bestFriend.age);

// => Error: Cannot read properties of undefined

Use in Other languages

Question mark operators exist in a large number of programming languages, as ternary operations are originally a mathematical concept, these are some examples:

Language	Ternary or similar expression
C++, Java, JavaScript, C#, C, Bash, Ruby, Swift, PHP	`condition ? if true : else;`
Python	`value if conditon else false`
Rust	`if condition {true} else {false}`
R	`if (condition) true else false`
Go	No implimentation
Haskell	`if condition then true else false`

Conclusion

Now with your new-found knowledge of the question mark operators you can go impress your friends, colleagues, teammates or classmates, but don't overdo it. Question mark operators are prone to misuse and can make code unreadable if overused, so don't try to force it in whenever you can.

Sources

MDN Docs: Conditional (ternary) operator

MDN Docs: Nullish coalescing operator (??)

MDN Docs: Logical nullish assignment (??=)

MDN Docs: Optional chaining (?.)

Wikipedia: ?:

Create A React Router App ASAP

ayubf — Sat, 22 Jan 2022 01:28:23 +0000

Have you ever created a React app and wondered what it would take to add routes? Have, let's say, a seperate
page for your posts and pictures? Routes are a basic concept in web development and are necessary for any web development framework, frontend or backend. This is especially essential for RESTful APIs that take advantage of the ability for routes to output different pages, carry out different functions like logging in, logging out, etc. In this article I'll show you how to set up routes in React with a library called React Router.

Before you can start you should make sure you have the proper packages and tools installed.

Node & NPM

Node is the environment that runs JavaScript frameworks and libraries like React and is essential for projects like these. NPM is the package manager for Node, and that basically means NPM installs the required files to use React and other libraries. We will use it later in this article to install libraries.

Install Node.js

Text Editor

To put it simply, a text editor is just the application on your computer that will edit the text files to create the React app. My personal choice is one called VSCode, but there are other good options like Sublime Text, Notepad++, & Atom, but even your default text editor can get the job done.

Install VSCode

Step 1: Creating React App

To initiate the React app we'll use a tool that's gonna make the process much simpler. Run the command below to create the React app.

npx create-react-app reactrouterapp

npx is a package bundled with npm and is used to execute.

cd reactrouterapp

cd will move us into the directory for the React app.

npm i react-router react-router-dom

This command installs the required packages for this app.

Step 2: Adding Routes

In this step we will create the app's routes and route outputs. First open the /src folder inside the reactrouterapp directory.
Create a new file named Page.js and type the following

    function Page() {
        return(
            <h1>This is the Page component</h1>
            );
    }
    export default Page;

The function Page() returns a JSX object in its' return statement. The export default statement at the bottom lets us use this in other files, very convenient.

Next, change the contents of App.js to the following:

import { BrowserRouter as Router, Routes, Route} from "react-router-dom";
import Page from './Page'

    function App() {
      return (
        <div className="App">
          <Router>
            <Routes>
              <Route path="/page" element={<Page />} />
            </Routes>
          </Router>
        </div>
      );
    }

    export default App;

The first line imports from the React Router library, and it imports three components for our routing

import { BrowserRouter as Router, Routes, Route} from "react-router-dom";

The second line imports from our Page.js file from earlier, and it imports the <Page /> component we created earlier.

The function App() returns this:

        <div className="App">
          <Router>
            <Routes>
              <Route path="/page" element={<Page />} />
            </Routes>
          </Router>
        </div>

Routes holds the routes and with the path= parameter can have a prefix. <Route> defines the specific routes, their paths, and the elements rendered (in this example that's our <Page /> component).

The app will return the <Page /> element when the /page route is visited.

Step 3: Running

To run the app run the follow command:

$ npm start

The out put should be something like this.

    Compiled successfully!

    You can now view reactrouterapp in the browser.

      Local:            http://localhost:3000
      On Your Network:  http://10.0.0.87:3000

    Note that the development build is not optimized.
    To create a production build, use npm run build.

    assets by status 6.93 KiB [cached] 1 asset
    assets by chunk 1.6 MiB (name: main)
      asset static/js/bundle.js 1.53 MiB [emitted] (name: main) 1 related asset
      asset main.cdf5e8aba95c1b3dac48.hot-update.js 71.4 KiB [emitted] [immutable] [hmr] (name: main) 1 related asset
    assets by path *.json 611 bytes
      asset asset-manifest.json 583 bytes [emitted]
      asset main.cdf5e8aba95c1b3dac48.hot-update.json 28 bytes [emitted] [immutable] [hmr]
    asset index.html 1.67 KiB [emitted]
    Entrypoint main 1.6 MiB (1.62 MiB) = static/js/bundle.js 1.53 MiB main.cdf5e8aba95c1b3dac48.hot-update.js 71.4 KiB 2 auxiliary assets
    cached modules 1.41 MiB [cached] 107 modules
    runtime modules 31.3 KiB 15 modules
    javascript modules 3.95 KiB
      ./src/index.js 1.81 KiB [code generated]
      ./src/App.js 2.14 KiB [built] [code generated]
    webpack 5.67.0 compiled successfully in 75 ms

Visit the link in the output, either one of them, and then visit the /page route and you should see something like this.

Congrats! You quickly created a React app with routes using React Router. Understanding & using routes and routing is a crucial skill for a wev developer, this will come up often in projects or on the job.

Sources

React Router v6
Create-React-App
React
Node.js
Npm
VSCode
Npx

DEV Community: ayubf

Create a Flask App in 5 Minutes

Python & Pip

Step 1: Prepping Your Setup

Step 2: Creating The Flask App

Step 3: Running Your Flask App

Sources

Question Mark (?) Operators ASAP

Usages

Ternary Operator (?)

Nullish Coalescing/Assignment (??)

Logical Nullish Assignment (??=)

Optional Chaining (?.)

Use in Other languages

Conclusion

Sources

Create A React Router App ASAP

Node & NPM

Text Editor

Step 1: Creating React App

Step 2: Adding Routes

Step 3: Running

Sources

Ternary Operator (`?`)

Nullish Coalescing/Assignment (`??`)

Logical Nullish Assignment (`??=`)

Optional Chaining (`?.`)