Learn how to add 3D elements to any React website. I would recommend knowing some React basics since i will focus on the 3D aspects rather than React itself. In this video you will learn how to use "React three fiber", a React renderer built to render Three.js content. In the tutorial I will download 2 different 3D models. The first model is the earth and a second model is an airplane. The models are in the GLTF format and i will show how to convert them directly into React components using a npm utility package called "gltfjsx". I will add some animations to the earth like click to zoom and rotating to showcase geographic locations at any lon/lat coordinate pair. I will use the browser geolocation API to place the webpage user on the correct spot on earth. Finally I will connect to an API giving realtime locations of surrounding airplanes and place them correctly on the surface of the earth, sorting them by closest to the user of the webpage. Twitter: https://twitter.com/BarelyDaniel
Github: https://github.com/danba340
Tiktok: https://www.tiktok.com/@barelycoding ⭐️ Video Contents ⭐️
0:00 Video overview
1:15 Initial code walkthrough
3:32 Starry background
5:30 Earth model
8:47 Adding lights
9:28 Resizing Earth
10:38 Airplane Model
15:28 Map Marker Sphere
17:48 Colorizing Airplanes
22:33 Click to zoom
28:23 Rotate earth to coordinate
33:46 Geolocate user
36:25 Handle marker types
37:23 Using sample flight data
45:37 Calculate airplane direction
48:45 Store airplanes to state
49:41 Airplane distance to user
51:18 Testing finished usePlanes hook
55:33 Distance & Origin in control panel
57:23 Airplane facing direction of travel
59:18 Animate switching planes and correct color
1:01:59 Fetching real planes from OpenSky
1:04:29 Fetching on an interval
1:05:47 Thanks for watching PUBLICATION PERMISSIONS:
Daniel provided Coding Tech with the permission to republish this video on the Coding Tech channel. CREDITS:
Daniel's channel: https://www.youtube.com/c/BarelyCoding https://www.youtube.com/watch?v=pLKE2DvPxDo

Nobody wants to spend their day doing hours of busy work. That's why we're starting to see so much about AIOps, or artificial intelligence and machine learning routines that can help to both automate routine tasks and to predict and prevent problems. But we're not yet at the point where you can turn over all of your operations to an AIOps regimen; humans are still involved, and will need to be for the foreseeable future. In this talk, we'll look at what AIOps is, what it will be able to do someday, and how it relates to the intelligent automation we can use today. PUBLICATION PERMISSIONS:
Original video was published with the Creative Commons Attribution license (reuse allowed). Link: https://www.youtube.com/watch?v=dD5EXOVdzH4 https://www.youtube.com/watch?v=ttq5LiWiukk

Scroll-based animations used to be pretty hard and usually meant turning to a library. With the Web Animations API and ScrollTimeline, it's now surprisingly easy to do! 🔗 Links ✅ The Polyfill: https://github.com/flackr/scroll-timeline
✅ The Discord community: https://discord.gg/nTYCvrK
✅ Doing this with CSS only (@scroll-timeline): https://youtu.be/mzKfetD9YrA
✅ Intersection Observers: https://youtu.be/T8EYosX4NOo
✅ Bramus' interactive offset visualizer: https://codepen.io/bramus/pen/OJbZbaX
✅ Fantastic article by Bramus on this topic: https://css-tricks.com/scroll-linked-animations-with-the-web-animations-api-waapi-and-scrolltimeline/ ⌚ Timestamps
00:00 – Introduction
00:57 – Creating a scroll tracker – HTML and CSS
02:50 – The polyfill
03:55 – Creating a timeline for the scroll-tracker
06:34 – Attaching the timeline to the scroll-tracker
09:36 – Changing the scrollOffsets
10:20 – Animating only when an element is in the viewport
17:52 – Animating multiple elements
20:41 – Animating when the element is in different locations on the page #css PUBLICATION PERMISSIONS:
Original video was published with the Creative Commons Attribution license (reuse allowed). Link: https://www.youtube.com/watch?v=VgS5CP7zlXE https://www.youtube.com/watch?v=ZRCzvK4DnlA