From Tacit Knowledge to Strategic Intelligence: Vibe Coding

From Artificial Intelligence to Augmented Intelligence: The Future of Vibe Coding in Software Development

The Synthetic Mind: Why Business Player Mindset Is the Future of Vibe Coding

From Ideas to Innovation: How AI Development Partners Accelerate Business Transformation


<p class="wp-block-paragraph">2024 work-life balance is key to success.</p>



<p class="wp-block-paragraph">Our hectic world might cloud our judgment and, in turn, affect our balance.</p>



<p class="wp-block-paragraph">That&#8217;s why, in this edition, we decided to reflect on the nitty-gritty aspects of a leading professional.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="346" src="https://blog.effectussoftware.com/wp-content/uploads/2024/01/Subtitle-1-1-1024x346.png" alt="Being a top-notch professional" class="wp-image-2866" title="Being a top-notch professional" srcset="https://blog.effectussoftware.com/wp-content/uploads/2024/01/Subtitle-1-1-1024x346.png 1024w, https://blog.effectussoftware.com/wp-content/uploads/2024/01/Subtitle-1-1-300x101.png 300w, https://blog.effectussoftware.com/wp-content/uploads/2024/01/Subtitle-1-1-768x259.png 768w, https://blog.effectussoftware.com/wp-content/uploads/2024/01/Subtitle-1-1-1536x519.png 1536w, https://blog.effectussoftware.com/wp-content/uploads/2024/01/Subtitle-1-1.png 1552w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p class="wp-block-paragraph">So, let’s bring the idea of balance to the pursuit of becoming a leading professional. Whether working in-house or as part of <a href="https://www.effectussoftware.com/it-staff-augmentation-services?utm_source=chatgpt.com" target="_blank" rel="noreferrer noopener">IT Staff Augmentation Services</a>, maintaining a healthy work-life balance helps engineers stay engaged, collaborate more effectively, and consistently deliver high-quality results for clients and teammates alike.</p>



<p class="wp-block-paragraph">To think about it, first we need to dissect the concept and drill down on each 3 aspects:</p>



<h4 class="wp-block-heading">Solid academic background</h4>



<p class="wp-block-paragraph">First of all, having well-structured academic knowledge in your area is paramount to achieving a good work-life balance.</p>



<p class="wp-block-paragraph">But, it&#8217;s not all! </p>



<p class="wp-block-paragraph">Even though you might think it&#8217;s enough, there are still 3 other aspects that play on set.</p>



<p class="wp-block-paragraph">Nevertheless, academic background is crucial to building the elemental aspect of your professional life.</p>



<p class="wp-block-paragraph">For instance, some Uruguayan Universities you can get your studies in Engineering on the roll are: </p>



<ul class="wp-block-list">
<li>UdelaR &#8211; <a href="https://udelar.edu.uy/portal/" target="_blank" rel="noopener">Universidad de la República</a></li>



<li>ORT &#8211; <a href="https://www.ort.edu.uy/" target="_blank" rel="noopener">Universidad ORT</a></li>



<li>UdE &#8211; <a href="https://ude.edu.uy/" target="_blank" rel="noopener">Universidad de la Empresa</a></li>



<li>UM &#8211; <a href="https://www.um.edu.uy/" target="_blank" rel="noopener">Universidad de Montevideo</a></li>
</ul>



<h4 class="wp-block-heading">Professionalize the profession</h4>



<p class="wp-block-paragraph">On the one hand, there&#8217;s plenty of room to learn when you start your studies. </p>



<p class="wp-block-paragraph">But, on the other hand, there&#8217;s an entire world to do research and enhance the knowledge in your area. <br><br>Although it might sound tedious, doing research is a fundamental aspect of becoming an A-level professional. </p>



<p class="wp-block-paragraph">When it comes to doing research, we do not necessarily mean following the traditional method taught in natural sciences. </p>



<p class="wp-block-paragraph">Yet, there&#8217;s a whole world to explore. Adding to knowledge what already exists can be done in various ways:</p>



<ul class="wp-block-list">
<li>Collaborate in a community that you already belong to </li>



<li>Document and try new methods and processes</li>



<li>Create and share new knowledge</li>



<li>Register and write about the process</li>



<li>Analyze impact and results</li>
</ul>



<p class="wp-block-paragraph">All in all, remember not to follow a stagnating process, but do make it a learning roller-coaster. </p>



<p class="wp-block-paragraph">There&#8217;s always a black box to unpack!</p>



<h4 class="wp-block-heading">Keep a fun, healthy lifestyle</h4>



<p class="wp-block-paragraph">Furthermore, it&#8217;s not all about studies and research, yet there&#8217;s a crucial component, too. </p>



<p class="wp-block-paragraph">Let&#8217;s talk about having fun:</p>



<h5 class="wp-block-heading">Move your body! </h5>



<p class="wp-block-paragraph">Remember that a healthy lifestyle involves being active.</p>



<p class="wp-block-paragraph">Meaning that you should practice sports, take walks, go to the gym, or do any physical activity that keeps you active.</p>



<p class="wp-block-paragraph">In the same way, work-life balance requires a good amount of personal care, and this is a great way to support it.</p>



<p class="wp-block-paragraph">Consequently, this enhances your serotonin and dopamine levels, helping keep your brain oxygenated and lowering stress levels.</p>



<p class="wp-block-paragraph">Are you a sports fan?</p>



<h5 class="wp-block-heading">Leisure time &amp; hobbies</h5>



<p class="wp-block-paragraph">And what about having that time in the calendar to do that thing you enjoy the most? </p>



<p class="wp-block-paragraph">Sometimes, we tend to overestimate our time management. Therefore, we end up not having enough time to spend on activities such as reading, gardening, fishing, or other pursuits!</p>



<p class="wp-block-paragraph">It&#8217;s been proven that scheduling your leisure time helps you organize and, besides, gives your life the hierarchy it needs.</p>



<p class="wp-block-paragraph">Moreover, you don&#8217;t really need to stick to one hobby. Try new ones to explore and uncover unknown passions.</p>



<p class="wp-block-paragraph">What&#8217;s your hobby right now? </p>



<h5 class="wp-block-heading">Parks &amp; Recreation</h5>



<p class="wp-block-paragraph">First, a safe harbor, we are not actually talking about going to an amusement park, but feel free to do so.</p>



<p class="wp-block-paragraph">We refer to the idea of enjoying time with friends, colleagues, and family. Hence, work-life balance!</p>



<p class="wp-block-paragraph">Use your time wisely to participate in events that help you socialize and bond, hang out with friends, attend after-office events, do team-building activities, and the like.</p>



<p class="wp-block-paragraph">Having time to entertain yourself, make new friends, and enjoy the old ones is great. Not only that, but also when it comes to being a professional, bonding and bridging are a must.</p>



<p class="wp-block-paragraph">Finally, remember&#8230; use some time off to improve your work-life balance! </p>



<h2 class="wp-block-heading">Sharing is caring </h2>



<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="3 rules for better work-life balance | The Way We Work, a TED series" width="640" height="360" src="https://www.youtube.com/embed/4c_xYLwOx-g?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<h2 class="wp-block-heading">Work-life balance at Effectus</h2>



