- 52
- 690 924
Genka
Germany
Приєднався 31 гру 2011
random programming stuff
Fullstack OAuth2 - Angular, Spring Boot & Keycloak
In this tutorial we build a complete OAuth2 secured webplatform using angular, spring boot with spring security and keycloak as the oauth server.
Done with angular 17 and spring boot 3 / spring security 6.
Github: github.com/tamani-coding/fullstack-oauth2-angular-spring-boot-keycloak
(00:00) - Intro
(00:58) - Keycloak via Docker
(03:03) - Keycloak Realm Configuration
(05:02) - Setup Angular & OAuth2 Login
(10:09) - JSON Web Token explained
(11:22) - Logout
(12:23) - Spring Boot, Spring Security, OAuth2 Setup
(20:23) - Use Acces Token to Call API
(22:40) - Authorize API with User Roles
(26:23) - Outro
Done with angular 17 and spring boot 3 / spring security 6.
Github: github.com/tamani-coding/fullstack-oauth2-angular-spring-boot-keycloak
(00:00) - Intro
(00:58) - Keycloak via Docker
(03:03) - Keycloak Realm Configuration
(05:02) - Setup Angular & OAuth2 Login
(10:09) - JSON Web Token explained
(11:22) - Logout
(12:23) - Spring Boot, Spring Security, OAuth2 Setup
(20:23) - Use Acces Token to Call API
(22:40) - Authorize API with User Roles
(26:23) - Outro
Переглядів: 9 507
Відео
Angular & Web Components - Using Angular Elements to create Custom Elements
Переглядів 6 тис.Рік тому
Web Components is a standard to create framework agnostic HTML elements. In Angular we create an Angular Component, using Angular Elements to expose this Component as a Custom Element and use it outside of Angular. This video provides a step-by-step introduction how to create a custom component with Angular, how to use it in plain HTML and to deal with Input and Output of that custom element. G...
Spring Boot Webflux CRUD Tutorial - Using Spring Data R2DBC & PostgreSQL
Переглядів 7 тис.Рік тому
We create a fully functional spring boot webflux CRUD service. So we can create, read, update and delete entries in a postgres database. This video explains which spring dependencies are needed, how to setup postgres database, with flyway schema scripts and configuration of the spring boot service. We apply best practices like three layer architecture and use Spring Data R2DBC with reactive rep...
three.js Marching Cubes - Create Meta Balls!
Переглядів 1,8 тис.Рік тому
In this video we check out the marching cubes algorithm and render meta balls in three.js! Github: github.com/tamani-coding/threejs-marching-cubes-example Stackblitz: stackblitz.com/github/tamani-coding/threejs-marching-cubes-example?file=README.md (00:00) - Intro (00:27) - Marching Cubes Algorithm (03:48) - Meta Balls Function (06:19) - Code of The Algorithm (11:51) - Outro
three.js Glass Objects with Physical Material
Переглядів 3,1 тис.Рік тому
The MeshPhysicalMaterial enables us to create realistic looking glass objects. In this video we achive that step by step by setting the relevant attributes of the material. Github: github.com/tamani-coding/threejs-glassy-object-effect Stackblitz: stackblitz.com/github/tamani-coding/threejs-glassy-object-effect (00:00) - Intro (00:20) - MeshPhysicalMaterial Setup (00:54) - Transmission & Roughne...
three.js Stencil Buffer - Learn the WebGL Stencil Buffer
Переглядів 4,7 тис.Рік тому
Hey, this video describes the WebGL stencil buffer and how to use it. With the stencil buffer you can hide or show parts of mesh objects. We develop a magic cube, where each cube faces shows or hides certain meshes. Chech out the github repo of this example! Github: github.com/tamani-coding/threejs-stencil-buffer-example Stackblitz: stackblitz.com/github/tamani-coding/threejs-stencil-buffer-exa...
three.js Render Target Tutorial - Render a Second Scene as a Texture
Переглядів 4,9 тис.Рік тому
Hey, in this video we try out the render target. We will render a second scene as a texture onto a plane and create the illusion of a window into a different scene. Github: github.com/tamani-coding/threejs-render-target-example Stackblitz: stackblitz.com/github/tamani-coding/threejs-render-target-example (00:00) - Intro (01:33) - Scene Setup (02:51) - Render Target (04:22) - Render Secondary Sc...
three.js with HTML text - Use Position Projection to display a Text Box
Переглядів 6 тис.Рік тому
In this video we create a text box which is attached to the position of a 3D model. This can be used to display a health bar, a damager counter, stat screen or user interface. Learn how to transform a 3d position into browser window position via projection. Github: github.com/tamani-coding/threejs-html-text Stackblitz: stackblitz.com/github/tamani-coding/threejs-html-text?file=README.md (00:00)...
Three.js Navigation Mesh Tutorial - Pathfinding with a Navmesh
Переглядів 8 тис.Рік тому
Hey, in this video we use the three-pathfinding library to find a path for a character in a 3D level. We also build our own level and a corresponding navmesh with the Blender extension UPBGE! Check out tutorial code: github.com/tamani-coding/threejs-navmesh-example Try it out: stackblitz.com/github/tamani-coding/threejs-navmesh-example (00:00) - Intro (01:11) - Scene Setup (02:08) - Build a Lev...
Discord Chatbot Tutorial - Implement a Discord Application in Javasacript
Переглядів 293Рік тому
Let's build our own discord chatbot! github.com/tamani-coding/discord-bot-example (00:00) - Intro (01:10) - Prerequisites (01:21) - Create your own discord channel (01:38) - Setup ngrok for a public tunnel (02:53) - Discord Developer Portal (05:14) - Setup a Javascript Nodejs webapplication (09:02) - Discord Request Verification (11:02) - Handle a Ping Request (12:07) - Configure the Interactio...
Angular & Google Login OAuth2 / OpenID Connect - Using the angular-oauth2-oidc Library
Переглядів 36 тис.2 роки тому
Google has deprecated their Google Sign-In JavaScript client library. An angular google authentication can be implemented using Googles OAuth2 / OpenID Connect System. For that we use the anuglar-oauth2-oidc library, which is compatible will any authorization provider, which supports these standard protocols. The angular example application in video has full google login and logout supports and...
three.js & rapier3D - Character Terrain Movement
Переглядів 18 тис.2 роки тому
I extend my previous basic character controller with physics. Using rapier3D we get a physical world, generate randomized terrain, make our character move on that terrain and interact with other physical bodies! See previous video: ua-cam.com/video/C3s0UHpwlf8/v-deo.html Stackblitz: stackblitz.com/github/tamani-coding/threejs-rapier3d-character-terrain-movement Github: github.com/tamani-coding/...
three.js WebGL Shaders Tutorial - For Beginners
Переглядів 4,3 тис.2 роки тому
We use the three.js shader material and make our own vertex and fragment webgl shaders to discover the possibilities! Stackblitz: stackblitz.com/github/tamani-coding/threejs-webgl-shaders-tutorial Github: github.com/tamani-coding/threejs-webgl-shaders-tutorial (00:00) - Intro (00:20) - Shaders Introduction (03:46) - Use Shader Material with own shaders and uniforms (05:17) - Advanced Fragment S...
three.js Sprite Animation - Implement a Sprite Flipbook / Sprite Mixer
Переглядів 7 тис.2 роки тому
three.js Sprite Animation - Implement a Sprite Flipbook / Sprite Mixer
three.js Particles - Using three-nebula Particle Engine
Переглядів 9 тис.2 роки тому
three.js Particles - Using three-nebula Particle Engine
Angular Unit Test Tutorial - Crash Course for Angular & Jasmine
Переглядів 18 тис.2 роки тому
Angular Unit Test Tutorial - Crash Course for Angular & Jasmine
three.js Basic Character Controls - GLTFLoader, AnimationMixer, 3rd Person Controller
Переглядів 52 тис.3 роки тому
three.js Basic Character Controls - GLTFLoader, AnimationMixer, 3rd Person Controller
three.js Buffergeometry - How to Morph 3D Objects
Переглядів 25 тис.3 роки тому
three.js Buffergeometry - How to Morph 3D Objects
Angular ngrx-store Tutorial - Action, Reducer, Selector
Переглядів 20 тис.3 роки тому
Angular ngrx-store Tutorial - Action, Reducer, Selector
Angular Internationalization / i18n - Using ngx-translate & Phrase
Переглядів 18 тис.3 роки тому
Angular Internationalization / i18n - Using ngx-translate & Phrase
three.js & tween.js - Tweening Tutorial
Переглядів 12 тис.3 роки тому
three.js & tween.js - Tweening Tutorial
three.js Raycaster - Tutorial for mouse picking / drag & drop
Переглядів 32 тис.3 роки тому
three.js Raycaster - Tutorial for mouse picking / drag & drop
Akka Http Server Scala Tutorial - Build a Webservice
Переглядів 7 тис.3 роки тому
Akka Http Server Scala Tutorial - Build a Webservice
WebGPU Tutorial - Cube Rendering with Color, Texture and Light Shading
Переглядів 3,1 тис.3 роки тому
WebGPU Tutorial - Cube Rendering with Color, Texture and Light Shading
A Basic Scene Renderer with WebGPU - Tutorial
Переглядів 17 тис.3 роки тому
A Basic Scene Renderer with WebGPU - Tutorial