CSS only responsive Bulma 0.9.0 navbar without JavaScript. Toggle mobile menu with CSS only. No JavaScript required.

CSS only toggle Foundation accordion (collapsible content). No JavaScript required.

Implementation of reusable Vue.js component for tab panel.

Reusable Vue.js component for Semantic UI basic tabs example.

Reusable Vue.js component to extend Bootstrap navigational tabs to create tabbable panes of local content.

Reusable Vue.js component for Bulma tabs, and extend the original Bulma tabs by adding a pane to for each tab.

CSS only toggle Semantic UI dropdown. No JavaScript required.

CSS only toggle Bulma collapse. No JavaScript required.

CSS only toggle Bootstrap tab panel. No JavaScript required.

CSS only Semantic UI basic tab. No JavaScript required.

CSS only toggle Bootstrap accordion (collapsible content). No JavaScript required.

CSS only toggle Bootstrap collapse. No JavaScript required.

Toggle Bulma modal via Vue.js.

Toggle Bootstrap modal via Vue.js.

CSS only toggle Bootstrap modal. No JavaScript required.

Increase or decrease font size with buttons via Vue.js.

Get urls of video and audio of Instagram user post live videos shared to stories via Go standard regexp package.

JavaScript code for Bulma modal component. The code is extracted from Bulma official website.

Go toggle code for Bulma modal component.

CSS only Semantic UI standard accordion. No JavaScript required.

Go toggle code for Bulma dropdown component.

CSS only toggle Semantic UI modal. No JavaScript required.

CSS only Bulma tab panel implementation.

CSS only Bulma accordion (collapsible content) implementation.

Bulma accordion (collapsible content) implementation via Vue.js.

CSS only toggle Bulma modal. No JavaScript required.

Add more features to Bulma tabs via Vue.js.

Make Bulma components (message, card, etc.) to be of equal height in columns.

Fetch a public post on Blogger and extract data via goquery.

JavaScript code for Bulma dropdown menu. The code is extracted from Bulma official website.

Go toggle code for Bulma responsive navbar, dropdown menu included.

JavaScript code for Bulma responsive navbar, dropdown menu included. The code is extracted from Bulma official website.

Remove HTML inline style, i.e., remove style attribute from HTML node via Go net/html package.

CSS only toggle the color of HTML DOM element. No JavaScript required.

Access HTML data-* attributes of elements in Go/GopherJS.

Detect arrow keys pressed by users via Vue.js.

DOM manipulation - traverse all sibling elements or nodes via Dart.

DOM manipulation - traverse all sibling elements or nodes via JavaScript.

Tab panel implementation via Dart and CSS.

Tab panel implementation via JavaScript and CSS.

Accordion (collapsible content) implementation via Dart.

Modal (Popup) implementation via Dart and CSS. Modal is dialog box/popup window that is displayed on top of the current page.

Accordion (collapsible content) implementation via JavaScript.

CSS only accordion (collapsible content) implementation.

Accordion (collapsible content) implementation via Vue.js.

CSS only tab panel implementation.

Tab panel implementation via Vue.js and CSS.

Dropdown menu implementation via Vue.js and CSS.

Modal (Popup) implementation via JavaScript and CSS. Modal is dialog box/popup window that is displayed on top of the current page.

CSS only modal (popup). No JavaScript required. Modal is dialog box/popup window that is displayed on top of the current page.

Modal (Popup) implementation via Vue.js and CSS. Modal is dialog box/popup window that is displayed on top of the current page.

Build Chrome Extension with Go, compiled to JavaScript via GopherJS. This post show you how to build Chrome extension that convert the web page of Simplified Chinese website to Traditional Chinese.

Use Vue.js to manipulate HTML select element. First show how to use v-model directive to create data bindings for select element. Then use the selected option to make some animation via animate.css.

CSS rule for HTML img element to be both responsive and centered.

Test Text-to-Speech feature in Web Speech API. Not working in Chromium 57, but OK in Firefox 53.

Responsive CSS separator line in nav bar (navigation bar). The CSS divider is vertical on tablet/desktop/wide screen and becomes horizontal on mobile/small screen.

CSS only responsive nav bar (navigation bar) via flexbox. Toggle mobile menu with CSS only. No JavaScript required. No CSS frameworks (Bootstrap, Bulma, etc.) required.

Exercise to draw 3x3 grid of dots via Canvas.

Pure CSS solution for inverting (transposing) rows and columns of a HTML Table, and provide an option to toggle (original/inverted) the HTML table as well.

Select and style the first row (or n-th row) of table via CSS :nth-of-type() selector

