DEV Community: NordicBeaver

Double pendulums, how do they work? | Physics | Simulation | TypeScript

NordicBeaver — Sat, 07 Jan 2023 07:49:38 +0000

Are you guys interested in a little sprinkle of physics and simulations on your web dev journey? Here is a perfect (okay, maybe just good (or not...)) tutorial just for you!

Wheatcha - IT videos catalogue. New update: The library grows!

NordicBeaver — Wed, 23 Nov 2022 13:17:25 +0000

Wheatcha is a new platform I'm building. It's an online catalogue of tech and programming videos on YouTube. The plan is to make it easier to find something like 'The best step-by-step tutorials of developing a backend with TypeScript and Prisma of 2022'.

In this update I wanted to announce that a lot of videos were added to the library. Right now it contains about 40 channels and almost 500 videos. And don't forget dozens of tags that have been assigned to these videos. It's still only a fraction of all the free content you can see on YouTube and the plan is to add more and more every day.

If you think a platform like this is interesting, you can always help as well. Let me know about your favorite creator or a video in the comments, and I'll add it right away. And, of course, if it's already on Wheatcha, you can already rate it to help the algorithm. I would greatly appreciate it.

Wheatcha - MVP release! A catalogue of the best tech videos on YouTube.

NordicBeaver — Fri, 18 Nov 2022 16:42:02 +0000

What's Wheatcha?

Don't know about you guys, but I love watching programming and IT videos on YouTube. So much, that at one point I found myself in some kind of a tutorial hell people keep talking about. I managed to escape it, but I still appreciate how much free content people are producing every day.

But there is one big problem. It's not that easy to find a video about a topic you're interested in. And even if you find a couple, there is no quick way to know how good they are. Especially now that YouTube removed dislikes.

That's why we decided to create Wheatcha. A catalogue of tech related videos, with tags, ratings, reviews, and more. So that you can easily find the best React video of 2020, that is a complete step-by-step tutorial and also TypeScript is used.

And today we released the first MVP version of the platform. Obviously not all the features are there yet, but we were just too curious to see if someone likes the idea.

Our plans

The roadmap is pretty big. Here are some of the features we're planning to implement next

Way bigger library.
Complex search with multiple filters.
User reviews.
Design updates.
And more!

We could also use some help from the community. If you think your favorite youtuber is missing, just let us know in the comments and we will gladly add their videos. Any suggestions regarding functionality, design, tags would also be greatly appreciated. Or feel free to just say hi if you think a platform like this would be useful to you.

See you on Wheatcha!

React SketchBoard DevLog #2 - Zoom, fix bugs and improve code quality.

NordicBeaver — Sun, 10 Apr 2022 16:50:49 +0000

This is a second video in a series of making a react library for drawing stuff in a browser. We'll look at how to implement zooming, make it work with a mouse wheel, fix a couple of bugs and refactor the code a bit.

For the project I'm using react and typescript.

Making a rain animation with WebGL shaders in Three.js.

NordicBeaver — Tue, 14 Dec 2021 13:46:39 +0000

I made a small shader that resembles rain on a window. You can try it here.

Check out the full code here:

NordicBeaver / rain-shader

rain-shader

A simple raindrops shader implemented in WebGL.

Live version: https://rain-shader.nordicbeaver.io/

More details: https://www.youtube.com/watch?v=Rl3clbrsI40

View on GitHub

The most interesting part is the fragment shader, where the magic happens. I tried to add some comments, so it's easier to read.

in vec2 uvInterpolator;
uniform float u_time;
uniform sampler2D u_texture;

// Generate a random float from a single input and seed.
float Random11(float inputValue, float seed) {
  return fract(sin(inputValue * 345.456) * seed);
}

// Generate a random float from a 2d input and seed.
float Random21(vec2 inputValue, float seed) {
  return fract(sin(dot(inputValue, vec2(123.456, 43.12))) * seed);
}

