The world’s leading publication for data science, AI, and ML professionals.

Landing Code: Applying Landing Page into Jupyter Notebook

Introducing a new concept in interactive Python programming

Figure 1. Highlight of Landing Code (Image by Author, Unsplash, IRA Design and Manypixels)
Figure 1. Highlight of Landing Code (Image by Author, Unsplash, IRA Design and Manypixels)

DATA VISUALIZATION

There are many options to compile your Python code. You can run it in Terminal, IPython, Spyder, Jupyter Notebook, etc. If you want an interactive compiler, maybe you will choose Jupyter Notebook. But, IPython (short term for Interactive Python) is not a bad option.

There are two types of IPython you can choose, IPython Shell and IPython Notebook. To open IPython Shell, you just write ipython in terminal and type ipython notebook to open IPython Notebook. So, what is the difference between IPython Notebook and Jupyter Notebook? I am not sure to answer it. But, if you launch IPython Notebook via terminal, you will be suggested to type jupyter notebook, not ipython notebook, as shown in Figure 2. I think IPython Notebook is migrating and merging with Jupyter Notebook.

Figure 2. IPython notebook in Terminal (Image by Author)
Figure 2. IPython notebook in Terminal (Image by Author)

The new alternative is Jupyter Lab, but I am not familiar with it. I am more convenient with the Jupyter Notebook. Maybe, I will write a story about it in the future.

Main Goal

In this story, I will share with you a new concept in interactive coding with Python. I introduce to you Landing Code, an application of Landing Page in website framework into Jupyter Notebook. You can see the highlight of the Landing Code I have made in Figure 1.

Yups, I will share how to build a Landing Code in your Jupyter Notebook (hereafter, Jupyter). It will give you a new experience in interactive Python coding and feel a new atmosphere in presenting your code in a new way.

Before we build a Landing Code, I want to tell you about the concept of building it. The landing Code is built in Jupyter cell, in the type of Markdown. I have explained some cell types in Jupyter; you can review it in the following link.

How Can I Customize Jupyter Notebook Into Dark Mode

Problems and Solutions

We will face some issues in building Landing Code. Of course, I will give you alternative solutions to deal with it. First, we can not run CSS in Jupyter cell, only HTML (Markdown). It is a big problem, I think. But it is okay. We will cover it with simple graphical design skills. Because we can not use CSS, so we can not build a responsive Landing Code like Landing Page. Again, we will solve it using a fancy HTML and graphical design paradigm, like using a gradient, shadow effect, white space, unity concept, etc.

Preparing Elements

We will build a Landing Code and some referenced pages that are provided in the Landing Code page. Landing Code consists of Header, Main Image, Main Body, and Footer, whereas the referenced pages are consist of Header, Main Image, and some Code cell type. To achieve it, we need some elements. The Header and Main Image elements we need to build the Landing Code is shown in Figure 3.

Figure 3. Header (red box) and Main Image (gray box) elements in Landing Code (Image by Author and IRA Design).
Figure 3. Header (red box) and Main Image (gray box) elements in Landing Code (Image by Author and IRA Design).

I create Header text (LOGO, Home, Data Science, Machine Learning, Programming) elements using HTML (including hyperlink) and create the rounded blue button in Home using Inkscape (vector graphics software like Adobe Illustrator). Text in Main Image elements is generated by HTML and the image is downloaded from IRADesigns. Thanks to IRADesigns, that provides many free illustrations.

The main Body element is constructed by presenting 6 articles with its title, picture, and subtitle, as shown in Figure 4. Six pictures from each article are downloaded from Unsplash with the keyword "Data".

Figure 4. Main Body element in Landing Code (Image by Author and Unsplash with keyword "Data").
Figure 4. Main Body element in Landing Code (Image by Author and Unsplash with keyword "Data").

I create a simple footer for my Landing Code using simple HTML, as shown in Figure 5.

Figure 5. Some part of Main Body in Landing Code and Footer element (Image by Author and Unsplash with keyword "Data").
Figure 5. Some part of Main Body in Landing Code and Footer element (Image by Author and Unsplash with keyword "Data").

