DEV Community: Temp-insta

The End of the "Lonely" AI Coder: A Look at Dropstone v3.0.5

Temp-insta — Sun, 08 Feb 2026 04:46:35 +0000

Let’s be honest for a second. The current state of AI coding tools is incredible, but it is also surprisingly lonely.

It is 2026. We are living in the golden age of Cursor, Anitgravity, and the Claude Code CLI. We have models like Claude Opus 4.6 that can reason through complex refactors that would have melted a GPU two years ago. We have Antigravity for deep Pythonic reasoning.

But there is a glaring architectural flaw in almost all of them: They are single-player experiences.

If you are using Cursor, it is you and the bot. If a junior dev needs help, you’re pasting stack traces into Slack. If a Product Manager wants an update, you send a screenshot. Software engineering is inherently multiplayer, yet our most powerful tools are isolated silos.

That changes with Dropstone. With the release of Share Chat (v3.0.5), the team at Blankline isn't just updating an editor; they are attempting to fix the "70% Wall" that kills most AI projects.

Here is why Dropstone might be the most interesting dev tool of 2026.

The Problem: The "70% Wall"

We have all been there with "text-to-app" tools like Lovable, Bolt, or Replit. They feel like magic for the first hour. You prompt, the AI builds, and you feel invincible.

Then you hit the 70% Wall.

Around 70% completion, complexity spikes. The AI creates a subtle bug. The non-technical founder doesn't know how to debug a React hydration error. They are stranded. The code is locked in a web container. There is no way for a real developer to jump in and fix the last 30% without exporting everything and starting over.

Dropstone removes this wall by putting the Founder, the Developer, and the AI Agents in the same room.

The Scenario: A founder describes a feature in chat. An AI agent (running Claude Opus 4.6) builds it live. It hits a complex edge case. The developer, watching in the same workspace, steps in, modifies the specific logic block, and hands control back to the AI.

No git commits, no "let me pull your branch," just real-time collaboration.

Feature Spotlight: Share Chat & Horizon Mode

Dropstone is distinct because it isn't just a wrapper around the OpenAI API; it's a desktop application built on a proprietary runtime called the D3 Engine.

1. Multiplayer is the Default

With Share Chat, you can generate a deep link to your local workspace. Anyone with the link can join:

Developers get full access (terminal, LSP, debugger).
Stakeholders get a simplified Chat + Live Preview view.
AI Agents are actual participants.

Imagine 10 engineers and 5 autonomous agents working on a monorepo simultaneously. The humans handle architecture; the agents handle boilerplate and refactoring in the background. It’s like Google Docs, if Google Docs could write its own code.

2. Horizon Mode: Agents Talking to Agents 🤖💬🤖

This is where it gets sci-fi. In most tools, the AI waits for you to type. In Horizon Mode, Dropstone deploys background agents that coordinate with each other.

Agent A explores a solution path.
Agent B reviews Agent A's code against the project's style guide.
Agent C writes the unit tests.

They communicate via shared Workspace Memory, delegating subtasks without you needing to micromanage them.

The Tech: Why It Remembers Everything

Everyone claims "large context windows." But Gemini’s 1M tokens or Claude’s massive recall have a flaw: raw token windows are dumb. They forget as soon as the text scrolls off.

Dropstone uses Logic-Regularized Compression. It separates active workspace state from history, compressing trajectory vectors (variables, definitions, logic gates) at a 50:1 ratio.

The Result: Dropstone remembers code from three weeks ago, or a file you haven't opened in days, without hallucinating. It builds a persistent "Project Brain"—episodic, semantic, and procedural memory that stays with your repo.

The Verdict: Dropstone vs. The Giants

Should you switch? It depends on how you work.

Feature	Dropstone	Cursor	Claude Code / Antigravity
Collaboration	✅ Multiplayer (Real-time)	❌ Single-player	❌ Single-player
Context	Infinite (D3 Logic Compression)	Token Window Limit	Context Window
Memory	Persistent Project Brain	Resets per session	Static `.md` files
Agents	Horizon Mode (Swarm)	Multi Agent	Multi Agent
Offline	✅ Full Local (Ollama)	❌ Cloud Required	❌ Cloud Required