// Generate drops as distortions, that can be applied to UV coordinates
vec2 Drops(vec2 uv, float seed) {
  // Randmply move everything
  float shiftY = Random11(0.5, seed);
  uv.y += shiftY;

  // Split UV spac into cells. Each cell will contain a drop.
  float cellsResolution = 10.0;
  uv *= cellsResolution;

  // Move each row randomly.
  float rowIndex = floor(uv.y);
  float shiftX = Random11(rowIndex, seed);
  uv.x += shiftX;

  vec2 cellIndex = floor(uv);
  vec2 cellUv = fract(uv);

  vec2 cellCenter = vec2(0.5);
  float distanceFromCenter = distance(cellUv, cellCenter);

  // We don't want to show every drop. So randomly remove some of them.
  float isDropShown = step(0.8, Random21(cellIndex, seed + 14244.324));

  // Decrease each drop intensity with time. Then make it appear again.
  float dropIntensity = 1.0 - fract(u_time * 0.1 + Random21(cellIndex, seed + 32132.432) * 2.0) * 2.0;
  dropIntensity = sign(dropIntensity) * abs(dropIntensity * dropIntensity * dropIntensity * dropIntensity);
  dropIntensity = clamp(dropIntensity, 0.0, 1.0);

  // We only need results from inside a specefec radius of a drop.
  float isInsideDrop = 1.0 - step(0.1, distanceFromCenter);

  vec2 vecToCenter = normalize(cellCenter - cellUv);

  // Drop value is a vector to the center that increases with distance form it.
  vec2 dropValue = vecToCenter * distanceFromCenter * distanceFromCenter * 40.0;

  vec2 drop = dropValue * isInsideDrop * isDropShown * dropIntensity;
  return drop;
}

void main() {
  vec2 uv = uvInterpolator;

  // Run the Drop function 10 times to create seemingly random pattern.
  vec2 drops = vec2(0.0);
  for(int i = 0; i < 10; i++) {
    drops += Drops(uv, 42424.43 + float(i) * 12313.432);
  }

  // Distort UV.
  uv += drops;

  // Sample the texture after distorting the UV space.
  vec4 color = texture2D(u_texture, uv);

  gl_FragColor = color;
}

Basically, all I do is generate drops at random positions. For every pixel around the drop I then calculate how much I need to distort the background. And then I apply the distortion to the UV space and sample the texture with the updated coordinates.

It's way easier to explain visually, so I made a video of the whole process of making this.

Making the most boring website ever with TypeScript, NestJs, React and others. Part 9.

NordicBeaver — Thu, 02 Dec 2021 12:47:55 +0000

This series is about making a generic website for a local business with TypeScript, NodeJs, NestJs, Prisma, React and NextJs. I'm trying to make my videos quite short, about 10 minutes each (except for the first one), while putting as much content there as I can. Here is the full playlist.

In this episode:

User Roles

So first we will add some roles for the users. We'll only need 3 for now: ADMIN, MANAGER and GUEST.
To do that, we'll update our Prisma model and learn how to use guards in NestJs to protect different routes based on current user's role.

Deployment to Dokku

Then, I'll try to explain how to publish a web application for everyone to see. I use Dokku for my personal projects and I'll show you how simple it is to set it up and deploy to it.

Since the project is now officially online (even though very unfinished), here are the links: Website, Admin Panel (you can use guest/guest to login)

Drawing with Mr. Fourier and Typescript

NordicBeaver — Wed, 24 Nov 2021 15:06:59 +0000

What if we connect a couple of rotating sticks together and trace the shape they make? We can get something like this.

The most interesting part about this is if we get enough sticks we can draw anything we want!

