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

# Introduction
Chrome provides a number of extensions for developers to take advantage of when making a website. 

Let’s add a few of them to Chrome and learn how to use them.


# React Chrome extension

[React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi/) s a web browser extension for Chrome available in the Chrome Web Store that helps us to visualize our component tree to see, add, and modify component props in real-time right in the web browser.

It also has a profiler you can use to see how often a particular component gets re-rendered and how long each render takes. If our application seems sluggish for certain interactions, we can use this tool to help identify where in our component tree the delay is coming from. Having this information will help us pinpoint what part of our application needs to be optimized for performance.

# GA Debug Chrome extension
If we use Google Analytics, they have made a [Google Analytics Debugger](https://chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna) we can get in the Chrome Web Store, which lets us turn on the Google Analytics debug feature that displays the analytic information in the web browser console window. The nice thing about having the web browser extension installed is that we can turn the feature on and off without having to modify the Google Analytics settings in our code.

If you are not seeing the results you are expecting from our application in the Google Analytics dashboard, we can use the Google Analytics Debugger extension to make sure that our application is actually sending the analytics data that we think it is.

# Debug CSS Chrome extension

The last developer tool we’ll mention here is one that can significantly help us with CSS layout issues. The [Debug CSS chrome](https://chrome.google.com/webstore/detail/debug-css/igiofjnckcagmjgdoaakafngegecjnkj) extension, also available from the Chrome Web Store, will outline every displayed HTML element in the web browser when activated. This lets us visually see how our margins, padding, and width settings are affecting our layout.


Holding the “Ctrl” or “Command” key while hovering over an element will also display basic information about that element.

# Practice
Once you have all the extensions installed, go ahead and run the following code widget and open the link where your app is found in a new tab so that we can use our extensions. Don’t forget to add your Tracking ID to run Google Analytics. 

Learn how to use Chrome extensions for a better developer experience in Python with Transcrypt.

Chrome Extensions

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

Chrome Extensions

Introduction

React Chrome extension