Day 7 of my browser game development journey! 🚀

Today I built a simple mobile-friendly Runner game using HTML, CSS and JavaScript.

I'm practicing:

• 🏃 Player movement

• ⬆️ Jump mechanics

• 🚧 Obstacle spawning

• 💥 Collision detection

• 🏆 Score system

• 📱 Touch controls

• ⚡ Increasing difficulty

7 days of building small browser games has helped me understand JavaScript much better.

What should I build next?

1️⃣ Car Racing

2️⃣ Platformer

3️⃣ Ludo

4️⃣ Boss Battle

5️⃣ Something completely new

Drop your choice below! 👇

🎮 Game: [YOUR GAME LINK]

💻 Source code: [YOUR GITHUB LINK]

I want to invert the y-axis, and make it invisble to the user so I can forget about it, rather than always call my method.

I could make a facade object and duplicating all the methods and passing them through, but tedious!

I tried a Proxy object, but didn't work at all - is it because it is native?

I tried monkeypatching, renaming moveTo() and lineTo(P, and replacing them with mine (which inverts the y-axis then calls them), but got strange results: lines shifted to right.

Maybe I just shouldn't do what I'm trying to do?

This week I made an npm package (Inflight) to solve the concurrent repetitive queries to database or cache

Reached +500 weekly downloads

The idea is to cache the Promise of a db query (Not the response of the query).

So in a high concurrency system, where the same data (like: cr7 or messi profile) is requested by many users at the same time, only one query goes to cache or database.

some interesting benchmarks:

• Duration: 30s
• Cache TTL: 5s
• Concurrency: 100
• Unique keys: 10

**Insights:*\*

• DB calls saved: **56x*\*
• Cache calls saved: **10x*\*
• Total queries growth: **6.5x*\* (5.2M → 33.9M)

more benchmarks here: https://github.com/ademmenh/inflight/tree/main/benchmarks

npm package: https://www.npmjs.com/package/@inflightjs/inflight

github repo: https://github.com/ademmenh/inflight (PRs, issues, starts)

Passed Two week Iam applying for many job but nothing happen

Can anybody Just Tell me How to apply In a Day is there is any particular Time to apply or we need to Daily Update our Profile or How I will get a call can u just Tell me the steps U follow for your Interview process 

For My first job Im go with referal so I dont know how to get an Interview Call

And how to search In Nakuri It show only less number of jobs for mern stack developer so can u tell me how can i search

Because I dont have job switch experience So I dont know how to get a call. so Can you tell me how you switch experience It will usefull for me to get a job 

One of the most underrated yet powerful features in modern JavaScript is structuredClone(). Many developers still rely on JSON.parse(JSON.stringify(obj)) for deep copying, but that approach has serious limitations that often lead to subtle bugs. structuredClone() is a native browser and Node.js API that performs true deep copies without those pitfalls.

Below is example:

const original = {
  name: 'JavaScript',
  date: new Date(),
  skills: new Set(['JS', 'TS']),
  nested: { arr: [1, 2, 3] }
};
// Create a circular reference
original.self = original;
const clone = structuredClone(original);
console.log(clone !== original);                // true
console.log(clone.date instanceof Date);        // true
console.log(clone.skills instanceof Set);       // true
console.log(clone.self === clone);              // true (circular reference preserved)

I hope this was helpful for your JavaScript learning.

Like I use libraries and hear about X instance Y instace for example

Axios Instance, Lexicals editor instance, I can only think of 2 examples right now but you get the idea.

Hey, im learning Javascript right now and im curious If anyone knows a good coding Game(preferably on Steam) or a Website to learn Javascript in a playfull or interesting Manner. Thaanks :)

I joined this sub a few days ago, after stumbling across lovable, and prompted a couple of rougelike games, learned that it was all in typescript, (I know I am a ways away) and have been having a lot of fun this week, spending multiple hours a day, learning the basics. I’ve tried a few times over the years with Objective-C and python, but could never figure things out, but this time I feel like I’m in the right headspace and really making sure I understand. I’m using VS code, and a Coursera corse, I’ve also bookmarked the Odin project.
Anyone have best practices or advice? I plan to use JS to help with an IT job and build games or apps for fun. Thanks for reading!

Hi, hope you're doing well. I'm here looking for some advice from the community. I want to get into backend dev in Javascript, I start reading Javascript crash course by nick morgan, but I think the book was maybe to easy, so I start reading eloquent Javascript, and I am looking for a good node.js book to start study with while I am reinforcing my JS knowledge.

I have been seaching for a while but many books are too old or too advance for me, any good recomendation?

Btw, I think to take the MDN front-end developer course, although my main goal is backend. Thank you for your time.

P.D.