You can try it yourself here. Just draw a closed (that's pretty important) shape and press 'Start'.

This is based on a thing caller Fourier Transform. Basically, every complex function on a set interval can be represented as an infinite sum of exponents:

\sum_{n=-\inf}^{\inf}c_n e^{n 2 \pi i t}, 0 \le t \le 1

Where

c_n = \int_0^1 f(t) e^{-n 2 \pi i t}

But if we look closer we may notice that every element of that sum is actually a rotating vector Cn. So if we manage to represent a shape as a complex function, we could find these vectors (maybe not all, since there is infinite number of them, but we don't need all) and that would mean drawing the shape just by rotating those vectors!

I made a video where I tried to explain this in more detail and code it in TypeScript.

Enjoy!

React SketchBoard DevLog #1 - Drawing with mouse, color and width selection and panning.

NordicBeaver — Thu, 18 Nov 2021 18:01:11 +0000

Recently I started developing a react library for drawing in a browser. It turned out that it's not as trivial as it seemed and there is a lot of cool stuff and interesting problems there. So I decided to do a DevLog and share those thing with you.

I hope you'll enjoy!

Making the most boring website ever with TypeScript, NestJs, React and others. Part 8.

NordicBeaver — Fri, 12 Nov 2021 15:01:19 +0000

In this videos we'll create a User model to store users data on the server and discuss why we need password hashing and salt. We'll also add new forms and pages to manage users in the Admin panel.

Enjoy :)

Having fun with pendulums in ThreeJs

NordicBeaver — Sun, 07 Nov 2021 19:36:56 +0000

I was messing around with ThreeJs and got an idea of a simple but interesting animation. Here is the video of how I turned it into reality.

If you just want to see the end result, go ahead and click here.

Making the most boring website ever with TypeScript, NestJs, React and others. Part 7.

NordicBeaver — Tue, 02 Nov 2021 13:43:01 +0000

Today we will implements validation both on the server and the client. And also add a couple of new fields to the Appointment model.

Enjoy :)

DEV Community: NordicBeaver

Top programming and tech videos of December 2022.

Game development and math

AI

Web development

Tutorial

More?

Where is `{my_favourite_youtuber}`???!!!

Double pendulums, how do they work? | Physics | Simulation | TypeScript

Wheatcha - IT videos catalogue. New update: The library grows!

Wheatcha - MVP release! A catalogue of the best tech videos on YouTube.

What's Wheatcha?

Our plans

React SketchBoard DevLog #2 - Zoom, fix bugs and improve code quality.

Making a rain animation with WebGL shaders in Three.js.

NordicBeaver / rain-shader

rain-shader

Making the most boring website ever with TypeScript, NestJs, React and others. Part 9.

In this episode:

User Roles

Deployment to Dokku

Drawing with Mr. Fourier and Typescript

React SketchBoard DevLog #1 - Drawing with mouse, color and width selection and panning.

Making the most boring website ever with TypeScript, NestJs, React and others. Part 8.

Having fun with pendulums in ThreeJs

Making the most boring website ever with TypeScript, NestJs, React and others. Part 7.

DEV Community: NordicBeaver

Top programming and tech videos of December 2022.

Game development and math

AI

Web development

Tutorial

More?

Where is {my_favourite_youtuber}???!!!

Double pendulums, how do they work? | Physics | Simulation | TypeScript

Wheatcha - IT videos catalogue. New update: The library grows!

Wheatcha - MVP release! A catalogue of the best tech videos on YouTube.

What's Wheatcha?

Our plans

React SketchBoard DevLog #2 - Zoom, fix bugs and improve code quality.

Making a rain animation with WebGL shaders in Three.js.

NordicBeaver / rain-shader

rain-shader

Making the most boring website ever with TypeScript, NestJs, React and others. Part 9.

In this episode:

User Roles

Deployment to Dokku

Drawing with Mr. Fourier and Typescript

React SketchBoard DevLog #1 - Drawing with mouse, color and width selection and panning.

Making the most boring website ever with TypeScript, NestJs, React and others. Part 8.

Having fun with pendulums in ThreeJs

Making the most boring website ever with TypeScript, NestJs, React and others. Part 7.

Where is `{my_favourite_youtuber}`???!!!