Hey, I just finished recordings for A11Y course on Udemy*/YouTube, comes with 61 CodeSandboxes, where you can just quickly click to jump into the problem.
https://github.com/Ditectrev/Awesome-A11Y-Book-Course-Web-Accessibility-A11Y

*If you like the content, DM me, I'll send a free link to the video version.

https://github.com/spcbeck/ouroboros-html

You've used JSX, you've used Pug, but you still feel like you haven't found that perfect abstraction of HTML that makes your developer life easier. I'm here to provide you that tool. With Ouroboros HTML, you can create beautiful, full function HTML sites with all the functionality HTML5! You can even rely on the MSDN docs learn how it works, and there is an existing huge community that knows the ins and outs of HTML5.

I would love to hear what you think, and let me know if you use it in a project! Like and subscribe!

I spent 55 years in construction, mostly hi-rise, finishing up as construction manager on a pair of 40-storey towers. Retired now.

Here's what I've come around to: for most jobsite work, a program you keep on your machine beats a subscription.

A few reasons.

Nobody can switch it off. Every subscription is a vendor decision away from a price hike, a retired feature, or a company that folds. A file that opens in any browser has nothing to install and nothing to expire — it opens the same way in ten years as it does today.

It works without a connection. Site trailer, basement, a laptop in the truck at 6 a.m. No login screen, no "reconnecting."

No account and no IT approval. A superintendent shouldn't have to ask head office for permission to open a file.

The job data stays put. Owners and developers get twitchy about where their numbers live, and they're not wrong to.

You can get it out again. This one gets overlooked until the day you need it. If the data is on your disk in a format you can open, then handing it to an owner at closeout — or moving it into something else — is a copy and paste, not a support ticket.

The usual objection is "what if your computer dies?" That doesn't hold up the way it used to. Windows syncs Documents and Desktop to OneDrive out of the box — the file is already backed up whether you thought about it or not. Just don't leave it sitting in Downloads.

Where the rental model does win: several people editing the same thing at the same time. That's genuine. But most of what I did day to day wasn't that. One person owns the schedule, everyone else gets a copy to read.

Curious whether people running jobs now see it differently.

This is my code, it's not working, im losing it.

<link href="style.css" rel="stylesheet" type="text/css" media="all">

<style>

u/import url('https://fonts.googleapis.com/css2?family=New+Rocker&family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&display=swap');

.new-rocker-regular {

font-family: "New Rocker", serif;

font-weight: 400;

font-style: normal;

}

</style>

I want it so, it’s compatible with android/apple and desktop friendly. They can download it when I sell on Etsy or payhip ect. I wanted it to look nice, instead of, you might have to download documents from readdle if you can’t open you html file 😩. I am autistic, so please no jargon 😵‍💫

All I need

I have some experience - I can read tags, images and most code. Ive been coding for about a week now and am wondering how you guys learned? If you care to share please do!

I've been trying to embed different code on different posts for the past couple of days, but Medium wont successfully save.

First it was Typescript embed which just froze showing "saving post", and now it plain ol' HTML which is outright popping a red banner on top "Story could not be saved. Please check your internet connection. Try again" - but my internet is fine. I can edit and save okay other parts of the post.

Has anyone encountered this before?

Edit: solve it! Medium only allows embedding from a limited list of sources 🤦‍♂️

​

Hello everyone,

I have created an Android APK using an HTML-based quiz application.

The APK allows me to import HTML quiz files, and the imported files/data work perfectly while the app is open. However, there is a problem with data persistence.

Whenever I close/exit the APK and open it again, all the previously imported HTML files and saved quiz data are cleared/reset. It seems that the data is being stored only temporarily (possibly in cache/session storage) instead of persistent device storage.

I want the app to work like this:

Imported HTML files should be saved permanently on the device.

All imported quizzes/data should remain available after closing and reopening the APK.

Data should not be deleted when the app is exited or restarted.

The data should only be removed when the user explicitly chooses to delete it or uninstalls the app.

How can I fix this storage/persistence issue in an HTML-to-APK app?

Any guidance regarding localStorage, IndexedDB, WebView storage, or Android persistent storage would be appreciated.

Thank you.

Hi, ich wollte einfach als Hobby etwas mit HTML und CSS arbeiten. Websites machen oder so (einfach nur für mich)
Ich hab ganz grundlegende Schritte mit ChatGPT gemacht aber gibts da richtige „Lehrbücher“ oder irgendwas in der Art, um Schritt für Schritt zu lernen?