My Take:

Stick with Cursor if you are a solo developer who just wants the fastest possible inline autocomplete.
Switch to Dropstone if you work in a team, need to handle massive context, or want AI agents that work with you rather than just for you.

A Note on Privacy

One of the coolest features is that Dropstone supports Ollama out of the box. You can run Llama 3 or DeepSeek entirely offline on your machine. For enterprise teams worried about IP leakage, this is a massive selling point.

The tool is built by Blankline, a research team based in Chennai known for publishing papers on computational physics and infrastructure (Project CELSIUS). They aren't just a UI wrapper shop, and it shows in the architecture.

Dropstone v3.0.5 is available now at dropstone.io.

Is this the end of "Context Rot"? A first look at the Dropstone Recursive Swarm architecture.

Temp-insta — Fri, 26 Dec 2025 05:24:50 +0000

Full Disclosure: I don't work for the team at Blankline, but I’ve been following their recent whitepapers on "Linearity Barriers". I finally got to test the Dropstone v2 runtime, and I think we need to talk about what’s happening here.

We are currently seeing a lot of "AI Washing"—products that claim to be "General Intelligence" but are just basic wrappers. Dropstone is different. It doesn't claim to be a "God Model"; it's a fundamental rethink of how an AI agent navigates a codebase.

The "Superhuman" Capability (Wait, hear me out)

I usually hate using the word "superhuman," but there is a specific metric where this topology moves past what a single human (or a single LLM) can do: Parallel Trajectory Search.

When you give Dropstone a task, it doesn't just guess a solution. It spawns a "Recursive Swarm"—effectively thousands of scout agents—to explore divergent timelines in the background.

Why this isn't just another wrapper:

Autonomous Entropy Pruning: Instead of filling your context window with every thought, it calculates "uncertainty" (semantic entropy). If a scout agent gets confused, that entire timeline is killed before it hits your history.
Stable Long-Horizon Engineering: I watched this thing handle a complex refactor that took nearly 24 hours of autonomous runtime. Usually, an agent would have "dementia" by hour two. This didn't.

Check out the architecture breakdown from the founder:

// Detect dark theme var iframe = document.getElementById('tweet-2004349561775837406-401'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=2004349561775837406&theme=dark" }

My Verdict

We aren't at AGI yet, but we are entering a phase of High-Competence Agentic Runtimes. If you are tired of your agents looping and apologizing, the "Recursive Swarm" approach might be the only way forward for enterprise-grade AI engineering.

You can see the beta at dropstone.io

This AI will code for you!

Temp-insta — Sun, 15 Sep 2024 18:01:18 +0000

Dropstone AI is a tool designed to simplify programming. It uses a dual-context system, allowing you to input two parts of context to help handle and work with your code. Whether you need to implement features, compare code, debug issues, or resolve errors, Dropstone makes it easy. There are so many possibilities with this tool. Give it a try and let me know in the comments.

Link: https://dropstone.blankline.org/

Here is The Resume that got $450,000 job at Google

Temp-insta — Tue, 18 Jun 2024 04:45:29 +0000

I watched a YouTube video called "The Resume that got me $450,000 job at Google," and it was very helpful. The video explained how to make a great resume that can catch the attention of big tech companies. Here are the main points I learned:

Show Results: Highlight achievements with numbers to show your impact.
Match the Job: Use the same keywords and skills to tailor your resume to fit the job description.
Be Clear and Short: Organize your resume so it's easy to read and keep it concise.
Grab Attention: Write a strong summary at the top to catch the recruiter's eye.

The video's advice and examples can improve your resume and help you stand out in a tough job market.

Reinforcement Learning in 5 Minutes

Temp-insta — Wed, 17 Jan 2024 10:51:44 +0000

We want our AI model to make right decisions, and one powerful approach to achieve this is through reinforcement learning. Reinforcement Learning is a subfield of machine learning that involves training an agent to make decisions by selecting actions from its action space within a specific environment, with the goal of maximizing cumulative rewards over time.

