reStructuredText Markup Specification

reStructuredText Markup Specification

The reStructuredText_ Cheat Sheet: Syntax Reminders

Get HTML color codes, Hex color codes, RGB and HSL values with our color picker, color chart and HTML color names

https://htmlcolorcodes.com/

How to limit width of table to within screen width with html and css?

How to limit width of a wide table to within screen width with html and css?

Solution: Do the following 2 things

1. <table style='table-layout: fixed'>

2. Set width for every columns in the first row (you can leave the last column, or any one column of all)

<thead>

  <tr>

    <th style='width: 5%; >blah...</th>

    <th style='width: 10%; >blah...</th>

    <th style='width: 25%; >blah...</th>

    <th style='width: 25%; >blah...</th>

    <th>blah...</th>

  </tr>

</thead>

That is all.

How to find the differences between two similar html (or other) code?

https://diffchecker.com

How to automatically format/beautify html code which was not indent properly and new line properly, or validate html code with some missing elements?

Validate

https://validator.w3.org/


Beautify

https://github.com/htacg/tidy-html5

https://freeformatter.com

Seeing the web page at once, after you copy html, css, javascript there

https://codepen.io

How to convert a .rst file into a .html file?

If docutils is not installed, install it with the following command -

#python -m pip install docutils

===================================================

Method 1 (better than Method 2)

https://docutils.sourceforge.io/docs/user/tools.html#rst2html5-py

# rst2html5.py --help

# rst2html5.py <source_rst_file_name.rst> <output.html>


===================================================

Method 2

https://www.geeksforgeeks.org/restructuredtext-rst-file-to-html-file-using-python-for-documentations/

The following python script will convert 'restructured.rst' into 'output.html'


import docutils.core

docutils.core.publish_file(
    source_path ="restructured.rst",
    destination_path ="Output.html",
    writer_name ="html")

How to build HTML emails with Bootstrap?

https://bootstrapemail.com/docs/introduction

export pandas dataframe to html and appy css styles

 export pandas dataframe to html and appy css styles

 

 Ku Tang Pan

I found the most precise, and frankly the easiest way of doing it is skipping the styling, to_html() etc. and converting the DF to a dictionary using the df.to_dict() method.

Specifically what gave me trouble, was displaying the styled pandas html in an outlook email, as it just wouldn't render properly with the css mess that pandas was producing.

iterate over the dict and generate the html there by simply wrapping keys/values in the tags that you need, adding classes etc. and concatenate this all into one string. Then paste this str into a prepared template with a predefined css.

For convenience I found it's useful to export the same df twice, using .to_dict() and to_dict('index') to first fill in the columns and then work your way down row by row. Alternatively just have a list of relevant column names.

dict_data = [df.to_dict(), df.to_dict('index')]

return_str = '<table><tr>'

for key in dict_data[0].keys():
    return_str = return_str + '<th class="header">' + key + '</th>'

return_str = return_str + '</tr>'

for key in dict_data[1].keys():
    return_str = return_str + '<tr><th class="index">' + key + '</th>'
    for subkey in dict_data[1][key]:
        return_str = return_str + '<td>' + dict_data[1][key][subkey] + '</td>'

return_str = return_str + '</tr></table>'

and then return_str goes into the template.

 

Working with Django Templates & Static Files

https://www.digitalocean.com/community/tutorials/working-with-django-templates-static-files

 

Unclosed Tag Checker

 Unclosed Tag Checker

https://www.aliciaramirez.com/closing-tags-checker/

How to list all html files in a directory recursively sorted by file size?

 How to list all html files in a directory recursively sorted by file size?

$du -a -h | sort -nr | grep 'html' | less

Note:

1. '-a' means all files and directories, not just directories.

2. '-h' means human readable.

3. '-n' means numeric sort.

4. '-r' means recursive.

Vi - How to Automatic Indent?

 Vi - How to Automatic Indent?

Windows

In Vim folder, create a text file named '_vimrc' with the following contents -

