If you’re new to visual development, focusing on structured experimentation, small tests, and forgiving your own mistakes is invaluable. Here’s how to create a solid foundation for your work as you navigate the complexities of building applications visually.

1. Embrace Experimentation: Why Multiple Right Ways Exist

Visual development frameworks like WeWeb, Xano, and Webflow provide powerful tools that make building apps fast and approachable. But in contrast to some traditional development mindsets that focus on “doing it right,” visual development benefits from a more flexible approach. Here’s why:

• Avoid Perfection Paralysis: When you’re starting, it’s tempting to search for the “best” or “right” way to approach a problem. Visual tools reduce coding barriers, but complexity remains in design choices, workflows, and backend integrations. Expect that multiple paths can lead to success, and try to focus less on choosing the perfect approach and more on finding something that works for you.

• Conduct Small Experiments: Each tool in visual development has its quirks, limitations, and advantages. Instead of planning an entire feature upfront, try breaking it down into smaller pieces. Build an initial version, test it, and be prepared to discard it. For example, if you’re integrating an API call, create a small test version of that call, see how it interacts with your tool’s authentication and data handling, and learn from the outcome.

2. Give Yourself Permission to Fail

In visual development, failure is an essential part of the process. Many developers who are new to the field feel the need to avoid mistakes, but errors are part of a productive learning curve. Let’s explore why failure matters and how to lean into it:

• Iterative Improvement Over Immediate Success: The first version of your app, feature, or integration is unlikely to be perfect. And that’s okay. Each experiment gives you valuable feedback, improving your understanding of your tool and allowing you to build with confidence in subsequent iterations.

• Ownability and Custom Fit: Just because a particular solution worked for someone else doesn’t mean it’s best for you. Consider your strengths and familiarity with the tools, as well as your app’s specific needs. The path you take to build a solution should align with your understanding and comfort level, which will naturally deepen over time.

3. Cultivate Patience and a Learning Mindset

A significant part of the visual development journey is learning how to troubleshoot and adapt as new information emerges. What seems like the right solution one day might reveal inefficiencies or limitations down the road. Here’s how to build a lasting mindset for success:

• “Ship Knowledge” Rather than Immediate Code: In traditional development, shipping code is the primary objective, but visual development emphasizes learning the tools as much as delivering results. By focusing on what you’re learning with each experiment, you build a library of knowledge that will make future projects easier and more efficient.

• Practice Repetition to Build Familiarity: Visual tools can still be technically demanding—authentication flows, API integrations, and database setups require a strong grasp of underlying concepts, even when simplified. The more you experiment and repeat processes, the better you’ll become at troubleshooting, understanding nuances, and executing efficiently.

4. Stay Agile and Embrace Change

One of the greatest benefits of visual development is its agility. However, agility can feel intimidating if you’re new and trying to commit to a specific direction. To keep your work adaptable:

• Expect to Revisit Early Work: As you gain experience, you’ll likely look back at your initial solutions and wonder how you could have done it differently. Don’t hesitate to revisit, refactor, or rebuild parts of your application as you discover new methods.

• Build a Growth-Friendly Workflow: Approach your project with the understanding that your skills and understanding will change over time. Building in flexibility, such as using modular components or maintaining clear naming conventions, will make iteration easier.

5. Tools Are Just Tools—Complexity Still Exists

No-code and low-code development platforms may make app-building accessible, but the underlying principles are still rooted in traditional complexity. Security, API integrations, and database management, for example, remain as essential as ever:

• Understand the Fundamentals: Each time you encounter an authentication flow, API setup, or data connection, take the opportunity to understand why and how it works. Ask questions like “What does this API endpoint do?” or “How does OAuth keep my app secure?”

• Use Resources: Visual development has a vast community of users and resources. Engage with forums, documentation, and guides to deepen your understanding, and don’t hesitate to experiment with more technical concepts. Over time, concepts that initially seemed complex will become second nature.

6. Make Experimentation a Core Part of Your Development Process

Many developers skip steps in the name of efficiency but ultimately struggle when they hit limitations or bugs. Instead, incorporate experimentation as a step-by-step approach to learning and solving issues in real-time:

• Create Sandbox Versions: When attempting something complex, like connecting a backend database or integrating third-party software, set up a sandbox or test version of your project. This setup lets you explore how your app will handle different inputs and scenarios without impacting your live environment.

• Document and Reflect: After each experiment, note what you learned, including what worked, what didn’t, and any nuances you encountered. Keeping track of these insights is essential, especially as your project grows.

Building Confidence Through Experimentation

