Elijah Seed-Arita [INTDEV]

thanks! my original intention was to switch to a proper blog, but maybe i'll stick with the threads for now!

glad you liked it, maybe i'll continue this way!

That's it. Here's the final product. You have a player that can move around. This is a very basic game, but I hope it gets your imagination running. I plan to continue this series with a lot more info.

What medium would people prefer? Video, blog, or continuing like this?

Cool, now the screen gets cleared. Lastly, to make this a "game", let's add some basic controls. Instead of blindly incrementing x and y every frame, let's do it if keys are pressed down. We can add keydown and keyup listeners and toggle some booleans.

Something happened, but it looks like it's dragging across the screen! We just need to clear the screen before we redraw.

We can start to make this square move around. Let's create variables for x and y and use them for the position of the square. Then we can move rendering of the square into an "update" function, and update the x and y every frame. Then we set the function to be called repeatedly to make it move.

Now, we can use the context (ctx) to draw something on the screen. The parameters for fillRect are (x, y, width, height). Now our program is already doing something!

To start the script, we can get the canvas and make a context out of it.

Next, we can add a canvas element and a script. The canvas is where the game will render and it has an ID of "c" so we can get it in the code later. And the script will contain the javascript code for the game.

We only need one file. I'll create index.html somewhere convenient, with a basic HTML structure.

Wanted to share how easy it is to create a simple game in JavaScript. Set aside about 20 minutes, this is what we'll create today - a player you can control with WASD.

yeah, i don't think i had a single element that was not auto layout actually. i almost wonder if i'm slowing myself down by overusing it haha

welcome back to the trenches, you shall remember the rage of battle soon enough

engineer's design practice 0x3
linear sidebar study

compared to writing code, figma makes me feel like a slug. rn it takes me longer to build out a design in figma than to literally code it. but it's important to try new mediums, and it may help me learn to think differently!

FEAR NOT WE WILL TRIUMPH

NOOOOOOOOOOOOOOO

always so many things to do. but i'm doing what i love! : )

today's release, super basic text formatting

wasn't able to finish it tonight, but got somethin cool-ish dropping tomorrow. for now GN🛏️

diagram.page Simple flowchart builder

another quick diagram.page fix from this morning

- first node being place at the wrong position due to a missing useEffect dependency

editing process is starting to feel a lot smoother, but still lots to do!

just published some bug fixes for diagram.page

- shift+click not selecting multiple nodes
- node menu getting hidden by other nodes
- delete hotkey removing nodes that were previously selected and then deselected
- google auth
- nodes not selectable after dragging

seems like svg paths are starting to become a common thread in my work B)

more work on pathfinding for diagram.page. trying to preserve the bezier lines when there's an obstruction, instead of defaulting to hard angles.

it's pretty janky rn but i'm starting to feel fairly confident about shipping this feature in the near future once fixed!

experimenting with any-angle pathfinding

engineer's design practice 0x2
blog

i'm interested in starting a blog to share programming knowledge in long form. some initial thoughts on paper before bed.

i'm aiming to create the simplest format possible that still feels good to read. we'll see how it goes!

i created a detachable video player for our react component library. it works by putting the video into a fixed position replicating a reference element.

i'll post the link to source when i merge!

you can try it out here if you're interested! eseed.dev/experiments/...

thanks for the tutorial! me practice practice 💪

engineer's design practice 0x1
wireframes

1) in-app landing content left-aligned
2) in-app landing content centered
3) separate landing page

while my ideas will need a lot of work, i want to start with just getting a feel for this medium. i'll try to draw an existing ui next!