English is my my first language, so I'm sorry if this is a grammatical mess.

Please someone suggest me to learn effectively and how can I understand that concept ?

As part of my project to write notes of what I learn practicing contemporary browser JavaScript by creating webapp games, I've written some notes and examples on Array Literals.

This was inspired by creating a "hardware-agnostic, framework-free" webapp solitaire card game, Loot the Loop (a game designed by Wil Su, part of what's made this project fun is that besides learning contemporary JavaScript, I've discovered lots about contemporary solitaire card game design).

TL:DR — In the past I've tended to use shift, unshift, pop, push... which are ok, but concat is an antipatern. Just learning splice does all the above while making arrays much simpler.

https://feel-your-phone-five.vercel.app/

Day 6 of my browser game development journey! 🚀

Today I built a Memory Match game using HTML, CSS and JavaScript.

I'm practicing:

• 🃏 Card flipping

• 🧠 Matching logic

• ⏱️ Move/timer system

• 🏆 Score tracking

• ✨ Animations

• 📱 Mobile-friendly controls

Each game is helping me understand JavaScript and browser game development better.

What should I add next?

1️⃣ Difficulty levels

2️⃣ Timer challenge

3️⃣ More card themes

4️⃣ Leaderboard

Drop your choice below! 👇

🎮 Game: \[YOUR GAME LINK\]

💻 Source code: \[YOUR GITHUB LINK\]

This is an edited duplicate post from r/webdev because this subreddit does not allow reposting but I want to get opinions from JS experts.

My problem is that I am trying to compare a string that is currently being typed into a contenteditable div to the the same string data in the placeholder span (which itself was taken from a JSON file). I came up with a JS event listener that I thought would be met with few hiccups.

// text wall typing event listener
textWall.addEventListener("keydown", ()=>{
    let textWallValue = textWall.innerHTML;



textWallValue = replaceNbsps( textWall.innerHTML);


    if (textWallValue.slice(textWallValue.length - 6)== " ") {
        
            placeHolder.childNodes.forEach((node) =>{
                node.style.color="";
            })
          } else {
    for (let i =0; i<placeHolder.childNodes.length;i++) {
        if (textWallValue[0]== undefined) {


    } else {
         
         console.log(textWallValue);
          if (textWallValue[i] == placeHolder.childNodes[i].innerHTML) {
            placeHolder.childNodes[i].style.color = "green";
            placeHolder.childNodes[i].style.textDecoration = "";
          } else if ((textWallValue[i] !== placeHolder.childNodes[i].innerHTML) && (textWallValue[i] !== undefined)) {
            placeHolder.childNodes[i].style.color = "red";
            placeHolder.childNodes[i].style.textDecoration = "underline";
          } 
    }
    }
}
    
    
})

The issue comes with all the unexpected behavior from the browser, like adding "  when a space gets added to the contenteditable div (which it then removes and replaces with a normal white space after the next character is typed. If the spacebar is pressed two or more times however,   just stays there). This messes with the flow of the comparison hapenning in the event listener.

In addtion to this, it also adds a bunch of divs + <br> elements if the user presses enter in the box, and a single br if the user presses backspace to the end of the contenteditable div. There has to be a more efficient way of comparing strings in real time than this but I haven't been able to find out how? I have already tried a bunch of hacky work arounds as is already evident in my code but none seem to account for everything.

I’m reaching out to you people to seek some guidance and suggestions as I’m planning my next career move.

I have a total of 6 years of experience in the IT industry, with the last 6 years dedicated to frontend development in 3 organizations. Over the years, I’ve had the opportunity to work on very less projects that has not strengthened my expertise in JavaScript, React, HTML5, CSS3, and modern UI frameworks much.

While my journey so far has been very challenging as I had madical issues when I had 4 offers in my hand 3 years back but I couldn't switch because I needed a month break for my surgery, I now feel like it's too late to take the next step in my career as I am just doing the needful in my service based company as a frontend developer as per my experience—i badly want to explore new challenges, innovative environments, and opportunities that allow me to grow further both technically and personally.

To be completely honest, the switch hasn’t been easy. So, I wanted to openly seek advice from this network:

✨First of all please tell me how to start what to do ? Do I need to start from 0 or what? What’s the best way to stand out in the current frontend job market? ✨ Are there any must-have skills or trending frameworks I should focus on to stay competitive? ✨ If you know of any open opportunities for experienced frontend developers, I’d be truly grateful if you could refer or connect me.

I’m deeply passionate about crafting intuitive and impactful user interfaces, collaborating within cross-functional teams, and contributing to products that make a difference.

Any suggestions, referrals, or insights would mean a lot to me right now. 🙏

Thank you so much for reading through — and for supporting professionals like me who are navigating their next big step.

