I'm in a decade-long predicament related to the management of a somewhat complex website for my publishing business, and I'd appreciate your advice. For context:

1. I joined the company as an original founder about 15 years ago. My initial roles mostly dealt with accounting, finance, sales, account management, etc. -- really, anything and everything I could help out with. I offered to take ownership of our website since I had a fair amount of web design and programming experience.
2. The original version of our website was a patchwork of PHP scripts from back in the days before Composer. I was inexperienced and didn't know anything about frameworks, etc. so I just started adding code.
3. Over the years, I built homebrew versions of user authentication, a backend (CMS, CRM, etc.), and our front-facing website (full-stack, from cloud hosting to CSS and everything in between). As the story goes, it became a spaghetti code mess that was only maintainable by me.
4. Realizing that I'd created a mess, my next long-term project was to slowly start transitioning the entire backend over to the Symfony framework, including many/most of the homebuilt components such as auth. This probably took 5 years in earnest. This way, I could at least begin to have conversations about getting outside help.
5. The other founder passed away unexpectedly, and I've found myself not having enough time to dedicate to the website. I can work on it here and there and patch it up when things break, but my fear is that we're going to become stale.
6. I've had several conversations with individuals and web development companies in various capacities over the years. These conversations ranged from "sure, I can help out with front-end stuff" to "we would like to rebuild your website from scratch using (insert popular CMS) and then manage it for the low cost of (insert high cost)".

Right now, all of the coding goes through me because it's the cheapest option (plus all of the context above). I'd like to explore delegating or outsourcing it again, but I don't know where the happy medium is as far as what needs to stay in-house.

Just to give an idea of the complexity, as it goes well beyond what you would think a publisher needs, here are some of the features:

• User auth/database with tens of thousands of users
• Single sign-on that connects those users to several other platforms seamlessly
• Content authoring
• Several "microsite" type pages on the front end that require their own CSS/JS needs
• Some unique features that were built because we couldn't find suitable alternatives, such as a webinar player that automatically generates certificates and stores them for the user, watermarked PDF downloads to include user information (i.e. to prevent piracy), etc.
• CSS from the Bootstrap 3 era that has been modified and bolted onto over the years
• Jquery stuff from way back in the day
• and on, and on, and on

To do things right, I would think that I need a server admin, a Symfony/PHP expert, and a front-end expert. But we're talking about what - hundreds of thousands of dollars per year? We can't afford that.

In my mind, an ideal situation looks like this:

• I am still able to see, modify, and keep control of our codebase (Git)
• Hosting is managed. This is where my second biggest* fear lies, in that I know enough server admin to be dangerous, but I lose sleep knowing that an intrusion is inevitable and there are smarter people than me that can help prevent one.
• I can assign out projects (e.g. we want to upgrade to PHP ## and Symfony ##, we want to redesign a page/template/etc., we want to implement SAML and connect it to another platform, etc.)

*My biggest fear is that, since I hold the keys to everything related to this website, if I am unavailable (or get hit by a bus) then I leave the business in a REALLY bad place.

Can anyone offer any advice on navigating this hornet's nest?

I'm looking for recommendations for good web tech job sites, ones which are most likely to lead to interviews. While I can always do a websearch myself, I haven't done a job search for many years, so I don't know what job sites are trustworthy or not nowadays. Working remote is almost must-have, otherwise Canada would be the region of interest.

Hey all! I've been thinking about buying a domain and building a personal website for myself -- at this point just a personal website with links to my socials, my CV, maybe any interesting projects I want to publicize. Maybe someday I'll decide I want to add a blog or build a webapp or something, but for now it'll be something simple and static.

My programming experience is very much not in the frontend side of things (I'm a data scientist and mostly use python day-to-day). I played around with HTML messing with my Tumblr theme enough back in the day that I'm reasonably sure I can build something solidly web 1.0, and I've toyed with stuff like Jekyll in the past. But I was wondering if I could use this as an opportunity to build up some basic skills that I could put on my resume for the future. But I have no idea what's out there that would be useful and quick to learn but wouldn't be massive overkill for a project like this.

I also have no idea how web-hosting works and who to go with if I want to build a personal website myself rather than relying on something like Wix or Wordpress. Most of the easily-Google-able advice is for different use-cases. Advice is either people who want something user-friendly with minimal coding like Wordpress or it's for something properly big and commercial, neither of which is me.

Anyway, I know we've got a lot of suitably tech-y people here on Tildes, so I'm hoping people here have good advice for this sort of use case. Thanks!

Does anyone have any good resources, books or otherwise, in regards do good design for web dev? I'm a self taught full stack dev who just can't really make things look "pretty". They are functional, but..that's about it. I know CSS, but maybe I just don't have an eye for it?

Any suggestions would be great, thanks.

I've been looking around online at compatibility for HTML5 browser streaming. It looks like straight up AV1 in a MP4 container is becoming absolutely fine for browser playback on devices.

Is anyone using this on webpages yet? The sooner we move to AV1, the sooner we can have high quality video stored at smaller file sizes, which is a massive bonus.

Right now my company video hosting is purely in MP4 with H264, moov atom to the front as per the requirement, and it plays back on everything with no fallback in a straight HTML5 video container. What's the chance of switching to AV1 and not having to worry about the fallback for the most part?

Edit: I should have used a better title. I used FFMpeg for MP4 and AV1 creation/encoding. This is more about HTML5 video container code and direct AV1 file playback.

I recently ran across Modular Forms, which is a new and rather obscure JavaScript library for doing form validation that claims good support for TypeScript (type safety) and low download size. It has variants for a few frameworks like React and Preact.

I’m wondering what else people use? I ended up writing my own Preact hooks to help out, with the actual validation done using Zod.

I’ve been looking for a good system for my friends and I to share TTRPG character sheets (primarily DnD) with one another.

We’re not interested in a full-digital VTT, but the ecosystem is pretty fragmented for charsheet-only apps (many immature and abandoned projects). Self-hosted webapp makes the most sense for our needs, but I’m open to suggestions for some other sync method that’s not PDF-based.

This seems like a viable candidate:

https://github.com/Orcpub/orcpub

…but I’d love to hear better options if anyone’s found em.

Hi everyone — I am trying to get a job in web development after a decade in a mostly unrelated field.

I am looking for ideas and tips to create a portfolio to send with applications. All of the websites I worked on ages ago have been taken offline or redesigned by someone else. I do have a website I created for my music, but it’s just vanilla HTML. I also have a personal website which is really the only thing I have to show.

I know HTML/CSS quite well, but that’s basically it. I’ve worked with WordPress for years but only just recently began learning enough PHP to do anything custom. I don’t really know Javascript much at all.

I have quite a few paid courses through Udemy for all these different areas but even as I have completed them, I don’t feel confident in knowledge of the different languages. These courses nearly always come with projects that the students create with the instructor. Should I use these as part of my portfolio? For some reason I never felt right doing that, since I didn’t build it myself.

So I guess I’m curious (if any of you are web developers) if you have suggestions for how to fill out a portfolio without any previous work examples.

Side note: I wasn’t sure how to word the title or my question particularly well so please edit it more clearly, Those Who Can Edit.

edit: thank you to everyone who took the time to reply to this. it’s all been very helpful and i appreciate everyone’s input immensely!

I have a little web app running on Deno Deploy and I want to see how it handles people connecting from multiple regions. There's a BroadcastChannel class that lets you send messages to any servers running in other regions, but to test it, I need to make connections in multiple regions, so there's more than one server running.

What are good ways to test this, either interactively or by writing tests? Maybe use a VPN? What's your favorite?

Hey there! Any web developers/designers out there that have resources on creating websites that are fully accessible? I am getting back into web development after a decade away and want to learn the correct way. Thanks for any tips!

I use Github and Netlify to run some simple websites for free. It works well. However, I've been thinking of experimenting with a database-backed website for fun and Netlify doesn't have any persistence.

What's a good way to do this that scales to zero when nobody's using it? I want to be able to forget about it entirely for months or years at a time. When someone visits, it should start up and run on demand without costing me $20 a month on standby.

Back in the day, I used Google App Engine for this. I learned a lot of datastore tricks to get around its poor latency, but I'm lazy and don't want to do that anymore. I'm pretty sure I want a SQL database and full text search. Either sqlite or Postgres would do, but I doubt there's a cheap enough way to run Postgres.

Litestream looks interesting and so does LiteFS, except that it's pre-1.0 and I don't know what changes fly.io will make that I have to keep up with. If I used Litestream, I'd have to figure out how to run it and where to store the replication logs.

Edit: one nice-to-have is being able to easily dump the database and run it locally or on another cloud provider. (I don't anticipate it getting so big that it's impractical.)

A common theme in web development, and the crux of the so-called "Web 2.0" is scrolling through dynamic lists of content. Tildes is such an example: you can scroll through about 50 topics on the front page before you reach a "next" button if you want to keep looking.

There's a certain beauty in the simplicity of the next/previous page. When done right it's fast, it's easy, and fits neatly into a server-side rendered model. However, it does cause that small bit of friction where you need to hit the next button to go forward -- taking you out of the "flow", so-to-speak. It's slick, but it could be slicker. Perhaps more importantly, it's an interesting problem to solve.

A step up from the next/previous button is to load the next page of content when you reach the end of the list, inserting it below. If the load is pretty fast, this will hardly interrupt your flow at all! The ever-so-popular reddit enhancement suite does precisely that for reddit: instead of a next button, when you reach the bottom, the next page of items simply plops into place. If the loading isn't fast enough, perhaps instead of loading when they reach the last item, you might choose to load when they hit the fifth from last item, etc.

To try to keep this post more concrete, and more helpful, here's how this type of pagination would work in practice, in typescript and using the Intersection Observer API but otherwise framework agnostic:

/**
 * Allows the user to scroll forever through the given list by calling the given loadMore()
 * function whenever the bottom element (by default) becomes visible. This assumes that
 * loadMore is the only thing that modifies the list, and that the list is done being modified
 * once the promise returned from loadMore resolves
 *
 * @param list The element which contains the individual items
 * @param loadMore A function which can be called to insert more items into the list. Can return
 *   a rejected promise to indicate that there are no more items to load
 * @param triggerLoadAt The index of the child in the list which triggers the load. Negative numbers
 *   are interpreted as offsets from the end of the list. 
 */
function handlePagination(list: Element, loadMore: () => Promise<void>, triggerLoadAt: number = -1) {
    manageIntersection();
    return;

    function handleIntersection(ele: Element, handler: () => void): () => void {
        let active = true;
        const observer = new IntersectionObserver((entries) => {
            if (active && entries[0].isIntersecting) {
                handler()
            }
        }, { root: null, threshold: 0.5 });
        observer.observe(ele);
        return () => {
            if (active) {
                active = false;
                observer.disconnect();
            }
        }
    }

    function manageIntersection() {
        const index = triggerLoadAt < 0 ? list.children.length + triggerLoadAt : triggerLoadAt;
        if (index < 0 || index >= list.children.length) {
            throw new Error(`index=${index} is not valid for a list of ${list.children.length} items`);
        }

        const child = list.children[index];
        const removeIntersectionHandler = handleIntersection(child, () => {
            removeIntersectionHandler();
            loadMore().then(() => {
                manageIntersection();
            }).catch((e) => {});
        });
    }
}

If you're sane, this probably suffices for you. However, there is still one problem: as you scroll,
the number of elements on the DOM get longer and longer. This means they necessarily take up
some amount of memory, and browsers probably have to do some amount of work to keep
track of them. Thus, in theory, if you were to scroll long enough, the page would get slower and
slower! How long "long enough" is would depend mostly on how complicated each item is: if each one
is a unique 20k element svg, it'll get slow pretty quickly.

The trick to avoid this, and to get a constant overhead, is that when adding new items below, remove the same number of items above! Of course, if the user scrolls back up they'll be expecting those items to be there, but no worries, the handlePagination from before works just as well for loading items before the first item.

However, this simple change is where a key problem arises: inserting elements below doesn't cause any layout shift, but inserting an item above ought to--right?

The answer is: it depends on the browser! Back in 2017 chrome realized that it's often convenient to be able to insert items into the dom above the viewport, and implemented scroll anchoring, which basically ensures that if you insert an item 50px tall above the viewport, then scroll 50px down so that there's no visual layout shift. Firefox followed suite in 2019, and edge got support in 2020. But alas, safari both on mac and ios does not support scroll anchoring (though they expressed interest in it since 2017)

Now, there's two responses to this:

• Surely Safari support is coming soon, they've posted on that bug as recently as April! Just use simpler pagination for now
• Pshhhh, just implement scroll anchoring ourself!

Of course, I've gone and done #2, and it almost perfectly works. Here's the idea:

• Right before loadMore, find the first item in the list which is inside the viewport. This is the item whose position we don't want to move. Use getBoundingClientRect to find it's top position.
• Perform the DOM manipulation as desired
• Use getBoundingClientRect again to find the new top of that item.
• Insert (or remove) the appropriate amount of blank space at the top of the list to offset the change in client rect (note that if there's scroll anchoring support in the browser this should always be zero, which means this effectively works as progressive enhancement)

Now, the function to do this is a tad too long for this post. I implemented it in React, however, and combined it with some stronger preloading object (we don't need all the items we've fetched from the API on the DOM, so we can use before, onTheDom, after lists to avoid getting a bunch of api requests just from scrolling down and up within the same small number of items).

What's interesting is that it still works perfectly on chrome even with scroll-anchoring disabled (via overflow-anchor: none), but on Safari there is still, sometimes, 1 frame where it renders the wrong scroll position before immediately adjusting. Because I implemented it in react, however, my current hypothesis is I have a mistake somewhere which causes the javascript to yield to the renderer before all the manipulations are done, and it only shows up on Safari because of the generally higher framerates there

If it's interesting to people, I could extract the infinite list component outside of this project: I certainly like it, and in my case I do expect people to want to quickly scroll through hundreds to thousands of items, so the lighter DOM feels worth it (though perhaps it wouldn't if I had known, when starting, how painful getting it to work on Safari would be!).

What do you think of this type of "true" infinite scrolling for web? Good thing, neutral thing, bad thing? Would you use it, if the component were available? Would you remove it, if you saw someone doing this? Are there other questions about how this was accomplished? Is this an appropriate post for Tildes?

I'm a full stack dev and my current use of JavaScript language is limited to making the best (read trivial) use of jquery for DOM manipulation in my web apps which primarily use PHP or Python (Flask/Django) as backend.

Now, have you watched that popular thriller movie called Inception which is based on a radical sci-fi concept that an idea or thought can be implanted into someone remotely?

Just like that, I often find myself facing this strange idea that JavaScript is supposed to be just a toy running inside the web browser. No idea where exactly this idea came from! Each time I try to learn JS or think of getting deeper with things like npm, react, etc., this idea just pops up and kinda stops me from doing anything!

Is there any way to get rid of this idea somehow?

TLDR:

I need a website that let's signed in users vote on each others photos, and stores that data on who voted for what in a database.

Background

I run a facebook group of about 2,000 members. This group is designed for analog (any non-digital format) photographers to swap high quality artistic prints with each oter. The community was essentially dead and the admin wanted to throw in the towel so I took over. We've made progress, the group growth jumped by over 500% in the first month after I took over.

Right now trading prints doesn't work well. People make a post using the facebook selling format, and those who are interested comment with the image they'd like to trade for. The problem is that the posts get limited visibility due to facebook's algorithms, and stale posts hang around. All of this reduces over all activity, and the majority of posts don't end up in a trade.

My solution is to do a trade event with everyone participating at the same time. Since facebook doesn't lend itself to this I'd like to whip up a quick site for the event. My time is so limited these days I really don't have the capacity to build something from scratch, and the group certainly doesn't have any other developers to help out with it (it skews heavily on the older side).

I'd like to find an open source project that lets users sign in (sign in using facebook would be a bonus) and upload/vote on images. After the voting closes, I'll write code to pair everyone up in a way that optimizes for everyone getting to make a trade. If Alice votes for Bob's image, and Bob votes for Alice's image, they would get paired up to make the swap.

I feel okay writing the code to map out swaps, but I'm pretty terrible at web design and especially at front end design. I've looked across github, but I wanted to reach out and see if anyone could recommend something that I might of missed.

I don't expect to have 2,000 members participate, I think it may be as few as under 100, so hopefully I won't need to worry about scale.

Thanks in advance for the help!

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!