So I've been using vscode for a while and I saw that recentely the moment I modify a file or create a new one, I can't save them normally, I need to use AI to do this, the file is saved in a github but before I didn't had this problem, is there any way to change this?

I'm building a small Space Shooter with HTML, CSS and JavaScript.

I'm currently working on spawning enemies at different positions and intervals. The basic spawning works, but I'm trying to make the difficulty increase gradually without creating too many enemies at once.

Has anyone got a good approach for scaling enemy spawn rates over time in a browser game?

I'm learning JavaScript through this project, so I'd appreciate any suggestions.

I need to understand before purchasing one website coz recently people have been selling them at high percentage

I'm building a mobile-friendly Snake game using HTML, CSS and JavaScript.

I built the game to practice JavaScript game development, including:

🐍 Snake movement

🍎 Food and score system

💥 Collision detection

📱 Touch controls

🎮 Game-over logic

The game works, but I'm trying to improve the touch controls so that swiping feels more responsive and doesn't accidentally register unwanted directions.

For a mobile browser game, would you recommend handling this mainly with touchstart/touchmove/touchend, or is there a better approach?

I'm learning JavaScript through these small games, so practical suggestions would be really helpful.

Hello friend what's is the best school can Study html and css and java script

Here is a really simple example.
https://codepen.io/chooking/pen/zxKvqyZ

When I click on the Fx button I get the blue box here https://imgchest.com/p/vj4jbg2e978 ,though it is a little cut off, how do I make the form expandable in the width and height like textarea while keeping the html tags or in other words keep the equation formatting from the fx button?

One idea is to use textarea. Can someone give me an idea on how to accomplish my goal and show the code for a solution?

Also I posted this here https://www.reddit.com/r/learnjavascript/comments/1vzg1cr/i_am_trying_to_make_the_formula_button_expandable/ just fyi.

Greetings everyone, so i am new to html and just wanna make some simple project for myself and i found some template online for my need but for some reason it doesnt sort out the numbers right, this is the code below