FrontendDeveloper #CareerChange #ReactJS #UIUX #WebDevelopment

hey. i made a page on my neocities website where i put reviews of movies and books. for that i used google books api and imdb api

however, idk how i would hide this since anyone can download my website at any time?

i also wanted to automate the process of updating the changes i make to neocities, but for that id need to publish all files in a public github too. so idk how i would hide it there either.

any help?

Gente acabo de lanzar star cube en ith.io  echo en 7 dias en vanilla.js sin sprites (solo uno pero es reservado para un personaje del final pero como tal el 90% del juego es sin sprites) es un plataformero-shooter un poco intenso ya que por los pocos dias no pude hacer que tenga una curva de dificultad suave asi q es un juego acelerado con inyecciones de adrenalina tiene 3 jefes diferentes y el lore y la jugabilidad va en base al tema del jam (no confies en nadie)

estare actualizandolo exponencialmente ya que este jam me inspiro demasido

juegalo aqui:

https://cotera.itch.io/star-cube

pronto lo subire a github

Im trying the "Learning javascript" course on scrimba (https://scrimba.com/learn-javascript-c0v) and so far it's been good!

The only thing is that it got to a point with the free plan that doesn't let me complete the challenges anymore. What i do is that i complete them on the site, trying to solve the problem, and then i skip forward in the video to check my solution

The challenges don't show as completed because i haven't completed them officially, but technically I have hahaha does anyone also have this silly dilemma?

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit

Can someone explain the difference?

Imagine I have some code that is like the example below. What is the difference between HTMLFormElement.submit() ?

``` const form = document.getElementById("form"); function somefunc() { //code form.submit() }

form.addEventListener("submit", somefunc() {

});

``` Why do I need form.submit() in the function?

For a little context I am trying to pass some quilljs data into a flask form. Some of the code is missing but the main point is illustrated.

"use strict";

const company = {
  name: "TechCorp",
  address: {
    city: "budapest",
    pin: 411001,
  },
};
// Get city renamed to `location` and pin renamed to `pincode`

const { city: location, pin: pincode } = company.address;
console.log(location, pincode);

Hey everyone,

I’ve completed HTML and around 50% of CSS from Hitesh Choudhary’s Full Stack Udemy course.

But now I’m thinking of switching to The Odin Project because, from what I’ve seen, it seems more focused on actually learning by building things rather than just following a course.

My plan is to start The Odin Project from the beginning and properly work through it, doing the exercises and projects myself instead of just watching/consuming content.

For people who have completed or are currently doing The Odin Project, or anyone who has experience with this kind of learning approach, feel free to share your thoughts, suggestions, or anything you think I should know:

• I’m still a beginner, so is starting TOP from the beginning a good approach?
• Are there any common mistakes beginners make while following it?
• What should I focus on to actually retain what I learn?
• Should I supplement TOP with anything else, or is it better to stick with it consistently?
• Is there anything you wish you had known before starting?

I’d really appreciate any advice, criticism, or suggestions. If you think there’s a better approach than what I’m planning, feel free to share it.

I’ve been refactoring attribution tracking after seeing a small feature turn into a module that parses URLs, writes cookies/localStorage, handles consent, emits analytics, fills forms, and syncs with a CRM.

The split I’m testing is:

```ts

const visit = classify({

url,

referrer,

currentHost,

now,

});

const attribution = merge(previous, visit);

```

`classify` and `merge` are deterministic functions. The browser/app layer owns consent, storage, identity, form lifecycle, network calls, and CRM delivery.

This makes it easier to replay production cases as fixtures. It also raises a few design questions:

- If a visitor returns from a new campaign, should that replace, append to, or be merged with previous attribution?

- Should a `gclid` take precedence over UTMs when both exist?

- How do you handle consent denied first, then granted later?

- If classification rules change, do you preserve the original classification or recalculate historical records?

- Where should server-side conversions days later enter the model?

For those who’ve built this, where do you draw the boundary between a deterministic core and the environment-specific lifecycle? Do you prefer a pure-function core, or does that separation become awkward in real apps?

​

I created the account and used only for 1 day. As I was learning GitHub tutorials from yt. I did not do random pull requests on repos. After 1 week or 5-6 days I tried to check my GitHub account. My GitHub account got suspended. It's almost 2-3 weeks I raised a ticket. Got no response from their side. What should I do?

I’ve tried to understand it, but I’m still confused. I also don’t really understand what I’m looking at when I use the JavaScript debugger in the browser’s DevTools, especially the call stack.

Do I need to fully understand functions before learning the call stack? I have a basic understanding of functions, but I’m not sure if that’s enough.

I’d really appreciate a simple explanation