<p class="wp-block-paragraph">One of the most important aspects to bring into the discussion is the community. </p>



<p class="wp-block-paragraph">At <a href="https://blog.effectussoftware.com/acceptance-criteria-in-software-and-tech/">Effectus</a> we take this seriously, in addition, we always offer and participate in activities to enhance inner-bonds and outer-bonds. </p>



<p class="wp-block-paragraph">To put it in other words, we own this belief as a core element in Effectus.</p>



<p class="wp-block-paragraph">To conclude, it&#8217;s important to bear in mind that whether it&#8217;s the old, current, new, or yet-to-come generation of Engineers, we need to maintain a solid work-life balance culture.</p>


Embracing Work-Life Balance in 2024: A Crucial Insight


<p class="wp-block-paragraph">React Native has emerged as a valuable asset in our development community, offering versatile solutions for mobile applications. Credit goes to our Referent Engineer, <a href="https://www.linkedin.com/in/brunopintos98/" target="_blank" rel="noopener">Bruno Pintos</a>, for sharing his valuable insights.</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p class="wp-block-paragraph">As mobile applications grow in complexity, especially when dealing with real-time interactions and dynamic UI components, teams often rely on <a href="https://www.effectussoftware.com/cross-platform-app-development-services">Cross-Platform App Development Services</a> to ensure performance, scalability, and consistency across devices while maintaining a seamless user experience.</p>
</blockquote>



<p class="wp-block-paragraph">In this blog post, we dig into a challenging project where we needed to implement <strong>dynamic views in React Native</strong>, facing complexities in rendering and user interactions.</p>



<p class="wp-block-paragraph">For the construction of this feature, we didn&#8217;t find much material in our React Native community. Therefore, we decided to write this post explaining the problem or challenge and to share the solution.</p>



<h2 class="wp-block-heading">The Problem</h2>



<p class="wp-block-paragraph">Our task involved creating a screen with a <strong>primary view and a draggable secondary view</strong>.</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p class="wp-block-paragraph">Challenges like these highlight the importance of <a href="https://www.effectussoftware.com/blog/react-native-input">handling complex user input in React Native</a>, where gestures, touch interactions, and component behavior must be carefully orchestrated to avoid conflicts and ensure intuitive user experiences.</p>
</blockquote>



<p class="wp-block-paragraph">The catch was that the content displayed on the primary view needed to <strong>seamlessly switch</strong> to the secondary view upon user interaction.</p>



<p class="wp-block-paragraph">This complexity was heightened by the inclusion of a <strong>camera</strong> component capable of recording, and a <strong>map</strong> that users could interact with to move around and zoom in and out.</p>



<p class="wp-block-paragraph">So we have 2 problems here.</p>



<p class="wp-block-paragraph"><strong>A) Camera problem:</strong> If we were to pause rendering on the primary view to switch to rendering on the secondary view, it would stop the ongoing recording process – a scenario we aim to avoid.</p>



<p class="wp-block-paragraph"><strong>B) Map problem:</strong> The user could drag the map to move around, but also drag the secondary view, to move it anywhere. Hence, we needed to manage the same user gesture (drag) that had different actions based on whether the map was the primary or secondary view.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="346" src="https://blog.effectussoftware.com/wp-content/uploads/2024/01/Subtitle-1-1024x346.png" alt="The Effectus Solution" class="wp-image-2858" title="The Effectus Solution" srcset="https://blog.effectussoftware.com/wp-content/uploads/2024/01/Subtitle-1-1024x346.png 1024w, https://blog.effectussoftware.com/wp-content/uploads/2024/01/Subtitle-1-300x101.png 300w, https://blog.effectussoftware.com/wp-content/uploads/2024/01/Subtitle-1-768x259.png 768w, https://blog.effectussoftware.com/wp-content/uploads/2024/01/Subtitle-1-1536x519.png 1536w, https://blog.effectussoftware.com/wp-content/uploads/2024/01/Subtitle-1.png 1552w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p class="wp-block-paragraph">Given the complexity of this challenge, we adopted a <strong>divide-and-conquer strategy</strong>.</p>



<ol class="wp-block-list">
<li>First, we created the draggable, switchable views</li>



<li>Then we introduced the camera and map components.</li>
</ol>



<h3 class="wp-block-heading">Part 1: Create the views</h3>



<ul class="wp-block-list">
<li>Rendering two views: one primary and one secondary.</li>



<li>Enabling the seamless switch between views without triggering a re-render.</li>



<li>Implementing drag functionality for the secondary view.</li>
</ul>



<h5 class="wp-block-heading">Create draggable views in React Native</h5>



<p class="wp-block-paragraph">According to the official React Native documentation, to make a view draggable, we can use <a href="https://reactnative.dev/docs/panresponder" target="_blank" rel="noopener">PanResponder</a>. Additionally, we have to use the <code>&lt;Animated.View /&gt;</code> component to apply the &#8216;x&#8217; and &#8216;y&#8217; properties provided by <code>PanResponder</code>.</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>const pan = useRef(new Animated.ValueXY()).current;

const panResponder = useRef(
  PanResponder.create({
    onMoveShouldSetPanResponder: () =&gt; true,
    onPanResponderGrant: () =&gt; {
      pan.setOffset({
        x: pan.x._value,
        y: pan.y._value,
      });
    },
    onPanResponderMove: Animated.event([null, { dx: pan.x, dy: pan.y }], {
      useNativeDriver: false,
    }),
    onPanResponderRelease: () =&gt; {
      pan.flattenOffset();
    },
  }),
).current;

&lt;Animated.View
  style={{
    transform: [{ translateX: pan.x }, { translateY: pan.y }],
  }}
  {...panResponder.panHandlers}
&gt;
  &lt;View style={styles.box} /&gt;
&lt;/Animated.View&gt;;
</code></pre></div>



<div style="height:24px" aria-hidden="true" class="wp-block-spacer"></div>



<h5 class="wp-block-heading">Both React Native views must be draggable</h5>



<p class="wp-block-paragraph">As mentioned earlier, it is essential to emphasize that the views had to remain <strong>static and not undergo re-rendering</strong>, even during the transition between them.</p>



<p class="wp-block-paragraph">Additionally, as they were switchable, <strong>either view could function as the secondary view</strong>, allowing users to drag it.</p>



<p class="wp-block-paragraph">Therefore, it was necessary to create a <strong>draggable component</strong> <strong>for</strong> <strong>both views</strong> while restricting the user&#8217;s ability to drag the primary view.</p>



<p class="wp-block-paragraph">To accomplish this behavior, we created two <code>&lt;DraggableSquare /&gt;</code> components and utilized the <code>isDraggable</code> flag to flag whether it represented the secondary view or not, and we adjusted the styles accordingly.</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>import React, { useState, useRef } from &#39;react&#39;;
import { View, StyleSheet, PanResponder, Animated, Pressable, Text } from &#39;react-native&#39;;

