Building my first Progressive Web App, it's new territory for me but I've made it installable already.

I'm trying to cover a fairly simple use case, which is displaying a badge count based on the number of unread notifications. Intuition tells me that I'd just ping an endpoint on the server at a 5 minute interval, but I'm in new territory so I thought I'd open up the conversation to see if there's any gotchas to be aware of.

I'd like to see if there's anyone out there on Tildes who has experience in this domain - is the service-worker always on, or is it only active once the app has been open and then backgrounded? How do I know if the app is currently open? I would like the app to query for notifications more frequently when it's opened, and only intermittently when it's closed. Any tips?

New job. I've been wanting to learn something new for a while, so I took a project where a lot of React is done. I'm learning it from scratch while I work with React.

I have some comments about it.

1. React makes front end work a lot more like programming -- I like that!
2. Javascript has changed a lot, and for the better, since I last used it over a decade ago.
3. The React-Redux tool kit is the bomb. It should be integrated/absorbed into React. I can't see any reason not to use it, even for small applications as it is less wordy wherever you use it.
4. The updating of state values should be more automatic, especially for flag variables not tied to GUI components. It is the major source of hassles with React
5. Udemy React videos. My company makes them available free of charge to employees. I've sampled videos from a number of courses. I'm not a fan of the instructors showing you how to do things in older, less efficient ways first in a learning/demo project, the ERASING that code to do it a better way. The should include copies of the project at each stage if they do that. I finally figured out that the best way to take notes I can use later is to comment out the old code and put the new more efficient next stage stuff on top.
6. React tests really need to improve. They are often more time consuming than the code itself. The tests have forced me to change my code or do needless testing to get the tests to pass. I had one situation where no matter what I did React test said I didn't cover the code until I broke an else clause off into it's one if clause. Blech.

All in all I've been enjoying learning React. It is neat new ( to me ) thing.

I feel sad that I will likely forget it all when I go back to my specialty language.

I submit a lot of posts from mobile, and I find some of the markdown tedious to enter on a mobile keyboard. I know JavaScript is supposed to be a last resort, but I'd really like to have some assistance in the post authoring and comments fields.

I assume this could be a user script. Looking at the wiki, it looks like none of the current ones do this.

Thoughts on this? Things people are already using? Ideas for existing tools to build on? Would it be better as a user script or as a feature of the main site, perhaps with an option to disable it? I'm medium at JavaScript but would happily take a crack at it.

Here is my inital feature list:

• link button - select text, press the link button, get a prompt for the URL, replace the selected text with the markdown formatted text and URL.
• quote block- select multiple paragraphs and click the button to block quote them all
• bold, italic, strike though buttons - apply the markdown to selected text
• spoiler - insert a details block at the cursor. If text is selected wrap it in a details block and prompt for the summary.

if I were to develop it, what else would people like to see on this list?

Updated: June 29th 2023

Hello folks,

Like many of the other people that have been around lately, I'm new to Tildes, I've been browsing it without an account since last Monday or so while waiting for an email response (thanks @Deimos), and in that time I've been working on a little tool to add some QOL features I thought would make my experiences with the site feel better.

I didn't plan on sharing it initially, because I didn't think I'd be able to get the javascript into a usable state, and I'm not fond of sharing my code in general, as I always get a big wave of impostor syndrome whenever I do, "What if they look at my messy code and see how silly I do some things", that sort of thing. But with Tildes I want to try to correct some of my internet behaviours, for years I've generally stayed as a lurker, never commenting or sharing content of my own, so, hello there, hopefully, I stick to my guns and you see more of me.

Onto the script itself, currently, I've built five main features into it all of them being rather minor on their own, I did do bug testing on everything and couldn't find anything else, but if you notice anything please feel free to report it to me or post an issue on the repo. It's easy to miss bugs when you've only got one set of eyes.

Tildezy Github

The GitHub contains installation instructions if you've never used a userscript before, and contains some images showing off each feature described below.

Hopefully, someone gets some use out of this with me, I look forward to chatting with you all.

EDIT
Refactored the code and added a new comment traveller feature based on some of the comments below.

EDIT 2
Up to 1.3.0, we've got markdown buttons now, see comment explaining the change or check out the github readme

Just a hack job, but I'd seen some comment about it being inconvenient to ignore posts so I made a quick userscript (tested with Tampermonkey on Firefox) that adds hotkeys for bookmarking/ignoring/voting on a post. It can also navigate to the link or comments or prev/next pages (←/→). Only implemented for posts 1-9 at the moment.

Ex:

i+2 ignores and hides the 2nd post (or restores, if ignored)

? shows a summary of hotkeys

