GAID

Please enter the google analytics ID for appData file.

Delve into using Transcrypt to seamlessly translate Python code to JavaScript for coherent web projects, unifying Python's back-end strengths with JavaScript's front-end flexibility.

tarball.tar.gz

ch02

ch03

ch04

ch05

ch06

ch08

ch09

ch10

ch01

ch12

ch13

ch14

ch15

ch16

ch17

ch18

ch19

ch20

ch21

ch24

ch10-2

ch06-exercise

ch12-jsx

ch19-2

ch25-copy

Python is already used in the back-end of most web-based applications. However, it does not work with the front-end of web browsers in those applications. This is where Transcrypt comes in. Transcrypt can help create more coherent web-based projects where Python is used to write the back-end and front-end. This course is primarily about using a transpiler called Transcrypt. It translates our Python code to JavaScript and then executes that JavaScript, letting us enjoy the neatness of Python with the front-end flexibility of JavaScript.

Using the Python Transcrypt Transpiler for Front-end Coding

# Using Bootstrap

Many CSS frameworks make styling applications a little easier, especially if we find graphic design challenging. We’ll take a quick look at Bootstrap, a popular CSS framework with several predefined CSS classes, which can help maintain the consistency of the visual aspects of our application. Bootstrap has a lot of features,  so for now we’ll focus on the CSS classes it has and give us an idea on how to incorporate them into our Python web application.

# Adding Bootstrap to the project

Bootstrap generally relies on a grid system for layout and uses classes to represent style attributes. To apply any mix of styles to a given element, we will add each style class that represents the attributes we want to apply. First, we need to add the Bootstrap stylesheet from the online hosted location to our `index.html` file in the widget below.

# Adding CSS to our application

We can then apply the Bootstrap classes to our Python file.

This time, our application takes on a whole new look since we are using the style theming of the Bootstrap framework, as we see in the widget.

We’ll notice that we no longer have any CSS style properties in our code. All styling is now applied using Bootstrap class names to the elements. In some ways, the classes are just shorter and easier to read versions of the style attributes we were using before. We stack the classes as needed to achieve the desired effect.

Looking at our `Edit` button as an example, we can break down what each class is doing:
```css
'className': 'btn btn-primary btn-sm mr-2'
```
- `btn`: Formats the element as a button.
- `btn-primary`: Uses the Bootstrap primary color for the button (blue).
- `btn-sm`: Uses the smaller version of a button.
- `mr-2`: Adds in a level 2 margin on the right side of the button.

In Bootstrap, some classes apply to specific types of elements, like the ones that start with `btn-` for button elements. Some classes are universal, like the ones for spacing, as in `mr` for right margins. The Bootstrap framework has a relatively short learning curve, and we can get highly styled pages without having to fight as many common CSS issues.`

We changed the code by using the HTML form element as our top-level container, then we added an HTML `div` element, and assigned the Bootstrap container class. 
This allows us to utilize the Bootstrap grid system to control the layout and move the item list out of the form itself.

We modified our list from an ordered list `ol` to an unordered list `ul`. This just removed the numbers on the list items to work better with the Bootstrap layout.




Use a CSS framework like Bootstrap with Transcrypt.

CSS Framework

Introduction

The Setup

Write a “Hello, World” Application

JavaScript Functions

Sourcemaps

External JavaScript Libraries

Intro to React

React Concepts

Cleaner Code

Managing JavaScript Packages

Package Bundler

Text Input

Lists

Forms

React Components

JavaScript Examples

CSS

Material-UI

Parcel Web Proxy

Asynchronous Requests

React Context Hook

Transcrypt Miscellany

Application Versioning

Google Analytics

Developer Tools

Appendix

CSS Framework

Using Bootstrap

Adding Bootstrap to the project