How Do We Define Reinforcement Learning?

Reinforcement Learning is a subfield of machine learning that teaches an agent how to choose an action from its action space, within a particular environment, in order to maximize rewards over time.

Reinforcement Learning has four essential elements:

Agent. The program you train, with the aim of doing a job you specify.
Environment. The world, real or virtual, in which the agent performs actions.
Action. A move made by the agent, which causes a status change in the environment.
Rewards. The evaluation of an action, which can be positive or negative.

Supervised, Unsupervised, and Reinforcement Learning: What are the Differences?

Difference #1: Static Vs.Dynamic

The goal of supervised and unsupervised learning is to search for and learn about patterns in training data, which is quite static. RL, on the other hand, is about developing a policy that tells an agent which action to choose at each step — making it more dynamic.

Difference #2: No Explicit Right Answer

In supervised learning, the right answer is given by the training data. In Reinforcement Learning, the right answer is not explicitly given: instead, the agent needs to learn by trial and error. The only reference is the reward it gets after taking an action, which tells the agent when it is making progress or when it has failed.

Difference #3: RL Requires Exploration

A Reinforcement Learning agent needs to find the right balance between exploring the environment, looking for new ways to get rewards, and exploiting the reward sources it has already discovered. In contrast, supervised and unsupervised learning systems take the answer directly from training data without having to explore other answers.

Difference #4: RL is a Multiple-Decision Process

Reinforcement Learning is a multiple-decision process: it forms a decision-making chain through the time required to finish a specific job. Conversely, supervised learning is a single-decision process: one instance, one prediction.

Reference: https://www.epicprogrammer.org/reinforcement-learning/

A New Programming Language for AI Developers

Temp-insta — Mon, 08 Jan 2024 13:15:21 +0000

Mojo is a Programming Language Designed by Chris Lattner, the creator of the Swift programming language and LLVM Compiler Infrastructure, Mojo presents a novel solution for Python’s speed constraints. Despite its popularity, Python often lags in performance, making languages like C and C++ preferable for high-speed, high-performance tasks. In response, Mojo was born to integrate Python’s usability with C’s performance.

But what does this mean for the average web developer? Mojo has an astonishing 35,000x speed advantage over Python, substantially outpacing competitors like PyPy, Scala, and C++.

Here’s a benchmark test result of Mojo versus other languages, running the Mandelbrot algorithm on an AWS r7iz.metal-16xl instance:

This leap in AI programming opens up new possibilities for developing high-performance, AI-powered web applications without sacrificing the familiarity of Python’s syntax and extensive libraries.

Mojo lang: Designed for the future of AI

A significant selling point for Mojo is its compatibility with AI hardware. It leverages multilevel intermediate representation (MLIR) to scale various hardware types, including GPUs running CUDA and similar hardware, without adding complexity.

Mojo’s design also ensures portability across several hardware platforms and specialized accelerators. This makes it a great choice for developing applications that need to run on a variety of devices.

One of the reasons Python is so beloved in the development community is its robust ecosystem, and Mojo takes this legacy forward. As a Python superset, it offers smooth access to Python libraries like NumPy. This means you can jump into AI development using tools you’re already familiar with.

To start your journey with Mojo, head over to the Mojo playground, an interactive platform provided by Modular that allows developers to run Mojo code. As of May 2023, Mojo is still under development, but you can experience its functionalities in this playground.

Writing your first Mojo code

Mojo’s syntax is heavily influenced by Python. For instance, a “Hello, World!” program in Mojo looks exactly like one in Python:

print("Hello Mojo!")

Variables in Mojo

Mojo supports let and var declarations, which introduce a new scoped runtime value. let is used to declare immutable variables, while var is for mutable ones. Here is a basic example of how you can use these declarations:

def addNumbers(num1, num2):
    let sum = num1
    if sum != num2:
        let newNum = num2
        print(newNum)
addNumbers(2, 3)

With let and var declarations, you can also specify the variable type. Here’s an example with several data types:

def guessLuckyNumber(guess) -> Bool:
    let luckyNumber: Int = 37
    var result: StringLiteral = ""
    if guess == luckyNumber:
        result = "You guessed right!"
        print(result)
        return True
    else:
        result = "You guessed wrong!"
        print(result)
        return False
guessLuckyNumber(37)

Using struct types

In Mojo, you can build safe high-level abstractions on top of low-level data layout controls with the struct type. In programming, a struct is a data type that allows for the combination of different kinds of data items, but which can be manipulated as a single unit.

In the Mojo programming language, struct types are a bit similar to classes in other object-oriented languages. They can have methods and properties, but unlike classes, structs in Mojo are statically bound at compile time, and they are directly inserted or “inlined” into their container without needing a separate memory reference, or “indirection.”

Here’s a simple definition of a struct:

struct MyPair:
    var first: Int
    var second: Int
    fn __init__(inout self, first: Int, second: Int):
        self.first = first
        self.second = second

Conclusion

Mojo promises a new era of efficiency and robustness for AI developers. By combining the simplicity of Python with C’s high-performance capabilities, Mojo aims to democratize AI programming and simplify the development process.

As we eagerly anticipate Mojo’s public launch, it’s the perfect time to explore its possibilities through the Mojo playground and kickstart your journey into the future of AI development.

Article Inspired from: https://www.epicprogrammer.org/mojo-programming-language-for-ai-developers/

Build a Portfolio Website with Next.js and Tailwind CSS

Temp-insta — Sun, 20 Aug 2023 14:09:34 +0000

You can use your portfolio to showcase your projects, your education, share re-usable code snippets with the world, provide helpful resources, and write your own blogs. There are countless things that you can do with your own website.

I built a template that you can use to create, edit, and deploy your own portfolio website for free on the internet in no time. And if you want to build your own version from scratch, I'll show you how in this article.

So let's dive in – I'll show you what technology I used, how I structured the portfolio, and I'll break it down by section so you can see how each part works.

Tech Stack

Let's talk about the tech stack I used to build this template:

Next.js - Bundler
React - UI Library
Tailwind CSS - CSS Framework
Framer Motion - Animation Library
GSAP - Animation Library
Bun - Task Runner
ESLint - Linter
Prettier - Code Formatter
Blobity - Cursor Effects
usehooks-ts - Custom React Hooks

Why Next.js?

Because it is a React framework with Server-Side Rendering, which is good for SEO (Good for us if we get found on Google, right?).

Also, Next.js helps us build blazing-fast websites along with benefits such as Image optimization.

Why tailwindcss?

Because TailwindCSS is a framework which reduces a lot of styling efforts. It has low level CSS classes that you can directly embed into the HTML code.

Not only that, it comes with amazing support for responsiveness. For example

signifies that text will be small on smaller screens and xl on medium to large screens.

Finally, we are going to deploy the application on Vercel. Vercel gives us an easy way to deploy our application with CI/CD. The code is pushed to a remote GitHub repository and with every push, it's deployed.

The Animated Component: A Glimpse

Let's begin by introducing our star player: the Animated component. This component is designed to encapsulate any React content you wish to animate when it comes into view. With the help of Framer Motion and React Intersection Observer, you can seamlessly create entrance animations for your UI elements.

Crafting Key Sections for Impactful Design

Hero Section: The hero section is your website's grand entrance. Use it to showcase your brand identity, captivate users with a compelling headline, and provide a clear call to action. Utilize striking visuals to convey the essence of your message.
Header and Navbar: Your header and navbar are the navigational core of your website. Keep them clean, intuitive, and accessible. Implement sticky navigation to enhance user convenience while scrolling.
About Page: The about page humanizes your brand. Share your team's story, values, and expertise through a blend of compelling content and engaging imagery. Build a connection by letting visitors see the people behind the brand.
Contact Section: Make contacting you effortless. Design user-friendly forms, incorporate interactive maps for location details, and provide clear contact information. Encourage user engagement and inquiries.
Footer: The footer is the perfect place for essential links, copyright information, and social media connections. Optimize this space to help visitors navigate, explore, and stay connected.

Conclusion

