snaildotexe

[snaildotexe]

it's interesting how ideas of how you'd do Augmented Reality have changed over the past few years. If you look at like, Hololens, that was assuming you'd run a transparent display over top of your normal vision. The current approach is that no, that's way too hard, you have to deal with real world lighting and the limitations of transparent displays. It's much easier to just fully capture the outside world and display the whole thing to the user through displays. And it works! Even the awkwardly placed, grainy, black and white tracking cameras repurposed as passthrough on my Quest 2 give you a pretty good experience of injecting virtual items into the space around you.

#VR #AR

[snaildotexe]

Oh my god. I never checked the video before posting... im only now realizing you can hear the stream i was watching in the background 😭😭😭

AND I was watching from both streamer's perspectives so it sounds like an echo lmao

Simple react/next js todo list

Modeled after this tutorial by Web Dev Simplified, but using Next.js and Tailwind

I think following a plain react tutorial while using next js is what gave me some issues, especially being my first react project. I probably should have learned some basic react first before going into frameworks, but oh well.

Trying to line up the text with the CSS paper was a huge pain. I still don't like how it looks but at least it's not floating through the lines anymore lol.

The data persistence gave me the most trouble (took me like FIVE hours 😭). The way it was done in the video did not work for me at all, so I had to figure it out. Local storage can't be accessed during server-side rendering, so accessing localStorage has to be done during client-side rendering, using the useEffect hook. But, as I've learned, the useEffect hook doesn't have a return value, and hooks can only be called at the top level. Then I found out that React intentionally calls useEffect twice and that was resetting my local storage with the empty initialization value -_- But in the end i got it working :)

Now I wanna add some more features; a delete all, clear selected, maybe edit note.

#anyway #follow criken #and charborg #theyre really funny

[snaildotexe]

i know this means absolutely nothing to most people but basically all of the little web game things I've made recently (angels in automata, hex plant growing game, d.a.n.m.a.k.u., life music, sudoku land, the metroidvania style map editor, etc etc etc) are all entirely self-contained individual client-side html files that can be downloaded and run offline and have literally no libraries or frameworks or dependencies, because i'm an insane woman who enjoys hand coding my input handling and display code from scratch in vanilla js and having it all live in one single html file with the game logic and the page structure and the page style all just living and loving together side by side in a universal format that can be run by any web browser on any devixe. i'll even include image files as base64 data-uri strings just to keep every single asset inside the one file.

#gamedev

[snaildotexe]

Every now and then I remember that Malbolge exists and I get to spend the better part of an hour cry-laughing at the world’s worst programming language

already starting off strong, but it gets worse

Wow! Sounds easy and intuitive to use! What’s the “crazy operation” you ask? We’ll get to that later. For now let’s see what a program in this language looks like :)

Thanks! I hate it!

it’s so difficult to work with that the first program was written by another brute force search program

mmmmm delicious base-3 arithmetic, what could go wrong? (For reference, that means this program forgoes the usual “0/1″ values of binary code in favor of a much more fun “0/1/2″ set of values)

ah.

Here’s how the language actually figures out what to do. It’s got 8 “simple” commands that can be executed easily by *checks notes* running the code itself through the modulo operation and taking the result.

As a bonus, on top of all that every single character in your code will now alter what every single other character does. So I hope you’re alright with cracking a cipher every time you add a new letter to your program!

oh god oh fuck.

behold, Malbolge’s primary arithmetic operation and what you’ll be using for most of your math while programming with it :)

This looks specifically designed to be the least logical math operation you could make, and knowing what the rest of Malbolge is I’d wager that’s precisely what happened. I never want to ever use this and it’s my favorite thing I’ve ever seen.

https://en.wikipedia.org/wiki/Malbolge

Anyways here’s the wiki page if you wanna read through it more deeply, I’m gonna sit here holding in my laughter staring at the hello world program again.

[snaildotexe]

Going full zoomies and learning how to code online multiplayer?????? This is what funk and hyperpop does to a mf

btw song is KITTYCHAMPING by AQUASINE

[snaildotexe]

Let's talk about filtering and mapping! 🤓

I'm working on the menu page for a restaurant, and as someone with very little frontend experience I wasn't sure how to go about parsing through a JSON file to return certain objects.

After some searching, procrastinating, going through this course, and then more searching - I finally came across the documentation I needed here!

So what is filtering and mapping? .filter() and .map() are JavaScript methods.