<style>
table {
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

th {
  cursor: pointer;
}

th, td {
  text-align: left;
  padding: 16px;
}

tr:nth-child(even) {
  background-color: #f2f2f2
}
</style>
<p><strong>Click the headers to sort the table.</strong></p>
<p>The first time you click, the sorting direction is ascending (A to Z).</p>
<p>Click again, and the sorting direction will be descending (Z to A):</p>

<table id="myTable">
  <tr>
   <!--When a header is clicked, run the sortTable function, with a parameter, 0 for sorting by names, 1 for sorting by country:-->  
    <th onclick="sortTable(0)">Username</th>
    <th onclick="sortTable(1)">Followers</th>
  </tr>
  <tr>
    <td>KennyTerrelBigGuy</td>
    <td>332</td>
  </tr>
    <tr>
    <td>Urduboy</td>
    <td>319</td>
  </tr>
    <tr>
    <td>aidiaCutePinkyGirl20</td>
    <td>1777</td>
  </tr>
  <tr>
    <td>ReedAFDrawsStuff</td>
    <td>1688</td>
  </tr>
    <tr>
    <td>Jaketstepp</td>
    <td>780</td>
  </tr>
    <tr>
    <td>MGGStudios2</td>
    <td>205</td>
  </tr>
</table>

<script>
function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("myTable");
  switching = true;
  //Set the sorting direction to ascending:
  dir = "asc"; 
  /*Make a loop that will continue until
  no switching has been done:*/
  while (switching) {
    //start by saying: no switching is done:
    switching = false;
    rows = table.rows;
    /*Loop through all table rows (except the
    first, which contains table headers):*/
    for (i = 1; i < (rows.length - 1); i++) {
      //start by saying there should be no switching:
      shouldSwitch = false;
      /*Get the two elements you want to compare,
      one from current row and one from the next:*/
      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];
      /*check if the two rows should switch place,
      based on the direction, asc or desc:*/
      if (dir == "asc") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          //if so, mark as a switch and break the loop:
          shouldSwitch= true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          //if so, mark as a switch and break the loop:
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      /*If a switch has been marked, make the switch
      and mark that a switch has been done:*/
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      //Each time a switch is done, increase this count by 1:
      switchcount ++;      
    } else {
      /*If no switching has been done AND the direction is "asc",
      set the direction to "desc" and run the while loop again.*/
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}
</script>

It started as a throwaway joke online after some discussions with the design team. Then someone dared me to write the blog post... so I did. 😅

tl;dr Four HTML/web terms look and sound so similar, they create friction. In this post, I break down The 4 Hs of HTML to clear things up:

• Head: The invisible brain of the document (machine-readable metadata.)
• Header: The visible introduction or banner section (a page can have multiple!)
• Heading: The structural outline of your content (vital for accessibility and SEO.)
• Headline: An editorial concept for message delivery (NOT AN HTML TAG)

I liked this image that someone posted on linkedin.

A beginner here and i need urgent help. This is my first ever project and i have been asked to make this wedding invitation website that on touch triggers this animation and then moves on to this scrollable website in which user can input stuff. My question is that how do they do the animation part? Is it all code? Or code plus canva? Do they do the animation part on canva and the actual scrollable website using code or what? My design idea is an envelope with a stamp which opens up and then the letter inside it expands, i tried designing elements on canva and then exporting them as svgs/pngs then using code for animation, it didn’t work even closely well as the elements dont sit together well. I even divided them into bottom flap and upper flap with stamp it still didnot work. My video inspiration is below although this doesnot have the design in mind but the workflow is quite similar.

Video link attached: https://www.instagram.com/reel/Db6qWK7oYBn

following the code from here, author Kirupa. trying to lock the text inside the items, everything currently is dragable.

depending on where you click you will either drag the whole tag, or just a section. the more content in the tag, the more draggable parts within it.

CSS

    #container {
      width: 100%;
      height: 400px;
      background-color: #333;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border-radius: 7px;
      touch-action: none;
    }


    .item {
      border-radius: 50%;
      touch-action: none;
      user-select: none;
      position: relative;
    }


    .one {
      width: 100px;
      height: 100px;
      background-color: rgb(245, 230, 99);
      border: 10px solid rgba(136, 136, 136, .5);
      top: 0px;
      left: 0px;
    }


    .two {
      width: 60px;
      height: 60px;
      background-color: rgba(196, 241, 190, 1);
      border: 10px solid rgba(136, 136, 136, .5);
      top: 30%;
      left: 10%;
    }


    .three {
      width: 40px;
      height: 40px;
      background-color: rgb(0, 255, 231);
      border: 10px solid rgba(136, 136, 136, .5);
      top: -40%;
      left: -10%;
    }


    .four {
      width: 80px;
      height: 80px;
      background-color: rgb(233, 210, 244);
      border: 10px solid rgba(136, 136, 136, .5);
      top: -10%;
      left: 5%;
    }


    .item:active {
      opacity: .75;
    }


    .item:hover {
      cursor: pointer;
    }

HTML

<html>

<body>


  <div id="outerContainer">
    <div id="container">
      <div class="item one">
        <h1>hi</h1>
      </div>
      <div class="item two">
   <h1>bye</h1>
      </div>
      <div class="item three">
   <h1>here</h1>
      </div>
      <div class="item four">
   <h1>there</h1>
      </div>
    </div>
  </div>

</body

</html>

JS

    var container = document.querySelector("#container");
    var activeItem = null;


    var active = false;


    container.addEventListener("touchstart", dragStart, false);
    container.addEventListener("touchend", dragEnd, false);
    container.addEventListener("touchmove", drag, false);


    container.addEventListener("mousedown", dragStart, false);
    container.addEventListener("mouseup", dragEnd, false);
    container.addEventListener("mousemove", drag, false);


    function dragStart(e) {


      if (e.target !== e.currentTarget) {
        active = true;


        // this is the item we are interacting with
        activeItem = e.target;


        if (activeItem !== null) {
          if (!activeItem.xOffset) {
            activeItem.xOffset = 0;
          }


          if (!activeItem.yOffset) {
            activeItem.yOffset = 0;
          }


          if (e.type === "touchstart") {
            activeItem.initialX = e.touches[0].clientX - activeItem.xOffset;
            activeItem.initialY = e.touches[0].clientY - activeItem.yOffset;
          } else {
            console.log("doing something!");
            activeItem.initialX = e.clientX - activeItem.xOffset;
            activeItem.initialY = e.clientY - activeItem.yOffset;
          }
        }
      }
    }


    function dragEnd(e) {
      if (activeItem !== null) {
        activeItem.initialX = activeItem.currentX;
        activeItem.initialY = activeItem.currentY;
      }


      active = false;
      activeItem = null;
    }


    function drag(e) {
      if (active) {
        if (e.type === "touchmove") {
          e.preventDefault();


          activeItem.currentX = e.touches[0].clientX - activeItem.initialX;
          activeItem.currentY = e.touches[0].clientY - activeItem.initialY;
        } else {
          activeItem.currentX = e.clientX - activeItem.initialX;
          activeItem.currentY = e.clientY - activeItem.initialY;
        }


        activeItem.xOffset = activeItem.currentX;
        activeItem.yOffset = activeItem.currentY;


        setTranslate(activeItem.currentX, activeItem.currentY, activeItem);
      }
    }


    function setTranslate(xPos, yPos, el) {
      el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
    }
  </script>