Visual development opens doors to powerful app-building without the steep learning curve of traditional coding, but a strong methodology is key to leveraging it effectively. By embracing experimentation, allowing yourself to make mistakes, and continuously building on what you’ve learned, you’ll develop the confidence to tackle larger projects and solve increasingly complex problems. Whether you’re building your first project or adding advanced functionality, remember: there’s no one “right way”—just the way that works best for you and your growth as a developer.

If you’re interested in learning how to become a Visual Developer I invite you to join the Startup Skin Visual Development Community.

What is a Race Condition?

A race condition occurs when two or more processes attempt to access and modify the same data at the same time. If the processes are not properly managed, their final output depends on the timing and sequence of execution, which can cause inconsistencies. For example:

1. User A reads a record and begins making updates.

2. Before User A saves their changes, User B reads the same record and begins their own modifications based on the original data.

3. Both users save their changes, potentially overwriting each other’s updates and leaving the data in an inconsistent state.

In high-traffic applications, managing these conflicts is crucial to maintaining data integrity.

Database Transactions

In Xano, database transactions allow you to group multiple database operations (like reading and writing records) into a single, atomic process, ensuring that all operations succeed or fail together. Transactions ensure that all the actions within them execute as one cohesive unit, reducing the chance of conflicting updates from simultaneous users.

• How it Works: A transaction opens with an operation (like retrieving a record) and only commits changes when all operations in the transaction succeed. If any operation fails, none of the changes are applied.

• Benefit: By grouping critical actions, transactions make sure other processes cannot interfere mid-operation. This is especially useful for complex processes, such as financial transactions or booking systems, where incomplete actions could cause significant errors.

• Important Note: Database locks in Xano only function when placed inside a database transaction. Without a transaction, a lock alone won’t prevent conflicts.

Database Locks (When Used in Transactions)

Database locks prevent records from being modified by other processes until the lock is released. Locks are particularly helpful when dealing with a high volume of requests to the same records, such as in an application with an incrementing counter or any shared resource.

• How to Use: In Xano, a lock can be applied to a “get record” or “query all records” function, and it works by blocking any access attempts to the locked record while another transaction is actively modifying it.

• Transaction Requirement: Locks only function effectively within a database transaction, so it’s essential to wrap lock-enabled actions within a transaction to ensure reliable behavior.

Ray Deck from Statechange does a remarkable job guiding us on how to set up database transactions and locks in Xano to solve race conditions, in the video below.

Handling Performance and Queue Management

While locks and transactions solve race conditions, they may introduce delays if multiple processes are waiting to access the same data. To manage high-traffic queues effectively, you can use asynchronous processing (like Xano’s post-processing), which lets database updates occur in the background, reducing wait times for users.

• Post-Processing: This method is ideal for updates that do not need immediate feedback on the front end

• When to Use: Post-processing works best when you don’t need instant results on the user interface. For example, with batch updates or when calling an LLM, post-processing helps keep the front end responsive while the back-end operations complete in sequence.

Summary

Race conditions can disrupt data consistency in multi-user environments, but Xano offers no code tools to address them. By combining database transactions and locks, you can:

• Ensure critical actions complete without interference.

• Block conflicting access to specific records until a transaction completes.

• Use asynchronous processing to manage heavy request queues without slowing down the user experience.

By implementing these practices, you’ll improve data reliability and maintain a responsive, high-integrity system for your users.

We’re in the middle of a technological transformation where the barriers to creating web applications are falling fast. Visual Development, commonly known as “No-code and low-code development” is the future, making it possible for anyone with an idea to build powerful digital tools and integrations without a deep background in coding. And that’s exactly what Startup Skin is here to support.

I'm Daniel Migizi, the founder of Startup Skin, a community created to empower visual developers of all levels. With a focus on tools like WeWeb(1) and Xano, our community is a dynamic, collaborative hub for those eager to turn ideas into applications quickly, effectively, and professionally.

What is Startup Skin All About?

Our core focus on WeWeb and Xano allow us to help members leverage these platforms to their fullest potential. Together, these tools open up powerful possibilities for building everything from simple web applications to sophisticated enterprise-grade software.

Startup Skin welcomes builders using tools like Webflow, Wized, Zapier, and Airtable, along with other no-code tools that fit seamlessly into today’s visual development landscape.

Why Join Startup Skin?

Whether you’re an entrepreneur, a developer, or someone with an innovative idea and a desire to build it, Startup Skin has something to offer. Here’s a glimpse into what you’ll find as a member:

• Hands-On Tutorials & In-Depth Guides: Our content is focused on empowering you to understand and leverage no-code and low-code tools. Dive into practical guides that show you the ropes and help you overcome common challenges.

