Giter VIP home page Giter VIP logo

brython-project-template's Introduction

brython-project-template

What is it?

This template contains the following characteristics that are likely useful when starting a new Brython-powered project.

  • The index.html embeds a loading animation to give end user a hint to be patient. This can be helpful because the first time loading of Brython is slower. (Note to Developer: The loading animation does not represent the real progress. If your website stuck with the loading animation, open the browser console to check for error messages.)
  • Although not a Brython-relevant feature, this template includes a github workflow to deploy your each push to Github Pages (After the first deployment which prepares your website into the default gh-pages branch, you need a one-time effort to enable Github Pages for your github repo nowadays Github seems to automatically create a "github-pages" environment for you, so that your website will be available to the world on https://your_github_username.github.io/your_project_name.)
  • The index.html automatically loads latest released version of Brython from CDN. You can easily switch to use the not-yet-released latest Brython source from github.
  • The index.html references bootstrap from CDN for better layout.
  • An optional browser-console simulator, useful if you are browsing from Android device. (All these can be easily comment or uncomment from the index.html.)
  • The website root directory is nested inside this project. This setup would provide better separation when you also creates virtual env .venv inside your project directory. (Otherwise you could hit a known issue.)

How to use it?

You can use this repo as a template to start your own project.

  1. Your options are:
  2. Run python3 -m http.server to start a web server, and then visit http://localhost:8000 to see it in action.
  3. Once you are familiar with this project's structure, you can modify it by changing the content between <!-- The real project content starts from here --> and <!-- The real project content ends here --> in index.html, and content inside main.py.

That is all.

Again, your website will also be available to the world on https://your_github_username.github.io/your_project_name after your pushing back to github.

Appendix: Using the loading animation only

If you already have an existing project, and you only want to use the loading animation from this project, you can add the loading animation by including this snippet into your own index.html

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<script src="https://rayluo.github.io/brython-project-template/loader.js"></script>
<script type="text/javascript">update_loader_message("Loading System...")</script>

brython-project-template's People

Contributors

iansparks avatar isparks-tg avatar rayluo avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

Forkers

iansparks

brython-project-template's Issues

Is it possible to have the loading effect semi-opague?

Hi @iansparks , do you know whether it is possible to have the loading effect semi-opaque, so that the real page content is visible for the end user to read? This way is the loading time won't be wasted in waiting, but allow the end user to read some instruction etc..

Besides, currently the real page would still be shown on the screen for a very short time (roughly less than a second), before the full-screen loading effect kicks in. And later it would be shown again. I suppose a semi-opaque loading effect would make all those transition more natural.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.