DEV Community: Casualwriter

Set To-Do list as windows wallpaper (coded by sonnet)

Casualwriter — Mon, 03 Feb 2025 16:30:13 +0000

amoy-todo-wallpaper

Set To-Do list as windows wallpaper.

This is a python program coded by claude-sonnet-3.5 with minor revision.

github: https://github.com/casualwriter/amoy-todo-wallpaper

How to use

download amoy-todo-wallpaper.zip
unzip all file
run amoy-todo.exe

This program will open todo.txt file for edit, click [Save & Apply] to set it as windows wallpaper.

Files

source code amoy-todo.py
background image background.png (by flux-schnell)
todo list todo.txt
download zip amoy-todo-wallpaper.zip

To compile the source into single executable: pyinstaller -F -w amoy-todo.py

Prompt

write a python program to set a text file as wallpaper, add UI to edit todo.txt, and allow setup font-color and content background color.

- text file is "todo.txt", left-align, grey text color
- round content area 12px
- allow set font size setting, default 16px
- background image is "background.png"
- nice look fonts, support chinese
- show in top-right with margin 120px, light grey background #eee
- do not filter empty line
- output python code in code-block

Notes

2025/02/03, v1, tested on sonnet-3.5, deepseek-R1 and o3-mini, finally choose sonnet version as the code is most simple.
2025/02/03, v2, add font size setting.

enjoy it.

Vanilla worker playground for cloudflare AI

Casualwriter — Mon, 08 Apr 2024 10:47:34 +0000

This is a submission for the Cloudflare AI Challenge.

What I Built

Vanilla worker playground for cloudflare AI, also act as cloudflare API proxy.

Demo

Demo: https://playground.pingshan.uk/

My Code

github: https://github.com/casualwriter/vanilla-worker-playground
source: https://github.com/casualwriter/vanilla-worker-playground/blob/main/vanilla-worker-playground.js

Journey

I just explorer to use cloudflare AI API, and make the worker as API proxy first, and code the html page locally.

the html page is very simple in less than 300 lines code, and I realize that I can put it inside worker. that's really happy thing with small html page.

It is a chatbot for all major AI chat models available in clouflare AI API, which may switch different AI modes during a conversation. After play with cluoflare AI models, the conversation may export/print for reference. btw, this program also support voice recognition (sorry not use AI now). If have time, I will use cloudflare AI for voice recognition and speak.

In additional, this worker also acts as API proxy enable html page calling clouflare API anywhere.

Hope you like it, have a nice day,

dev user name: casualwriter
https://dev.to/casualwriter

A minimal ChatGPT client by vanilla javascript, run from local or any web host

Casualwriter — Fri, 21 Apr 2023 01:40:34 +0000

Hi, all,

would like to introduce "vannilla-chatgpt" - a minimal ChatGPT client by vanilla javascript, run from local or any web host

This program aims to code a full functional chatGPT client using only raw HTML/CSS/JavaScript with minimal coding effort, in the purpose of exploring the minimum requirements of utilizing chatGPT features without the need for a server, framework, or additional resources.

This program offers basic conversation functions with some enhancements for conversation content

refined printout
easy to copy code-block and content
export conversation to markdown
voice recognition and speak answer

It is available as a single HTML file, which run directly from local or GitHub source folder.

https://raw.githack.com/casualwriter/vanilla-chatgpt/main/source/index.html
https://raw.githack.com/casualwriter/vanilla-chatgpt/main/source/vanilla-chatgpt.html
if do not have API key, please check the demo

For more details, please visit github: https://github.com/casualwriter/vanilla-chatgpt

Have a nice day,

PowerChrome - a chromium-base browser for desktop html/javascript application

Casualwriter — Tue, 13 Dec 2022 07:11:13 +0000

I had longed for a web browser which has DB connectivity and shell accessibility, so that can develop html/JavaScript application like Electron. PowerChrome comes for this purpose.

PowerChrome is a powerful and portable web browser that uses the Chromium engine to enable fast and easy development of desktop applications using HTML and JavaScript.

PowerChrome provides a natural approach to HTML and JavaScript application development. It allows HTML pages to access the window shell, file system, and database, and provides additional application support through the PowerChrome JavaScript Interface (which runs in sync mode).

Examples of the PowerChrome JavaScript Interface include:

Calling notepad.exe: pb.run('notepad.exe')
Execute a file: pb.shell('calc.exe')
Copy a file: pb.fileCopy(sourceFile, targetFile)
Connect to Oracle database: pb.dbConnect('O90', dbParm, dbServer, logID, logPass)
Run SQL query (in sync mode): rsStr = pb.dbQuery('select * from tablename')
Run a SQL query and convert results to JSON: rs = JSON.parse(pb.dbQuery(sql))
Get HTML source of a page (in sync mode): rs = pb.httpSource('https://hacker-news.firebaseio.com/v0/item/160705.json')
Popup an HTML dialog: pb.popup('sample-dialog.html', {width: 1024, height: 700})

Features

Portable - no installation required
Chromium-based - can use Chrome/Chromium for testing and debugging
HTML as the application and JavaScript ES6 for programming
API that runs in sync mode - no callback or promise objects
Works with Powerbuilder for advanced functionality
Simple console support
Cloud-app enabled
Run on Windows 7/8/10/11

Get Started

Download powerchrome-0.60-with-runtime.zip and unzip the all-in-one package.
Run powerchrome.exe.
powerchrome.html will be loaded to demonstrate how PowerChrome works as an HTML desktop application.

Please visit github-repo: https://github.com/casualwriter/powerchrome
for more informaiton.

Looking forward to your comments for improvment,
thanks in advanced,

Create resume by markdown, print to PDF and available online

Casualwriter — Tue, 27 Sep 2022 08:58:45 +0000

It is quite annoying to maintain resume in multiple format, MS Word, PDF, TXT as well as wanna to have an HTML format online. It will be great to keep a easy editable single source for PDF/HTML as long as online resume available.

casual-markdown-cv is a minimal way to create markdown resume and host on github (or other static web hosting)

Github markdown is very good for edit/preview. Here is a sample template: resume.md

Just add a little code as below, it transform to resume.html with nice layout (self-host at github).

then may print to PDF format, and share the url. (for github, it can accessed by raw.githack.com naturally)

Themes

The following themes are available.

Default theme: resume.html
Show QR code of url: resume-qrcode.html
Dark theme: resume-dark.html
Warm theme: resume-warm.html
Blue theme: resume-blue.html
Sample for web developer: resume-web.html

And it is not limit for resume. for example,

Project Plan: project-plan.html
Documentation: document.html

for more details, please visit github-repo: https://github.com/casualwriter/casual-markdown-cv

hope you find it useful.

cheers,

Build markdown blog site by casual-markdown-blog

Casualwriter — Mon, 05 Sep 2022 03:17:36 +0000

casual-markdown-blog is a handy solution to build blog site by markdown files and single index.html

No installation, just copy a single index.html, and config home page at index.md, then start write post in markdown!

It is very handy to build simple blog-site from markdown files, and host on static web hosting. For example,

Self-host on github: https://raw.githack.com/casualwriter/casual-markdown-blog/main/source/index.html
Casual-Markdown's Blog: https://casualwriter.github.io/casual-markdown/blog
Dark theme: https://casualwriter.github.io/casual-markdown/blog?theme=dark
Dark (always): https://casualwriter.github.io/casual-markdown/blog?home=index-dark.md
Nav at right-side: https://casualwriter.github.io/casual-markdown/blog?home=index-right.md

Usage Guide

simply copy index.html to web server, or fork this repo.

config site at index.md (title, subtitle, header-color, navigation, etc..)
start to write blog post using markdown
to publish, just add the post in index.md by syntax