• Community Expertise & Support: Need a second opinion, some fresh ideas, or just a sounding board? Startup Skin’s members come from diverse backgrounds and expertise, all ready to support and inspire each other.

• Innovative Use Cases & Real-World Examples: See how others are applying no-code solutions to real-world projects, helping you gather insights and inspiration to elevate your own work.

• Learning Resources Across Platforms: Beyond WeWeb and Xano, we offer knowledge and resources in many visual development tools. It’s about finding the right combination of tools to match your project’s needs.

Who Should Join?

If you’re interested in building web applications, Startup Skin is for you—no matter your skill level. We welcome everyone from beginners to seasoned developers. Even if you’re not currently using WeWeb or Xano, you’ll find that the community offers something valuable for all visual development enthusiasts.

Ready to Join the Startup Skin Community?

At Startup Skin, our vision is to create a place where ideas flourish, solutions emerge, and projects become reality. I personally invite you to join us, explore new tools, gain insights from peers, and discover ways to grow in your visual development journey. Whether you’re launching your first app or scaling up, you’ll find a community of like-minded creators ready to support and collaborate with you.

Welcome to Startup Skin. We can’t wait to see what you’ll create.

Click here to join the community

References

References are displayed next to the link in the article as parentheses (1).

1. WeWeb affilate link - Get 10% OFF all price plans

1. Set up the Rich Text Input:

   • Add a rich text input to your page.

2. Create a Workflow:

   • Go to the workflow section for your rich text input.

   • Add a new workflow and give it a name.

   • Set the trigger to "On Click".

3. Add Custom JavaScript:

   • In the workflow, choose "Custom JavaScript" as the action.

   • Enter the following code:

       return window.getSelection().toString().trim()
     

This code selects the highlighted text when clicked.

4. Create a Variable:

   • Go to the variables section of your project.

   • Create a new variable (e.g., "selectedTextDemo").

   • Set the variable type to "Text".

   • Enable "Preserve on navigation" if you want the selected text to persist between page loads.

5. Update the Variable:

   • In your "Workflow" on the rich text input, add another action after the Custom JavaScript.

   • Choose "Update variable value".

   • Select your newly created variable (e.g., "selectedTextDemo").

   • Set its value to the result of the Custom JavaScript action.

6. Display the Selected Text (Optional):

   • Add a heading element to your page.

   • In the heading's properties, go to the "Text" section.

   • Bind the text to your variable (e.g., "selectedTextDemo"). This will display the selected text in real-time.

7. Copy to Clipboard (Optional):

   • In your workflow, add a "Copy to clipboard" action after updating the variable.

   • Set the content to copy as your variable (e.g., "selectedTextDemo").

8. Test Your Implementation:

   • Preview your page.

   • Type some text in the rich text input.

   • Highlight a portion of the text and click on it.

   • The selected text should appear in the heading (if you added one).

   • The selected text should also be copied to your clipboard.

By following these steps, you've created a system that selects highlighted text in a rich text input, stores it in a variable, optionally displays it on the page, and copies it to the clipboard - all without writing complex code - just one line of javascript.

In the world of modern web development, the ability to create powerful, database-driven websites without extensive coding is a game-changer. Two platforms at the forefront of this revolution are Webflow, a visual web design tool, and Xano, a no-code backend development platform. When combined, they offer a robust solution for creating dynamic websites with sophisticated data management capabilities.

One common use case for this integration is handling form submissions. Here's a streamlined process to connect your Webflow forms to a Xano backend:

1. Set Up Your Xano Backend: Begin by creating a database table in Xano to store your form submissions. Then, create an API endpoint that accepts POST requests containing the form data. This endpoint will serve as the bridge between your Webflow form and your Xano database.

2. Configure Your Webflow Form: In Webflow, design your form as usual. Then, in the form settings, set the action to your Xano API endpoint URL. This tells Webflow where to send the form data.

3. Implement Custom Code: To ensure a smooth user experience and handle the form submission process more effectively, add a custom code snippet to your Webflow site. This JavaScript code will intercept the form submission, send the data to Xano via an AJAX request, and handle the response.

4. Create a Transition Effect: For an extra touch of polish, implement a transition effect after successful form submission. This can be achieved using animation libraries like GSAP, creating a visually appealing experience as the user is redirected or shown a success message.

5. Test and Refine: Thoroughly test your form submission process, ensuring data is correctly sent to Xano and stored in your database. Refine the user experience based on these tests, adjusting error handling and success messages as needed.

Leveraging AI for Code Generation:

One of the most exciting developments in this space is the ability to use AI, like Claude, to generate the necessary code for connecting Xano and Webflow. By providing Claude with specific requirements, such as the need for a form submission handler with a custom transition effect, you can quickly obtain a working code snippet.

