google Codelab

 Codelabs are interactive instructional tutorials, which can be authored in Jupyter notebooks and markdowns using some simple formatting conventions. You can also author codelabs using Google docs. This repo contains all the tools and documentation you’ll need for building and publishing your own codelabs.

Demo

What's special about this tool?

  • Powerful and flexible authoring flow via Jupyter notebooks and markdowns
  • Optional support for authoring in Google docs
  • Ability to produce interactive web or markdown tutorials without writing any code
  • Easy interactive previewing
  • Usage monitoring via Google Analytics
  • Support for multiple target environments (kiosk, web, markdown, offline, etc.)
  • Support for anonymous use - ideal for public computers at developer events
  • Looks great, with a responsive web implementation
  • Remembers where the student left off when returning to a codelab
  • Mobile friendly user experience

Can I use this to create my own codelabs and serve my own codelabs online?

Yes, this repo can be used by anyone to author their own codelabs and to serve up their own codelabs on the web.

How to prepare your Tutorial

Setup Jupyter

We chose jupyter notebooks as an ideal choice for preparing tutorials because it integrates markdown with code, images and million other things. If you do not have a jupyter environment setup locally, you can choose Colab or Binder to prepare your notebook on cloud for free.

Create Tutorial

Write down your tutorial in colab as per these markdown instructions.

How to setup your own codelab site

This step is a one-time setup process. We will use GitHub to maintain and host our codelab site for free.

Clone

Login to your git account and go to this site and click Use this template button.

clone

Name

Give your site a name and click on Include all branches.

rename

Let it bake

Wait for 3-4 minutes till this yellow dot becomes green. Git Actions is preparing your site in the background. Go to Actions tab to see the process.

bake

How to Customize your site

You can customize both landing page and codelabs. Codelab customization is mainly done via tags that we provide during the creation of jupyter notebook based tutorials.

You can customize the following items in landing page by simple modifications.

  1. Change Header and Logo
  2. Add Category
  3. Add View
  4. Change Footer

Change Header and Logo

  1. To change header and main page content, go to site > app > views > default and change index.html content as well as view.json contents accordingly.
  2. To change logo, go to site > app > images and replace my-logo.svg with your logo.

Note: assuming the basic knowledge of html formattings. scope is mainly limited to find and replace things anyway.

Add Category

  1. Go to site > app > styles > _categories.scss and add your category at the bottom in this format: @include codelab-card(['gitaction'], $color-weave-green, 'gitaction.svg'); where gitaction is the category.
  2. Go to site > app > images > icons and add svg icon with the same name as your category.
  3. To use it, while creating codelab, add this category in the categories mata tag.

Add View

  1. site > app > views and duplicate the medium folder.
  2. rename the folder name to any name you want for your view.
  3. Edit its json accordingly and add any image with the same name as your view.

Note: Refer to this medium folder for guidance, and delete it afterwards if required.

Change Footer

To change footer, go to site > app > views > default and change index.html content accordingly.

How to add new Codelabs

To add a new codelab to the codelab site, pull the repo, add the notebook and push it back to the master.

Pull the repo

Pull the repo using git pull origin master where origin is pointed to your repo where codelabs site is hosted. If repo is already there, you can opt for git pull --rebase origin master instead.

Add tutorial notebook

Add your tutorial notebook in the _notebook folder. Make sure the notebook format is following the codelab markdown guidelines and the extension is .ipynb.

Push the repo

Push the updated repo changes to master branch using the standard set of add -> commit -> push chain. e.g. you can use git add . && git commit -m 'new build' && git push origin master to push the changes.

Git actions workflow named CI would automatically start deploying latest changes of the master branch. You can check the status in Actions tab of your git repo.

To access the codelabs site, go to your github pages URL. The typical URL format is https://<user_name>.github.io/<repo_name>.

Verify the functionality and modify/enhance the process as per requirements.

Important resources

  1. Codelab Formatting Guide
  2. Google Codelabs site
  3. Codelab Tool Official GitHub
  4. Check out this excellent tutorial
  5. Check out this another tutorial

Acknowledgements

Google Codelabs exists thanks to the talents and efforts of many fine volunteers, including: Alex Vaghin, Marc Cohen, Shawn Simister, Ewa Gasperowicz, Eric Bidelman, Robert Kubis, Clare Bayley, Cassie Recher, Chris Broadfoot, Sam Thorogood, Ryan Seys, and the many codelab authors, inside and outside of Google, who have generated a veritable treasure trove of content.

Comments

Post a Comment

Popular posts from this blog

Easy Text-to-Speech with Python

Image
Text-to-speech (TTS) technology reads aloud digital text. It can take words on computers, smartphones, tablets and convert them into audio. Also, all kinds of text files can be read aloud, including Word, pages document, online web pages can be read aloud. TTS can help kids who struggle with reading. Many tools and apps are available to convert text into speech. Python comes with a lot of handy and easily accessible libraries and we’re going to look at how we can deliver text-to-speech with Python in this article. Source:  https://www.youtube.com/watch?v=eiP-12qHM-c Different API’s are available in Python in order to convert text to speech. One of Such API’s is the Google Text to Speech commonly known as the gTTS API. It is very easy to use the library which converts the text entered, into an audio file which can be saved as a mp3 file. It supports several languages and the speech can be delivered in any one of the two available audio speeds, fast or slow. More detai
Read more

Flutter for Single-Page Scrollable Websites with Navigator 2.0

Image
  Single page scrollable websites are everywhere. In this website design pattern, all the content is presented in one long-scrolling layout that contains multiple sections. Visitors can scroll or jump to a section by clicking buttons of a sticky menu. This pattern is a good fit for small content such as brochure websites, software library documentation, portfolios, and landing pages that are used to convert users [ 1 ]. Designers also love this pattern because it is simple, clean, and enables cool scroll animations. Jetbrains Mono single-page scrollable website Hive docs multi-page scrollable website In this series of articles, we will explore how to build a  single-page scrollable website  using Flutter. We will benefit from the Navigator 2.0 API to provide a good navigation experience to the users. You can find the source code of this series’ sample apps on my  Github page . The implementation details of the sample apps will be explained in the following articles: Part 2: Scroll to P
Read more

Better File Storage in Oracle Cloud

Image
Use Oracle Application Express with Oracle Cloud Infrastructure REST APIs to upload, download, and manage big files in Oracle Cloud. By Adrian Png November 27, 2019 Oracle Cloud Infrastructure  provides a comprehensive suite of REST APIs for accessing and managing cloud resources. For example, administrators can use REST APIs to create and manage autonomous databases and initiate backups. Oracle Application Express (Oracle APEX)  makes working with REST easy. The  APEX_WEB_SERVICE  package, available since Oracle APEX 4.0, provides developers with a function for consuming REST APIs. Oracle APEX 5.0 introduced the  APEX_JSON  package, allowing easy parsing of JSON responses. Oracle APEX 18.1 introduced the Web Source Module (WSM), which enables developers to access REST services and use the data in APEX components such as reports, interactive reports, and interactive grids. These features, when used together with Oracle Cloud Infrastructure REST APIs, enable APEX developers
Read more