So, whether you're building a personal portfolio, a business website, or an online platform, infuse these design elements and sections with your unique style and purpose. Let your creativity shine through and create a digital space that leaves a lasting impression on your visitors. Happy designing!

Reference

YouTube: https://www.youtube.com/watch?v=f-V-56vBU9g
Documentation: https://www.epicprogrammer.org/build-a-portfolio-website-with-next-js-and-tailwind-css/

A Journey through the Professional Three.js Course

Temp-insta — Thu, 03 Aug 2023 03:34:44 +0000

Hey fellow tech enthusiasts! Today, I am excited to share my experience with the Professional Three.js Course, a web-based 3D graphics course that has taken my skills to new heights. As a student with a passion for web development and a fascination with 3D graphics, I was eager to dive into this course and explore the world of Three.js. And boy, did it deliver!

Introduction to Three.js: A Solid Foundation

The course began with a well-structured introduction to Three.js, providing a solid foundation for understanding how 3D graphics work on the web. The instructors were clear and concise, explaining complex concepts with ease. They took us through the basic setup and configuration of Three.js, setting the stage for the exciting journey ahead.

Building 3D Scenes: From Concept to Reality

One of the highlights of the course was the hands-on experience of building 3D scenes from scratch. We learned about 3D geometries, materials, and lighting to bring life to our scenes. The step-by-step approach helped me gain confidence as I progressed from simple shapes to intricate models.

Shaders and Textures

As the course advanced, we delved into the fascinating world of shaders and textures. The instructors masterfully explained the role of shaders in creating stunning visual effects, allowing us to manipulate the appearance of our scenes. Applying textures to our 3D models brought a level of realism that amazed me and opened up countless possibilities for creativity.

Animation and Interactivity

One of the most exhilarating parts of the course was learning how to animate our 3D scenes and add interactivity to them. We explored keyframe animations, skeletal animations, and even advanced techniques like morph targets. I felt like a magician making my 3D objects come alive with user interactions, such as mouse and keyboard controls.

Performance Optimization

The course didn't just stop at making things look great; it emphasized the importance of performance optimization. We learned about best practices to ensure our 3D scenes run smoothly across different devices. Techniques like frustum culling and level of detail (LOD) management made me appreciate the fine balance between visual fidelity and performance.

Real-World Projects

The cherry on top of this learning experience was the opportunity to work on real-world projects. Throughout the course, we tackled projects that challenged us to apply what we learned in unique and creative ways. It was incredibly satisfying to see my projects evolve, and I couldn't help but share them with friends and family.

Community and Support

The course fostered a strong sense of community among learners. The instructors were active in the discussion forums, offering prompt and helpful feedback. Additionally, fellow students shared their insights, tips, and tricks, creating a collaborative environment that motivated me to push my boundaries further.

Conclusion

In conclusion, the Professional Three.js Course was a game-changer for my web development journey. The course content was rich, the instructors were knowledgeable, and the practical approach helped me grasp complex concepts effortlessly. Whether you are a seasoned web developer or a newcomer to the 3D world, this course is a must-try.

So, if you've been yearning to explore the realm of web-based 3D graphics and unleash your creativity in the digital world, I highly recommend the Professional Three.js Course. Trust me; you won't be disappointed. Happy coding, everyone!

Note: This review is based on my personal experience with the course. Course content and offerings may be subject to updates and improvements over time.

Course Link

How I Created an Award-Winning Portfolio Site with Zero Experience

Temp-insta — Sun, 30 Apr 2023 10:44:47 +0000

As someone with no prior experience in web development, the thought of creating a portfolio site from scratch was daunting. However, with the help of a single tutorial video, I was able to create an Awwward-winning portfolio site that showcased my work effectively.

The tutorial I stumbled upon on YouTube

broke down the process of creating a portfolio site step-by-step, teaching me about the principles of good web design and how to use HTML, CSS, and JavaScript to create a site that would not only look professional but also be user-friendly.

As I followed along with the tutorial, I was amazed at how quickly I was able to create a visually stunning and intuitive site. It was exciting to see how even with zero experience, I was able to develop my skills and create something that I was proud to showcase to potential clients and employers.