For example, you might prompt Claude with: "I need JavaScript code to handle a Webflow form submission, send the data to a Xano API, and create a transition effect using GSAP after successful submission."

Claude can then generate a code snippet that includes:

• Event listeners for form submission

• AJAX requests to the Xano API

• Error handling

• GSAP animations for a smooth transition effect

This AI-assisted approach significantly reduces the time and expertise needed to implement complex functionality. It allows designers and entrepreneurs to focus on their core product while still implementing sophisticated features.

By following these steps and utilizing AI assistance, you create a seamless connection between your Webflow front-end and Xano back-end. This integration allows you to collect and store form data efficiently, opening up possibilities for further data processing, automated responses, or integration with other services.

The beauty of this setup lies in its flexibility and scalability. As your needs grow, you can easily expand your Xano backend to handle more complex data operations, all while maintaining the visual design control that Webflow offers.

This approach uses Webflow and Xano without Wized. But another way to connect your webflow form to xano is through Wized. We will touch on that another time.

Below is the code snippet used on my contact page to send the form data to xano and animate on form submission.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
  // Create transition overlay
  const overlay = document.createElement('div');
  overlay.style.position = 'fixed';
  overlay.style.top = '0';
  overlay.style.left = '0';
  overlay.style.width = '100%';
  overlay.style.height = '100%';
  overlay.style.backgroundColor = 'transparent';
  overlay.style.zIndex = '9999';
  overlay.style.pointerEvents = 'none';
  document.body.appendChild(overlay);

  // Create circles
  const circleCount = 5;
  const circles = [];
  for (let i = 0; i < circleCount; i++) {
    const circle = document.createElement('div');
    circle.style.position = 'absolute';
    circle.style.borderRadius = '50%';
    circle.style.backgroundColor = '#725f73';
    circle.style.width = '20px';
    circle.style.height = '20px';
    circle.style.transform = 'scale(0)';
    overlay.appendChild(circle);
    circles.push(circle);
  }

  const form = document.querySelector('form'); // Adjust selector if needed
  form.addEventListener('submit', function(e) {
    e.preventDefault();
    const formData = new FormData(form);
    const data = Object.fromEntries(formData);

    fetch('PLACE-YOUR-XANO-ENDPOINT-HERE', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    })
    .then(response => response.json())
    .then(result => {
      console.log('Success:', result);

      // Position circles randomly
      circles.forEach(circle => {
        circle.style.left = `${Math.random() * 100}%`;
        circle.style.top = `${Math.random() * 100}%`;
      });

      // Animate circles and transition to new page
      const tl = gsap.timeline();

      tl.to(circles, {
        scale: 50,
        duration: 1,
        stagger: 0.1,
        ease: "power2.in",
      })
      .to(overlay, {
        backgroundColor: '#725f73',
        duration: 0.2,
        onComplete: () => {
          window.location.href = 'https://www.danielmigizi.com/';
        }
      }, "-=0.5");
    })
    .catch(error => {
      console.error('Error:', error);
      alert('There was an error submitting your form. Please try again.');
    });
  });
});
</script>

Here's a walk-through of what's happening in the above code:

1. First, the script loads the GSAP (GreenSock Animation Platform) library from a CDN.

2. The code waits for the DOM to be fully loaded before executing (using DOMContentLoaded event).

3. It creates a full-screen overlay:

   • A div element is created and styled to cover the entire viewport.

   • It's initially transparent and doesn't interfere with user interactions.

4. Next, it creates 5 circle elements:

   • Each circle is a div styled to be round and colored #725f73.

   • They're initially invisible (scaled to 0) and positioned absolutely within the overlay.

   • These circles are stored in an array for later use.

5. The script then finds the form on the page and adds a submit event listener.

6. When the form is submitted:

   • The default form submission is prevented.

   • Form data is collected and formatted.

7. A fetch request is made to submit the form data to a Xano API endpoint.

8. If the submission is successful:

   • The circles are randomly positioned across the screen.

   • A GSAP timeline is created for the animation sequence.

   • The circles are animated to scale up dramatically (50 times their original size).

   • The animation is staggered, so each circle starts its animation slightly after the previous one.

   • After the circles have mostly covered the screen, the overlay's background color is set to #725f73 to fill any gaps.

   • Once the animation completes, the page redirects to the homepage.

9. If there's an error in form submission:

   • An error is logged to the console.

   • An alert is shown to the user.

This code creates a visually interesting transition effect after a successful form submission, where circles expand from random points on the screen to cover it before redirecting to a new page. The effect is smooth and engaging, providing visual feedback for the form submission process.

Let me know what you think?