// ==UserScript==
// @name         Tildes
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Quickie convenience hotkeys for tildes.net
// @author       TT
// @match        *://tildes.net/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=tildes.net
// @grant        none
// @require      https://unpkg.com/hotkeys-js/dist/hotkeys.min.js
// ==/UserScript==
(function () {
    "use strict";
    let Action;
    (function (Action) {
        Action[Action["Invalid"] = 0] = "Invalid";
        Action[Action["Bookmark"] = 1] = "Bookmark";
        Action[Action["Comments"] = 2] = "Comments";
        Action[Action["Ignore"] = 3] = "Ignore";
        Action[Action["Open"] = 4] = "Open";
        Action[Action["Vote"] = 5] = "Vote";
    })(Action || (Action = {}));
    const regex = /tildes\.net(\/~(?<group>\w+))?/gi;
    let match = regex.exec(document.location);
    //In a group if I wanted to support hotkeys there?
    if (match.groups.group) {
        //alert(match.groups.group);
    }
    else {
        addArticleNumbers();
        addMainHotkeys();
    }
    //Route
    function routeAction(action, event, handler) {
        event.preventDefault();
        //Grab index.  Zero-index?
        let indexText = handler.key.substring(2);
        let index = parseInt(indexText) - 1;
        if (isNaN(index))
            return;
        actOnArticle(action, index);
    }
    function actOnArticle(action, index) {
        //Get article for index
        let article = document.querySelector(".topic-listing").children[index].children[0];
        //Do the thing
        switch (action) {
            case Action.Bookmark:
                if (article.style.borderStyle === 'solid')
                    article.style.borderStyle = 'none';
                else
                    article.style.borderStyle = 'solid';
                article.querySelector('button[data-ic-put-to$="bookmark"]').click();
                break;
            case Action.Comments:
                article.querySelector(".topic-info-comments a").click();
                break;
            case Action.Ignore:
                //Hide vs blank?
                if (article.style.visibility === "hidden")
                    article.style.visibility = "visible";
                else
                    article.style.visibility = "hidden";
                // article.style.display = 'none';
                article.querySelector('button[data-ic-put-to$="ignore"]').click();
                break;
            case Action.Open:
                article.querySelector(".topic-title a").click();
                break;
            case Action.Vote:
                article.querySelector(".topic-voting").click();
                break;
        }
    }
    function addArticleNumbers() {
        let titles = Array.from(document.querySelectorAll(".topic-title a"));
        for (let i = 1; i <= titles.length; i++) {
            let title = titles[i - 1];
            title.text = i + " - " + title.text;
        }
    }
    function addMainHotkeys() {
        //Set up handlers
        const handleBookmark = (event, handler) => routeAction(Action.Bookmark, event, handler);
        const handleComments = (event, handler) => routeAction(Action.Comments, event, handler);
        const handleIgnore = (event, handler) => routeAction(Action.Ignore, event, handler);
        const handleOpen = (event, handler) => routeAction(Action.Open, event, handler);
        const handleVote = (event, handler) => routeAction(Action.Vote, event, handler);
        hotkeys("shift+/", (e, h) => alert(getHelpText()));
        //Page nav
        hotkeys("left", (e, h) => Array.from(document.querySelectorAll(".pagination a")).find((e) => e.textContent == "Prev").click());
        hotkeys("right", (e, h) => Array.from(document.querySelectorAll(".pagination a")).find((e) => e.textContent == "Next").click());
        for (let i = 1; i <= 9; i++) {
            hotkeys("b+" + i, handleBookmark);
            hotkeys("c+" + i, handleComments);
            hotkeys("i+" + i, handleIgnore);
            hotkeys("o+" + i, handleOpen);
            hotkeys("v+" + i, handleVote);
        }
    }
    function getHelpText() {
        return `
    ←/→ = navigation
    b = Bookmark, i = Ignore, v = Vote,
    c = Open comments, o = Open link,

    Action+[1-9] calls that action on the corresponding article`;
    }
})();

As I recall, about 2-3 years ago I had experimented with what is called the npm install xyz through some tutorials, etc. The objective was to improve my tooling or toolchain at least with things like css/js minification, etc. along with Bootstrap customization. The idea was to then move on to other newer learnings like react, etc.

But I was soon disgruntled by the whole process! Neither bootstrap turned out to be an easy horse to tame, and NPM was like this astronomical universe of packages that keep on downloading into your folders! I soon lost taste of the whole thing and kept using my tried and tested stack of PHP scripts and using stock Bootstrap through CDNs.

But today, I want to give it another shot. Has NPM improved than earlier days? What is the best way to go about building a toolchain using it? Are there any useful guides that make the whole process easier to digest?

I'm going to be building a simple blog for myself.

Partially I just want something really simple and customizable, and also it will be a fun little programming project.

I'll be using PHP and mySQL for the backend. I won't be using any sort of framework as it shouldn't be necessary for a very simple blog. I'm fairly comfortable with JavaScript.

What I'm imagining is some sort of JavaScript library I can just download, link to my html and then turn a textarea into a simple wysiwyg editor. It could be as simple as a markdown editor or something with a little more features.

It has to be free. Open source would be a plus.

If anyone has any recommendations or advice I would be very grateful. Thanks!

I'm currently developing a minimal userscript manager who's main goal is to be fully auditable by any user in only ten minutes or so - my prototype uses less than 300 lines of javascript, and I'm trying to keep it that way.

To get the codebase this small, however, I have to be very picky with what features I implement - most notably, the code editor has to be very barebones. Are there any features that I'd be shooting myself in the foot by not including?

For example:

• syntax highlighting
• cloud sync
• regex url matching
• fullscreen editor (currently, it's just a browser popup - the intention is that you write code elsewhere and paste it in)

Any feedback is greatly appreciated!