After completing the site, I submitted it to Awwwards, a renowned web design competition, and was thrilled when my site received an Honorable Mention. This recognition was not just an achievement, but a testament to the power of tutorials and online resources.

The tutorial I used taught me not only how to code, but also how to approach web design strategically, making sure to create a site that would meet the needs of its users while still being visually appealing. It gave me the confidence to take on new web development projects and explore my creativity.

If you're someone with no experience in web development and want to create a portfolio site, I highly recommend seeking out tutorials like the one I used. They can be a great way to learn and develop your skills, especially when starting from scratch.

Creating an award-winning portfolio site has been a significant milestone for me, and I hope my experience encourages others to take a chance on learning something new. With the abundance of resources available online, anything is possible, and you may even surprise yourself with what you can accomplish.

Is object a HashMap in Javascript?

Temp-insta — Sun, 02 Oct 2022 08:59:19 +0000

Maps, dictionaries, and associative arrays all describe the same data type a.k.a hash table data structure. A Hash table is a data structure that maps keys to values.

Hashtables and hashmaps are data structures that store data in an array-like format, using key/value pairs, where the (hashed) key corresponds to the index in the array. One of the primary benefits that a hashtable has over a hashmap is the native ability to handle synchronous updates. This means that a hashtable can be shared by multiple threads without introducing desynching errors.

Hashmaps offer the same key/value functionality and come native in JavaScript (ES6) in the form of the Map() object (not to be confused with Array.prototype.map()). While hashmaps are limited to single-threaded code, they do have some benefits, for instance the allowance of null values which allows for greater flexibility.

JavaScript Objects: Similar but Different
You might be thinking, “but JavaScript objects already keep track of key/value pairs.” While you can use JS objects to serve the same function of a hashmap, a hashmap does offer some benefits. For instance, hashmaps offer greater flexibility. The key in a hashmap can be any datatype, this includes arrays and objects. Meanwhile, objects can only use integers, strings, and symbols as their keys.

Hashmaps are organized as linked lists, so the order of its elements is maintained, which allows the hashmap to be iterable. Also, unlike key/value pairs stored in an Object, the number of items in a hashmap can be determined by the size property.

Note: One of the primary pitfalls to be aware of when it comes to hashmaps in JavaScript, is that they cannot be directly translated to JSON.

Objects are similar to Maps in that both let you set keys to values, retrieve those values, delete keys, and detect whether something is stored at a key. Because of this, Objects have been used as Maps historically; however, there are important differences between Objects and Maps that make using a Map better.

Originally Published at: https://www.codedolt.com/blog/2022-10-02-is-object-a-hashmap-in-javascript/

async/await in js

Temp-insta — Sat, 01 Oct 2022 03:01:17 +0000

Asynchronous programming is a technique that enables your program to start a potentially long-running task and still be able to be responsive to other events while that task runs, rather than having to wait until that task has finished. Once that task has finished, your program is presented with the result.

Note: though this tutorial uses JavaScript, the same principles apply to other languages as well, such as Python/C#.

Why do we need Async/Await in the first place?
Before Promises and Async were introduced to JavaScript, all operations that would take some time and block the main thread resulted in what is known as callback hell. For example, let us imagine that you need to make a request to the API that takes roughly 2 seconds. This is what you would do:

const getResource = callback => {
    setTimeout(() => {
        callback('some resource');
    }, 2000);
}

getResource(resource => console.log(resource));

In this snippet we pass the function on line 7 as an argument to our getResource function and it will call it with requested info after 2 seconds. Does not look so bad, does it? It gets way worse as your code grows, you get multi-level nested callbacks and something that looks like this:

fs.readdir(source, function (err, files) {
  if (err) {
    console.log('Error finding files: ' + err)
  } else {
    files.forEach(function (filename, fileIndex) {
      console.log(filename)
      gm(source + filename).size(function (err, values) {
        if (err) {
          console.log('Error identifying file size: ' + err)
        } else {
          console.log(filename + ' : ' + values)
          aspect = (values.width / values.height)
          widths.forEach(function (width, widthIndex) {
            height = Math.round(width / aspect)
            console.log('resizing ' + filename + 'to ' + height + 'x' + height)
            this.resize(width, height).write(dest + 'w' + width + '_' + filename, function(err) {
              if (err) console.log('Error writing file: ' + err)
            })
          }.bind(this))
        }
      })
    })
  }
})

This code becomes harder to read, maintain, and extend. If you want to learn more about callback hell, visit here.

Promises
In attempt to fix the callback hell , Promises were introduced in ES2015. Their goal was to simplify the code, improve readability and add more asynchronous functionality to JS. With promises, the code in the first example becomes:

const getResource = new Promise((resolve, reject) => {
    setTimeout(() => resolve('some resource'), 2000);
});

getResource.then(resource => console.log(resource));

We create a Promise object on line 1. We pass a function as an argument which receives resolve and reject functions. In it, we make a call to our api and resolve the Promise with desired content. In an event of an error, we reject the Promise with some meaningful error message. Then, we call this promise by passing a callback function in .then(). To handle an error, we would also pass a callback function in .catch().

While this is definitely a step forward, it is not a complete solution. We still have callback functions, chaining and a lot of redundant code. There is also such a thing as promise hell, though it can be avoided using techniques.

Async/Await
Async functions were introduced in ES2017 and are now compatible with all browser specifications except IE. An Async function is simply a function that returns a Promise, meaning, it should be waited for. We can still use await with all of promises written in legacy wait as they are backwards-compatible. Look at our example with promises:

const getResource = () => new Promise((resolve, reject) => {
    setTimeout(() => resolve('some resource'), 2000);
});

main = async () => {
    const resource1 = await getResource();
    const resource2 = await getResource();
    console.log(resource1, resource2);
}

main();

This example is a bit longer, but do not let yourself be confused by this: async functions almost always win in terms of lines of code. Here we firstly define our promise and note that it slightly differs: now it is a function that returns a promise: I did it to show you how could we use the same promise twice. Later we define an async function main, because we can only use await keyword in async functions. Then, we fetch resources from our promises by using await. Note that this will not block neither the main thread nor the UI thread, hence the word async. You can see we have less callbacks now and if we wanted to hadle errors we would wrap the await statements in try/catch/finally blocks, just as with any other language. So the winnings in terms of readability and simplicity are obvious: the async code looks more like normal, synchronous code unlike callbacks/promises.

Originally Published at: https://www.codedolt.com/blog/2022-09-30-async-await-in-js/

How to Create a Music Visualizer with Three.JS

Temp-insta — Sat, 11 Jun 2022 05:55:03 +0000

A function featured in electronic music visualizers and media player software that creates animated graphics based on a piece of music is known as music visualization. The picture is frequently created and presented in real-time, in a fashion that is coordinated with the music as it is played.

The Web Audio API is used to handle audio operations inside an audio context and was created with modular routing in mind. Audio nodes are joined together to form an audio routing graph and are used to conduct basic audio operations. Even within the same context, many sources with various channel configurations are permitted. This modular architecture allows you to easily construct sophisticated audio functions with dynamic effects.

Note: You are expected to know the basics of javascript and three.js before getting started with this project.

The Web Audio API involves handling audio operations inside an audio context and has been designed to allow modular routing. Basic audio operations are performed with audio nodes, which are linked together to form an audio routing graph. Several sources — with different types of channel layouts — are supported even within a single context. This modular design provides the flexibility to create complex audio functions with dynamic effects.

The audio pipeline starts by creating an audio context. It should have at least a single audio source — which can be thought of as an entry point for external files, mic input, oscillators, etc. Once we have a source in place, the signal is processed and moved ahead in the pipeline using audio nodes. After processing, the signal(s) are routed to the audio destination, which can only be a single one in the whole context.

The simplest illustration has a single source and a destination, without any effects or processing, inside the context. Why would anyone use this? Maybe they just want to play the sound without any changes.

On the left is an example of a much more complex setup, which can also be made using this API.