I create three pages, Data Science page, Machine Learning page, and Programming page for the referenced pages. The Header and Main Image elements for them are shown in Figure 6.

Figure 6. Header and Main Image of each referenced pages in Landing Code (Image by Author and Manypixels).
Figure 6. Header and Main Image of each referenced pages in Landing Code (Image by Author and Manypixels).

The Header and Main Image of each referenced pages are constructed by the same concepts in the Landing Code page. I download the images from [Manypixels](https://www.manypixels.co/gallery/). Thanks to Manypixels. After Header and Main Image, the referenced pages are followed by Code cell, as shown in Figure 7.

Figure 7. Code cell type in Data Science page (Image by Author and Manypixels).
Figure 7. Code cell type in Data Science page (Image by Author and Manypixels).

Procedures

The first step you do to build a Landing Code is customizing your Jupyter, using CSS format, not jupyterthemes library. You need to add some codes in the Jupyter CSS file, named custom.css. You can get it in directory ~/.jupyter/custom/custom.css. If you can not find directory .jupyter, maybe it is hidden by your setting. You can solve it by pressing Ctrl + H to view the hidden files and directories, with prefix . (dot). And, if you did not find directory custom and file custom.css, you can create them. The code contained in the custom.css is shown in Figure 8.

Figure 8. Customizing Jupyter with CSS (Image by Author).
Figure 8. Customizing Jupyter with CSS (Image by Author).

As you see in Figure 8, the file custom.css contains any manual CSS for Jupyter page. We just write the additional or update the style here. At the beginning of this step, we will hide ln container in Jupyter, as shown in Figure 9.

Figure 9. Hide ln container in Jupyter (Image by Author)
Figure 9. Hide ln container in Jupyter (Image by Author)

You can hide ln container with adding the following code in custom.css and save it.

div.prompt,
div.tooltiptext pre {
    display:none
}

So, your updated custom.css is like in Figure 10.

Figure 10. Additional style in custom.css (Image by Author)
Figure 10. Additional style in custom.css (Image by Author)

After you save it, please refresh your Jupyter page. You will get the ln container is hidden now, as shown in the left panel of Figure 9.

The next step is to make the Cell container fit with the width of your display. You can do it by adding the following code in custom.css

.container {
    width: 100% !important;
}

To make Notebook-container, Notebook_app, and Body Header in Jupyter become white (same with the background), you can add this following code

#notebook-container {
    padding: 0px;
    background-color: white;
}
.notebook_app {
    background-color: white;
}
body #header{
    background-color:white;
}

After you add those code, you will get the new display of your Jupyter, as shown in Figure 11.

Figure 11. Customizing Jupyter with CSS (Image by Author).
Figure 11. Customizing Jupyter with CSS (Image by Author).

Next, is remove border between Cells by adding this code

#notebook {
 padding-top:0px !important; 
 padding-bottom:0px !important;
}
.container { 
 width:100% !important;
}
.end_space { 
 min-height:0px !important;
}

After applying it, you will get the new look as shown in Figure 12. Please compare it with Figure 10 and 11.

Figure 12. Customizing Jupyter with CSS (Image by Author).
Figure 12. Customizing Jupyter with CSS (Image by Author).

The next step in modifying custom.css is making the figure results in centered alignment with the display. You can see the figure generated in Figure 12 is left aligned. You can change it by adding the following code

.output_png {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
}

After saving custom.css and refreshing your Jupyter page, you will get the result, as shown in Figure 13.

Figure 13. Customizing Jupyter with CSS (Image by Author).
Figure 13. Customizing Jupyter with CSS (Image by Author).

Next, you can hide Toggle Header and Toggle Toolbar by pressing View (at the top-left panel). Then press Toggle Header and Toggle Toolbar. After doing it, you will look at the Jupyter, as shown in Figure 14.

