• Activity
  • Votes
  • Comments
  • New
  • All activity
  • Showing only topics with the tag "web development". Back to normal view
    1. What libraries do you use for implementing web forms, if any?

      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...

      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.

      6 votes
    2. Self-hosted DnD 5e Charsheets

      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...

      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.

      16 votes
    3. "Java is fast but in practice, PHP sites run faster as PHP coders take more straightforward approach to design and don't get lost trying to implement exotic design patterns and endless abstractions"

      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...

      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?

      35 votes
    4. Request: Ideas and tips for creating a portfolio to get a web developer job

      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...

      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!

      23 votes
    5. Are there any good programming podcasts to listen these days?

      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...

      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.?

      34 votes
    6. What's a good way to test a website that runs on edge nodes?

      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...

      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?

      4 votes
    7. Good resources for accessibility in web design/development?

      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...

      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!

      16 votes
    8. How can you have the img's src attribute point to a web page itself instead of an image?

      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...

      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?

      7 votes
    9. What's a simple, cheap way to run a database-backed website as a hobbyist?

      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...

      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.)

      47 votes
    10. Making infinite scrollable lists for web without a constantly expanding DOM

      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...

      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?

      11 votes
    11. How can I push/inspire myself to learn JavaScript and Node?

      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...

      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?

      9 votes
    12. Open source recommendations for a photo/post voting site?

      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....

      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!

      11 votes
    13. Looking for a Simple WYSIWYG Editor for my Blog

      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...

      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!

      5 votes