const DraggableSquare = ({ isDraggable, color, onPress, title }) =&gt; {
  const pan = useRef(new Animated.ValueXY()).current;
  const panResponder = useRef(
    PanResponder.create({
      onMoveShouldSetPanResponder: () =&gt; true,
      onPanResponderGrant: () =&gt; {
        pan.setOffset({
          x: pan.x._value,
          y: pan.y._value,
        });
      },
      onPanResponderMove: Animated.event([null, { dx: pan.x, dy: pan.y }], {
        useNativeDriver: false,
      }),
      onPanResponderRelease: () =&gt; {
        pan.flattenOffset();
      },
    })
  ).current;

  return (
    &lt;Animated.View
      style={[
        styles.square,
        {
          backgroundColor: color,
          transform: isDraggable ? [{ translateX: pan.x }, { translateY: pan.y }] : [],
        },
      ]}
      {...(isDraggable ? panResponder.panHandlers : {})}
    &gt;
      &lt;Pressable style={styles.pressable} onPress={isDraggable ? onPress : undefined}&gt;
        &lt;Text&gt;{title}&lt;/Text&gt;
      &lt;/Pressable&gt;
    &lt;/Animated.View&gt;
  );
};

const App = () =&gt; {
  const [isRedSmall, setIsRedSmall] = useState(false);

  return (
    &lt;View style={styles.container}&gt;
      &lt;DraggableSquare
        isDraggable={isRedSmall}
        color=&quot;red&quot;
        onPress={() =&gt; setIsRedSmall(false)}
        title=&quot;Red box&quot;
      /&gt;
      &lt;DraggableSquare
        isDraggable={!isRedSmall}
        color=&quot;yellow&quot;
        onPress={() =&gt; setIsRedSmall(true)}
        title=&quot;Yellow box&quot;
      /&gt;
    &lt;/View&gt;
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: &#39;row&#39;, // To align squares horizontally
  },
  square: {
    height: 200,
    width: 150,
    borderRadius: 5,
    margin: 10,
  },
  pressable: {
    flex: 1,
    justifyContent: &#39;center&#39;,
    alignItems: &#39;center&#39;,
    borderRadius: 5,
    overflow: &#39;hidden&#39;,
  },
});

export default App;
</code></pre></div>



<div style="height:24px" aria-hidden="true" class="wp-block-spacer"></div>



<h5 class="wp-block-heading">Demo</h5>



<p class="wp-block-paragraph">We can see the behavior of both actions:</p>



<ul class="wp-block-list">
<li><strong><strong>Switch</strong></strong> between views, when the user taps on the secondary view.</li>



<li><strong>Dragging</strong> of the secondary view, when the user manually moves it.</li>
</ul>


<div class="wp-block-image">
<figure class="aligncenter is-resized"><img decoding="async" src="https://lh7-us.googleusercontent.com/VoGXfjZQEolYKKz7tfvZnpKXdkL9rAe2G3kExHzY815MevU69OTTQNg-x8YQEyGybHbr7KiPVq8vHsfqbLWH2LKzRGh4bWmHGk5gSbHr7pl9U0dVk-mah574ygJu0q5Yj3X2ZVRKii0TA2LvpGCS5Q" alt="" style="width:272px;height:auto"></figure>
</div>


<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading">Part 2: Integration of Camera and Map Components</h3>



<p class="wp-block-paragraph">Now that we have successfully implemented the <strong>Switch</strong> and <strong>Drag</strong> functionalities, it is time to incorporate a camera instead of the <mark style="background-color:#ef5350" class="has-inline-color">red view</mark> and a map instead of the <mark style="background-color:#ff9800" class="has-inline-color">yellow view</mark> using <a href="https://github.com/mrousavy/react-native-vision-camera" target="_blank" rel="noopener" title="">react-native-vision-camera</a> and <a href="https://github.com/react-native-maps/react-native-maps" target="_blank" rel="noopener" title="">react-native-maps</a> respectively.</p>



<p class="wp-block-paragraph">To achieve this, we implemented both <code>&lt;Camera /&gt;</code> and <code>&lt;MapView /&gt;</code> components following the documentation of their libraries.</p>



<p class="wp-block-paragraph">Finally, we introduced them to the previously created <code>&lt;DraggableSquare /&gt;</code> components and removed the red and yellow views.</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>import React, { useState, useRef, useEffect } from &#39;react&#39;;
import { View, StyleSheet, PanResponder, Animated, Pressable, Text } from &#39;react-native&#39;;
import MapView from &#39;react-native-maps&#39;;
import { Camera, useCameraDevices } from &#39;react-native-vision-camera&#39;;

const DraggableSquare = ({ isInSmallSize, onPress, pan, panResponder, children }) =&gt; (
  &lt;Animated.View
    style={[
      styles.square,
      {
        height: isInSmallSize ? 200 : &#39;100%&#39;,
        width: isInSmallSize ? 150 : &#39;100%&#39;,
        transform: isInSmallSize ? [{ translateX: pan.x }, { translateY: pan.y }] : [],
      },
    ]}
    {...(isInSmallSize ? panResponder.panHandlers : {})}
  &gt;
    &lt;Pressable style={styles.pressable} onPress={isInSmallSize ? onPress : undefined}&gt;
      {children}
    &lt;/Pressable&gt;
  &lt;/Animated.View&gt;
);

