Category: Javascript
Creating a React Calculator App and Converting it to an Electron Desktop Application
Introduction In this blog post, we’ll walk through the process of creating a React Calculator App and converting it into an Electron Desktop Application. This journey will take us from setting up a basic React project to packaging a fully functional desktop application that can run on various operating systems. Setting Up Your React Calculator…
Creating Charts and Graphs in JavaScript with React and Recharts
Introduction In the world of web development, data visualization plays a crucial role in conveying information in a clear and concise manner. Charts and graphs are powerful tools that help users understand complex data sets at a glance. JavaScript, with its versatility and popularity, is often the language of choice for creating interactive and dynamic…
Building Interactive CLI Applications with Ink and TypeScript
Creating modern command-line interfaces doesn’t have to mean sacrificing user experience or developer productivity. React Ink brings the familiar component-based architecture of React to terminal applications, enabling developers to build rich, interactive CLIs using TypeScript. In this tutorial, we’ll build a fully-functional LLM chat application that demonstrates Ink’s powerful features: What We’re Building We’ll create…
Getting Started with Three.js in Vue 3
Three.js is a powerful JavaScript library that makes working with WebGL simpler and more accessible. Combined with Vue’s reactive system and component-based architecture, you can create impressive 3D visualizations with clean, maintainable code. This is the first of six tutorials on Three.js Complete code for the series of blog posts is available on GitHub. In…
Three.js Lighting and Textures
In this article, we’ll explore how to implement advanced lighting and textures in Three.js within a Vue 3 application. Building on our previous overview of Three.js, we’ll dive deeper into creating realistic scenes with proper illumination and surface details. This is the second article in a series on Three.js: Complete code for the series of…
Physics and Collisions in Three.js
Physics simulations add a new dimension of realism to 3D web applications. In this tutorial, we’ll explore how to implement realistic physics and collision detection in Three.js using the cannon-es physics engine. You’ll learn how to create interactive 3D objects that respond to gravity, collisions, and user input. This is the third article in a…
Enhancing Three.js Scenes with Shadows and Fog
Introduction Three.js is a powerful 3D library that makes WebGL accessible for web developers. One of the key aspects of creating realistic 3D scenes is the implementation of environmental effects like shadows and fog. In this tutorial, we’ll explore how to add these effects to enhance the visual quality and depth perception in your Three.js…
Creating Three.js Characters with Skeletons
Introduction Character animation is a crucial aspect of interactive 3D games. Three.js provides robust support for skeletal animation through its SkinnedMesh and related classes. This tutorial explores how to load, display, and control animated 3D characters with skeletons in Three.js. This is the fifth in a series of tutorials on Three.js: Complete code for the series of…
Full 3D Scene Example with Three.js
Introduction Welcome to the final part of our Three.js tutorial series! In this comprehensive tutorial, we’ll tie together everything we’ve learned about Three.js and build a complete interactive 3D scene with: This example demonstrates how to combine various Three.js features into a cohesive application, showing how these individual components can work together to create an…
Using TensorFlow.js ML Models for Pose Detection in the Browser
Machine learning has traditionally required specialized knowledge and powerful servers, but TensorFlow.js now brings these capabilities directly to web browsers. By leveraging TensorFlow.js pretrained models we can quickly perform a variety of machine learning tasks. Browser-based machine learning offers several compelling advantages: In this tutorial, we’ll build a real-time gesture control application that uses your…