DEV Community: GeekTech

5 packages to level up your React code

GeekTech — Fri, 04 Mar 2022 14:54:01 +0000

Howdy Geeks! 👋

As a React developer, your work is to build high-quality JavaScript code. Programming is a difficult task. Indeed, you are expected to produce high-quality code while also ensuring that it is bug-free.

When it comes to developer productivity and enjoyment, packages are essential. Why waste time reinventing the wheel when you can save time by doing so? There's a good chance that someone has already used a package to solve the problem you're having.

So, here are 5 packages you must install to level up your React code

1️⃣ ES Lint

ESLint generates a slew of JavaScript rules that your code must adhere to. When there are tabs instead of spaces in the source code, for example, you can tell ESLint to trigger an error.

You can define all of the rules one by one, but this is highly time consuming. Thankfully, ESLint config Airbnb, one of the most well-known shared ESLint configs, allows you to use some pre-configured ESLint rules.

2️⃣ Prettier

You can force a JS code style preference in ESLint, but the alternatives are restricted. Using Prettier on top of ESLint is the best method to ensure that your code has a consistent appearance.

Prettier cleans up your JavaScript code by parsing it and reformatting it. It will not change the logic of your code, but it will make it easier to read. Your team and you now now code in the same way. Writing code becomes a far more pleasurable process as a result. New developers can also ramp up more quickly in your codebase.

3️⃣ Framer Motion

Framer Motion is a production-ready motion library for React. The motions and animations are powered by the Framer library. The package includes spring animations, scroll animations, CSS variables and so much more!

Framer Motion offers more advanced listeners and also extends the basic set of React event listeners. When animating between two separate components, Framer Motion will take care of everything in between. A production-ready motion library for React. Utilize the power behind Framer, the best prototyping tool for teams.

4️⃣ Formik

Formik is the world's most popular open source form library for React and React Native.
Formik takes care of the repetitive and annoying stuff — keeping track of values/errors/visited fields, orchestrating validation, and handling submission — so you don’t have to. This means you spend less time wiring up state and change handlers and more time focusing on your business logic.

No fancy subscriptions or observables under the hood, just plain React state and props. By staying within the core React framework and away from magic, Formik makes debugging, testing, and reasoning about your forms a breeze. If you know React, and you know a bit about forms, you know Formik!

5️⃣ Docz

When it comes to software development, one of the most critical and time-consuming procedures is code documentation. Docz makes it simple to create and distribute beautiful interactive code documentation.

Docz uses Gatsby and Gatsby theme shadowing to let you to easily construct live-reloading, SEO-friendly, production-ready documentation sites with MDX and adjust the look, feel, and behaviour as needed.

Thanks for reading!

Thank you for reading!
Follow us on Twitter for more tech blogs.

Until next time,
Abhiraj

The terminal formatting library you need in 2022

GeekTech — Sun, 27 Feb 2022 12:47:42 +0000

When designing CLI applications we always face challenges as python programmers
when it comes to making the text/UI look good. But have you ever wondered if this tedious task
could be abstracted behind a powerful terminal UI library, which is simple to
use yet extremely powerful? Well, you're in luck as this blog will tell you all
you need to know about such a library: Rich.

Rich is a Python library for rich text
and gorgeous formatting in the console. Rich makes it easy to add color and
style to the CLI of your program. It supports rendering
tables, syntax
highlighted source code,
progress bars,
markdown,
tracebacks and many
more out of the box!

Compatibility

Rich is cross-platform and also works with the True Color / Emojis from the new
Windows Terminal. The classic terminal in Windows is limited to 16 colours.
Rich requires Python 3.6.1 or higher. It also works with Jupyter
notebooks without any additional configuration.

Installation

Rich can be installed through from PyPI very easily using
pip (or any other package manager).



python -m pip install rich

Then you can test Rich using the following command:



python -m rich

Getting started

Rich has a plethora of features under its belt. Let's have a quick look at each
of them.

Rich Print

Rich provides a
print()
function to facilitate printing rich output to the console. Moreover, this
function has an identical signature to the built-in print(). Let's try it!



from rich import print

# Colored text
print("[yellow]Yellow text[/yellow]")

# Stylized text
print("[bold]Bold text[/bold]")

# Emojis
print("Text with :lemon:")

# All three combined
print("[bold yellow]Bold yellow text with :lemon:[/bold yellow]")

# Pretty formatting of objects
print(locals())

Output:

