DEV Community

Cover image for Random Code Inspiration Volume 1
Andreas Riedmüller
Andreas Riedmüller

Posted on • Updated on

Random Code Inspiration Volume 1

I would like to keep track of new things that I randomly discover while working on my projects. And why shouldn't I do that publicly? That way everyone gets something out of it 😊

Welcome to Volume #1, here we go:

1. Potree

Portree is a WebGL based point cloud renderer. A tool to visualize a bunch of points in a 3D dimensional space. I never thought much about this topic, but I understand that this must be a thing.

I had my fun playing around with the demo. 😂

https://github.com/potree/potree

Image description

2. Blob urls with HTML content

I used blob urls before to generate .stl files for my experimental 3D-printing website stl.parts.

But lately I found out that you can also create a blob url to a text/html file that can be opened in the browser. This way you can create a link that opens a page that is only temporarily available in your browser. That also means that the url of that page can not be shared.

A website hosted by your website so to say 😂

Here is a code example:

let htmlBlob = new Blob(['<html><head><title>This is website</title></head><body><h1>Hello World!</h1></body></html>'], {type: 'text/html'});
let blobUrl = URL.createObjectURL(htmlBlob );
Enter fullscreen mode Exit fullscreen mode

The url will be invalidated if the page that created the object url is closed.

3. react-three-fiber

You probably know about three.js, react-three-fiber is a super intuitive way to integrate 3D objects into your React application.

It's like jsx for 3D objects, I love this idea and can't wait to use it. This is a code example so you get an idea 😋:

createRoot(document.getElementById('root')).render(
  <Canvas>
    <ambientLight />
    <pointLight position={[10, 10, 10]} />
    <Box position={[-1.2, 0, 0]} />
    <Box position={[1.2, 0, 0]} />
  </Canvas>,
)
Enter fullscreen mode Exit fullscreen mode

You can play around with it here or get started by reading the introduction.

If you would rather watch a YouTube video, I liked this one:

4. Theater.js

Theater.js can help you change values over time. And it does this by providing you with an intuitive After Effects like interface to animate the values on a timeline.

Image description


I hope you like it and let me know if you found anything particularly interesting. And also if you have something that inspired you in the last time.

Happy Coding 🖥️❤️!

Top comments (0)