</body>


</html><!DOCTYPE html>
<html>


<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
  <title>Drag Multiple Elements</title>
  <style>
    #container {
      width: 100%;
      height: 400px;
      background-color: #333;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border-radius: 7px;
      touch-action: none;
    }


    .item {
      border-radius: 50%;
      touch-action: none;
      user-select: none;
      position: relative;
    }


    .one {
      width: 100px;
      height: 100px;
      background-color: rgb(245, 230, 99);
      border: 10px solid rgba(136, 136, 136, .5);
      top: 0px;
      left: 0px;
    }


    .two {
      width: 60px;
      height: 60px;
      background-color: rgba(196, 241, 190, 1);
      border: 10px solid rgba(136, 136, 136, .5);
      top: 30%;
      left: 10%;
    }


    .three {
      width: 40px;
      height: 40px;
      background-color: rgb(0, 255, 231);
      border: 10px solid rgba(136, 136, 136, .5);
      top: -40%;
      left: -10%;
    }


    .four {
      width: 80px;
      height: 80px;
      background-color: rgb(233, 210, 244);
      border: 10px solid rgba(136, 136, 136, .5);
      top: -10%;
      left: 5%;
    }


    .item:active {
      opacity: .75;
    }


    .item:hover {
      cursor: pointer;
    }
  </style>
</head>


<body>


  <div id="outerContainer">
    <div id="container">
      <div class="item one">
        <h1>hi</h1>
      </div>
      <div class="item two">
   <h1>bye</h1>
      </div>
      <div class="item three">
   <h1>here</h1>
      </div>
      <div class="item four">
   <h1>there</h1>
      </div>
    </div>
  </div>


  <script>
    var container = document.querySelector("#container");
    var activeItem = null;


    var active = false;


    container.addEventListener("touchstart", dragStart, false);
    container.addEventListener("touchend", dragEnd, false);
    container.addEventListener("touchmove", drag, false);


    container.addEventListener("mousedown", dragStart, false);
    container.addEventListener("mouseup", dragEnd, false);
    container.addEventListener("mousemove", drag, false);


    function dragStart(e) {


      if (e.target !== e.currentTarget) {
        active = true;


        // this is the item we are interacting with
        activeItem = e.target;


        if (activeItem !== null) {
          if (!activeItem.xOffset) {
            activeItem.xOffset = 0;
          }


          if (!activeItem.yOffset) {
            activeItem.yOffset = 0;
          }


          if (e.type === "touchstart") {
            activeItem.initialX = e.touches[0].clientX - activeItem.xOffset;
            activeItem.initialY = e.touches[0].clientY - activeItem.yOffset;
          } else {
            console.log("doing something!");
            activeItem.initialX = e.clientX - activeItem.xOffset;
            activeItem.initialY = e.clientY - activeItem.yOffset;
          }
        }
      }
    }


    function dragEnd(e) {
      if (activeItem !== null) {
        activeItem.initialX = activeItem.currentX;
        activeItem.initialY = activeItem.currentY;
      }


      active = false;
      activeItem = null;
    }


    function drag(e) {
      if (active) {
        if (e.type === "touchmove") {
          e.preventDefault();


          activeItem.currentX = e.touches[0].clientX - activeItem.initialX;
          activeItem.currentY = e.touches[0].clientY - activeItem.initialY;
        } else {
          activeItem.currentX = e.clientX - activeItem.initialX;
          activeItem.currentY = e.clientY - activeItem.initialY;
        }


        activeItem.xOffset = activeItem.currentX;
        activeItem.yOffset = activeItem.currentY;


        setTranslate(activeItem.currentX, activeItem.currentY, activeItem);
      }
    }


    function setTranslate(xPos, yPos, el) {
      el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
    }

How to preserve the UI but have to clean the CSS overrides?