march 28, 2017 update: it's confusing when i host a page at this wren test site and at jothut. which is the main file? i'm going to rely on jothut to be the place where i create github readme files. http://jothut.com/cgi-bin/junco.pl/blogpost/62528/20Jul2016/Screenshots-of-My-Web-Apps. i won't update this page anymore.
Used at http://toledotalk.com since 2005. ToledoTalk.com began in January 2003.
View of the site with the browser resized to approximate a mobile view.
Desktop view of creating a new thread post.
Home page view when logged in.
Used at http://waxwing.soupmode.com
Adding or uploading an image. This works fine on a phone too, except with versions of iOS prior to version 8.
Desktop view of one of the posts or an "article" page.
Another view of a post page.
Used at http://crochet.soupmode.com to track my crochet notes.
Scaup is a small, single-user web publishing app. Scaup stream views display a mix of articles and notes.
Desktop view of the home page stream while not logged into the app. If logged-in, then a small text area box would be positioned at the top of the site to allow fast posting of notes or links.
Grebe is a multi-user blogging tool or web publishing app.
The default setup is to display only article pages on the home page, sorted by updated date from youngest to oldest. Standard blog view.
A notes stream is displayed separately. This screenshot shows the stream of notes while logged in.
In the above image, the icons shown at the top from left to right represent:
- grey house : link back to home page of articles.
- blue gear : link to the user's profile page that contains links to account or profile settings for the user when logged in.
- blue paper : displays the notes stream shown above.
- grey magnifying glass : link to a page that displays a text input field for text to be searched.
The blue icon images appear when the user is logged into the app.
ToledoWinter.com home page while logged in.
List hashtags and their counts alphabetically by tag name.
List hashtags and their counts by tag count, highest to lowest.
Similar to Scaup, except the code is separated into API and Client. Currently, the API code exists in Perl, but a version created with Go is planned. Client code exists in Perl and Node.js.
To log in, only an email address is submitted that matches the author's info that's stored in CouchDB. Veery send a link that when clicked will log the user into the app. The login link will only work one time.
Home page stream view when logged in. The small text area box can be used to create an article or note.
This is the larger text area box for creating a note or article. This is accessed after clicking the 'W' link in the above screenshot. Clicking the
Desktop view of an article page.
The original code is found at:
When testing the code in the summer of 2013, I found the flashing of the live preview annoying and distracting as I typed, since I could see the live preview out of the corner of my eye.
I greatly modified the code. I used the small minified.js framework to make my changes.
I added a line of buttons across the top to switch to single screen or split screen and to save or preview a post.
- ctrl-s = save
- ctrl-p = preview (i don't use a printer, so this is fine for me). this sends markup to the server for formatting, and then the HTML is displayed in the right pane. if writing in single-screen mode, then the screen switches to the preview also in single-screen mode.
- ctrl-j = simpler, single screen view that removes the line of buttons at the top
- ctrl-h = provides a tiny, simplified window for writing that is only five lines tall
- ctrl-d = switches the default display from black text on white background to light grey text on a black background
- ctrl-b = return to the standard, split-screen view with the small row of buttons across the top
The editor works fine on the phone's browser. Obviously, it's easier to write on the phone with the editor in single screen mode.
The default writing environment. Droid Sans Mono font is used in the writing pane (left). Open Sans font is used in the HTML preview pane (right). The button with the arrows pointing right is used to switch to single screen mode. The button with the arrows point left is used to switch to split screen mode.
Single screen mode for writing.
Single screen mode for previewing a post.
This is a desktop / laptop view after hitting ctrl-j to create a simplified writing environment. No buttons.
This is a desktop / laptop view after hitting ctrl-d to change the default colors when using the simplified writing environment.
This is a desktop / laptop view after hitting ctrl-h to reduce the writing window to only five lines tall.
Used at http://soupmode.com
It's a private, web-based messaging app. It's sort of a cross between messaging, email, and a message board.
Show the list of my discussion threads.
Start a new message thread that will either be sent only to me for a truly private notes thread, or I can include one or more other users for a group message thread.
When logged in, this is an example of how the home page would appear.
Used at http://jothut.com
Junco is a multi-user community app that supports following users, following tags, replies, etc. But for jothut.com, I switched it to single-user mode.
Home page view when I'm logged in. If the app ran in multi-user mode, this would not be the default home page view.
I spend most of my time in the stream view, which is similar to the stream view listed above for Veery. It's also used at Scaup, and it's the view used for the notes section in Grebe.
My profile page. The items listed in the light blue background are only shown to me when I'm logged in.
Used at http://toledoweather.info
jQuery Mobile is used to display pages.
Desktop view of the home page.
Powered by Grebe.
Screenshot of homepage as of early November 2015.
- bottom of a veery home page
- more toledoweather.info screenshots on various devices
- phone screen shots
- toledo talk home page, logged in, new comments to read
- updated babyutoledo.com views