Technologies I used to Code My Backendless App

#benawad #voidpet #VoidLog

----

[JayPoncedeLeon]

Really great Ben! I've thought about using React Native for a project before, and it's great to see your experience and get a peak at some of the underlying code with your thoughts!

[jrtm]

Backendles???? Okay let’s start throwing books out the window

[JEM_GG]

Loved following this process Ben! Looking forward to trying the game out

[alexandrepereira]

Hey Ben, at a first glance your SVGs looks quite compact but I'm pretty sure you can shrink the file size even more, I personally recommend the svgo library. You can also think about doing some SVG sprite strategies if needed. I noticed that the background/garden have most elements repeated, you can also think about something to optimize down this path.

[drewbird]

Ben! Thank you for sharing the process and the tech. 🙏

[traniel]

SVGs are great. I have recently been working on an industrial scada system and ended up using SVGs to render live LIDAR data in the HMI for sensor calibration. It works surprisingly well.

[CwithinC]

Hi Ben, thank you for sharing this. I am an ex-product manager aspiring to break into software engineering / web dev. I've spent my first year full time learning how to code with Harvard CS50 and The Odin Project. Thank you for sharing this project and how you are going about building it. I want to build a similar app, so this video gave me a lot of direction on how and where to start.

Wishing you continued success!

[aseemlalfakawma]

Great work Ben! Love the insight you provided, really inspirational. ❤

[KevinNaughtonJr]

really love hearing about the behind the scenes of development of VoidPet Ben can't wait to hear more in future vids :)

[zachsanchez]

I love how half of these comments are legitimate suggestions / improvements. Building in public can attract so many helpful people! Great video covering your development/process regarding your app!

[pastenml]

Thanks you for this Angular/Ionic tutorial. I had no idea you could write Angular apps in this way.

[damionmurray]

There are a few strategies you can use optimize your SVGs. For example, plotting the vertices that define the paths of your keyframes on a grid so that their coordinate values fall on whole numbers actually speeds up rendering. You could probably reduce the number of points your SVGs use as well. There are programs that do a good job of optimization, but if you can get a vector artist that knows how to do that manually they are likely to do a better job (for example, vector tools typically create circles using a cubic bezier curve with 12 control points, a vector artist with an eye for optimization can create near perfect circles using 9 control points).

If you ultimately opt to migrate from vector to raster graphics go with PNGs. If you're clever about it, you don't have to generate thousands of variants of a Void pet. Break each Void pet design into component sprites that group/isolate shapes with the same color (think layers in Photoshop), then whip up some logic to apply palette swaps to each grouping (pretty easy to do, just change the R, G, B color channels and leave the Alpha channel alone) and then make a composite for a given variant.

[CardinalHijack]

Thanks for sharing. Inspiring me to get back to my side projects

[TheATOMICGOBLIN]

Thanks for the video Ben, I recently fiddled with expo and had the same conclusion. Much better than it was in 2019!

[rog]

Great project ben! A request, could you please create a react native playlist with advance topics like RecyclerListView, Reanimated, Skia and other advance stuff, it would really help us out here! Anyway great job!!!

[IvyCatholic]

Ben, thanks for this video and all your great content. I made an app also with RN and expo called "TriviaLinked" and your discussion of animations/sounds is going to be really helpful as I try to improve the game! Thank you thank you thank you!

[mugen]

@bawad, two optimizations on concurrent display of SVG-s on screen:
1. Render blank components in place of SVG when it is outside of viewport. With grid item lists you don't have to check every item, using math should do the trick.
2. If you would still need to convert to images, I am sure you could generate PNG assets from SVG-s at runtime with some library when you know the device screen dimensions (so that PNG-s are of an appropriate resolution for every device). You could do this on first load and cache the images to the device storage.

[LorenzoLeonardini]

For the pet svg problem and the issue with having too many color combinations: you could export different-colored elements in a separate image, rendering them in layers. There should be some way to tint them. So you only have a handful of images in your app package, the only issue is that when you render a sprite you are actually rendering 4/5 images one on top of the others, but that might bet not that big of a problem

[Liam.Stevens]

Thanks for info. What tool did you use to draw the SVGs (output in svg format)

[FoodElitist]

Pls more insight videos Ben 😊 I really like that you show production code. You should be proud! What about the business behind voidpet?