Rich supports [Console Markup
(https://rich.readthedocs.io/en/latest/markup.html#console-markup) (inspired by
bbcode) to insert colour and stylize
the output. You can then print strings or objects to the terminal in the usual
way. Rich will do some basic syntax highlighting and format data structures to
make them easier to read.

If you don't want to replace the built-in print() in your program with Rich's
you can use an import alias.



from rich import print as rprint

Console Markup

Rich supports a simple markup which you can use to insert colour and styles
virtually everywhere Rich would accept a string (e.g. print() and log()).

Run the following command to see some examples:



python -m rich.markup

Syntax

Rich's console markup is inspired by
bbcode. You can start the
style by writing it
in []. The style will be applied till the closing [/]. Let's see an
example:



from rich import print

print("[bold red]alert![/bold red] Something happened")

Output:

Text

Rich has a Text class you
can use to mark up strings with color and style attributes. You can use a
Text instance anywhere a string is accepted, which gives you a lot of
control over presentation.

One way to add a style to Text is the stylize() method which applies a style
to a start and end offset. Here's an example:



from rich.console import Console
from rich.text import Text

console = Console()
text = Text("Hello, World!")
text.stylize("bold magenta", 0, 6)
console.print(text)

This will print “Hello, World!” to the terminal, with the first word in bold
magenta.

Alternatively, you can construct styled text by calling append() to add a
string and style to the end of the Text. Here’s an example:



text = Text()
text.append("Hello", style="bold magenta")
text.append(" World!")
console.print(text)

Text attributes

You can set several parameters on the Text class's constructor to control how
the text is displayed.

justify should be “left”, “centre”, “right”, or “full”, and will override default justify behaviour.
overflow should be “fold”, “crop”, or “ellipsis”, and will override the default overflow.
no_wrap prevents wrapping if the text is longer than the available width.
tab_size Sets the number of characters in a tab.

A Text instance may be used in place of a plain string virtually everywhere
in the Rich API, which gives you a lot of control over how text renders within
other Rich renderables. For instance, the following example right aligns text
within a Panel:



from rich import print
from rich.panel import Panel
from rich.text import Text

panel = Panel(Text("Hello", justify="right"))
print(panel)

Output:

Highlighting

Rich can apply styles to text patterns that you print() or log(). Rich will
highlight numbers, strings, collections, booleans, None, and a few
more exotic patterns like file paths, URLs, and UUIDs with the default
settings.

Setting highlight=False on print() or log() disables highlighting, as
does setting highlight=False on the
Console constructor,
which disables it everywhere. If you disable highlighting in the constructor,
you may still use highlight=True on print/log to selectively enable it.

Custom Highlighters

You can create a custom highlighter if the default highlighting does not meet
your needs. Extending the RegexHighlighter class, which applies a style to
any text matching a list of regular expressions, is the simplest method to do
this.

Here is an example of text that appears to be an email address:



from rich.console import Console
from rich.highlighter import RegexHighlighter
from rich.theme import Theme


class EmailHighlighter(RegexHighlighter):
    """Apply style to anything that looks like an email."""

    base_style = "example."
    highlights = [r"(?P<email>[\w-]+@([\w-]+\.)+[\w-]+)"]


theme = Theme({"example.email": "bold magenta"})
console = Console(highlighter=EmailHighlighter(), theme=theme)
console.print("Send funds to money@example.org")

Output:

While RegexHighlighter is a powerful tool, you can modify its base class
Highlighter to create your highlighting scheme. It just has one method,
highlight, to which the Text to highlight is supplied.

Here's an example that uses a different colour for each character:



from random import randint

from rich import print
from rich.highlighter import Highlighter


class RainbowHighlighter(Highlighter):
    def highlight(self, text):
        for index in range(len(text)):
            text.stylize(f"color({randint(16, 255)})", index, index + 1)


rainbow = RainbowHighlighter()
print(rainbow("I must not fear. Fear is the mind-killer."))

Output:

Pretty Printing

Rich will format (i.e. pretty print) containers like lists, dicts, and sets in
addition to syntax highlighting.

To view an example of nice printed output, use the following command:



python -m rich.pretty

Take note of how the output will adjust to fit the terminal width.

`pprint` method

You can use the pprint() method to adjust how items are nicely printed with a
few more options. Here's how you'd go about doing it:



from rich.pretty import pprint

pprint(locals())

Output:

Pretty renderable

You can use Rich's Pretty class to inject pretty printed data into another
renderable.

The following example shows how to display attractive printed data in a basic
panel:



from rich import print
from rich.pretty import Pretty
from rich.panel import Panel

pretty = Pretty(locals())
panel = Panel(pretty)
print(panel)

You can checkout the Rich Repr
Protocol
to customize Rich's formatting capabilities.

Logging Handler

Rich includes a logging
handler
that formats and colors text generated by the Python logging package.

An example of how to set up a rich logger is as follows:



import logging
from rich.logging import RichHandler

FORMAT = "%(message)s"
logging.basicConfig(
    level="NOTSET", format=FORMAT, datefmt="[%X]", handlers=[RichHandler()]
)

log = logging.getLogger("rich")
log.info("Hello, World!")

Output:

Because most libraries are unaware of the need to escape literal square
brackets, rich logs will not render Console
Markup in
logging by default, but you can enable it by setting markup=True on the
handler. Alternatively, you can enable it per log message by adding the
following extra argument:



log.error("[bold red blink]Server is shutting down![/]", extra={"markup": True})

Similarly, the highlighter can be turned off or on for each log message:



log.error("123 will not be highlighted", extra={"highlighter": None})

Handle exceptions

RichHandler can be configured to format exceptions using Rich's Traceback
class, which provides more context than a built-in exception. Set rich
tracebacks=True on the handler constructor to obtain attractive exceptions in
your logs:



import logging
from rich.logging import RichHandler

logging.basicConfig(
    level="NOTSET",
    format="%(message)s",
    datefmt="[%X]",
    handlers=[RichHandler(rich_tracebacks=True)],
)

log = logging.getLogger("rich")
try:
    print(1 / 0)
except Exception:
    log.exception("unable print!")

Output:

There are a few more options for configuring logging output; check the
RichHandler reference for more information.

Traceback

Rich can format and highlight Python tracebacks with syntax highlighting. Rich
tracebacks are easier to read than ordinary Python tracebacks and show more
code.



python -m rich.traceback

Printing tracebacks

The print_exception() method prints a traceback for the currently handled
exception. Here's an illustration:



from rich.console import Console

console = Console()

try:
    do_something()
except Exception:
    console.print_exception(show_locals=True)

Output:

Rich displays the value of local variables for each frame of the traceback when
the show_locals argument is set to True.

For a more detailed example, see
exception.py.

Traceback Handler

Rich can be set as the default traceback handler, which means that all uncaught
exceptions will be highlighted.



from rich.traceback import install

install(show_locals=True)

For more details on this, see Traceback
Handler.

Prompt

Rich offers several Prompt classes that ask for input from the user and loop
until it receives a valid response (they all use the Console
API internally).
Here's a simple illustration:



from rich.prompt import Prompt

name = Prompt.ask("Enter your name")

The prompt can be specified as a string (which can include Console
Markup and
emoji code) or as a Text object.

You can specify a default value to be returned if the user presses return
without typing anything:



from rich.prompt import Prompt

name = Prompt.ask("Enter your name", default="Paul Atreides")

If you provide a list of options, the prompt will loop until the user selects
one:



from rich.prompt import Prompt

name = Prompt.ask(
    "Enter your name", choices=["Paul", "Jessica", "Duncan"], default="Paul"
)

You can use IntPrompt, which asks for an integer, and FloatPrompt, which
asks for floats, in addition to Prompt, which delivers strings.

The Confirm class is a specific prompt for asking a basic yes/no question to
the user. Here's an example:



from rich.prompt import Confirm

is_rich_great = Confirm.ask("Do you like rich?")
assert is_rich_great

The Prompt class can be customized via inheritance. Examples can be found in
prompt.py.

Run the following command from the command line to see some of the prompts in
action:



python -m rich.prompt

Columns

The Columns class allows Rich to render text or other Rich renderable in
clean columns. To use, create a Columns instance and print it to the Console
with an iterable of renderable.

The following is a very rudimentary clone of the ls command in OSX/Linux for
listing directory contents:



import os
import sys

from rich import print
from rich.columns import Columns

if len(sys.argv) < 2:
    print("Usage: python columns.py DIRECTORY")
else:
    directory = os.listdir(sys.argv[1])
    columns = Columns(directory, equal=True, expand=True)
    print(columns)

Output:

See
columns.py
for an example of a script that generates columns with more than just text.

Render Groups

The Group class enables you to group many renderables so that they can be
rendered in a context where only one renderable is allowed. For example, you
might want to use a Panel to display multiple renderable.

To render two panels within a third, create a Group and pass the child
renderables as positional parameters, then wrap the result in another Panel:



from rich import print
from rich.console import Group
from rich.panel import Panel

panel_group = Group(
    Panel("Hello", style="on blue"),
    Panel("World", style="on red"),
)
print(Panel(panel_group))

Output:

This method is useful when you know ahead of time which renderables will be in
a group, but it can become inconvenient if you have a higher number of
renderable, particularly if they are dynamic. To cope with these circumstances,
Rich provides the group() decorator. An iterator of renderables is used by
the decorator to create a group.

The following is the decorator equivalent of the preceding example:



from rich import print
from rich.console import group
from rich.panel import Panel


@group()
def get_panels():
    yield Panel("Hello", style="on blue")
    yield Panel("World", style="on red")


print(Panel(get_panels()))

Markdown

Rich can render Markdown to the console. Construct a Markdown object and then
print it to the console to render markdown. Markdown is a fantastic method to
add rich content to your command line programmes.

Here's an example of how to put it to use:



from rich.console import Console
from rich.markdown import Markdown

MARKDOWN = """
# This is an h1

Rich can do a pretty *decent* job of rendering markdown.

1. This is a list item
2. This is another list item
"""

console = Console()
md = Markdown(MARKDOWN)
console.print(md)

Output:

It's worth noting that code blocks include full syntax highlighting!

The Markdown class can also be used from the command line. In the terminal, the
following example displays a readme:



python -m rich.markdown README.md

To display the whole set of arguments for the markdown command, type:



python -m rich.markdown -h

Padding

To put white space around text or other renderable, use the Padding class.
The following example will print the word "Hello" with 1 character of padding
above and below it, as well as a space on the left and right edges:



from rich import print
from rich.padding import Padding

test = Padding("Hello", 1)
print(test)

Instead of a single value, you can describe the padding on a more detailed
level by using a tuple of values. The top/bottom and left/right padding are set
by a tuple of two values, whereas the padding for the top, right, bottom, and
left sides is set by a tuple of four values. If you're familiar with CSS,
you'll know this scheme.

The following, for example, has two blank lines above and below the text, as
well as four spaces of padding on the left and right sides:



from rich import print
from rich.padding import Padding

test = Padding("Hello", 1)
print(test)

The Padding class also has a style argument that applies a style to the
padding and contents, as well as an expand switch that can be set to False
to prevent the padding from stretching to the terminal's full width.

Here's an example that exemplifies both of these points:



from rich import print
from rich.padding import Padding

test = Padding("Hello", (2, 4), style="on blue", expand=False)
print(test)

Padding can be used in any context, just like all Rich renderable. For example,
in a Table, you could add a Padding object to a row with padding of 1 and a
style of "on the red" to emphasise an item.

Padding

Construct a Panel using the renderable as the first positional argument to
build a border around text or another renderable. Here's an illustration:



from rich import print
from rich.panel import Panel

print(Panel("Hello, [red]World!"))

Output:

By passing the box argument to the Panel constructor, you can change the
panel's style. A list of possible box styles may be found at
Box.

The panels will span the whole width of the terminal. By specifying
expand=False on the constructor, or by building the Panel with fit(), you
may make the panel fit the content. Consider the following scenario:



from rich import print
from rich.panel import Panel

print(Panel.fit("Hello, [red]World!"))

Output:

The Panel constructor takes two arguments: a title argument that draws a
title at the top of the panel, and a subtitle argument that draws a subtitle
at the bottom:



from rich import print
from rich.panel import Panel

print(Panel("Hello, [red]World!", title="Welcome", subtitle="Thank you"))

Output:

See Panel for details on how to customize Panels.

Progress Display

Rich can show continuously updated information about the status of long-running
tasks, file copies, and so forth. The information presented can be customised;
by default, a description of the 'task,' a progress bar, percentage complete,
and anticipated time left will be provided.

Multiple tasks are supported with a rich progress display, each with a bar and
progress statistics. This can be used to keep track of several jobs that are
being worked on in threads or processes.

Try this from the command line to see how the progress display looks:



python -m rich.progress

Progress is compatible with Jupyter notebooks, however, auto-refresh is
disabled. When calling update, you must explicitly call refresh() or set
refresh=True when calling update(). Alternatively, you can use the
track() function, which performs an automatic refresh after each loop.

Basic usage

For basic functionality, use the track() function, which takes a sequence
(such as a list or range object) and an optional job description. On each
iteration, the track method will return values from the sequence and update the
progress information.

Here's an illustration:



from rich.progress import track
from time import sleep

for n in track(range(10), description="Processing..."):
    sleep(n)

Output:

For advanced usage, read the
docs.

Syntax

Rich can syntax highlight various programming languages with line numbers.

Construct a Syntax object and print it to the console to highlight code. Here's
an illustration:



from rich.console import Console
from rich.syntax import Syntax

console = Console()
with open("syntax.py", "rt") as code_file:
    syntax = Syntax(code_file.read(), "python")
console.print(syntax)

Output:

You may also use the from_path() alternative constructor which will load the
code from disk and auto-detect the file type.

The example above could be re-written as follows:



from rich.console import Console
from rich.syntax import Syntax

console = Console()
syntax = Syntax.from_path("syntax.py")
console.print(syntax)

For more details, and features: read the
docs

Tables

Rich's Table class provides several options for displaying tabular data on
the terminal.

To draw a table, create a Table object, use add_column() and add_row() to
add columns and rows, and then print it to the terminal.

Here's an illustration:



from rich.console import Console
from rich.table import Table

table = Table(title="Star Wars Movies")

table.add_column("Released", justify="right", style="cyan", no_wrap=True)
table.add_column("Title", style="magenta")
table.add_column("Box Office", justify="right", style="green")

table.add_row("Dec 20, 2019", "Star Wars: The Rise of Skywalker", "$952,110,690")
table.add_row("May 25, 2018", "Solo: A Star Wars Story", "$393,151,347")
table.add_row("Dec 15, 2017", "Star Wars Ep. V111: The Last Jedi", "$1,332,539,889")
table.add_row("Dec 16, 2016", "Rogue One: A Star Wars Story", "$1,332,439,889")

console = Console()
console.print(table)

Output:

Rich will compute the best column sizes for your material, and text will be
wrapped to fit if the terminal isn't big enough.

The add row method allows you to do more than just add text. You are free to
include everything Rich is capable of rendering (including another table).

For more details, read the
docs

Tree

Rich offers a Tree class that can build a terminal tree view. A tree view is
an excellent technique to display the contents of a file system or other
hierarchical data. A label for each branch of the tree can be text or any other
Rich renderable.

To see an example of a Rich tree, run the following command:



python -m rich.tree

The following code creates and prints a tree with a simple text label:



from rich.tree import Tree
from rich import print

tree = Tree("Rich Tree")
print(tree)

This will only output the word "Rich Tree" if there is just one Tree
instance. When we call add() to add new branches to the Tree, things get much
more fascinating. The code that follows adds two more branches:



tree.add("foo")
tree.add("bar")
print(tree)

Two branches will now be attached to the original tree via guide lines.

A new Tree instance is returned when you call add(). You can use this
instance to create a more complex tree by adding more branches. Let's expand
the tree with a couple more levels:



baz_tree = tree.add("baz")
baz_tree.add("[red]Red").add("[green]Green").add("[blue]Blue")
print(tree)

Tree styles

You can supply a style parameter for the entire branch, as well as a
guide_style argument for the guidelines, in the Tree constructor and add()
method. These styles are passed down through the branches and will apply to any
sub-trees.

Rich will select the thicker forms of Unicode line characters if you set guide style to bold. Similarly, if you choose the "underline2" style, you'll get
Unicode characters with two lines.

Examples

See
tree.py,
which can produce a tree view of a directory on your hard drive, for a more
practical demonstration.

Live Display

To animate portions of the terminal, progress bars and status indicators employ
a live display. The Live class allows you to create bespoke live displays.

Run the following command to see a live display demonstration:



python -m rich.live

Note: If you see ellipsis "...", it means your terminal isn't tall enough to
display the entire table.

Basic usage

Construct a Live object with a renderable and use it as a context manager to
make a live display. The live display will be visible throughout the context.
To update the display, you can update the renderable:



import time

from rich.live import Live
from rich.table import Table

table = Table()
table.add_column("Row ID")
table.add_column("Description")
table.add_column("Level")

with Live(table, refresh_per_second=4):  # update 4 times a second to feel fluid
    for row in range(12):
        time.sleep(0.4)  # arbitrary delay
        # update the renderable internally
        table.add_row(f"{row}", f"description {row}", "[red]ERROR")

For more details, read thedocs

Rich supports more features like Layouts, and interacting with the console protocol

Conclusion

Thank you for reading! Follow us on Twitter
for more tech blogs. To learn more about Rich you can take a look at their
wonderful documentation, on which
this blog was based upon.

Until next time,
Sourajyoti

Flask Blog Tutorial #2: User Registration and Interacting with MySQL

GeekTech — Mon, 21 Feb 2022 14:40:49 +0000

Howdy Geeks! 👋

I am back again.

In this article, we will create a database to save user information for registration and create forms for registration. We will use MySQL so you can use either APACHE or if you use Windows, you could download MySQL and use it.

Tutorial to download APACHE: https://youtu.be/oJnCEqeAsUk

Tutorial to download MySQL: https://www.youtube.com/watch?v=H0ZpCVhS6hw

Interacting with MySQL database

After installing MySQL, open cmd and run this code to access MySQL and create databases and tables.

mysql -u root -p

-u is for username,

-p is for the password, and

root is the main admin so we are accessing MySQL DB as a root user.

To create a database:

After successfully signing in, enter this command to show the created databases under your user.

 SHOW DATABASES;

Next, create your database for your flask blog app:

CREATE DATABASE name_of_db;

This will create a DB, you can verify it by doing,

SHOW DATABASES;

To create tables in your db:

USE name_of_db;

Next, we create tables:

CREATE TABLE users(id INT(11) AUTO_INCREMENT PRIMARY KEY, name VARCHAR(100),email VARCHAR(100), username VARCHAR(30), password VARCHAR(100), registered_on TIMESTAMP DEFAULT CURRENT_TIMESTAMP);

This creates an ID table that has a primary key, name table of 100 characters,*** email*** table of 100 characters, username table of 30 characters, password table ( which will be hashed) of 100 characters and table for a date the user registers that automatically use the current date as the value.

You should see a

QUERY OK, 0 rows affected, 1 warning (2.34 sec)

To confirm, write this command to show created tables

SHOW TABLES; then DESCRIBE users;

You should see this:

Flask-MySQL DB

Next, we install flask-mysql to interact with our created tables on MySQL.

To install:

pip install flask-mysqldb

In addition, we need to validate our login and register form so let’s install** wtform**.

To install:

pip install Flask-WTF.

Since we are saving users’ passwords we need to hash them. We can do so by using** passlib**.

To install:

pip install passlib.

Register form

Let’s work on the registration form, but before that, import:

Flash: For flash messages on the form.
Redirect: For redirecting users after completing the form.
url_for: For creating a URL that redirects users and prevents the overhead of having to change URLs in the application (especially in templates).
session: For supporting Server-side application.
logging: For functions and classes which implement a flexible event logging system for applications and libraries.

Do not forget to import our DB,

From flask mysqldb import MySQL

Next up, import wtform and the fields we will be using.

From wtform import Form, StringField, TextAreaField, PasswordField, Validators

Next, let’s import passlib to hash our saved password

From passlib.hash import sha256 crypt

Creating a Registration form

We want to create our form with wtforms. To do this, we need to create class for each form.

class RegisterForm(Form):
    name = StringField('Name', [validators.Length(min=5, max=40)])
    username = StringField('Username', [validators.Length(min=7, max=30)])
    email = StringField('Email', [validators.Length(min=7, max=35)])
    password = PasswordField('Password', [
        validators.DataRequired(),
        validators.EqualTo('confirm', message='Password does not match')
    ])
    confirm = PasswordField('Confirm Password')

Next, let’s create a route for registration.

@app.route('/register', ['GET', 'POST'])
def register():
    form = RegisterForm(request.form)

By default, all route has a GET method but we need to define a POST method. Do not forget to import requests.

Let’s create a register template and call it

@app.route('/register', methods=['GET', 'POST'])
def register():
    form = RegisterForm(request.form)
    return render_template('register.html', form=form)

Add random text on your HTML file and go to http://127.0.0.1:5000/register
You should see it display.

Let’s create our form:

{% extends 'layout.html' %}

{% block body %}
    <h1>Register</h1>
    {% from "includes/_formhelpers.html" import render_field%}
    <form method="post" action="">
        <div class="form-group">
            {{render_field(form.name, class_="form-control")}}
        </div>
        <div class="form-group">
            {{render_field(form.email, class_='form-control')}}
        </div>
        <div class="form-group">
            {{render_field(form.username, class_='form-control')}}
        </div>
        <div class="form-group">
            {{render_field(form.password, class_='form-control')}}
        </div>
        <div class="form-group">
            {{render_field(form.confirm, class_='form-control')}}
        </div>
       <p><input type="submit" class="btn btn-primary" value="Submit"></p>
    </form>
{% endblock %}

Now that is done, we need to write form helpers to beautify and authenticate our created form.

Create a new file under includes folder. Name the file, _formhelpers.html.

{% macro render_field(field) %}
    {{ field.label }}
    {{ field(**kwargs)|safe }}
    {% if field.errors %}
        {% for error in field.errors %}
            <span class="help-inline">{{ error }}</span>
        {% endfor %}
    {% endif %}    
{% endmacro %}

Now that we are done we that, we want to handle our submission. Let’s set up MySQL first.

First, import flask mysql.

from data import Articles
from flask_mysqldb import MySQL

Then connect it to the app

# Config MySQL DB
app.config ['MYSQL_HOST'] = 'localhost'
app.config ["MYSQL_USER"] = 'root'
app.config ["MYSQL_PASSWORD"] = '1234567'
app.config ["MYSQL_DB"] = 'MyFlaskBlogDB'
app.config ["MYSQL_CURSORCLASS"] = 'DictCursor'

MYSQL_HOST defines the host of the database, which is our localhost
MYSQL_USER is the user that authenticates the database
MYSQL_PASSWORD is the password for the database
MYSQL_DB is the database in use.
MYSQL_CURSORCLASS: In this case, we will set it to return information in a dictionary by default.

Next, we initialize our database

mysql = MySQL(app)

Next, let’s save information if it’s a POST request.

@app.route('/register', methods=['GET', 'POST'])
def register():
    form = RegisterForm(request.form)
    if request.method == 'POST' and form.validate():
        name = form.name.data 
        email = form.email.data
        username = form.username.data 
        password = sha256_crypt.hash(str(form.password.data))     
    return render_template('register.html', form=form)

sha256_crypt.hash: ensures that the password sent to the database is encrypted. The above code stores the information in a variable and saves it.

Let’s create a cursor that can create queries or commands.

    password = sha256_crypt.encrypt(str(form.password.data))  

        # Creates cursor
        cur = mysql.connection.cursor() 

        cur.execute("INSERT INTO users(name, email, username, password) VALUES(%s, %s, %s, %s)", (name, email, username, password)
)

The above code creates a connection to MySQL and saves the information to the tables in the database, but it won’t do anything unless we commit.

...
# commit to db 
Mysql.connection.commit()

#close connection
cur.close

In addition, we want to send a flash message after the user registers. With flash messaging, we give a message and also categorize it.

flash('You are now registered and may login. Welcome to BlogIt!', 'success')

success is the category of this flash message.

Next, we want to redirect after a successful logging in.

redirect(url_for('index'))

When we redirect, we use the url_for to define where we wish users to see next.

For the flash messaging, we need where we can include it in our template so create a file under includes and call it** _messages.html**.

Add this code to newly created file:

{% with messages = get_flashed_messages(with_categories=true) %}
  {% if messages %}
    {% for category, message in messages %}
      <div class="alert alert-{{ category }}">{{ message }}</div>
    {% endfor %}
  {% endif %}
{% endwith %}

Then, include it in layout.html

 {% include 'includes/_navbar.html' %}
    <div class="container">
    { include 'includes/_messages.html' %}
        {% block body%}{% endblock%}
    </div>

Let’s add a register button on our navbar. Go to* _navbar.html* add this code below the ul in the navbar.

        <ul class="nav navbar-nav navbar-right">
          <li><a href="/register">Register</a></li>
        </ul>

Restart the server and you would see a register button on the right side of the navbar.
Before we test the form, let’s set a secret key. Add it to the bottom of your app.py file.
app.secret_key = 'Secret145'.

SELECT * FROM users;

Redirecting

After registering, we want users to be redirected to the login page. We will discuss more in this on the next article series.

Thank you for reading!

Until next time,
Sophia Iroegbu.

Everything you need to know about Go-Lang - #2

GeekTech — Sun, 13 Feb 2022 16:05:55 +0000

You probably have heard about Google's cool language called Golang. Golang is a statically typed, compiled programming language designed at Google by Robert Griesemer, Rob Pike, and Ken Thompson. It is similar to C/C++, but with memory safety, garbage collection, structural typing, and CSP-style concurrency.

This is the continuation of Everything you need to know about Go-Lang - #1, so if you have not read that then check that out first.

In the last part we have learned about Printing and Variables. We'll start off from where we left.

Constants

We have learned about variables. They are like a container which stores values of a type and can be reassigned with other values of the same type. In short that means we can change the values of variables. Now this might seen a good thing, but often time we use variables whose value we don't change at all. It's a good practice to define those as constants instead of variables. To define a value as constant we use the const keyword.

Example:

const pi = 3.14
const e = 2.71828
const sum = pi + e

const keyword works pretty much the same as var except you cannot change it's value. Using Constants when needed is a good practice and is beneficial to compiler sometimes. We can also declare the type of constant the same way as we do to variables.

const aWord = "This is a constant whose content cannot be changed"

If you are coming from other languages you maybe thinking that go follows a convention of writing constant in UPPERCASE. However, in go constant name is generally written in camelCase instead of UPPERCASE. The main reason is that variable or constant names which start with capital letter are those to be exported, if your variable or constant will not be exported to then it's useless to start it with UPPERCASE.

Your Turn

Try using constants in your previous programs of Golang instead of var for those whose values that aren't changing.

Operators

In Go, there are various kinds of operator that used for certain functions. These operators can be differentiated into:

Arithmetic Operator.
Relational Operator.
Logical Operator.
Bitwise Operator.
Assignment Operator.
Misc. Operator.

Arithmetic Operator

We have used Arithmetic Operator earlier. Let's learn about them again. Arithmetic Operators are used to perform, mathematical operations like addition, subtraction, division, multiplication, and modulus (remainder).

Addition: The + operator is to add two operand.
Subtraction: The - operator is to subtract two operand.
Multiplication: The * operator is to multiply two operand.
Division: The \ operator is to divide two operand. Dividing two integer returns an integer.
Modulus: The % operator return the remainders of two operand.

package main
import "fmt"

func main() {
    a := 20
    b := 2
    fmt.Println("Sum = ", a + b)
    fmt.Println("Difference = ", a - b)
    fmt.Println("Product = ", a * b)
    fmt.Println("Quotient = ", a / b)
    fmt.Println("Remainder = ", a % b)
}

Output:

Sum = 22
Difference = 18
Product = 40
Quotient = 10
Remainder = 0

Relational Operators

Relational operators are used for comparison of two expressions. Relational operators return true if the condition satisfies or else it returns false. Here are the Relational operators:

==: Is equality operator, it is used to check whether the left and right-hand side operands are equal. It returns true if both are equal or else returns false.

fmt.Println(3 == 3)
fmt.Println(4 == 5)
fmt.Println(2 == 2.0)

Output:

true
false
true

!=: Is the not equal to. It is used to check whether the two operands are different. It returns true if they are not equal and returns false if they were. ! is the not operator.

fmt.Println(3 != 4)
fmt.Println(5 != 10 / 2)
fmt.Println(3.14 != 22 / 7)

Output:

true
false
true

>: Known as greater than operator. It is used to check whether the left-hand is greater than the right-hand side. It returns true if the left-hand side operand is greater than the right otherwise it returns false.

fmt.Println(4 > 5)
fmt.Println(5 > 5)
fmt.Println(6 > 5)

Output:

false
false
true

>=: Known as greater than equal to operator. It is used to check whether the left-hand side operand is greater than or equal to the right-hand side. It returns true if the left operand is greater than or equal to the right-hand side or else returns false.

fmt.Println(4 >= 5)
fmt.Println(5 >= 5)
fmt.Println(6 >= 5)

Output:

false
true
true

<: Known as lesser than operator. It returns true if left-hand side is lesser than the right-hand side, or else returns false.

fmt.Println(4 >= 5)
fmt.Println(5 >= 5)
fmt.Println(6 >= 5)

Output:

true
false
false

<=: Known as the lesser than equal to operator. It returns true if the left-hand side is lesser than or equal to the right-hand side, or else returns false.

fmt.Println(4 >= 5)
fmt.Println(5 >= 5)
fmt.Println(6 >= 5)

Output:

true
true
false

Logical Operator

They are used to combine two or more conditions or to change the checking of the original statement. The logical operators are:

&&: The logical and operator returns true if all the conditions that are being joined by it are true.

fmt.Println(true && false)
fmt.Println(6 > 5 && 10 > 9)

Output :

false
true

||: The logical or operator returns true if any of the conditions that it joins are true.

fmt.Println(true || false)
fmt.Println(6 > 5 || 10 > 9)

Output:

true
true

!: The logical not, also mentioned as not operator earlier, negates the result of the expression.

a := 5
fmt.Println(!a == 5)
fmt.Println(!6 == 5)

Output :

false
true

Bitwise Operators

In Go language, there are 6 bitwise operators which work at bit level or used to perform bit by bit operations. Bitwise operators works with binary. Following are the bitwise operators:

& (bitwise AND): Takes two numbers as operands and does AND on every bit. The result of AND is 1 only if both bits are 1.
| (bitwise OR): Takes two numbers as operands and does OR on every bit of two numbers. The result of OR is 1 any of the two bits is 1.
^(bitwise XOR): Takes two numbers as operands and does XOR on every bit of two numbers. The result of XOR is 1 if the two bits are different.
<< (left shift): Takes two numbers, left shifts the bits of the first operand, the second operand specifies the number of places to shift.
>> (right shift): Takes two numbers, right shifts the bits of the first operand, the second operand specifies the number of places to shift.
&^ (AND NOT): This is the bit clear operator.

Assignment Operators

Assignment operator is used to assign values to a variable. The left-hand side is the variable and the right-hand side is the value. Different types of Assignment Operators are:

=: Known as equals to. It assigns the values at the right to the left-hand side.
a +=: Other form of writing a = a + ..., where a is a variable.
a -=: Other form of writing a = a - ..., where a is a variable.
a *=: Other form of writing a = a * ..., where a is a variable.
a /=: Other form of writing a = a / ..., where a is a variable.
a %=: Other form of writing a = a % ..., where a is a variable.
a &=: Other form of writing a = a & ..., where a is a variable.
a ^=: Other form of writing a = a ^ ..., where a is a variable.
a |=: Other form of writing a = a | ..., where a is a variable.

Conditional Statements

Suppose you ask your friend to buy you a lego space shuttle for yourself, but if it isn't available then buy a lego star wars. Over here you can see that we have a condition for us that if a lego space space shuttle then buy it or else buy a lego star wars. In the world of computers, programmer often face the same situation, where they need to so check if a certain condition is true then execute one set of commands, or else execute another set of commands.

In Go there are two types of Conditional statements

If / Else
Switch-Case

If / Else

if keyword is used to check whether one condition is true. If the condition is true then it executes the code block. Or else it doesn't execute that block. The syntax of if is every simple :

if condition { // <= `true` 
    statements
}

Here's a simple example:

t := true
if t { //<= true
    fmt.Println("The statement here is true")
}

Before I give any further examples, we need to talk about operators.

The equality operator == is use to check where that the left-hand side and right-hand side of the operation are equal. This is not to be confused with the = equal to , which is used to assign values from right to the left.

Let's now see some more examples:

if 10 / 2 == 5 { //<= true
    fmt.Println("Condition ", 10 / 2 == 5)
}

Output:

Condition true

10 / 2 == 5 returns true. Let's now see another example where our condition isn't true and see the output.

if 10 / 2 == 3 { // <= false
    fmt.Println("Condition",10/2==3)
}

Output

As we see we receive no output as our condition didn't satisfy and hence didn't enter the block.

In the last example we saw how if our condition doesn't satisfied then it doesn't print anything. If we want do execute some other statements when the condition doesn't satisfy we can use else keyword, right next to the closing braces of the if. Here's an example:

if 10 % 2 == 0 {
    fmt.Println("Condition true")
} else {
    fmt.Println("Condition true")
}

Output :

Condition true

We can also use else if statement if we want to add another condition.
Example :

var a , b int
fmt.Scanf("%v %v", &a, &b) // takes user input and splits it by space
if a > 5 {
    fmt.Println("More than 5")
} else if a == 5 {
    fmt.Println("Equal to 5")
} else {
    fmt.Println("Less than 5")
}

You might want to check about different operators, as it will be helpful in the future.

Switch case:

When you have too many conditions to check from, using if else if else might be time consuming, so a better and more efficient way would be using switch case. Here's the syntax of switch case :

switch value {
    case value 1:
    case value 2:
    default:
}

Switch can compare values and executes the piece of code of that case. This is especially helpful during menus where user input depends on what to do.

var v int
fmt.Scan(&v) // takes user-input
switch v {
    case 1: fmt.Println("1")
    case 2: fmt.Println("2")
    case 3: fmt.Println("3")
    case 4: fmt.Println("4")
    default: fmt.Prinln("Other value")
}

This block of code compares the value of v with the values written after case and before :. Now if you are coming from other languages then you must be thinking the above code is technically wrong as if any of the cases gets executed those below it will get executed too, known as fall-through error. Fall-through error is an error that causes the fall of control of the program. It is common in other languages like C/C++, Java, etc. However in Go, fall-through isn't the default. We can create fall through explicitly by using the fallthrough keyword however. Like:

switch 1 {
    case 1: fmt.Println("Hello")
    fallthrough
    case 2: fmt.Println("Gophers")
    fallthrough
    default: fmt.Println("Hi")
}

Output

Hello
Gophers
Hi

Fall-through was actually useful when multiple statements had the same block of statements to execute. However in Golang to counter the problem of not having fall-through, they introduced checking of multiple values in one case. Like:

switch v {
    case 1, 3, 5: fmt.Println("odd")
    case 2, 4, 6: fmt.Println("even")
    default: fmt.Prinln("None")
}

Now depending on the value of v, the program will print odd, even or none. This is a faster way than the use of fallthrough and also easier to write.

Nested

You have multiple conditional statements inside another conditional statement.

Your Turn

Take two variable, assign values to them in such a way that the first one is greater than the second one. Divide them (both must be integer). Now If your result is less than 5, find out whether the first number is greater than 10, and less than 20, else check if the difference between the number is divisible by 2 or not (If a number is divisible by another number, then the remainder between them is 0).

Take four variables and assign them with random letters and check how many vowels are there. If there are none, print an appropriate message

Loop

Sometimes as a programmer you want your statement to run over and over again until the condition gets satisfied. So today we shall learn about loops.

Now if you are coming from other languages you may think there are two or three (for older languages) types of loops. In Golang, there's only one. That is everyone's favorite for loop. For loop has different syntax, you can use the right one depending on what you need. The most basic one is the following:

var i
for initialize; check; increment/decrement/change in value {
    statements
}

So we first have to initialize it with some value. Then we have to check whether a condition is true so that the loop runs, and then change the value. The statements in a loop with runs continuously until the condition is false, when for the next iteration the condition becomes false the loop will not run.
Suppose we want to print numbers from 0 to 10, we can easily do that using loops:

for i :=0; i<=10; i++ {
    fmt.Println(i)
}

Output

We can omit the initializing or the increment/decrement, but we have to initialize the value for the variable we use in loop, or else we will get an error. Also if we don't change the value of that variable the loop might run forever and never end generation some behavior we don't want.

var i = 0
for ; i < 10; i++ {
    fmt.Println(i)
}
var j = 0
for ; j<5; {
    fmt.Println(j++)
}

The first loop will print the values from 0 to 9 and the second loop from 0 to 5. Golang offer some syntactical sugar for us, if we don't initialize and increment/decrement as the same line as for loop declaration we can omit the semi colons. Please don't if we omit both, then only we can use this. This makes for loop very similar to while loop. We shall use this syntax of for loop when we don't know the number of iterations.

var i = 0
for i < 5 {
    fmt.Println(i++)
}

Another import function is the ranged for. It is used to get the index number and the uses with it. We shall understand better when we deal with string and arrays/slices.

for i, n :=range "Hello" {
    fmt.Println(i, " ", n)
}

Output:

0 "H"
1 "E"
2 "L"
3 "L"
4 "O"

We shall use more of this function in the future.

Nested

You can write a for loop inside another for loop.

for i := 0; i < 10; i ++ {
    for j := 0; j < 10; j ++ {
    } 
}

Your Turn

Try to print this patter

*
**
***
****

(Hint: You have to use Print and Println functions. Remember to use nested loops)

Struct

A structure or struct in Golang is a user-defined type that allows to group/combine items of possibly different types into a single type. Any real-world entity which has some set of properties/fields can be represented as a struct. This concept is generally compared with the classes in object-oriented programming. It can be termed as a lightweight class that does not support inheritance but supports composition.

Suppose you define a struct which contains your address, these shall be the variables inside it: House Name (string), Street Name (String), City (String), Pincode (int).

Let's define our struct. Till now we were declaring function inside our main function, but struct definitions are generally done outside main function:

package main

import "fmt"

type Address struct {
    houseName  string
    streetName  string
    city string
    pincode int
}
func main() {}

Now let's allocate values into it and print it. To allocate values we must always pass them in order, or else we can assign it as name:value.
Example:

package main

import "fmt"

type Address struct {
  houseName string
  streetName string
  city string
  pincode int
}
func main() {
    var i = Address {
        houseName: "City Mall",
        streetName: "MG Road",
        city: "Delhi",
        pincode:110007
    }
    fmt.Println(i)
}

Output:

{City Mall MG Road Delhi 110007}

Another way is without using the name of the variable.

package main

import "fmt"

type Address struct {
    houseName string
    streetName string
    city string
    pincode int
}
func main(){
    var i = Address {
            "City Mall",
            "MG Road",
            "Delhi",
            110007
        }
    fmt.Println(i)
}

Output

{City Mall MG Road Delhi 110007}

Now what if you want to access any fields from the struct, how would you do so?

We can do so by using dot notation . followed by the name of the fields.

package main

import "fmt"

type Address struct {
    houseName string
    streetName string
    city string
    pincode int
}

func main() {
    var i = Address {
        houseName: "City Mall",
        streetName: "MG Road",
        city: "Delhi",
        pincode: 110007
    }
    fmt.Println(i.city)
}

Output :

Delhi

Your Turn

Make a struct called Birds, in it create 4 fields Name (string), CanFly (bool), isRare (bool), Age (int). In main function pass the name of a bird, pass true and false if it can fly or is it rare, and pass the age of it, and print the struct. If canFly or isRare is false then print an appropriate message. (Hint: Use if / else to check ).

Summary

In this post, we have learned how to declare constants, how to check conditions and perform operations, we have learned how to loop a set of statements depending on our need, and then we closed it all up with structures. We have also learned about different operators. In the next part, we shall learn more about structs, functions, data type and pointers.

Thanks for Reading

Until we meet again,

Arindol Sarkar.

30 games you can play to learn to code

GeekTech — Tue, 08 Feb 2022 12:32:44 +0000

Howdy Geeks! 👋

It is the 21st Century and games are an integral part of our lives. But did you know you can learn coding by playing games? If not, you’re in luck today.

Presenting the 30 games you can play to learn a variety of programming languages

1. JS Robot

Learn the basics of javascript.

2. Elevator Saga

Make the elevators efficiently move people through floors and avoid backlogs.

3. WarriorJS

Code your way through dungeons, prove your skills, and get hired.

4. Untrusted

A text-based dungeon crawler where you progress with the aid of JavaScript.

5. Code Monster

Learn the basics of JavaScript on the browser.

6. JavaScript Fight Club

Playing Javascript games to master fundamentals.

7. Yare

Real-Time Strategy game where you control your units by writing JavaScript code.

8. Codewars

Improve your skills by training with others on real code challenges.

9. CodinGame

Games and Programming Challenges to Code Better.

10. Cyber Dojo

Hone your programming skills in a huge range of languages, writing code to pass tests.

11. Grasshopper

Fun, quick lessons on your phone that teach you to write real JavaScript.

12. ReturnTrue

A game where you learn about booleans, return true to win.

13. Coding Fantasy

Learn to code in a revolutionary new, fun, and effective way.

14. CodeCombat

Learn how to code by playing a game.

15. Web Audio School

Interactive WebAudio tutorials.

16. CodinGame

A challenge-based training platform where you can play with the hottest programming topics.

17. Cube Composer

A puzzle game inspired by functional programming.

18. Codecademy

Learn to code interactively, for free.

19. Code Avengers

Learn to build websites, apps, and games in a fun and effective way.

20. CSS Battle

Test your CSS skills by solving coding challenges.

21. CSS Dinner

Solve challenges by arranging dishes and food and learn about CSS selectors.

22. Grid Garden

Write CSS code to grow your carrot garden while learning about the CSS grid.

23. Flexbox defense

Stop the incoming enemies from getting past your defenses using CSS.

24. Flexbox froggy

Master CSS Flexbox.

25. Hex Invaders

Learn about HEX colors by shooting off aliens having the same colors!

26. Robocode

Code robots, win matches, rank up.

27. Checkio

Practice Python Online

28. Ruby Warrior

A game written in Ruby for learning Ruby and artificial intelligence.

29. SQL Mystery

There's been a Murder in SQL City! The SQL Murder Mystery is designed to be both a self-directed lesson to learn SQL concepts and commands and a fun game for experienced SQL users to solve an intriguing crime.

30. Oh my git!

An open-source game about learning Git!

Thank you for reading!

Until next time,

Abhiraj.

Everything you need to know about Go-Lang - #1

GeekTech — Fri, 04 Feb 2022 07:50:02 +0000

You probably have heard about Google's cool language called Golang. Golang is a statically typed, compiled programming language designed at Google by Robert Griesemer, Rob Pike, and Ken Thompson. It is similar to C/C++, but with memory safety, garbage collection, structural typing, and CSP-style concurrency.

History of Golang

Go was developed by Google in 2007 to improve programming productivity. The developers wanted to amending the limitations of languages in that era while keeping the useful features like,

static typing and run-time efficiency
readability and usability
high-performance networking and multiprocessing.

The developers of Golang had shared dislikes for the language C++, which is also said to be the primary motivation behind this project. Announced in 2009, the version 1.0 was not released until 2012. Go is widely used in google and by open source developers. Go 1 guarantees compatibility for the language specification and major parts of the standard library. All versions up to the current Go 1.17 release have maintained this promise.
Each major Go release is supported until there are two newer major releases.

Design

Go is based on C, with an emphasis on greater simplicity and safety. The language has a syntax and environment adopting patterns more common in dynamic languages:

Optional concise variable declaration and initialization through type inference.
Fast compilation.
Remote package management with online package documentation.

Golang takes an distinctive approach towards a particular problem :

Built-in concurrency primitives: light-weight processes, channels, and the select statement.
An interface system in place of virtual inheritance, and type embedding instead of non-virtual inheritance.
A toolchain that, by default, produces statically linked native binaries without external dependencies.

The languages was tried to be kept as simple as possible, which in the process had to eliminate some common features found in other programming languages, but Golang makes up for those, by alternating features or other approaches.

Getting Started with Go

So before we dive into the programming part first we need to install Golang in your pc. You can get Go from their official download website. Download the latest version for your os.

Now that we have Golang, we need to find a proper text editor. Now for the basics part or for the learning part you can use the Go Official PlayGround, or else you might wanna use any among these : LiteIDE, Atom with Go-Plus, VSCode, or GoLand.

Now that we have both Go and a text editor with us, we might begin our journey through go.

Hello World

So let's now write our first hello world program. Now every go program starts with a package. A package is collection of source codes which are complied together. Among all the package there must be atleast one package named main. Since, we are getting started with Golang, we shall have only one package as of now. After defining our own package now we need to import another package. Now this might sound confusing but trust me when you will do the practical work it will all be a piece of cake. So where was I ? Oh yes, we would now have to import another package. This package is the fmt package which stands for format. This package contains vital functions for printing, scanning in certain formats. So we have different ways of importing package. Since we are importing one package we shall use this syntax:

import "fmt"

When there are multiple packages to import we shall use this syntax:
(suppose we are importing math along with fmt)

import (

"fmt"

"math"

)

So now that we have learned how to import now let's write the main function. So let's ask the basics first. What is the main function ? In simple terms it is the block from which the complier starts executing your program, one project must have atleast one main function. So how do we define functions now ?
Well after import we define functions like this:

package main

import (

"fmt"

"math"

)

func main(){

}

Please note it is a syntax error if we change the way braces are put. The opening brace must be on the same line as the defination of the function and the closing brace on the next line where the function is suppose to end. We shall learn more about other functions later into the series.

Now that we have define our main functions now let's write some command to make it work. Since printing hello world, is believed to be the basics of a solid foundation, we shall print hello world as our first program. So to print we shall use the Println function from the fmt package.

fmt.println()

To print a word or sentence we shall write it inside the parenthesis with single or double quotes on it. To do any mathematical operations, we shall not provide any quotes.

package main

import "fmt"

func main(){
fmt.Println("Hello World!")
}

Now that we wrote our first program let's analyse what we've written. So as said first we declared our main package, then we've imported the fmt package, we have removed the math package as we are not using it now. Keeping unused package, variables or functions generated error. Then we have declared our main function which is the entry point of every program. Inside our main function we have used the Println function from the fmt package to print hello world. Now the Println function prints and sends the cursor to the next line. If you have other print statement and you don't want it to go to the next line us Print instead of Println. Now according to our analysis our program must print Hello World. If u are using a text editor, make sure to save your file, open up terminal, navigate to the folder in which your source code is saved and type in

go run sourcecodefilename.go

Before running this command make sure to save your file as a .go file

Output :

Hello World

Try it Yourself

Now that you have printed hello world try printing these:

Your name and your profession in same line using two different statements. (Hint : Use two print statement)
Your name and your profession in different line.
The value of : 6 .0/ 2.0 (2.0*3.0)

Variables

Now that you know how to print statements let's try storing data. Now variables are like a container that stores data which might change in the future. Variables can store numbers, sentences, characters, arrays, objects, etc.

Let's learn how to declare a variable. Variable declaration is simple. We need to use the var keyword, followed by a name. This name can be anything from an alphabet to a word. We cannot use numbers, or special symbols as variable names, to store data. Given below is an example of how to declare a variable and store values to it.

var a = 10
var decimal = 45.6
var Word = "Hello World"

Now that we know how to declare a variable and initialize it let's learn how to declare a variable and assign it's value later.

var a int
a = 5

You must be wondering why have I written the keyword int after the variable name. Well in our previous example where we declared the name of our variable and assigned it a value immediately, our compiler was seeing the value and understanding what type can the variable hold. By what type a variable can hold, I mean one variable can hold data s of only one type that is either integers (numbers without decimal), floating-point numbers (numbers with decimals), string (anything within double quotes), etc. We shall learn more about these later. So as of now we need to know that when we are declaring a variable we must also mention it's type. We use int for integer, float for floating point, string for string type. Here's an example:

var a float
var b int
var c string

However, what if we assign values of other type to these variable. When we are assigning values of int to float, the compiler will implicitly change the integer to float, but while doing the vice versa, we shall get the error, as integer variables are only capable of storing numbers without decimal.
You can however explicitly type case it and store it, but then it would store till the decimal and not after the decimal.

var a float
a = 1 // No error
var b int
b = 4.2 // Error 
var c float
c = int(2.3) //No error as explicit typecasting 
//c stores 2 as int not capable of storing  after decimal

However if you have the values ready and want to assign to the variable right away without using var or declaring the type, well we have some syntactical sugar for that! Just write the variable name followed by := and the value.

d := 45
f := 4.6
g := "Hello World"
// We don't have to declare the type or use var keyword

Previously we had seen how to add values to these variables now let's learn how to perform arithmetic operations with those:

a := 2
b := 3
var c int 
c = a+b // add
var d int
d = b-a // subtract
var e int
e = a*b //multiply
var f int
f = b/a //divide
var g int
 g = 4/6 +(a*b) * e /c //mixed operation

Now to print variable we don't need quotes, we just write the variable name in the parenthesis.

fmt.Println(a) // a is a declared variable with some value in it

Great ! We now know how to score values in variable, declare variable, initialize variable, add values of other types into it, and print it.

Try it Yourself:

Now that you know how to work with variables try these:

Declare two variables with values 3 and 5 respectively, and interchange their value using a third variable, and Print the result (Hint : If a was 3 and b was 5, the final result should be a = 5 and b = 3)
Declare two variables with value 4 and 6 and interchange their values without using a third variable, and Print the result.
Declare two variables of int type and assign float values to it by typecasting, and Print the result. (Hint : a = int (3.4))

Summary :

In this part we've learned about how to write a go program. We have written our first go program, by printing hello world. Then we've learned about variables and different functions. In the next part we shall go over : Constants, user input, conditional structs, loops, functions, structs.

Thanks for reading

Thank you for reading!
Follow us on Twitter for more tech blogs.

Until next time,
Arindol

Flask Blog Tutorial #1: Getting Started

GeekTech — Wed, 02 Feb 2022 14:53:07 +0000

Howdy Geeks! 👋

I will build a web app alongside this article and this will act as a guide as I would share my struggles and we will debug as well.

Let's git this shii! 🚀

What is Flask?

Flask is a python framework that is used to create microservice web applications. It aims to keep projects simple but extensible and it won't decide for you, i.e. It allows you to create functionalities and has fewer packages or tell you what type of database to be used in a project.

Virtual Environment

In python, before doing anything. It is advisable to create a virtual environment and use it to install frameworks so your project folder looks neat.

To do so,

Python3 -m venv name_of_virtual_enviroment

name_of_virtual_enviroment should be replaced by the name you choose for your virtual environment (env or myenv or venv). In this article, I will call mine venv.

To activate the created virtual environment:

For windows OS

venv\Scripts\activate

For Mac OS

 venv/bin/activate

This activates the virtual environment, and you can now install packages for your projects.

*NB: Do this in your project folder. *

Flask Installation

To do this:

 pip install Flask

Flask is now installed! You are a flask developer!

Now, onto your code

Create a python file and name, app.py.

This file will be like an entry file which will lead to other codebases in the projects.

Write this in your app.py file:

from flask import Flask

app = Flask(__name__)

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

Then run it by doing on your terminal:

python app.py

You should see this:

Click on the URL on your terminal and you should see this

We see this because we have created no routes for home or index, so let's do that right away.

Creating Routes

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

This will create a route and will return ** Hello World ** when we run the URL again.

Kill your terminal and run python app.py again, then you will see it.

It's a pain in the ass to always restart the terminal to see your recent changes on your localhost right? An easy way to do this is by adding a debug mode.

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

app = Flask(__name__)
app.debug =True

Anyone would suffice. Restart your terminal and whatever change you make will automatically update on the web.

Templating your index file

Normally we do not return strings, we return templates. Flask uses **
Jinja templating**.

Jinja Templating

In your application, you will use templates to render HTML, which will display in the browser. In Flask, we configured Jinja to auto escape any data that is rendered in HTML templates. This means that it’s safe to render user input; any characters entered that could mess with the HTML, such as < and > will be escaped with safe values that look the same in the browser but don’t cause unwanted effects.

from flask import Flask, render_template

We have imported render_template, which is a flask package.

Now, let's return it so it shows on our localhost.

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

What did we just do?

We just rendered an HTML template in your python file. Cool, right?

Creating template folder

Create a template folder and an HTML file will name it home.html as stated in the previous code and create another file named layout.html

Write the following code in your layout file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Flask Blog</title>
</head>
<body>
    {% block body%}{% endblock%}
</body>
</html>

And add this code to your home.html:

{% extends 'layout.html' %}

{% block body %}
    Home
{% endblock %}

This will be your result:

Bootstrap installation

We would use the bootstrap CDN instead of flask-bootstrap because flask-bootstrap limits us and it is complex to use. Use this link to understand bootstrap in flask better: https://youtu.be/IRNMEML3RoA

Copy this code and paste it after the title tag in your layout.html like this:

 <title>My Flask Blog</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Next, copy the JavaScript code and paste it above the ending body tag like this:

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>

Bootstrap should be enabled. Reload and you will notice changes such as a change in fonts and no padding.

NavBar

The NavBar should show on every route page so it will be added to the HTML layout file. Create a folder under templates folder named includes then create a file named _navbar.html and it should look like this:

Add this code to _navbar file:

<nav class="navbar navbar-default">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">My Flask BlogApp</a>
      </div>
      <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li><a href="/">Home</a></li>
          <li><a href="/about">About</a></li>
          <li><a href="/articles">Articles</a></li>
        </ul>
      </div>
    </div>
  </nav>

Then include the navbar file in your layout file and wrap the body in a container class.

{% include 'includes/_navbar.html' %}
    <div class="container">
        {% block body%}{% endblock%}
    </div>

Refresh and you notice that the content now has padding.

The about and articles links won't work because we have not created the routes.

Home routes

Let's finish our home route

{% extends 'layout.html' %}

{% block body %}
    <div class="jumbtron text-center">
        <h1>Welcome To BlogIt!</h1>
        <p class="lead"> This is a blog application built on the Python Flask Framework and users can upload articles.</p>
    </div>
{% endblock %

This should be your result so far:

Yeah, I decided to give it a name.

About routes

Let's create a route for our about page

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

And create our HTML file

{% extends 'layout.html' %}

{% block body %}
    <h1>About Us</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est aperiam aspernatur facilis distinctio commodi maxime repellendus recusandae, beatae nihil molestias voluptatum, itaque possimus porro, eum praesentium saepe maiores repudiandae ea.</p>
{% endblock %}

Refresh and check about page.

Article routes

We would be using dummy data to display our articles page. First, let's create our routes.

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

Then, create our dummy article data. Create a file called article_data.py

Add some dummy data in it like this:

def Articles():
    articles = [       
        {
            'id': 1, 
            'title': 'First article',
            'body': 'lorem ipsum adhdyj gdh gsshh hu gdh gsh asgasd sdivvvvFVUvjusd cgibsdjhbcu',
            'author': 'Sophia Iroegbu',
            'date_created': '26-01-2022'
        },
        {
            'id': 2, 
            'title': 'Second article',
            'body': 'lorem ipsum adhdyj gdh gsshh hu gdh gsh asgasd sdivvvvFVUvjusd cgibsdjhbcu',
            'author': 'John Doe',
            'date_created': '25-01-2022'
        },
        {
            'id': 3, 
            'title': 'Third article',
            'body': 'lorem ipsum adhdyj gdh gsshh hu gdh gsh asgasd sdivvvvFVUvjusd cgibsdjhbcu',
            'author': 'Mary James',
            'date_created': '26-01-2022'
        },
    ]


    return articles

Afterward, import it and add it to your article route in your entry file, app.py. It should look like this:

from flask import Flask, render_template
from article_data import Articles

app = Flask(__name__)

Articles = Articles()

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

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

@app.route('/articles')
def articles():
    return render_template('articles.html', articles = Articles)

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

Next, we will create a function that will loop through our data in article_data and display the article titles on the articles page.

{% extends 'layout.html' %}

{% block body %}
  <h1>Articles</h1>
  <ul class="list-group">
    {% for article in articles %}
      {{article.title}}
    {% endfor %}
  </ul>
{% endblock %}

Then wrap the articles in an unordered list of items and each title in an ordered list.

  <h1>Articles</h1>
  <ul class="list-group">
    {% for article in articles %}
      <li class="list-group-item">{{articles.title}}</li>
    {% endfor %}
  </ul>

You should have something like this:

Next wrap each article title to a link

{% for article in articles %}
      <li class="list-group-item"><a href="article/{{article.id}}">{{article.title}}</a></li>
    {% endfor %}

Refresh and you'd notice the change in title color and if you click any one, you'd see an error that is because we haven't created routes to display an article by id.

Display article route

@app.route('/articles/<string:id>/')
def display_article(id):
    return render_template('article.html', articles = Articles)

What we did was to specify the type of data we want to receive then use received data to query to the database and fetch the article by id. Since we are not using any database yet. Let's pass the id in the display articles routes like this:

@app.route('/article/<string:id>/')
def display_article(id):
    return render_template('article.html', id=id)

Refresh and click an article link, you should see an Id on the page.

When we implement a MySQL database, we will display the full article.

Congratulations, you just took a huge step in creating your first flask blog web app! You are officially a developer 🚀

Onto the next feature!

Source code

Like I said earlier, I am coding alongside this article so the source code is available on my GitHub: https://github.com/Sophyia7/flask-blog-app

You can fork and make some changes if you wish, it's 100% open source.

Thank you for reading!

Until next time,

Sophia Iroegbu.

30 Javascript animation libraries for 2022

GeekTech — Fri, 28 Jan 2022 15:50:15 +0000

Howdy Geeks! 👋

Animation makes us be able to tell stories and communicate emotions and ideas in a unique way. Here are 30 JavaScript animation libraries to use in your projects today.

1. Greensock

A JavaScript library for building high-performance animations that work in every major browser

2. VelocityJS

Velocity is a lightweight animation engine with the same API as jQuery's $.animate()

3. Lax.js

Simple & lightweight vanilla javascript plugin to create smooth & beautiful animations when you scroll!

4. Rellax.js

A buttery smooth, super lightweight, vanilla javascript parallax library

5. three.js

An easy to use, lightweight, 3D library with a default WebGL renderer.

6. wow.js

Reveal Animations When You Scroll.

7. Chocolat.js

Free lightbox plugin.

8. Animate on Scroll

Animate on scroll library to reveal animations when You scroll.

9. TiltJS

A tiny requestAnimationFrame powered 60+fps lightweight parallax hover tilt effect for jQuery.

10. Rough Notation

Rough Notation is a small JavaScript library to create and animate annotations on a web page

11. tsParticles

A lightweight library for creating particles, an improved version of the abandoned and obsolete particles.js

12. Particles.js

A lightweight JavaScript library for creating particles

13. mo.js

The motion graphics toolbelt for the web

14. Lightbox2

A small JS library to overlay images on top of the current page.

15. Slick

Fully responsive carousel

16. Barba.js

Create fluid and smooth transitions between your website’s pages.

17. Locomotive Scroll

A simple scroll library that provides detection of elements in viewport & smooth scrolling with parallax.

18. Owl Carousel

Free responsive jQuery carousel

19. SwiperJS

Free, Open Source, Modern Slider without jQuery. Available for Vanilla JS and all modern frameworks like React, Vue, Angular etc.

20. Splide

Free, pure JS library for carousels and sliders

21. Simple Parallax

The easiest way to get a parallax effect with javascript

22. Kute.js

KUTE.js is a JavaScript animation engine for modern browsers.

23. Granim.js

Create fluid and interactive gradient animations with this small javascript library.

24. Popmotion

Simple animation libraries for delightful user interfaces.

25. Vivus

Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearence of being drawn.

26. Typed.js

A JavaScript Typing Animation Library.

27. Progress Bar JS

Responsive and slick progress bars with animated SVG paths.

28. AnimeJS

Lightweight JavaScript animation library with a simple, yet powerful API.

29. AniJS

A Library to Raise your Web Design without Coding

30. Remotion

This is not an animation library per se but you can use this to make videos by writing Javascript code.

Thank you for reading!

Until next time,
Abhiraj

DEV Community: GeekTech

5 packages to level up your React code

Howdy Geeks! 👋

1️⃣ ES Lint

2️⃣ Prettier

3️⃣ Framer Motion

4️⃣ Formik

5️⃣ Docz

Thanks for reading!

The terminal formatting library you need in 2022

Compatibility

Installation

Getting started

Rich Print

Console Markup

Syntax

Text

Text attributes

Highlighting

Custom Highlighters

Pretty Printing

pprint method

Pretty renderable

Logging Handler

Handle exceptions

Traceback

Printing tracebacks

Traceback Handler

Prompt

Columns

Render Groups

Markdown

Padding

Padding

Progress Display

Basic usage

Syntax

Tables

Tree

Tree styles

Examples

Live Display

Basic usage

Conclusion

Flask Blog Tutorial #2: User Registration and Interacting with MySQL

Interacting with MySQL database

Flask-MySQL DB

Register form

Creating a Registration form

Redirecting

Everything you need to know about Go-Lang - #2

Constants

Your Turn

Operators

Arithmetic Operator

Relational Operators

Logical Operator

Bitwise Operators

Assignment Operators

Conditional Statements

If / Else

Switch case:

Nested

Your Turn

Loop

Nested

Your Turn

Struct

Your Turn

Summary

Thanks for Reading

30 games you can play to learn to code

Howdy Geeks! 👋

1. JS Robot

2. Elevator Saga

3. WarriorJS

4. Untrusted

5. Code Monster

6. JavaScript Fight Club

7. Yare

`pprint` method

Howdy Geeks! 👋