filetype plugin indent on

autocmd FileType html setlocal shiftwidth=2 tabstop=2

autocmd FileType python setlocal expandtab shiftwidth=4 softtabstop=4

How to make your html5 animation clickable?

How to make your html5 animation clickable?

After you publish your animation in Adobe Animate, you get an html file.

Open the html file, in the html body, find the '<canvas> ... </canvas> part. Insert '<a href="..."> in the front of <canvas>, and put '</a>' after '</canvas>'. It is so easy! :)

A video can be watched in Chrome but not in IE, or in IE but not in Chrome

A video can be watched in Chrome but not in IE, or in IE but not in Chrome


1   <video width="480" height="300" controls autoplay>
2    <source src="https://app.cicscanada.com/video/english/homepage/cics_50th_anniversary_gala.mp4" type="video/mp4" />
3   <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="480" height="300">
4    <!--[if !IE]>-->
5    <object type="application/x-shockwave-flash" data="http://app.cicscanada.com/video/player/player.swf" width="480" height="300">
6    <!--<![endif]-->
7    <param name="movie" value="http://app.cicscanada.com/video/player/player.swf" />
8    <param name="wmode" value="transparent" />
9    <param name="bgcolor" value="#FFFFFF" />
10   <param name="quality" value="high" />
11   <param name="allowFullScreen" value="true" />
12   <param name="allowscriptaccess" value="always" />
13   <a href="http://www.adobe.com/go/getflash">
14   <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
15   </a>
16   <param name="flashvars" value="vdo=/video/english/homepage/cics_50th_anniversary_gala.flv&amp;autoplay=true" />
17   <!--[if !IE]>-->
18   </object>
19   <!--<![endif]-->
20   </object>
21  </video>

IE plays flv, while Chrome plays mp4.

Line #16 is for IE. You should not put 'https://app.cicscanada.com' before the file path '/video/english/homepage/...', otherwise, IE would not play the video.

Line #2 is for Chrome. You have to put 'https://app.cicscanada.com' before the file path '/video/english/homepage/...', otherwise, Chrome would not play the video.

(THE END)

Alternative to Adobe Dreamweaver

Alternative to Adobe Dreamweaver

BlueGriffon

How to convert css in head to inline css?

How to convert css in head to inline css?

Solution:

Paste the whole html/css code into -

http://premailer.dialect.ca/

Mobile Friendly Newsletter

https://www.campaignmonitor.com/dev-resources/guides/mobile/

How to Convert Flash Video into HTML5 Video?

http://www.sothink.com/tutorials/how-to-convert-flash-to-html.htm

Step 1
Load the relevant SWF into Sothink SWF Decompiler for preview.

 Step 2
Click on Export HTML5 button to launch the relevant export wizard window.

 You can click on Browse button to define the output directory for new .html file.

 Step 3
Click on OK button to start the conversion process.

 Step 4
After the exporting process has been finished, please go to the directory you specified to preview .html file.

 Let's preview the exported .html in browser now.

 Now the whole converting process is over, it is very simple to convert Flash into HTML5 with the latest version of Sothink SWF Decompiler!  



===================================

The following method is not available any longer. The company does not support the extension any more -

https://developers.google.com/swiffy/


Under 'Use our Adobe Flash Extension', click 'Get the Extension'.
Install the extension. You will see a new sub-menu item 'Export as HTML5 (Swiffy)' under 'Commands' menu in Adobe Flash.

Open your .fla file (e.g. test.fla) in Adobe Flash. Click the the new sub-menu. A browser will open, displaying a web page with your video, which has been converted from .fla. A new html file has been created, in the same folder as test.fla is, whose name is 'test.swf.html'.

Use <iframe> to include the html file. You can put the video wherever you like.

Email message in Outlook is plain text (or not see images) instead of html

Tools | Trust Centre | Email Security | Read as Plain Text,
Clear the tick in front of 'Read all standard mail in plain text'.