filter allows you to filter through an array of objects given some logic (want to find all the items with an id greater than 7? filter. Want to find all the items where the name is equal to "burger" that works too, want to add multiple conditions to find all the items with and id greater than 7 AND the name is "burger" well filter has got your back).

map is used to iterate through an array and call a function on every element in it. I used it to map each item to a list.

Here's an example: We have a JSON file of some food items.

We want to grab all the desserts from our menu and display them on the desserts page of our website. It's time to filter!

Keep in mind that the filter method returns a new array with all the objects that we want. In this case when we filter we will get an array with all the desserts.

First we import our JSON file so we can access it.

Next, we create a constant called dessertFilter which will hold our filtered array. dessertFilter will hold all items that have the type equal to dessert. In our example it will hold the chocolate cake object.

Next, we map each item from the new array to a list. This is the list that we'll see displayed on the page. You can choose which properties you want to map. We only map the name, description and price since there's no need for the user to see the item type or id.

Lastly, our return statement contains everything we will see on the page. In our return we have a header and the list of items - we wrap our list, dessertItems in an unordered list since list items need to be wrapped in either an ordered or unordered list.

Here's our result! We can style this with css later.

Cool! so we filtered for dessert but what about our other menu items? Time to make a reusable component.

The code is almost the same, but to make this component reusable we create an interface. Interfaces define objects and specify their properties. We specify an object called filterSearch that will act as a placeholder - we set it as a string since the item "types" in our JSON file are strings. (I'm using typescript which accepts interfaces but i believe vanilla javascript does not).

Now lets see the component in action

Import the component so we can call it.

When we call FilterMenu we have to include filterSearch from our interface. The component needs to know what we're looking for. Here we can set it to any valid type like "dessert", "drink", or "appetizer" and it will display them.

Woo! now we're filtering and mapping with one line of code! and we can reuse it for our other pages too.

Last thing, these methods are chainable! you can connect them and have the same logic in one constant.

Before reading the documentation, I had seperate JSON files for each menu category and was reusing the same code to map each file on each individual menu page. It was a lot of duplicate code, not great. Now, I have a single JSON file and a reusable component. It's satisying how clean it is!

Learning on your own can be frustrating sometimes, it can be hard to search for solutions when you don't know where to begin. I had never heard of filtering or mapping before this. If you're ever stuck keep pushing! there's so many resources and communities out there.

p.s. I'm open to any suggestions!

#json #mapping

[snaildotexe]

Simple react/next js todo list

Modeled after this tutorial by Web Dev Simplified, but using Next.js and Tailwind

I think following a plain react tutorial while using next js is what gave me some issues, especially being my first react project. I probably should have learned some basic react first before going into frameworks, but oh well.

Trying to line up the text with the CSS paper was a huge pain. I still don't like how it looks but at least it's not floating through the lines anymore lol.

The data persistence gave me the most trouble (took me like FIVE hours 😭). The way it was done in the video did not work for me at all, so I had to figure it out. Local storage can't be accessed during server-side rendering, so accessing localStorage has to be done during client-side rendering, using the useEffect hook. But, as I've learned, the useEffect hook doesn't have a return value, and hooks can only be called at the top level. Then I found out that React intentionally calls useEffect twice and that was resetting my local storage with the empty initialization value -_- But in the end i got it working :)

Now I wanna add some more features; a delete all, clear selected, maybe edit note.

#javascript #react #nextjs #tailwind #codeblr #mypost #myproject

[snaildotexe]

What does a best website structure include

The process of creating a website is known as Web Design And Development. It involves the two crucial skill sets of web design and web programming, as the name would imply. The feel and appearance of a website are decided by web development. The terms for the two roles are frequently used interchangeably because there isn't usually a clear boundary that distinguishes Web Design & Development. The jobs change along with the web's ongoing web design app development. 

Since the first website was made about 30 years ago, several job titles have appeared to describe the varied skill sets required to develop a product design website, and designer websites are being produced every year. The definitions of these roles vary from industry to industry and frequently overlap. It's enough to give you a dizzy feeling.

Here are some of the worthy elements of website design. Let’s check them out:

Elements of web design

The renowned designer Paul Rand stated, "Design is a problem-solving activity," in his article The Politics of Design. It gives a way to make a word, a picture, a thing, or an event clearer, more concise, and dramatic.

Web designers are always developing solutions for their users. Website visitors should be able to use them effectively to complete their tasks. Unhappy customers are less likely to hang around or, worse yet, return to a website.

Because of this, every aspect of web Product Design Website works to make the site as user-friendly as possible so that visitors will return time and time again and engage with it.

Layout: A website's header, navigation bar, footer, content, and graphics are arranged according to its layout. The layout is chosen based on the website's objectives and how the web designer wants users to engage with it. A journalistic website would emphasise text and letter spacing, whereas a photographic website would prioritise large, attractive photographs.

Visual hierarchy: A user should be able to quickly find the data they require on a Designer Website. At this time, visual hierarchy appears on the scene. Visual hierarchy is the process of determining which website aesthetic aspects should stand out using size, colour, spacing, and other considerations.

This article's headings serve as a simple illustration of visual hierarchy. They give you, the reader, a brief explanation of the topic of this piece.

Navigation: Using navigational elements like site layout, menus, and search bars, users can move from point A to point B. Thanks to straightforward, efficient navigation, users may get the information they're looking for quickly and simply.

Color: A website's colour scheme gives it individuality, makes it stand out, and instructs visitors on what to do. The existing identification of a business or a website's content may influence the colour scheme (like how this plant website uses hues of green). An organised colour scheme lends structure to a website.

Rundown

If you are looking for the best website design and development, go with the technicalities of the website design and try to make it in an innovative way. At Kodehash, you can get the best Website Design App and development for your business, which can take you up to the next level.So for more call us@[phone] or visit at website: https://kodehash.blogspot.com/2022/09/what-does-best-website-structure-include.html

[snaildotexe]

I'm godoting again

Would you believe this all runs on a single script?

#gamedev #godot

[snaildotexe]

made a better sheet of paper using css only, the last one used a repeating background img

#mypost

[snaildotexe]

took me an hour and a half to make this css sheet of paper yesterday

#mypost

[snaildotexe]

hey, i just wanted to share a project me and a classmate made for our introduction to oop class :) its a gui for a cinema

