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.

Granted that it's highly subjective and opinionated, but what this author James Anderson states in this StackOverflow post very much resembles the voices of many like myself who are trying to switch from interpreted/dynamic languages to static and compiled ones like Java/C#. How do Java programmers tackle or respond to this stance?

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!

When I visit Youtube, their algorithms somehow always manage to come up with the most provocative and mind aggravating political videos and force me to watch them! I go there to do something else and then it takes an entirely different direction.

I've decided to switch to listening to podcasts for a change, do you know any good one, especially in the areas of Web Development, Engineering Stories, Desktop Development, Windows/Linux, etc.?

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!

Consider the strange case of this reddit preview page for example:

https://preview.redd.it/uhomipyb8kp71.jpg?width=575&auto=webp&v=enabled&s=b0e044ddd8a83774e0453cb7607ef681444c4c37

If you inspect the primary <img> element on the page, you'll find its src attribute not pointing to any image file but (behold!) that link itself!

Through this mechanism, they've effectively hidden the direct link to that image, isn't it? How is this even possible? Is this a new phenomenon or way in web development?

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!

Time for some inspiration. I've been working on a few SaaS applications for the past 2-3 months, and have only really got into it full time recently, and I'm totally in code-mode now, so I thought I'd ask to see what other people have created in either their spare time, or to earn some money.

Link your app/tool/product/service! What tools, frameworks, or services did you build it with? What does it accomplish? How did you express your creativity while working on it? What's next for what you're creating?

I've been trying to learn CSS. I went through the relevant sections of Colt Steele's Web Bootcamp. It is mostly focused on Bootstrap, which disappointed me a bit. So I went through MDN to learn Flexbox and CSS Grid, which seemed like a better alternative. The fundamentals are easy enough, but when I try to make a layout everything gets mixed in my head (even though I have the documentation open at all times). The impression I get is that modern CSS is not one thing, but a bunch of little things that resemble each other in a confusing way. It's hard to infer stuff and there are gotchas everywhere. I know this is not a programming language, but it is at least programming-related. Learning CSS feels more like learning English than a technology: you must accept that it's not a cohesive system, but rather the culmination of a long historical process full of random developments.

I tried getting back to Bootstrap, but then I have to override a bunch of stuff I don't even know is there.

I'm having a lot of trouble trying to put something very simple together. I just wanna leave that behind and go back to my beloved Python.

I did not want this to be a rant, but it is now a rant. So be it :P

This post has now a soundtrack.

I currently have a personal "portfolio" site that I haven't updated in close to a year. I'm planning now on revamping it, and I am using this opportunity to reconsider the static site generator I am using.

I host my site on Github pages, which means that Jekyll was originally very appealing due to its nice integration with Github. However, I have found it difficult to greatly customize the themes I find, and I'm the type of person that likes to get everything "just right". It seems like Hugo might be more extensible in this regard, but I'm not sure if that alone makes it worth the switch from my current setup. Anecdotally, a lot of the blogs I find whose layouts I really like tend to use Hugo.

Pure HTML/CSS is an option but that seems like a big overhead for what I want. I'm no web developer and I don't plan on becoming one.

I've been learning Laravel, and familiarizing myself with the framework by coding up a blogging website. Right now, it's minimally functional, and I'd like to add some more features to it. Since this is my first project with Laravel the code is a mess, and it's just about time for me to rewrite the whole thing. Before starting that, I'd like to have a better idea of what my final product should be. I don't want to recreate WordPress in Laravel, but I do want to have something I wouldn't spit at. Basically a project that would be good as a resume builder if I ever needed one.

So far, my website allows users to...

• register for an account, log in/out, update their email address and display name
• create posts with a WISIWYG editor
• upload files
• create profiles
• and manipulate everything through CRUD.

What do you think the minimal features a blogging platform needs to have to be "complete" and usable as a stand-alone system?

Hi everyone! Per admin recommendation I'm posting this in comp.

I would like to switch Staining The Timbre from a blogspot domain to its own. I can handle the paperwork and whatnot associated with the url change, but I would like to hire a web designer to spruce up the joint a bit. Right now I'm using a default theme provided by Blogspot and, while it serves its purpose, it makes the page look like it's run by a high schooler.

It should be a relatively basic project. I don't need anything for commerce set up, or anything I think of as "crazy". Just a very basic blog layout that looks professional on both desktop and mobile (the latter is a little lacking in particular right now). Archive links, Tags, ability to comment on posts, Contact Info, and one that preferably preserves the large-picture format the site currently has; that's about it, aside from being able to create the posts themselves.

If anyone is interested please send me a private message. This is very much still in the quoting phase, but I appreciate any assistance you all can provide me in getting an idea on cost.

Thanks in advance!

Hi,

I want to make a personal website, as basic as possible (I don't even want SEO or stuff like that).

This is totally a personal project, I don't want to generate revenue from it or anything like that (at least for now), I just want an old school website to link it to possible employers and contacts. I have about 12 years of coding experience but mostly low-level (DSP, ASM, C, C++) and scientific code (Python, R, Julia). So I'm not scared of doing it from scratch (even though it will be much uglier in the beginning than pre-generated websites) or using some basic lightweight libraries.

Until now I have been using github pages but I want to put some projects that require server side work, so I'll probably have to host somewhere else. I really like tildes' technical goals, but I don't know if the stack it uses is overkill for a personal website (I know I will need some database for some of the projects though).

My questions are:

• Is Pyramid a good choice or is it more appropriate for huge multiuser platforms? I do need some level of interaction between users (some of my more artsy projects are related to NLP) as well as interaction between user-server (some projects include simulations with parameters etc.).
• How does hosting/DNS work? How much should I expect to spend per year? I know there exist hosting services and also places like Heroku, I don't really know the difference between them or what should I be looking for.
• How much should I worry about security? In other words, what is the threat level? I don't plan to have confidential info in the website, or information about the users (other than a hash value). But should I be worried about other kind of threats?
• Is making a website as basic as possible and then keep on improving it as time goes a sound plan for a long-term personal project? With this I mean, will it be fun or will it be 100% frustrating and I should just go to (whatever hosting service that has premade web applications) and make my website there even though it will be bloated with scripts and stuff?
• Is there something I'm not asking that I should be asking? As I said I know how to code but it feels like web development is a completely different beast sometimes.
• Is there any compelling reason for me to use google analytics, SEO, all that stuff that big websites use? I have never understood the point for it in, for example, github pages.

Thanks for your help! Feel free to correct me on any stupid thing I may have said, I definitely speak from ignorance.

Edit: My biggest issue with this kind of format for conversations is that I cannot thank everybody at the same time, and responding to everyone with a thanks is definitely not contributing anything to the conversation. So I'll put it in an edit. Thanks for all your help! I'll probably be coming for more advice soon...