Select and style the first column (or n-th column) of table via CSS :nth-of-type() selector

Make a responsive HTML table using div element and Bulma CSS framework.

CSS only toggle the width of centered HTML DOM element. No JavaScript required.

My favorite way to empty an array in JavaScript and why.

CSS only responsive Bootstrap navbar (navigation bar) without JavaScript. Toggle mobile menu with CSS only. No JavaScript required.

Pure CSS typing text effect. No JavaScript required.

Sequential and parallel typing text effect by Vue.js.

Sequential typing text effect by JavaScript.

Parallel typing text effect by JavaScript.

Quiz will appear at the end of YouTube video.

Show youtube video if users pass the quiz.

Web scraping - fetch HTML DOM Style Object properties via goquery in Go programming language.

CSS only toggle (show/hide) HTML DOM element without JavaScript.

Toggle (Show/Hide) HTML DOM element in JavaScript.

How to access (get/reference) DOM Element in Vue.js?

Toggle (play/pause) audio sound if users click on DOM Element in Vue.js.

Play audio sound if users click on DOM Element in Vue.js.

CSS only responsive Bulma nav bar (navigation bar) without JavaScript. Toggle mobile menu with CSS only. No JavaScript required.

Go front-end programming - online service for conversion of Traditional and Simplified Chinese via GopherJS/godom/gojianfan.

Fetch and parse a public post on Facebook and extract data via goquery in Go programming language.

Implement querySelector in goquery

Template inheritance via Go html/template package. Show how one tempalate extends from another, and also include templates, just as how we do by Python Jinja2.

How to monitor the change event of input text element in Vue.js.

Implementation of setting feature in web application via JSON, Web Storage (localStorage), and JavaScript.

Pelican static site generator - Localize theme with i18n_subsites plugin via custom Jinja2 filter. Implementation of gettext-like filter.

Example of accessing browser URL via JavaScript window.location.

Pelican static site generator - Support multilingual in Pelican theme. Translate strings according to default language of settings in the theme. (implement macro gettext)

Change browser URL without reloading web pages - Example for how to use HTML history API.

Iterate over all DOM nodes/elements via goquery in Go programming language.

Convert HTML to restructuredtext format via net/html package in Go programming language. (Not fully supported)

Get HTML title via net/html package in Go programming language.

Convert HTML unordered (bulleted) list, HTML link, and HTML image to restructuredtext format via net/html package in Go programming language.

Convert HTML unordered (bulleted) list and HTML link to restructuredtext format via net/html package in Go programming language.

Convert HTML unordered (bulleted) list to restructuredtext format via goquery in Go programming language.

Replace HTML links node with text node of restructuredtext format in a webpage via goquery in Go programming language.

Custom 404 page for GitHub Pages. In the 404 page, a redirect link is created based on the current URL path.

Wrap Pāli words in span element via regular expression and Go.

Get the number of children nodes via goquery in Go.

Get the number of child nodes via Go net/html package.

Answer to Stack Overflow question: go - How to get simple text from HTML page with goquery?.

Equivalent of JavaScript getElementById via Go net/html package.

Convert HTML table to reStructuredText list-table via goquery in Go programming language.

Convert HTML table to reStructuredText list-table via Go net/html package. This is experimental and not robust implementation.

Convert all HTML links to restructuredtext in a webpage via goquery in Go programming language.

Extract text (i.e., footnote) in HTML via state machine and goquery in Go programming language.

Iterate over all DOM elements in HTML via Go programming language. Use net/html package to parse and iterate all elements in HTML. Search for HTML links and output them in reStructuredText format.

Wrap Pāli words in span element via regular expression and JavaScript.

Server get HTML form value from HTTP POST in Go programming language.

A simple example to read HTML title via goquery in Go.

Download and save HTML file from given URL via Go. Do nothing if the HTML file already locally exists.

Access head element in HTML document via GopherJS.

Minify HTML via Go programming language.

Conversion Button of Traditional/Simplified Chinese on Website via JavaScript.

Python script to convert HTML table to reStructuredText list-table via Beautiful Soup 4.

Make font size of your website larger/smaller via JavaScript.

CSS for reStructuredText (rst) footnote and citation.

Python scripts to export PIXNET blog posts to files of reStructuredText format.

Fix runtime error via goroutine in Go code compiled to JavaScript by GopherJS.

Implement gettext function on front-end (browsers) by GopherJS. The gettext function translates a text string into the user's native language.

Use xgettext (one of GNU gettext utilities) to extract translatable strings from HTML templates of Go html/template.

i18n (Internationalization) Go web applications by GNU gettext tools and html/template. Use PO and MO files generated by gettext in Golang web application to render HTML of specific languages by html/template.