Figure 14. Hiding Toggle Header and Toggle Toolbar in Jupyter (Image by Author).
Figure 14. Hiding Toggle Header and Toggle Toolbar in Jupyter (Image by Author).

Here is the full styles in custom.css

In the next steps, we will discuss more in HTML frame. In Landing Code page, I set the Header, Main Image, Main Body, and Footer in one div tag. To create div, you can use the following code

<div>
    Content of Your Div
</div>

All of the element backgrounds are designed in Inkscape. Figure 15 shows the main board for Landing Code.

Figure 15. Landing Code design (Image by Author and IRADesign)
Figure 15. Landing Code design (Image by Author and IRADesign)

Do you get the idea? Yups, every element that is not shown in Figure 15, is created in HTML. For example, I create Header text by combining button and hyperlink tag. You can use this code to create it

If you want to use only a hyperlink tag, it is okay. Tag is used to insert tab. Why do we need it? The answer is we can not use CSS in Jupyter cell. Only HTML :D. You need to copy the Jupyter cell code with a type of Markdown by pressing Cell -> Cell Type -> Markdown. The result is shown in Figure 16.

Figure 16. Header element in Landing Code (Image by Author)
Figure 16. Header element in Landing Code (Image by Author)

I add some break tag
after to make it more clearly. If you see more detail, you can not see text Home in Figure 16. You can not see it because the color of the text Home is white. You need to insert the main board design (Figure 15) in the cell using this code.

You can see that I insert many break tag in line 13. The reason is the same as previously, we can not use CSS in Jupyter cell. Yups, the Landing Code concept is a tricky one. If you run it, you will get the result, as shown in Figure 17.

Figure 17. Header element in Landing Code (Image by Author)
Figure 17. Header element in Landing Code (Image by Author)

After that, you need to create welcoming text with this code.

The result is shown in Figure 18.

Figure 18. Header and Main Image element in Landing Code (Image by Author and IRADesign)
Figure 18. Header and Main Image element in Landing Code (Image by Author and IRADesign)

Next, how to create the Main Body (Figure 4)? I use a table tag to create it. I create 2 tables. For each table, it has consisted of 1 row and 3 columns. You can use this code to create it.

You can add the code to the previous code, after break tag and before the closing tag of div. The result is shown in Figure 19. I will provide you with the full version in the next paragraph.

Figure 19. Main Body element in Landing Code (Image by Author and IRADesign)
Figure 19. Main Body element in Landing Code (Image by Author and IRADesign)

You can create the next table with the same code. After that, you need to create a simple Footer using this code

<span style="color: white"> Copyright &amp;#169; 2020. Allrights reserved. </span>

Here is the full code to create Landing Page

After you run it, you will get a result like in Figure 20.

Figure 20. Landing Code page 1 (Image by Author, IRADesign, and Unsplash)
Figure 20. Landing Code page 1 (Image by Author, IRADesign, and Unsplash)

Next, you need to create the referenced pages, named data_science.ipynb, machine_learning.ipynb, and programming.ipnyb. Here, I just share with you the code for one page. Here it is

All of the materials, including design for the page, pictures, and .ipynb files are uploaded in my GitHub. You can visit via this link

rizman18/landing_code

You can watch the highlight preview in YouTube

Conclusion

Landing Code is a new concept in interactive programming (Python or R). It is a part of our preparation to construct the future because technology is always developing. It is not effective enough because we can not run CSS in the Jupyter cell. In this story, it is a little effort to make more interactive programming using Jupyter Notebook.

Are you interested in reading my other stories? You can visit my profile here. If you are interested in creating Landing Code but don’t have time, you can reach me at Fiverr.

If you liked this article, here are some other articles you may enjoy:

Python Data Visualization with Matplotlib – Part 1

5 Powerful Tricks to Visualize Your Data with Matplotlib

Matplotlib Styles for Scientific Plotting

Creating Colormaps in Matplotlib

Customizing Multiple Subplots in Matplotlib

That’s all. Thanks for reading this story. Comment and share if you like it. I also recommend you follow my account to get a notification when I post my new story.


Related Articles