const configureCamera = async () =&gt; {
  const cameraPermission = await Camera.getCameraPermissionStatus();
  const newCameraPermission = cameraPermission ?? (await Camera.requestCameraPermission());

  if (newCameraPermission !== &#39;authorized&#39;) {
    console.log(&#39;Camera permission not granted&#39;);
  }
};

const configureMicrophone = async () =&gt; {
  const microphonePermission = await Camera.getMicrophonePermissionStatus();
  const newMicrophonePermission =
    microphonePermission ?? (await Camera.requestMicrophonePermission());

  if (newMicrophonePermission !== &#39;authorized&#39;) {
    console.log(&#39;Microphone permission not granted&#39;);
  }
};

const App = () =&gt; {
  const [isMapSmall, setIsMapSmall] = useState(false);
  const pan = useRef(new Animated.ValueXY()).current;
  const panResponder = useRef(
    PanResponder.create({
      onMoveShouldSetPanResponder: () =&gt; true,
      onPanResponderGrant: () =&gt; {
        pan.setOffset({
          x: pan.x._value,
          y: pan.y._value,
        });
      },
      onPanResponderMove: Animated.event([null, { dx: pan.x, dy: pan.y }], {
        useNativeDriver: false,
      }),
      onPanResponderRelease: () =&gt; {
        pan.flattenOffset();
      },
    })
  ).current;

  useEffect(() =&gt; {
    configureCamera();
    configureMicrophone();
  }, []);

  const devices = useCameraDevices(&#39;wide-angle-camera&#39;);
  const device = devices.back;

  if (device == null) {
    return &lt;Text&gt;Loading...&lt;/Text&gt;;
  }

  return (
    &lt;View style={styles.container}&gt;
      &lt;DraggableSquare isInSmallSize={isMapSmall} onPress={() =&gt; setIsMapSmall(false)} pan={pan} panResponder={panResponder}&gt;
        &lt;MapView
          initialRegion={{
            latitude: -34.908768,
            longitude: -56.151465,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}
          style={{ width: &#39;100%&#39;, height: &#39;100%&#39; }}
          pitchEnabled={!isMapSmall}
          rotateEnabled={!isMapSmall}
          zoomEnabled={!isMapSmall}
          scrollEnabled={!isMapSmall}
          onPress={() =&gt; {}}
        /&gt;
      &lt;/DraggableSquare&gt;
      &lt;DraggableSquare isInSmallSize={!isMapSmall} onPress={() =&gt; setIsMapSmall(true)} pan={pan} panResponder={panResponder}&gt;
        &lt;Camera style={{ width: &#39;100%&#39;, height: &#39;100%&#39; }} device={device} isActive={true} onPress={() =&gt; {}} /&gt;
      &lt;/DraggableSquare&gt;
    &lt;/View&gt;
  );
};

const styles = StyleSheet.create({
  container: {
    position: &#39;relative&#39;,
    height: &#39;100%&#39;,
    width: &#39;100%&#39;,
  },
  square: {
    backgroundColor: &#39;transparent&#39;,
    position: &#39;absolute&#39;,
    top: 60,
    right: 20,
    zIndex: 1,
    borderRadius: 5,
  },
  pressable: {
    height: &#39;100%&#39;,
    width: &#39;100%&#39;,
    justifyContent: &#39;center&#39;,
    alignItems: &#39;center&#39;,
    borderRadius: 5,
    overflow: &#39;hidden&#39;,
  },
});

export default App;
</code></pre></div>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="346" src="https://blog.effectussoftware.com/wp-content/uploads/2024/01/Subtitle-2-1024x346.png" alt="Final Effectus Demo" class="wp-image-2860" title="Final Effectus Demo" srcset="https://blog.effectussoftware.com/wp-content/uploads/2024/01/Subtitle-2-1024x346.png 1024w, https://blog.effectussoftware.com/wp-content/uploads/2024/01/Subtitle-2-300x101.png 300w, https://blog.effectussoftware.com/wp-content/uploads/2024/01/Subtitle-2-768x259.png 768w, https://blog.effectussoftware.com/wp-content/uploads/2024/01/Subtitle-2-1536x519.png 1536w, https://blog.effectussoftware.com/wp-content/uploads/2024/01/Subtitle-2.png 1552w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p class="wp-block-paragraph">Here we can see:</p>



<ul class="wp-block-list">
<li>We can drag and switch both views.</li>



<li>The camera never stops recording (never re-renders).</li>



<li>The map can be moved around and zoomed in and out.</li>
</ul>


<div class="wp-block-image">
<figure class="aligncenter is-resized"><img decoding="async" src="https://lh7-us.googleusercontent.com/JyK--QMnlgWwqHt0YyegpukLHXr3LUOaT_bCOp-FR37kzSsV5gzR5npLqY5mPiKmqQxYiTGc8yAxS_4n-_m__zF5lJV4kcB7Sa0qiWwy6ziaPiAKpznLyBUIIgcCS15ksIfb2z3MXzACqplkcAVrXg" alt="" style="width:223px;height:auto"></figure>
</div>


<h2 class="wp-block-heading">Let&#8217;s round up</h2>



<p class="wp-block-paragraph">In conclusion, we shared in our previous post how&nbsp;<a href="https://www.effectussoftware.com/blog/2457">AI has transformed</a>&nbsp;the way we live, by presenting new opportunities and also ways to improve your code.</p>



<p class="wp-block-paragraph">Thus, we brought some down-to-earth examples for you to dive into&nbsp;<a href="https://blog.effectussoftware.com/5-impact-of-ai-on-2023-development/" target="_blank" rel="noopener" title="">magic views in react-native</a>!</p>



<p class="wp-block-paragraph">Ultimately, we invite you to keep yourself posted and&nbsp;<a href="https://blog.effectussoftware.com/">subscribe</a>, moreover, we’re utterly convinced that this topic will be in the limelight for quite some time!</p>



<p class="wp-block-paragraph"><strong>Find a video below to keep you in the loop:</strong></p>



<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="Draggable, resizable + stackable panels using Javascript" width="640" height="360" src="https://www.youtube.com/embed/NpBZtR1nLwA?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<p class="wp-block-paragraph"></p>


Mastering Dynamic Views in React Native: Draggable, and Switchable Views


<p class="wp-block-paragraph">Strict mode, <code>&lt;StrictMode></code> is a React component that lets you find common bugs in your components early during development.</p>



<p class="wp-block-paragraph">Today, our Top-senior referent, Pia Rovira, brings the second tip-post on the StrictMode component.</p>



<p class="wp-block-paragraph">When used, it enables additional development behaviors and warnings for the component tree inside it.</p>



<p class="wp-block-paragraph">Strict Mode does not perform any checks or display any warnings in production mode.</p>



<p class="wp-block-paragraph">Whether you&#8217;re building a modern React application or delivering enterprise-grade <strong><a href="https://www.effectussoftware.com/website-development-services">Website Development Services</a></strong>, adopting Strict Mode from the beginning helps ensure cleaner, safer, and more maintainable code.</p>



<p class="wp-block-paragraph">It enables the following behaviors while it does not render any visible elements in the DOM:</p>



<ul class="wp-block-list">
<li>Your components will&nbsp;re-render an extra time&nbsp;to find bugs caused by impure rendering.</li>



<li>Your components will&nbsp;re-run Effects an extra time&nbsp;to find bugs caused by missing Effect cleanup.</li>



<li>Your components will be checked for usage of deprecated APIs.</li>
</ul>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="346" src="https://blog.effectussoftware.com/wp-content/uploads/2023/12/Subtitle-1-1-1024x346.png" alt="Why is Strict Mode helpful?" class="wp-image-2776" title="Why is Strict Mode helpful?" srcset="https://blog.effectussoftware.com/wp-content/uploads/2023/12/Subtitle-1-1-1024x346.png 1024w, https://blog.effectussoftware.com/wp-content/uploads/2023/12/Subtitle-1-1-300x101.png 300w, https://blog.effectussoftware.com/wp-content/uploads/2023/12/Subtitle-1-1-768x259.png 768w, https://blog.effectussoftware.com/wp-content/uploads/2023/12/Subtitle-1-1-1536x519.png 1536w, https://blog.effectussoftware.com/wp-content/uploads/2023/12/Subtitle-1-1.png 1552w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<ul class="wp-block-list">
<li>It can help catch subtle bugs, especially those caused by race conditions or incorrect assumptions about component state.</li>



<li>It can help devs stay up to date with best practices with its warnings and suggestions</li>



<li>It highlights potential problems early, before they become serious problems. This is the case for functions or behaviors that will be deprecated soon or will otherwise change. React is rapidly evolving, and this kind of warning may save our lives if we pay attention to it when we should.</li>



<li>It avoids common mistakes that are not so obvious</li>



<li>By identifying unsafe lifecycles and suggesting what to use instead</li>



<li>By detecting legacy stuff like Context API or String ref API usage</li>
</ul>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="346" src="https://blog.effectussoftware.com/wp-content/uploads/2023/12/Subtitle-2-1-1024x346.png" alt="When and where should we use Strict Mode?" class="wp-image-2778" title="When and where should we use Strict Mode?" srcset="https://blog.effectussoftware.com/wp-content/uploads/2023/12/Subtitle-2-1-1024x346.png 1024w, https://blog.effectussoftware.com/wp-content/uploads/2023/12/Subtitle-2-1-300x101.png 300w, https://blog.effectussoftware.com/wp-content/uploads/2023/12/Subtitle-2-1-768x259.png 768w, https://blog.effectussoftware.com/wp-content/uploads/2023/12/Subtitle-2-1-1536x519.png 1536w, https://blog.effectussoftware.com/wp-content/uploads/2023/12/Subtitle-2-1.png 1552w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p class="wp-block-paragraph">StrictMode is really useful and I’d recommend wrapping all your React App in it, as it does nothing but help. Cases in which it could be crucial are:</p>



<ul class="wp-block-list">
<li>When working in a codebase you didn’t write or you don’t completely know, as it can unveil lots of things.</li>



<li>When you need to figure out what’s wrong and you don’t want to read and test the whole code.</li>



<li>If you are new to React, it will help you get into the habit of producing code that follows React’s best practices.</li>



<li></li>
</ul>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="346" src="https://blog.effectussoftware.com/wp-content/uploads/2023/12/Subtitle-3-1024x346.png" alt="So… how can I enable this in my project?" class="wp-image-2779" title="So… how can I enable this in my project?" srcset="https://blog.effectussoftware.com/wp-content/uploads/2023/12/Subtitle-3-1024x346.png 1024w, https://blog.effectussoftware.com/wp-content/uploads/2023/12/Subtitle-3-300x101.png 300w, https://blog.effectussoftware.com/wp-content/uploads/2023/12/Subtitle-3-768x259.png 768w, https://blog.effectussoftware.com/wp-content/uploads/2023/12/Subtitle-3-1536x519.png 1536w, https://blog.effectussoftware.com/wp-content/uploads/2023/12/Subtitle-3.png 1552w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p class="wp-block-paragraph">Easy peasy! Just wrap the portion of your App you want to check with this component.</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>// Wrapping the entire app

import { StrictMode } from &#39;react&#39;;
import { createRoot } from &#39;react-dom/client&#39;;

const root = createRoot(document.getElementById(&#39;root&#39;));
root.render(
  &lt;StrictMode&gt;
    &lt;App /&gt;
  &lt;/StrictMode&gt;
);


// Wrapping only a portion

import { StrictMode } from &#39;react&#39;;

function App() {
  return (
    &lt;&gt;
      &lt;Header /&gt;
      &lt;StrictMode&gt;
        &lt;main&gt;
          &lt;Sidebar /&gt;
          &lt;Content /&gt;
        &lt;/main&gt;
      &lt;/StrictMode&gt;
      &lt;Footer /&gt;
    &lt;/&gt;
  );
}</code></pre></div>



<h2 class="wp-block-heading">Rounding up about React18 StrictMode! </h2>



<p class="wp-block-paragraph">Keep on exploring our blog post about <a href="https://www.effectussoftware.com/blog/2208">React</a> and <a href="https://www.effectussoftware.com/blog/1646">React Native Improved Architecture</a>. Some more tips are coming up&#8230;<br><br>Check out our&nbsp;<a href="https://blog.effectussoftware.com/">other posts</a>&nbsp;for more insights!</p>


React18: Strict Mode as a not-to-miss component


<p class="wp-block-paragraph">Today our Top-senior referent <a href="https://www.linkedin.com/search/results/all/?fetchDeterministicClustersOnly=true&amp;heroEntityKey=urn%3Ali%3Afsd_profile%3AACoAACzOIGEBbh6e2ENvp41g-BCKtEkoCjaxBEA&amp;keywords=pia%20rovira&amp;origin=RICH_QUERY_SUGGESTION&amp;position=0&amp;searchId=3af6a6ef-b6cd-4873-ae5b-76bd4a2977c1&amp;sid=VLh&amp;spellCorrectionEnabled=false" target="_blank" rel="noopener">Pia Rovira</a> is shedding light on React18 and Suspense component.</p>



<p class="wp-block-paragraph">At Effectus, we continuously evaluate modern React capabilities as part of our <strong><a href="https://www.effectussoftware.com/website-development-services">Website Development Services</a></strong>, helping teams build faster, more scalable, and maintainable web applications.</p>



<p class="wp-block-paragraph">It&#8217;s a React component (available from React18) that lets you display a fallback declaratively until its children have finished loading.</p>



<p class="wp-block-paragraph">It&#8217;s not a data-fetching library, nor is it a way to manage state; it just lets your components tell React they are waiting for data.</p>



<p class="wp-block-paragraph">Suspense <strong>does not</strong> detect when data is fetched inside an Effect or event handler.</p>



<h3 class="wp-block-heading">Suspense caveat</h3>



<p class="wp-block-paragraph">⚠️ Only Suspense-enabled data sources will activate the Suspense component. Suspense is kind of new, so not every data-fetching library is integrated with it yet. Suspense-enabled data sources include:</p>



<ul class="wp-block-list">
<li>Data fetching with Suspense-enabled frameworks/libraries</li>



<li>Lazy-loading component code with&nbsp;<code><a href="https://react.dev/reference/react/lazy" target="_blank" rel="noopener">lazy</a></code></li>



<li>Reading the value of a Promise with&nbsp;<code><a href="https://react.dev/reference/react/use" target="_blank" rel="noopener">use</a></code></li>



<li></li>
</ul>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="346" src="https://blog.effectussoftware.com/wp-content/uploads/2023/12/Subtitle-1-1024x346.png" alt="Props for suspense" class="wp-image-2769" title="Props for suspense" srcset="https://blog.effectussoftware.com/wp-content/uploads/2023/12/Subtitle-1-1024x346.png 1024w, https://blog.effectussoftware.com/wp-content/uploads/2023/12/Subtitle-1-300x101.png 300w, https://blog.effectussoftware.com/wp-content/uploads/2023/12/Subtitle-1-768x259.png 768w, https://blog.effectussoftware.com/wp-content/uploads/2023/12/Subtitle-1-1536x519.png 1536w, https://blog.effectussoftware.com/wp-content/uploads/2023/12/Subtitle-1.png 1552w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p class="wp-block-paragraph">Suspense component receives 2 props.</p>



<ul class="wp-block-list">
<li>children: The actual UI you intend to render.</li>



<li>fallback: The component to be rendered while the children is still loading.</li>
</ul>



<h2 class="wp-block-heading">Example</h2>



<p class="wp-block-paragraph">With Suspense we can go from:</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>const App = () =&gt; {
  const [userDetails, setUserDetails] = useState({})

  useEffect(() =&gt; {
    fetchUserDetails().then(setUserDetails)
  }, [])

  if (!userDetails.id) return &lt;p&gt;Fetching user details...&lt;/p&gt;

  return (
    &lt;div className=&quot;app&quot;&gt;
      &lt;h2&gt;Simple Todo&lt;/h2&gt;

      &lt;UserWelcome user={userDetails} /&gt;
      &lt;Todos /&gt;
    &lt;/div&gt;
  )
}</code></pre></div>



<p class="wp-block-paragraph">to:</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>const data = fetchData() // this method should be integrated with Suspense

const App = () =&gt; (
    &lt;Suspense fallback={&lt;p&gt;Fetching user details...&lt;/p&gt;}&gt;
      &lt;UserWelcome /&gt;
    &lt;/Suspense&gt;
)

const UserWelcome = () =&gt; {
  const userDetails = data.userDetails.read();
	
	return &lt;div&gt;Hello {userDetails.name}!&lt;/div&gt;
}
</code></pre></div>



<p class="wp-block-paragraph">Code is cleaner and <strong>userDetails is always defined.</strong> While data is loading, we will see <code>&lt;p&gt;Fetching user details...&lt;/p&gt;</code> and then, when data promise resolves we will see the <code>UserWelcome</code> component.</p>



<p class="wp-block-paragraph">We can also nest <code>Suspense</code> components, cause suspense does not suspend 🤯. For example:</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>&lt;Suspense fallback={&lt;BigSpinner /&gt;}&gt;
  &lt;Biography /&gt;
  &lt;Suspense fallback={&lt;AlbumsGlimmer /&gt;}&gt;
    &lt;Panel&gt;
      &lt;Albums /&gt;
    &lt;/Panel&gt;
  &lt;/Suspense&gt;
&lt;/Suspense&gt;
</code></pre></div>



<p class="wp-block-paragraph">In this case, At first we will see the <code>BigSpinner</code> while <code>Biography</code> data is being fetched. Then, we will see <code>Biography</code> component and the <code>AlbumsGlimmer</code> component while the albums data is loading. </p>



<p class="wp-block-paragraph">Lastly, when having biography data and albums data, we will see <code>Biography</code> and <code>Albums</code> components.</p>



<p class="wp-block-paragraph">So, just to see the evolution of our components:</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>1. Everything is loading
&lt;BigSpinner /&gt;

2. Biography data already loaded, albums data is still fetching
&lt;&gt;
	&lt;Biography /&gt;
	&lt;AlbumsGlimmer /&gt;
&lt;/&gt;

3. Biography data and albums data fetched
&lt;&gt;
	&lt;Biography /&gt;
	&lt;Panel&gt;
	  &lt;Albums /&gt;
  &lt;/Panel&gt;
&lt;/&gt;
</code></pre></div>



<h2 class="wp-block-heading">React-query example in React18</h2>



<p class="wp-block-paragraph">React-query is one of the libraries that has hooks that integrate with Suspense on the latest version <code>v5</code>.</p>



<p class="wp-block-paragraph">I’ll add an example below that includes Suspense and Error handling.</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>import React, { Suspense } from &#39;react&#39;;
import { QueryErrorResetBoundary } from &#39;@tanstack/react-query&#39;;
import { ErrorBoundary, FallbackProps } from &#39;react-error-boundary&#39;;

import { Cards, Footer, Header, Main, Wrapper } from &#39;components&#39;;
import GlobalStyle from &#39;styles/globalStyles&#39;;

const Loading = () =&gt; &lt;div&gt;Loading...&lt;/div&gt;

const ErrorView = ({ error, resetErrorBoundary }: FallbackProps) =&gt; {
	return (
		&lt;div&gt;
			&lt;div&gt;{error.message}&lt;/div&gt;
			&lt;button title=&#39;Retry&#39; onClick={resetErrorBoundary} /&gt;
		&lt;/div&gt;
	);
};

const Home: React.FC = () =&gt; {
	return (
		&lt;Wrapper&gt;
			&lt;&gt;
				&lt;GlobalStyle /&gt;
				&lt;Header /&gt;
				&lt;QueryErrorResetBoundary&gt;
					{({ reset }) =&gt; (
						&lt;ErrorBoundary onReset={reset} FallbackComponent={ErrorView}&gt;
							&lt;Suspense fallback={&lt;Loading /&gt;}&gt;
								&lt;Main /&gt;
							&lt;/Suspense&gt;
						&lt;/ErrorBoundary&gt;
					)}
				&lt;/QueryErrorResetBoundary&gt;
				&lt;Cards /&gt;
				&lt;Footer /&gt;
			&lt;/&gt;
		&lt;/Wrapper&gt;
	);
};

export default Home;
</code></pre></div>



<p class="wp-block-paragraph">And the Main component:</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>import React from &#39;react&#39;;

import { Button } from &#39;components&#39;;
import { useSuspenseQuery } from &#39;@tanstack/react-query&#39;;
import { getData } from &#39;services/api&#39;;

export const Main: React.FC = () =&gt; {
	const queryResponseRQ = useSuspenseQuery({
		queryKey: [&#39;deutschland&#39;],
		queryFn: () =&gt; getData(&#39;name/deutschland&#39;),
	});

	return (
		&lt;div
			style={{
				display: &#39;flex&#39;,
				flexDirection: &#39;column&#39;,
				justifyContent: &#39;center&#39;,
				alignItems: &#39;center&#39;,
				textAlign: &#39;center&#39;,
				paddingTop: 32,
				paddingBottom: 32,
			}}&gt;
			&lt;div&gt;{queryResponseRQ.data.data[0].name.common}&lt;/div&gt;
		&lt;/div&gt;
	);
};</code></pre></div>



<p class="wp-block-paragraph">Good news here is that errors and loading states are handled by <code>Suspense</code> and <code>ErrorBoundary</code> and so when <code>Main</code> component displays the query Response data is always defined. </p>



<p class="wp-block-paragraph">No need to using <code>?</code> or verifying to check nothing crashes.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="346" src="https://blog.effectussoftware.com/wp-content/uploads/2023/12/Subtitle-2-1024x346.png" alt="Suspense List" class="wp-image-2771" title="Suspense List" srcset="https://blog.effectussoftware.com/wp-content/uploads/2023/12/Subtitle-2-1024x346.png 1024w, https://blog.effectussoftware.com/wp-content/uploads/2023/12/Subtitle-2-300x101.png 300w, https://blog.effectussoftware.com/wp-content/uploads/2023/12/Subtitle-2-768x259.png 768w, https://blog.effectussoftware.com/wp-content/uploads/2023/12/Subtitle-2-1536x519.png 1536w, https://blog.effectussoftware.com/wp-content/uploads/2023/12/Subtitle-2.png 1552w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p class="wp-block-paragraph"><code>&lt;SuspenseList&gt;</code>&nbsp;coordinates the “reveal order” of the closest&nbsp;<code>&lt;Suspense&gt;</code>&nbsp;nodes below it.</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-lang="JavaScript"><code> &lt;code&gt;❗ Still not available in React 18. But will be included in a future release.&lt;/code&gt;</code></pre></div>



<h3 class="wp-block-heading">Suspense Props</h3>



<ul class="wp-block-list">
<li>revealOrder: can be <code>"forwards"</code>&nbsp;,&nbsp;<code>"backwards"</code>&nbsp;or&nbsp;<code>"together"</code>. And it is the prop that indicates how the content will be revealed</li>



<li>tail: controls how many loading states are visible at once.</li>
</ul>



<h2 class="wp-block-heading">Example</h2>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>function ProfilePage({ resource }) {
  return (
    &lt;SuspenseList revealOrder=&quot;forwards&quot;&gt;
      &lt;ProfileDetails resource={resource} /&gt;
      &lt;Suspense fallback={&lt;h2&gt;Loading posts...&lt;/h2&gt;}&gt;        
				&lt;ProfileTimeline resource={resource} /&gt;      
			&lt;/Suspense&gt;      
			&lt;Suspense fallback={&lt;h2&gt;Loading fun facts...&lt;/h2&gt;}&gt;        
				&lt;ProfileTrivia resource={resource} /&gt;      
			&lt;/Suspense&gt;    
		&lt;/SuspenseList&gt;  
	);
}</code></pre></div>



<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="A Quick Intro to Suspense in React 18" width="640" height="360" src="https://www.youtube.com/embed/FpFetyxapto?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<h2 class="wp-block-heading">Rounding up Suspense! </h2>



<p class="wp-block-paragraph">Keep on exploring our blog post about <a href="https://www.effectussoftware.com/blog/2208">React</a> and <a href="https://www.effectussoftware.com/blog/1646">React Native Improved Architecture</a>. Some more tips are coming up&#8230;<br><br>Check out our&nbsp;<a href="https://blog.effectussoftware.com/">other posts</a>&nbsp;for more insights!</p>


React18 brings Suspense as a powerful component for coding

Grid for CSS: Get The 2 Dimensional New Layout System


<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p class="wp-block-paragraph">Acceptance criteria are essential in software as they provide clear and measurable definitions when a feature or user story is considered complete, especially when aligned with <a href="https://www.effectussoftware.com/product-discovery-solutions">Product Discovery Solutions for Software Development</a>, where defining the right requirements from the start is key.</p>
</blockquote>



<p class="wp-block-paragraph">Sheer curiosity: did you know that &#8220;criteria&#8221; is the plural form of &#8220;criterion&#8221;? Latin-root words, ha&#8230; curious!</p>



<h2 class="wp-block-heading">What are they? </h2>



<p class="wp-block-paragraph">Acceptance criteria are a set of conditions or requirements that must be met in order for a user story, feature, or software component to be considered complete.</p>



<p class="wp-block-paragraph">Mind the team, it is used to validate acceptance by stakeholders, including the product owner or the end users. </p>



<p class="wp-block-paragraph">These criteria are a key part of defining what the software is supposed to accomplish and serve as the basis for testing and validation.</p>



<p class="wp-block-paragraph">Acceptance criteria typically describe the specific behavior or functionality expected of the software.</p>



<p class="wp-block-paragraph">They are often written in a way that is clear, measurable, and testable. The primary purposes of acceptance criteria are to:</p>



<ol class="wp-block-list">
<li><strong>Provide Clarity</strong>: They help ensure that all stakeholders have a <em>common understanding</em> of what the software should do and what constitutes a successful outcome.</li>



<li><strong>Set Quality Standards</strong>: They define the <em>expected quality, functionality, and performance</em> of the software.</li>



<li><strong>Guide Development and Testing</strong>: Developers and testers use acceptance criteria to <em>create and execute tests</em> that verify whether the software meets the specified requirements.</li>



<li><strong>Facilitate Communication</strong>: They serve as a communication tool between the development team and stakeholders, making it easier to track progress and make informed decisions.</li>



<li><strong>Determine When Work Is Complete</strong>: When all the acceptance criteria are met, the software or feature is considered &#8220;done&#8221; and ready for release.</li>



<li></li>
</ol>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="346" src="https://blog.effectussoftware.com/wp-content/uploads/2023/11/Subtitle-1-1024x346.png" alt="How to create Acceptance Criteria" class="wp-image-2669" title="How to create Acceptance Criteria" srcset="https://blog.effectussoftware.com/wp-content/uploads/2023/11/Subtitle-1-1024x346.png 1024w, https://blog.effectussoftware.com/wp-content/uploads/2023/11/Subtitle-1-300x101.png 300w, https://blog.effectussoftware.com/wp-content/uploads/2023/11/Subtitle-1-768x259.png 768w, https://blog.effectussoftware.com/wp-content/uploads/2023/11/Subtitle-1-1536x519.png 1536w, https://blog.effectussoftware.com/wp-content/uploads/2023/11/Subtitle-1.png 1552w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p class="wp-block-paragraph">Thanks to <a href="https://www.scrumalliance.org/" target="_blank" rel="noopener">scrumalliance.org</a>, we can have a glimpse into what some of the <a href="https://resources.scrumalliance.org/Article/need-know-acceptance-criteria#:~:text=Acceptance%20criteria%20are%20defined%20as,quality%20of%20product%20backlog%20items." target="_blank" rel="noopener">opportunities</a> for defining acceptance criteria include:</p>



<ul class="wp-block-list">
<li>Discussions with customers or clients</li>



<li>Discussions with stakeholders</li>



<li>During the scrum refinement event</li>



<li>During the scrum sprint planning event</li>



<li>During product backlog management activities</li>



<li>In team brainstorming</li>



<li>After evaluating customer or end-user feedback</li>



<li></li>
</ul>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p class="wp-block-paragraph">The PO is accountable for writing these conditions; nevertheless, the dev team’s expertise and feedback are fundamental to callibrate expectations, highlighting how <a href="https://www.effectussoftware.com/blog/keys-to-becoming-a-good-product-manager">product managers define acceptance criteria</a> as a collaborative and strategic process.</p>
</blockquote>



<p class="wp-block-paragraph">The <a href="https://www.effectussoftware.com/blog/2030">scrum master</a> role, when it comes to the AC, is to circulate it and offer articulation if he/she spots any inconsistencies. </p>



<p class="wp-block-paragraph">We are adamant that <a href="https://www.effectussoftware.com/services">team effort</a> is key, although the product owner’s fidelity to the customer is often the starting point for creating the AC.</p>



<p class="wp-block-paragraph">Do you want to take your product up a notch, click <a href="https://presale.effectussoftware.com/">here</a> and let&#8217;s get the ball rolling! <a href="https://presale.effectussoftware.com/?origin=blog">https://presale.effectussoftware.com/</a></p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="346" src="https://blog.effectussoftware.com/wp-content/uploads/2023/11/Subtitle-2-1024x346.png" alt="Let's write one! " class="wp-image-2671" style="aspect-ratio:2.959537572254335;object-fit:cover" title="Let's write one! " srcset="https://blog.effectussoftware.com/wp-content/uploads/2023/11/Subtitle-2-1024x346.png 1024w, https://blog.effectussoftware.com/wp-content/uploads/2023/11/Subtitle-2-300x101.png 300w, https://blog.effectussoftware.com/wp-content/uploads/2023/11/Subtitle-2-768x259.png 768w, https://blog.effectussoftware.com/wp-content/uploads/2023/11/Subtitle-2-1536x519.png 1536w, https://blog.effectussoftware.com/wp-content/uploads/2023/11/Subtitle-2.png 1552w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p class="wp-block-paragraph">Work your way, be creative, and cater to your team and stakeholders&#8217; needs. Try different formats and assess which ones work best for your team. Some ideas:</p>



<p class="wp-block-paragraph">Use a bullet list, a checklist, or a verification list.</p>



<p class="wp-block-paragraph">Whatever you decide to use, consider including your AC format in the retro so you can drill down on it and adapt its effectiveness for your team.</p>



<h4 class="wp-block-heading">Scenario-based template.</h4>



<p class="wp-block-paragraph">Other agile teams will use a format known as scenario-based, in which you use a formula:&nbsp;</p>



<p class="has-text-align-center wp-block-paragraph"><mark style="background-color:#8ed1fc" class="has-inline-color"><strong>Given that_______, when________, then</strong>_________.</mark></p>



<p class="wp-block-paragraph"><code><mark style="background-color:#8ed1fc" class="has-inline-color"><em>Example</em>:  <em>Given&nbsp;</em>that I’m a new customer - <em>When</em>&nbsp;I enter the verification code - <em>Then&nbsp;</em>I'm going to be taken to the start page again. </mark></code></p>



<ul class="wp-block-list">
<li>Given (some given context or precondition)</li>



<li>when (I take this action)</li>



<li>then this will be the result</li>
</ul>



<h4 class="wp-block-heading">A Checklist for Writing Acceptance Criteria</h4>



<ul class="wp-block-list">
<li><strong>Clear</strong> to everyone involved</li>



<li>Can be <strong>tested</strong> or verified&nbsp;</li>



<li>Either <strong>passes or fails</strong> (cannot be 50% completed, for example)</li>



<li>Focus on the <strong>outcome</strong>, not the how to</li>



<li>As <strong>specific</strong> as possible </li>
</ul>



<h4 class="wp-block-heading"><strong>Example!</strong></h4>



<p class="wp-block-paragraph">Here&#8217;s another example of acceptance criteria:</p>



<p class="wp-block-paragraph"><code><em><strong>User Story:</strong></em> As a registered user, I want to reset my password so that I can regain access to my account.</code></p>



<p class="wp-block-paragraph"><strong><em>Acceptance Criteria:</em></strong></p>



<ol class="wp-block-list">
<li>The user should be able to navigate to the &#8220;Forgot Password&#8221; page.</li>



<li>After entering their email address and submitting the form, the user should receive a password reset link via email.</li>



<li>Clicking on the reset link should open a page where the user can create a new password.</li>



<li>The new password must meet the following requirements: at least 8 characters, including at least one uppercase letter, one lowercase letter, one digit, and one special character.</li>



<li>After successfully setting a new password, the user should be redirected to the login page with a confirmation message.</li>
</ol>



<p class="wp-block-paragraph">These acceptance criteria provide a clear and testable definition of what it means for this user story to be considered complete and meet the user&#8217;s needs.</p>



<p class="wp-block-paragraph"></p>



<h3 class="wp-block-heading">Compare and Contrast Chart</h3>



<figure class="wp-block-table is-style-regular"><table><tbody><tr><td><strong>Category of Analysis</strong></td><td><strong>Acceptance Criteria</strong></td><td><strong>Definition of Done</strong></td><td class="has-text-align-left" data-align="left"><strong>Users Stories</strong></td></tr><tr><td><strong>Expressed as&#8230;</strong></td><td>different for each product backlog item.</td><td>as a list of statements.</td><td class="has-text-align-left" data-align="left">smallest chunk of work.</td></tr><tr><td><strong>Perspective</strong></td><td>Mixed perspective</td><td>client&#8217;s perspective</td><td class="has-text-align-left" data-align="left">users&#8217; perspective</td></tr><tr><td><strong>It describes&#8230;</strong></td><td>The &#8220;what&#8221;.<br>What should be done to solve.</td><td>A criteria</td><td class="has-text-align-left" data-align="left">The &#8220;why&#8221;. <br>Goal or problem to solve.</td></tr></tbody></table></figure>



<h3 class="wp-block-heading">Let&#8217;s go visual! </h3>



<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="Acceptance Criteria: How to Meet User Expectations" width="640" height="360" src="https://www.youtube.com/embed/4EtLuLIbznc?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<h3 class="wp-block-heading">Embrace Jira!</h3>



<p class="wp-block-paragraph">Have you tried Jira? First, dive into <a href="https://www.effectussoftware.com/blog/1861">this post</a> to create your own site&#8230;</p>



<p class="wp-block-paragraph">However, you can use Jira to manage and track acceptance criteria for your user stories by adding custom fields or using plugins and apps that extend Jira&#8217;s functionality. </p>



<p class="wp-block-paragraph">Here&#8217;s how you can do it:</p>



<ol class="wp-block-list">
<li><strong>Custom Fields</strong>: Create custom fields in Jira for Acceptance Criteria. You can then add the acceptance criteria as text or description in these fields when you create or edit user stories.</li>



<li><strong>Templates</strong>: Some Jira plugins or apps allow you to create templates for user stories. You can set up predefined templates that include acceptance criteria, making it easier for your team to follow a consistent format.</li>



<li><strong>Integrations</strong>: You can integrate Jira with other requirements management or documentation tools like Confluence, which may offer more extensive capabilities for defining and managing acceptance criteria.</li>



<li><strong>Automation Rules</strong>: Use Jira&#8217;s automation features or third-party automation apps to create rules that prompt team members to enter acceptance criteria when a user story is moved to a specific status (e.g., &#8220;In Progress&#8221; or &#8220;Ready for Review&#8221;).</li>



<li><strong>Plugins and Apps</strong>: Explore Jira Marketplace for plugins and apps that can enhance your Jira experience. Some of these may offer specific features for managing acceptance criteria.</li>
</ol>



<p class="wp-block-paragraph">Since Jira is a flexible platform, some updates or new solutions that can help you with managing acceptance criteria within Jira might have sprung up.</p>



<h2 class="wp-block-heading">Let&#8217;s round it up!</h2>



<p class="wp-block-paragraph">Incorporating well-defined acceptance criteria into your software development process is more than a best practice; it&#8217;s a compass guiding your team toward success. </p>



<p class="wp-block-paragraph">With clear expectations and a shared understanding of what &#8216;done&#8217; means, you pave the way for efficient development, satisfied stakeholders, and a product that truly meets user needs.</p>



<p class="wp-block-paragraph">Embrace the synergy of AI and go-agile to unlock new levels of productivity and efficiency in your projects.</p>



<p class="wp-block-paragraph">In future blog and <a href="https://www.instagram.com/effectus_software/?hl=en" target="_blank" rel="noreferrer noopener">Instagram</a> posts, we’ll explore specific strategies and techniques. So <a href="https://www.effectussoftware.com/">stay tuned</a>, and don’t forget to check out our <a href="https://blog.effectussoftware.com/">other posts</a> for more insights!</p>


Knowledge grows when shared

All blog posts

Knowledge grows when shared

All blog posts

Hit subscribe to stay in the loop!

Hit subscribe
to
stay in the loop!