i18n (Internationalization) Python web applications by GNU gettext tools and Jinja2. Use PO and MO files generated by gettext in Python web application to render HTML of specific languages by Jinja2 template engine.

Run Golang program in your browser by GopherJS. Show how to write a Go program to do DOM manipulation by example. This example show how to write a dropdown menu by GopherJS and its DOM binding.

Run Golang program in your browser by GopherJS. Show how to write a Go program to do DOM manipulation by example. This example show how to toggle (play/pause) sound on click event of a HTML DOM element.

Run Golang program in your browser by GopherJS. Show how to write a Go program to do DOM manipulation by example. This example show how to play sound on click event of a HTML DOM element.

Online snake game using Go programming language, compiled to JavaScript by GopherJS. (GopherJS DOM example)

Online Pali (Pāli, Pāḷi) Input Method using Go programming language, compiled to JavaScript by GopherJS. (GopherJS DOM example)

Run Golang program in your browser by GopherJS. Show how to write a Go program to do DOM manipulation by example. This example shows how to access HTML data-* attribute.

Responsive top navigation bar (navbar) used in this website.

Include regular CSS file in SCSS file with pyScss.

A simple custom responsive grid layout exmaple without CSS frameworks.

Comparison of Python Jinja2 and Go html/template, side by side for easy reference - Go template custom function vs Jinja2 custom filter and function.

Comparison of Python Jinja2 and Go html/template, side by side for easy reference - Mimic Jinja2 template inheritance in Go html/template

Comparison of Python Jinja2 and Go html/template, side by side for easy reference - Loop through Python Dictionaries vs Go Maps

Comparison of Python Jinja2 and Go html/template, side by side for easy reference - Python List vs Go Arrays and Slices - Loop Index

Comparison of Python Jinja2 and Go html/template, side by side for easy reference - Python List vs Go Arrays and Slices

Access data-* attribute of HTML elements in Dart

How to read XML/HTML files in Go programming language (for newbie) - Parse Atom 1.0 format.

How to read XML/HTML files in Go programming language (for newbie) - Parse RSS 2.0 format.

How to read XML/HTML files in Go programming language (for newbie) - Parse OPML format concisely.

How to read XML/HTML files in Go programming language (for newbie) - Parse OPML format.

Comparison of Python Jinja2 and Go html/template, side by side for easy reference - print Hello World! on screen

How to read XML/HTML files in Go programming language (for newbie) - Read multiple direct child elements.

Comparison of Python Jinja2 and Go html/template, side by side for easy reference - Load and Serve Templates

How to read XML/HTML files in Go programming language (for newbie) - Read a direct child element.

How to read XML/HTML files in Go programming language (for newbie) - Read element attribute.

How to read XML/HTML files in Go programming language (for newbie) - Read element and its content.

Demonstrate how to make an online 0-9 keypad, which is draggable via jQuery and toggleable via vanilla JavaScript.

Load Dart script while development or the browser supports dart. Otherwise load JavaScript as usual.

Toggle element (usually div) with pure CSS only (no JavaScript). Suitable for dropdown/menu application.

Set HTML document title in AngularJS

Toggle sound on click event of DOM element.

Load CSS file dynamically.

Play sound on click event of DOM element.

Load website icon (favicon) dynamically.

JavaScript equivalent of basename program.

JavaScript Cross-Browser Implementation of onMouseEnter and onMouseLeave Event

Detect the content change of HTML input elements in a cross-browser and consistent manner.

XSLT (Extensible Stylesheet Language Transformations) in Python.

JavaScript equivalent of Python string startswith, endswith, and contains.

Create DOM elements by JavaScript.

Serve DOM elements to clients dynamically on Google App Engine Python

Bug-free way of removing child nodes of a DOM element in JavaScript.

Cross-domain AJAX requests

1% width of browser window equal to how many pixels?

Width of browser window in pixel.

Compare mouseenter, mouseleave, mouseover, and mouseout events.

Rich text editor with math equation dialog using Google Closure Library.

JavaScript Back to Top Link

Event target element in JavaScript event handling.

Let website users upload multiple files to Google App Engine (Python) servers.

Python XML/HTML manipulation primer of xml.dom.minidom

Python XML/HTML manipulation primer of xml.dom.minidom

Python XML/HTML manipulation primer of xml.dom.minidom

Python XML/HTML manipulation primer of xml.dom.minidom

Python XML/HTML manipulation primer of xml.dom.minidom

Python XML/HTML manipulation primer of xml.dom.minidom

Python XML/HTML manipulation primer of xml.dom.minidom

Show source code on your website