#cool project!

[snaildotexe]

I think programmers should start taking commissions like artists and authors do. There's a lot that'd have to be worked out for pricing and such, but I think it'd be nice if people could get bespoke programs for the devices that they use literally all day.

#cool idea #im working on learning react and eventually react native so i can do ios/android apps #this motivates me even more!

[snaildotexe]

spliced my esp32c3 into the control line for this ws2812 string so I can now write whatever control program I want. Perfect. I'm using this crate for emitting ws2812 command pulses using the esp32's remote control signal processor which is a neat hack.

https://crates.io/crates/ws2812-esp32-rmt-driver/0.6.0

The plan is to string this up around the perimeter of my apartment so I want to use some kind of expression evaluation library so that I can write patterns mapped over n and t without recompiling. Not sure whether exprtk can cross-compile to riscv but I think there's a decent native rust based expression evaluator that I could use too.

Upon closer review I had misread the circuit diagram for this board (DFRobot ESP32-C3 Beetle) and it actually does pass the 5V in from the USB-in directly to a board pin so I can power the string right off the Vin pin if this is plugged into USB power. As a result I can pack it down super small very easily.

#cool #project inspo

[snaildotexe]

i'm thinking more about the whole mobile/responsive design thing and i'm realizing that part of the reason people never do it on neocities is probably because they look at responsive web design stuff and get overwhelmed and leave since a lot of the resources on it out there are for like... professionals, modern web design stuff. there isn't a ton of easy-to-read information on it for hobbyists or beginners or anyone making websites on the simpler side, or in old styles.

most of my webpages use a mix of hiding or showing elements based on screen size, and then at certain screen sizes, changing the display property of an element that would usually be side-by-side with something else on desktop to "block" to make it stack vertically. all blue moon falls does to be mobile friendly is hide the sidebars on small screens and then display the mobile menu on top instead... and then it changes some elements in certain articles to block so they aren't super narrow/squished. that's about it

of course BMF has the benefit of being very simple and functional in design, not covered in graphics and whatnot. but like -

even stuff like this is just a few media queries -

and some of this is kind of excessive because i'm very detail oriented and want to adjust every little thing... the actual positioning of elements and their sizes is not that much. it really is doable!!

#Thank you cause i have a project i really need to make responsive but i got overwhelmed with all the details and best practices and #trying to do it in the most “correct” way possible. #but the way you worded it makes it sound so simple and easy #AND looks great. #and now im not as intimidated by the task. #css #webdev #responsive design

[snaildotexe]

love to write out leetcode solutions in pseudocode and have slips of paper lying around all over with rough drafts of tree algorithms like some kind of scuffed programming Mozart

[snaildotexe]

every girl needs a cinnamon coffee and a little muffin so she can do her programming. it's literally the law