* yyyy/mm/dd: [post-title](md-file) { #tags }

below is sample setup from Sample Blog: index.md

------------------------------------------------------------------title      : Casual-Markdown's Blog 
subtitle   : Simple is the best
nav-group  : featured, new-3, tags, months
nav-width  : 320px
css-header : background:linear-gradient(to bottom right, #06c, #fc0); color:white
menu       : 
   Home    : ?
   Github  : https://github.com/casualwriter/casual-markdown-blog
   Dark    : javascript:darkmode()
   About   : ?page=about.md
------------------------------------------------------------------
<style comment="additional style">
......
</style>

<div id="md-post">

home page in markdown syntax...

## Archive

* yyyy/mm/dd: [Post Title](md file)  { #tag1, #tag2 }
* yyyy/mm/dd: [Post Title](md file)  { #tag1, #tag2 }
...
* yyyy/mm/dd: [Post Title](md file)  { #tag1, #tag2 }

</div>

looking forward to your advice to help it getting better,

thanks,

Build blog site by markdown files by single index.html

Casualwriter — Fri, 02 Sep 2022 08:41:39 +0000

casual-markdown-blog is a handy solution to build blog site by markdown files and single index.html

What we need is config home page at index.md, then start write post in markdown!

It is very handy to build simple blog-site from markdown files, and host on static web hosting. For example,

Self-host on github: https://raw.githack.com/casualwriter/casual-markdown-blog/main/source/index.html
Casual-Markdown's Blog: https://casualwriter.github.io/casual-markdown/blog
Dark theme: https://casualwriter.github.io/casual-markdown/blog?theme=dark
Dark (always): https://casualwriter.github.io/casual-markdown/blog?home=index-dark.md
Nav at right-side: https://casualwriter.github.io/casual-markdown/blog?home=index-right.md

Usage Guide

simply copy index.html to web server, or fork this repo.

config site at index.md (title, subtitle, header-color, navigation, etc..)
start to write blog post using markdown
to publish, just add the post in index.md by syntax

below is sample setup from Sample Blog: index.md

------------------------------------------------------------------title      : Casual-Markdown's Blog 
subtitle   : Simple is the best
nav-group  : featured, new-3, tags, months
nav-width  : 320px
css-header : background:linear-gradient(to bottom right, #06c, #fc0); color:white
menu       : 
   Home    : ?
   Github  : https://github.com/casualwriter/casual-markdown-blog
   Dark    : javascript:darkmode()
   About   : ?page=about.md
------------------------------------------------------------------
<style comment="additional style">
......
</style>

<div id="md-post">

home page in markdown syntax...

## Archive

* yyyy/mm/dd: [Post Title](md file)  { #tag1, #tag2 }
* yyyy/mm/dd: [Post Title](md file)  { #tag1, #tag2 }
...
* yyyy/mm/dd: [Post Title](md file)  { #tag1, #tag2 }

</div>

looking forward to your advice to help it getting better,

thanks

Build web page/Site by markdown files

Casualwriter — Thu, 18 Aug 2022 00:54:00 +0000

Dear All,

Now you can use casual-markdown-page to, which
directly use markdown files as web page or web site (ie. markdown-as-webpage).

It is a single html file index.html to load markdown file into web page by the syntax of index.html?file={markdown-file.md}

It is very handy to build static web-site from markdown files, and host on free web hosting. For example,

github (self-host): https://raw.githack.com/casualwriter/casual-markdown-page/main/source/index.html
all-in-one version: https://raw.githack.com/casualwriter/casual-markdown-page/main/source/index-one.html
github page: https://casualwriter.github.io/casual-markdown
github page: https://casualwriter.github.io/

Usage Guide

copy index.html or index-one.html to web server
copy markdown files index.md and other files (*.md) to the folder

that's it!

by default, it will load index.md as home page.
hotkey [alt-k] to show page in dark mode
for mobile, click on title to show/hide TOC.

It use frontmatter for page configuration (title, menu, navigation), for example

-----------------------------------------------------------
github  : https://github.com/casualwriter/casual-markdown 
title   : Casual-Markdown 
style   : #header { background: RoyalBlue } // additional style
menu    :    
  Home            : index.md
  Supported Syntax: md-syntax.md
  md-as-Doc       : md-as-doc.md
  md-as-Page      : md-as-page.md
  md-as-Blog      : md-as-blog.md
  [DarkMode]      : javascript:darkmode()
----------------------------------------------------------

## {{ title }} 

markdown content .....

it is the first release, looking forward to your comments for enhancement,

thanks,

Markdown as document, by casual-markdown-doc.js

Casualwriter — Tue, 02 Aug 2022 15:23:00 +0000

Dear All,

just release Casual-Markdown-Doc, which is a quick solution
to use markdown as document.

include javascript lib casual-markdown-doc.js
include css style casual-markdown-doc.css

then start write document in markdown format!

Credit

This project based on the design idea of Strapdown.js.
but use casual-markdown parser,
build-in css, vanilla javascript without any dependence. (support all browsers include IE9)

Usage

create your document in html format. e.g. casual-markdown-syntax.html
use below first 4 line as header, and start draft content in markdown format
at line 4, revise title to your document title
start draft document in markdown format

<!DOCTYPE html>
<link  href="https://casualwriter.github.io/dist/casual-markdown-doc.css" rel="stylesheet">
<script src="https://casualwriter.github.io/dist/casual-markdown-doc.js"></script>
<body title="document title here...">

## Heading

content in markdown format

Sample

Introduction of Casual-Markdown-Doc. src: sample.html => preview
Supported Markdown Syntax https://casualwriter.github.io/casual-markdown/casual-markdown-syntax.html

Hope you like it.

Have a nice day,

casual-markdown: lightweight regexp-base markdown parser (+TOC, scrollspy and frontmatter)

Casualwriter — Fri, 22 Jul 2022 09:15:00 +0000

Just release casual-markdown v0.85 - a super lightweight RegExp-based markdown parser, with TOC, scrollspy and frontmatter support

simple, super lightweight (less than 190 lines)
vanilla javascript, no dependence
support all browsers (IE9+, Chrome, Firefox, Brave, etc..)
straight-forward coding style, hopefully readable.
support basic syntax according Basic Markdown Syntax (markdownguide.org)
support subset of extended-syntax
table-of-content (TOC) and scrollspy support
auto highlight comment and keyword in code-block
frontmatter for simple YAML
extendable (by override md.before, md.after, md.formatCode, md.formatYAML)

Usage

just simply include casual-markdown.js
from local or CDN.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/casualwriter/casual-markdown/dist/casual-markdown.css">
<script src="https://cdn.jsdelivr.net/gh/casualwriter/casual-markdown/dist/casual-markdown.js"></script>

Then call markdown-parser by md.html(), or TOC by md.toc()

// get markdown source from element
var mdText = document.getElementById('source').innerHTML

// parse markdown, and render content
document.getElementById('content').innerHTML = md.html( mdText )

// render TOC, add scrollspy to document.body
md.toc( 'content', 'toc', { css:'h2,h3,h4', title:'Table of Contents', scrollspy:'body' } )

// render TOC, title=Index, add scrollspy to <div id=content>
md.toc( 'content', 'toc', { title:'Index', scrollspy:'content' } )

Please visit github for more details, or check Supported Syntax of Casual-Markdown

a little rush work, please let me know if have any bug.

have a nice day,

A simple hta program to document oracle tables

Casualwriter — Fri, 08 Jul 2022 06:13:11 +0000

Just code a hta (html application) program to document table/view for oracle. It use Microsoft OLE DB (MSDAORA) to connect to oracle. no more dependence.

https://github.com/casualwriter/hta-db-schema

single file without dependence.
document oracle using built-in "comments" feature.
classify tables/views into "folder"
doubleclick to add/modify table description
doubleclick to add/modify column description
show and print table definition
search keyword in name or description

no installation is needed. Just download file db-schema-oracle.hta to local, and click to run.

ps: the code is simple (in 270 line). you may check it out here before run

enjoy,

a portable lightweight web crawler using Powerpage.

Casualwriter — Tue, 09 Nov 2021 06:10:22 +0000

Just code a portable lightweight web crawler using Powerpage. Powerpage Web Crawler is a portable javascript-application running with Powerpage. It is coded by vanilla javascript in about 350 lines codes, without any dependency.

Powerpage Web Crawler is a portable program, just simply download and run powerpage.exe. It is a powerful and easy-to-use web-scrawler suitable for blog site crawling and offline-reading.

Just simply define below, for example

base-url := https://dev.to/casualwriter // the home page of favor blog site
index-pattern := none // RegExp of the url pattern of category page
page-pattern := /casualwriter/[a-z] // RegExp of the url pattern of content page
content-css := #main-title h1, #article-body //css selector for blog content.

Program will

crawl all category pages.
find out all url of content pages.
crawl content for one page, or all pages.
save setting and links to database (support multiple sites)
save content pages to local files.
allow off-line reading from local files.

About Powerpage

Powerpage Web Crawler run with PowerPage, which is a lightweight web browser with DB capability and windows accessibility, for quick development of javascript/html/css application.

for the source code of Powerpage, please visit https://github.com/casualwriter/powerpage/tree/main/source/src

By the way, sorry for beginner coding style and rough screen layout (for independence).

Enjoy,