Forem: Yeti

Crafting Adaptive UX Across Diverse Devices: Strategies for IoT Software Development

Yeti — Fri, 26 Jul 2024 20:32:52 +0000

In 2024, relying solely on one device is a rarity - and nowhere is this more true than in the realm of IoT software.

Todays users demand applications that can seamlessly operate across their entire collection of gadgets - from smartphones and tablets to Apple Watches and beyond. For UX designers in the IoT software development world, navigating this diverse landscape of devices can be a significant challenge.

Imagine being tasked with creating consistent designs that work for the compact screen of a wristwatch AND the sprawling interfaces of smart homes. It’s a challenging task that calls for a nuanced approach blending creativity, innovation, and empathy.

In this article, we delve into the hurdles of designing across divergent devices and explore effective strategies to guarantee user satisfaction across all platforms.

Adapting to Various Screen Sizes:

Picture this: You're designing an app that tracks fitness metrics, intended to be accessible not only on smartphones but also on wearable devices like smartwatches. In this scenario, the first step in crafting a seamless experience is embracing responsive design principles. This entails creating interfaces that dynamically adjust to different screen sizes, ensuring content remains legible and interactions intuitive.

The first step you’ll want to take when designing for dynamic screen sizes is focusing on the most important actions and information, and optimizing them for visibility and accessibility on smaller screens. For instance, if calories burned and step taken is the most important feature of your fitness app you might prominently display those metrics and include prominent, wast to access buttons for starting workouts or checking progress. Meanwhile, you can tuck away secondary features in menus to maintain a clutter-free interface.

One simple approach to this is making a list of your apps most important information and actions, and begin designing for those features, ensuring that they're easy to see and use on smaller screens. Once complete, you can work around them to add in additional features.

Finding the balance between showcasing the optimal mix of features and keeping thing simple is crucial. It’s important to remember that you don’t necessarily have to restrict the number of features your product offers in order to design for screen size - in the case of our fitness app, users check the quick stats on their smartwatch while jogging and then seamlessly delve into more detailed data on their smartphone or computer when they're home.

Voice and Gesture Controls:

The era of tapping and swiping is evolving into one where users can simply speak or gesture to interact with their devices. From smart speakers to motion-sensing cameras, integrating voice and gesture controls opens up new dimensions of accessibility and convenience. However, designing intuitive experiences in this realm requires careful consideration of user expectations and contextual nuances.

Take, for example, a smart lighting system that responds to voice commands and hand gestures. In such a scenario, the UX designer must ensure that the device accurately interprets user inputs while minimizing errors and false positives. Natural language processing algorithms can help decipher spoken commands, while motion sensors and machine learning algorithms can refine gesture recognition over time.

Moreover, providing clear feedback is crucial to enhance user confidence and comprehension. Visual or auditory cues signaling successful interactions, such as a subtle chime or a gentle glow, reassure users that their commands have been understood and executed. By harnessing the power of voice and gesture controls thoughtfully, IoT devices can empower users of all abilities to effortlessly engage with technology.

Cross-Platform Consistency:

Today’s users are not content to limit their interactions to a single device. Instead, users can be found seamlessly switching between smartphones, tablets, and laptops, making consistency across platforms is paramount. This challenge becomes even more pronounced in the realm of IoT software development, where devices often belong to disparate ecosystems and operating systems.

It’s important to remember that achieving cross-platform consistency isn’t just about uniformity—it also involves crafting cohesive experiences that feel native to each device while also upholding brand identity and usability standards.

Imagine a smart thermostat that can be controlled via a mobile app, a web interface, and voice commands through a smart speaker. If the designs between these devices are inconsistent, the user will have to learn how to use each platform separately - a frustrating prospect. To avoid this, it’s important for designers to establish a unified design language that includes common visual elements, interaction patterns, and terminology between devices - reducing the cognitive load users experience as they between platforms.

An important thing to keep in mind is the fact that leveraging each devices unique features can improve the user experience without sacrificing consistency. For example, a smart thermostat app might utilize a smartphone’s ability to send push notifications, while using a smart speaker’s microphone to offer voice-controlled temperature adjustments. Utilizing the unique strengths of each device/platform allows designers to create cohesive experiences that transcend the abilities of a single device.

Navigating the dynamic realm of IoT requires solutions that seamlessly adapt to the diverse array of devices users rely on. From wearables to smart home gadgets, crafting user experiences that resonate across this spectrum demands a delicate balance of creativity, innovation, and empathy. By embracing these principles and implementing tailored strategies, designers can ensure inclusivity and enhance user satisfaction across all platforms in the ever-evolving landscape of IoT.

Yeti is an IoT application development company. For more insightful content, don't miss our free library of free IoT Software Development resources!

Crafting Custom Career Development Matrices for the Tech Industry: A Step by Step Guide

Yeti — Fri, 26 Jul 2024 20:25:26 +0000

Guiding team members through their personal growth trajectory is a pivotal responsibility for people managers in the software development world. Harnessing the power of a tailored career development matrix can pave the way.

As a people manager at a software development company, I spend a lot of time getting to know my team members and figuring out how to support their unique needs—whether it's improving their work environment or helping them chase their career dreams. My mission is to create a space where personal and company goals can grow together.

Now, it might seem like I have career development all figured out, but it wasn't always this way. When we started Yeti, my background in computer science didn't exactly prepare me for managing the career growth of a team. But I knew it was important, so I dove in and started having career development meetings with everyone on the team.

In those early days, I focused on what I thought mattered: monitoring growth in relevant areas, understanding their feelings about current projects, and setting goals for the future. But I quickly realized that my approach had some gaps. It wasn't consistent, and I wasn't doing a great job of actually guiding folks towards meeting their goals. Plus, it made things tricky when it came to raises and promotions. Without clear expectations and a solid plan for advancement, it was tough for team members to link their career goals with their job responsibilities.

Crafting Your Career Development Matrix

It became clear that the career development issues I was facing were not unique to me or my company—others were surely struggling with the same problems. I began researching how other companies managed their teams' career development plans and quickly found Progression, a collection of open-source frameworks that provided examples of career development plans that immediately resonated with me.

Using some of these examples as an initial structure, I started outlining a career development matrix for each of our software development roles, from Junior Developer up to Senior Developer.

I began my setting up an empty Google Spreadsheet and, across the top, outlined each job title and the salary bands each position is paid, with a $10k -> $15k range inside of each band.

Creating your Competencies

Once the structure was outlined, my next step involved establishing the role competencies, which I then detailed for each job level in the matrix. To brainstorm these competencies, I drew inspiration from current job descriptions and postings, example frameworks from progression.fyi, and ChatGPT.

After creating a comprehensive list of potential competencies, I grouped them into similar categories and began refining them. This process involved prioritizing what was most important and ensuring there was no overlap. While there’s no correct number of competencies, it’s crucial to consider the most critical areas your team should focus on for their roles.

Generating & Refining your Expectations

Next comes the most demanding part of the task: outlining the expectations for each competency at each level in your matrix. My strategy for this has evolved over time as I've continued creating matrices for multiple roles in the company. This is my current process:

For each competency I created a brief bulleted list that summarizes what the competency entails. I then fed this to ChatGPT, and prompted it to outline appropriate expectations for fulfilling this competency at every level of the job. I’ll share an example of a recent prompt I used below.

I take the output from ChatGPT and put it into my matrix. This initial output isn’t perfect, but it is a starting point that helps alleviate the overwhelming feeling of having too much to write.

I then review each competency across the roles, identifying what is redundant, non-critical, or missing, especially for the higher levels of the role. If I make major changes, I might run the individual competency through ChatGPT again with the newly rewritten expectations for the higher level, allowing ChatGPT to backfill the lower levels for me.

I repeat this process until all competencies are filled out with clear and concise expectations. Remember, you are incentivizing your team to meet these expectations in order to achieve raises or promotions, so ensure they are meaningful to you.

My ChatGPT Example Prompt

“ You are helping to create a career development plan for the development team at a small software development agency that creates web and mobile applications for clients. I am going to give you information about a specific competency for the development team and you will give me bullet points describing the expectations, responsibilities, and activities for each of the following seniority levels: Senior Developer 1, Senior Developer 2, Technical Director.

Each bullet point should be no longer than 25 words and should be tailored to the seniority level of each position. Please give me 6 bullet points per seniority level. Please do this for each competency and description I give you after this message. Please make the bullet points unique per seniority level and they must be related to the competency description. Please give me this without the title in each line item and as bullets in an unordered list instead of an ordered list.“

Get Feedback on your Career Development Matrix

Now that you have the first draft of your plan, it's crucial to get feedback from others to help polish it. After working on it for a while, you might have missed some expectations, included redundant competencies, or placed some expectations incorrectly.

Consider asking one of the most senior team members to review the matrix, especially the junior bands, to get their involvement and buy-in. It can also be beneficial to seek feedback from individuals outside the role you created the matrix for, asking them to consider their expectations for people in this role at different levels. This can provide valuable insights and feedback.

Consolidate all the feedback in a final pass at editing the matrix. Feel free to ignore, add verbatim, or draw inspiration from the feedback you received. Ultimately, you need to feel comfortable holding your team accountable to the expectations outlined in this document.

Rolling it Out

Next, announce the existence (or completion) of the matrix to your team and provide individual copies for each person to read through and conduct a self-review. Simultaneously, create a version for yourself to review as their manager. The process involves going row by row through each competency and highlighting the appropriate level that the person is currently at, based on the expectations described in each box. You can also highlight or make notes on specific bullet points in each row where you or the team member want to emphasize something they are or are not doing well.

You’ll then meet with each of your direct reports to discuss the outcomes of their self-review and your review, addressing any discrepancies and areas of agreement. Part of this process involves assessing where the majority of their competencies align and making a judgment call on whether they deserve a raise or a promotion from their current position.

After the review portion, work with team members to decide on 2-3 “boxes” they’d like to focus on over the next three months. The goal is to help them level up in specific competencies where they may be weaker. I personally like to have team members provide their input and ultimately choose their focus areas

Ongoing Upkeep

Now that you have your plan in place, have established your team’s position on the matrix, and have set goals for each member, it's time to follow through on helping them reach those goals. This involves discussing their progress in 1:1s, finding opportunities for them to gain relevant experience, and periodically re-reviewing the matrix with them to determine if they qualify for a raise or promotion.

Additionally, the matrix may eventually feel outdated or some of the expectations might not seem entirely accurate. As your company and team evolve, you will need to revisit and update your career development plan. However, I recommend doing this no more frequently than once a year because, firstly, it requires considerable effort, and secondly, your team needs stability in the goals they’re striving to achieve.

Optional: Integrate Lattice HR Software

As part of our operations software stack, we use Lattice, which fits really well with managing this career development matrix process. We use Lattice for 1:1s, weekly updates, 360 reviews, and monitoring performance and promotions. Lattice specifically calls this feature “Grow”. While you can manage this process with spreadsheets and documents, Lattice makes it seamlessly integrated into all aspects of your people management if you use the software.

By following this step-by-step guide to creating career development matrices, you now have a clear framework to enhance professional growth within your software development team. Ultimately, this proactive approach empowers your team to achieve higher levels of performance and satisfaction, driving sustained success for your organization.

Yeti is an IoT application development company. If you'd like to learn more about what we do, be sure to take a look at our work, featuring case studies that showcase our collaborations with clients like Google, Netflix, Westfield, and many more. For more insightful content, don't miss our free library of free IoT Software Development resources!

The Hidden Costs of Rushing to Market: Navigating Tech Debt

Yeti — Fri, 26 Jul 2024 20:17:05 +0000

The world of technology moves fast. In fact, we often see teams in a frenzied rush to launch their products, operating under the belief that, in order to be successful, their app needs to be the first to seize current trends. But does being first always mean being best?‍

In reality, the quest to be "first" often conflicts with the essential need for long-term success. Compromising best practices and taking shortcuts to launch will inevitably result in technical debt – a serious threat to your products ecosystem… and your success

In this article, we'll delve into technical debt, exploring its causes, far-reaching consequences and, most importantly, effective strategies for mitigating and handling it.

What is Technical Debt?

In the IoT software development process, technical debt is an issue that emerges when developers opt for quick solutions or take shortcuts to meet pressing business demands - typically at the expense of optimal code quality or system design.

These shortcuts, akin to financial debt, accumulate interest over time, gradually complicating the software landscape - complexity mounts with each workaround, resulting in a codebase that is increasingly difficult to decipher, maintain and scale.

While technical debt may provide a temporary reprieve in meeting deadlines or delivering features promptly, its long-term repercussions can be significant. Elevated costs, reduced productivity, heightened risk of errors and user dissatisfaction all become potential pitfalls that can threaten the longevity and competitiveness of software projects.

The following is a simple example illustrating how tech debt can occur, and the challenges it can create:

A development team faces a tight client deadline for completing an app project. Rather than request a deadline extension, the team works towards completing the project as quickly as possible, which ultimately requires them to take a few coding and testing shortcuts.

While these shortcuts enable the team meet their deadline, they also lead to a convoluted codebase and several bugs that are quickly discovered through an influx of negative user feedback. Unfortunately, fixing these issues requires an additional developer to decipher and repair the confusing codebase, ultimately delaying the release of an important new product feature.

*** Not sure if you're in Tech Debt? Our Free Tech Debt Checklist can help!**

The Impact of Tech Debt

While design and development shortcuts might seem like a quick fix for meeting tight deadlines, it’s crucial to understand the negative impact it can have on your development journey and your end*-*user’s experience.

For instance, coding shortcuts used to meet a tight deadline often result in complex and convoluted codebases. While these codebases may work in the short term, they often present substantial challenges down the line, forcing developers to decipher their complexity in order to implement any new features. This, in turn stifles innovation, leaving the team with far less capacity for exploring new ideas, building new features and adapting to evolving market trends and technological advancements.

It’s important to understand that, as time progresses and the codebase grows, technical debt tends to worsen and become more apparent. Because tech debt accumulates interest over time, each new feature added or modification made without addressing underlying issues further compounds the debt - and the effort required to repay this debt grows exponentially, often surpassing the initial time saved by taking shortcuts.

Strategies for Managing Technical Debt

For all the reasons listed above, managing technical debt is a critical aspect of the software development process. At Yeti, we have a comprehensive approach to managing technical debt, throughout the software development lifecycle. If you'd like a primer covering all the strategies and best practices you can use to manage tech debt, don't miss our free guide!

Agile Development Practices:
At Yeti, we employ Agile methodologies to oversee all our software projects. The Agile process is an iterative development cycle, which means that we operate within two-week sprint cycles, completing, testing, and receiving feedback on each piece of work before proceeding to the next. This structured approach inherently minimizes the accumulation of technical debt, ensuring that our codebase remains clean, maintainable, and aligned with project goals.

Continuous Integration and Deployment:
Continuous integration (CI) and continuous deployment (CD) practices automate the process of combining code changes and putting them into action in live environments, allowing for quicker feedback loops and a lower chances of accruing technical debt. By catching integration problems early on and delivering smaller changes that are easier to handle, CI/CD pipelines help keep the code in good shape and prevent debt from piling up.

Code Reviews
Code reviews involve team members examining each other's code before it's integrated into the project. This process encourages sharing knowledge, enhancing code quality, and spotting potential technical debt at an early stage. By tapping into the collective expertise of the team, code reviews act as a barrier against less-than-optimal coding practices and help maintain clean, maintainable codebases that adhere to established coding standards.

Automated Testing:
Automated testing involves having a program check your code to ensure it’s working correctly before deployment. Unit tests, integration tests, and end-to-end tests detect mistakes and ensure that any new changes won’t break anything that was previously working. These tests give quick feedback on any changes made to the code, confirm that the software behaves as expected, and make sure it's reliable and stable. This helps prevent bugs that can cause technical debt, saving time and effort in the long run.

Scheduled Refactoring:
Scheduled refactoring sessions are regular opportunities for the development team to tidy up their code and fix any issues that have built up over time. This allows them to proactively address any accumulated technical debt by systematically improving code, enhancing the systems design, and eliminating any bugs.

Technical Debt Backlog
A technical debt backlog serves as a prioritized to-do list for developers, focusing on cataloging and ranking debt-related issues. By transparently documenting and prioritizing these issues, the development team can systematically integrate the most critical ones into their regular task list, ensuring that technical debt receives the necessary attention and resources for resolution.

Regular Assessments:
It is crucial for development teams to conduct regular tech debt assessments, such as code quality analyses, architectural reviews, or performance audits. This allows the team to identify and quantify existing debt within the codebase and make informed decisions about prioritizing those fixes.

Communication and Collaboration:
Effective communication and collaboration among team members and clients are essential for managing tech debt successfully. At Yeti, we foster a culture of transparency, openness, and shared responsibility that allows us collectively identify, prioritize, and address technical debt, and ensure that it remains a visible and actionable aspect of our development process.

Navigating the app development landscape is fraught with challenges, but perhaps none as insidious as technical debt. While the allure of meeting deadlines and delivering features promptly may seem enticing, the long-term repercussions of accumulated debt can be severe. From increased maintenance costs to diminished user experiences, the consequences of technical debt are far-reaching and can undermine the very foundation of your software projects.

If you'd like a comprehensive guide to understanding and managing tech debt, be sure to download our free guidebook!

Yeti is an IoT software development company. If you'd like more content like this be sure to check out our blog and resources!

Shopify Checkout UI Extensions

Yeti — Tue, 07 May 2024 00:01:58 +0000

Shopify is a leading e-commerce platform that empowers businesses of all sizes to seamlessly create, manage, and scale their online stores, offering robust tools and integrations that cater to a wide array of needs.
This article explains how we at Yeti recently created a custom Shopify App using Checkout UI extensions to pull real-time data from a client’s Enterprise Resource Planning (ERP) system into Shopify. By the end of this article you will better understand what Shopify Checkout UI extensions are, how to approach building them, and some of the things to keep in mind during the implementation process.

What are Shopify Checkout UI Extensions?

Checkout UI extensions are customizable components available to users with Shopify Plus stores. They are essentially small React applications that use Shopify-provided tools and APIs to securely and reliably extend existing Shopify features. The extensions run in isolated sandbox environments with limited access to browser APIs, helping to protect customer data and ensure the checkout process remains secure.

Why Did We Need One?

Our client, a construction materials and equipment sourcing company, needed a direct connection between their ERP system and Shopify checkout page to display an up-to-date list of active projects to their customers during checkout. This feature would help our client’s customers indicate which project their order is for, simplifying order fulfillment.

How Did We Build It?

First, to build a Shopify Checkout UI extension you will need access to a Shopify Plus store. Checkout UI extensions are currently only available to merchants on a Shopify Plus plan.

You’ll also need to install Shopify’s command-line interface, have a Partner account, and have access to development store for testing the extension.

Identify the Extension Target

Extensions can be added to any of the extension targets defined by Shopify. The target defines where in the storefront our extension will appear. For example, if we wanted to add an extension just below the checkout page’s header we might choose a target of purchase.checkout.header.render-after.

We chose an appropriate target within the Shopify checkout flow to add our extension, making sure it fits naturally without disrupting the user experience.

Create a Shopify App

We created our new app locally using the Shopify CLI. This generates all the code needed for developing a Shopify App.

Our extension needed network access since it requests data from our client’s ERP at runtime. It also needed checkout-blocking permissions to prevent customers from submitting orders without selecting a project id. We configured both of these permissions with the following block in our extension’s shopify.extension.toml:

[extensions.capabilities]
# Gives your extension access to make external network calls, using the
# JavaScript `fetch()` API. Learn more:
# https://shopify.dev/docs/api/checkout-ui-extensions/unstable/configuration#network-access
network_access = true

# Allows extension to block progress of the checkout flow.
block_progress = true

This file is also where other general configuration for the app is located, including the extension target we chose above.

We also had to request network access for our app in the Shopify Partners dashboard, which is not granted by default. At the time of writing, once the request is submitted it is automatically approved and the app is immediately granted network access permissions.

Now for the checkout UI extension itself — which, as a reminder, is a small React app created by the Shopify CLI that will be added to our store at the target we selected above — we had several requirements:

Request up-to-date data from our client’s ERP system via our backend.
Prove to our backend that the request came from our Shopify extension.
Display a list of active projects to customers on the checkout page.
Prevent customers from checking out if they haven’t selected an active project from the list.
Store the selected active project identifier on the Shopify order so that our client can efficiently fulfill the order.

I’ll cover the first two points when describing our extension’s backend below.

Once we have the project data we need, showing a list of projects took some basic React code:

    <Banner title="Select Project for Order">
      {!projects.length ? (
        <>Loading...</>
      ) : (
        <Select
          label="Active Projects"
          options={projects.map((project) => ({
            value: project.projectId,
            label: `${project.projectId} - ${project.description}`,
          }))}
          onChange={handleChange}
          value={selectedProject}
        />
      )}
    </Banner>

All we needed to do here was to first show a loading value while we wait for the data from our backend, and then to show a dropdown with the list of active projects that was returned.

This is pretty standard React code, which is one of the great things about working with the Shopify extension system: if you already know React it’s pretty easy to get started.

To prevent customers from checking out before selecting a project, we used a React hook provided by Shopify called useBuyerJourneyIntercept. This hook allows us to tweak what happens when any number of conditions are met, giving us more control over the checkout flow.

We used this hook to set up the progress blocking behavior we added permissions for previously in our extension’s configuration file:

  useBuyerJourneyIntercept(({ canBlockProgress }) => {
    return canBlockProgress && !selectedProject
      ? {
          behavior: "block",
          reason: "No Project Selected",
          errors: [
            {
              // shows an error at the page level
              message:
                "Please select a project before proceeding with your order.",
            },
          ],
        }
      : {
          behavior: "allow",
        };
  });

This checks both whether this extension has permission to block progress and whether the user has selected a project. If both are true we allow the customer to submit their order, otherwise we block progress and show an appropriate error message.

Finally, to store the customer’s selected project on the Shopify order we used another React hook provided by Shopify called useApplyMetafieldsChange. This hook provided a function that allowed us to write custom values to meta fields on the Shopify order.

We used this function in the change handler of our dropdown component to store the selected project id:

  const handleChange = (projectId: string) => {
    setSelectedProject(projectId);

    applyMetafieldsChange({
      type: "updateMetafield",
      namespace: "<client name>",
      key: "projectId",
      valueType: "string",
      value: value,
    });
  };

Develop the Backend

The final piece of the puzzle was a custom backend that bridges between our Shopify App and the ERP system. We couldn’t request data directly from our Shopify App since all the app’s code is sent to the browser, so any sensitive credentials would be essentially public. Our backend’s responsibilities are first to validate that all incoming requests came from Shopify, and then to return the list of active projects to our app.

We can validate that incoming requests came from Shopify by verifying that the session token sent on the request from our app is valid. Once we verify that the request came from Shopify, we can request the data that we need from our client’s ERP system and return it to our app in an easy-to-use format. With this piece in place we are finally able to pull the list of active projects into our Shopify store’s checkout page.

In closing, our work to create a custom Shopify Checkout UI extension has streamlined our client's checkout process, linking it directly with their ERP system for real-time project data.

This project not only solved a complex technical challenge for our client but also demonstrated the robust customization capabilities of Shopify Plus. We hope this overview of the development process has given you a clearer understanding of what Shopify Checkout UI extensions can do and how they can be effectively implemented.

Yeti is an IoT application development company. If you'd like to learn more about what we do, be sure to take a look at our extensive library of IoT software development content.

Accessibility First In React Native

Yeti — Mon, 06 May 2024 23:36:11 +0000

Accessibility-first development is gaining steam. Nowhere is this more important than for mobile developers

Not only are more people using mobile devices as their primary way to engage on the internet, but mobile devices also present the biggest need for an accessibility-first mindset. Small screens and gesture-powered navigation present unique challenges. So what are the challenges facing developers, and why are some hesitant to encourage accessibility as a primary design priority?

Accessibility implementation takes time, especially when retrofitting an app– one of the reasons why accessibility first is so important. This time may sound expensive or unnecessary to a client or manager who doesn’t understand the benefits of an accessible app. Perhaps more fundamentally, however, accessibility is not part of standard developer training. Whether one is brought into app development via a computer science degree, self-teaching, or a boot camp, little-to-no time is spent discussing accessibility strategies, technologies, or best practices. So, in this post, I’m going to introduce three best practices and three potential gotchas for accessibility development on one of the most popular app-building frameworks, React Native.

Examples below are given in TypeScript and are taken from this repo.

Best Practices

1: Use React Context to create an AccessibilityProvider

React Context provides a built-in state management tool that greatly simplifies passing top-level data throughout the component tree. This eliminates the necessity of rewriting the same checks or convenience functions in many children components.

For example, storing a boolean representing the state of the screen reader can be used whenever some custom accessibility logic is needed. In the AccessibilityProvider component, you can use a useEffect to create a listener for the changing screen-reader state. Then, pass the screenReaderIsEnabled boolean.

1a: Setup check for screen readers.

You can access this value using the useContext hook. I commonly use this when ensuring interactive text components are accessible or on carousel screens in order to pause automatic slides. You can also define other useful utilities or values and functions in accessibilityContext. Be sure to put the AccessibilityProvider component near the top of the component tree, probably in App.tsx, so as to have it accessible throughout the app.

const [screenReaderIsEnabled, setScreenReaderIsEnabled] = useState(false);
…
 useEffect(() => {
   // Create listener for when a screen reader is enable
   // If it is, set a state variable to be used throughout the app
   const screenReaderListener = AccessibilityInfo.addEventListener(
     'screenReaderChanged',
     isActive => {
       updateScreenReaderStatus(isActive);
     },
   );


   return () => {
     screenReaderListener.remove();
   };
 }, []);

2: Put Accessibility Props in Reusable Components

Creating reusable components to be used throughout the app is essential for efficient development. This method can be leveraged to make your accessibility work easier as well. By placing accessibility props in shared components, you save yourself the trouble of writing the same roles/labels over and over again.

Two common examples, demonstrated below, are perfect use cases for putting accessibility information in a reusable component.

2a: Simplified Reusable Button

export const CustomButton = ({
 onPress,
 children,
 isLoading,
 isDisabled,
 width,
 accessibilityRole,
 accessibilityLabel,
 accessibilityElementsHidden,
 importantForAccessibility,
}: Props) => {
 return (
   <Button
     accessibilityElementsHidden={accessibilityElementsHidden}
     importantForAccessibility={importantForAccessibility}
     …
     accessibilityRole={accessibilityRole ?? 'button'}
     accessibilityLabel={isLoading ? 'Loading' : accessibilityLabel}>
     {isLoading ? (
       <Icon source={loadingIndicator} size={48} />
     ) : (
       <CustomText>{children}</CustomText>
     )}
   </Button>
 );
};

2b: Reusable Icon

const Icon = ({
…
 accessibilityLabel,
 accessibilityRole,
 onPress,
 ...props
}: IconProps) => {
 return (
   <TouchableOpacity
    …
     accessibilityRole={
       accessibilityRole ? accessibilityRole : onPress ? 'button' : undefined
     }
     accessibilityLabel={accessibilityLabel}>
     <StyledIcon
      …
     />
   </TouchableOpacity>
 );
};

It’s important to still allow the role/label to be passed to the reusable component as an optional prop. React Native’s accessibilityRole has a set of values it is able to receive, such as header and button, as shown above. Though it would seem that the role of button will always be a button, there are more specific values that can be useful to pass, such as link for when the button opens a browser or email client.

3: Announce UI Updates, Especially Popups

Announcing changes helps keep the UI current for those using screen readers. It can be very frustrating to submit a form or have an error message appear but not be aware of it because there was no announcement. Announcing these changes allows users to properly alter their expectations for the screen.

React Native has a couple of methods for announcing such changes, and the right one may depend on which platform you are developing and how aggressive you want the message to be. For Android, there is a handy prop called accessibilityLiveRegion which will automatically announce the changes whenever the component updates. Logic that dynamically updates the UI is required to appropriately display the message, and the same is true for announcing it. If the error has been resolved, it is likely the component displaying the error will animate out/close. We don’t want to alert the user to this all the time, so you can conditionally add the announcement depending on whether the element is visible or not.

3.1: Announcing an Error Message

const FormErrorMessage = ({
 errorMessage,
 isVisible,
 …
 accessibilityElementsHidden,
 importantForAccessibility,
}: Props) => {
 const growTranslation = useRef(new Animated.Value(0)).current;
…
 return (
   <Layout
     accessibilityElementsHidden={accessibilityElementsHidden}
     importantForAccessibility={importantForAccessibility}
     accessibilityLiveRegion={isVisible ? 'polite' : 'none'}
     style={grow}>
     <ErrorContainer>
       <Icon source={alert} size={22} />
       <ErrorText accessibilityRole="alert">{errorMessage}</ErrorText>
     </ErrorContainer>
   </Layout>
 );
};

FormErrorMessage.tsx

accessibilityLiveRegion can accept either ’polite’ (wait for any message being read to end before reading the announcement), ’assertive’ (interrupt any message being read and read the new message), or ’none’ (say nothing at all). For an error message which appears under an input when form validation fails, ’polite’ is probably the best option, but for a pop-up modal, ’assertive’ is likely to be more appropriate since that is now the only accessible content.

For iOS, a more imperative approach is required. Luckily, React Native has the AccessibilityInfo API. The announceForAccessibility and announceForAccessibilityWithOptions methods can be used to have VoiceOver, iOS’s screen reader, announce messages. We can add this useEffect to the code above to have it behave like accessibilityLiveRegion, but on iOS.

3.2: Announce Error Message on iOS

useEffect(() => {
   if (IS_IOS && isVisible) {
     announce({message: 'Error alert: ' + errorMessage, queue: true});
   }
 }, [isVisible, errorMessage, announce]);```

3.3: Announce Reusable Announce Method



const announce = ({message, queue = false, delay}: AnnounceOptions) => {
 if (delay) {
   setTimeout(() => {
     // @ts-ignore for some unknown reason, this method isn't recognized.
     AccessibilityInfo.announceForAccessibilityWithOptions(message, {
       queue,
     });
   }, delay);
 } else {
   // @ts-ignore for some unknown reason, this method isn't recognized.
   AccessibilityInfo.announceForAccessibilityWithOptions(message, {
     queue,
   });
 }
};

If the queue option is set to true, then it behaves like ’polite’ for accessibilityLiveRegion. If it is set to false, it behaves like ’assertive’.

Gotchas and Heads Ups

1: Nested Links
Because of the way React Native interprets nested text, in-line links become difficult to handle for accessibility. Essentially, React flattens the text into a string and then does some behind-the-scenes work to apply the appropriate styling. You can read more about it in the official documentation. This is not a problem when all that is changing is the styling, but when a link is nested in the Text component, the accessibility API has no way to access the inner Text component’s unique accessibility props, and the screen reader is unable to select and activate the link. This makes nested links inaccessible. Consider this example:

1.1: Nested Link



<Copy>
 Want a list of all the mysteries?{'\n'} Checkout{' '}
 <Link
   accessibilityRole="link"
   onPress={() => Linking.openURL('https://www.imdb.com/list/ls023545027/')}>
   IMDB's
 </Link>{' '}
 ranked list
</Copy>;

It looks pretty straightforward. There is a link nested inside some text which, when pressed, links out to IMDB. When the screen reader is off, you can tap the Link text. But when the screen reader is on, it can only access the Copy text block as a single string, making the onPress callback in Link unreachable and leaving the accessiblityRole unread. In some cases where the wording is ambiguous, the user may not even know that there is a link to be reached from the text block.

There are a number of solutions to this problem. Perhaps one early thought would be to try un-nesting the text components, putting them inside a container, and styling the container such that it has flexDirection: ‘row’ and justifies the content to make the text look right. Despite the initial appeal, this approach has at least two drawbacks. First, it can make the actual link hard to select since it is likely only a word or two surrounded by more text. Secondly, and more importantly, this solution is only feasible when a link comes either at the beginning or the end of the text block and the length lines up just right. Attempts to finagle such a solution are brittle and overly complicated, if not entirely unfeasible.

Luckily, there is a more practical solution. It’s helpful to remember that accessibility is a part of an app that, in React Native, is written in JavaScript. So we can use JS instantiated logic and utilize the setup explained in the “Best Practices” section to make a clean solution. First, we import the screenReaderIsActive boolean from our accessibilityContext. We then use this value to dynamically determine which text component has the onPress functionality and to set the accessibilityRole.

1.2: Accessible Nested Link



<Copy
 accessibilityRole="link"
 onPress={
   screenReaderIsEnabled
     ? () => {
         Linking.openURL('https://www.imdb.com/list/ls023545027/');
       }
     : undefined
 }>
 Want a list of all the mysteries?{'\n'} Checkout{' '}
 <Link
   onPress={() => Linking.openURL('https://www.imdb.com/list/ls023545027/')}>
   IMDB's
 </Link>{' '}
 ranked list
</Copy>;

The onPress value in Link can be left alone. It’s not going to hurt anything when the screen reader is enabled. The important part is to make the parent-level Copy component handle the onPress event only when the screen reader is enabled. If it is, the role of the text will be read as link, and selecting the text will open the link. If the screen reader is not enabled, then the parent-level Copy component will not be selectable, which is the expected behavior. The Link component will handle the onPress event.

There is one more important note about nested links which the following code block will demonstrate.

1.3: Doubly Nested Link



<Copy>
 Want a list of all the mysteries?{'\n'} Checkout{' '}
 <Link
   accessibilityRole="link"
   onPress={() => Linking.openURL('https://www.imdb.com/list/ls023545027/')}>
   IMDB's
 </Link>{' '}
 ranked list{'\n'}
 or{' '}
 <Link
   accessibilityRole="link"
   onPress={() =>
     Linking.openURL(
'https://www.tvguide.com/news/british-murdery-mystery-shows-watch-netflix-hulu-amazon-britbox/',
     )
   }>
   TV Guide's
 </Link>{' '}
 ranked list
</Copy>;

As the above example shows, there are now two links in our text block, which is easy enough and straightforward when accessibility is not part of the picture. But this raises serious problems for implementing sensible accessibility solutions. The workaround suggested in this section does not work here because the parent Copy components onPress can only open and handle one link. So it can’t handle the logic of selecting multiple links nested inside.
Perhaps there could be some complicated solution, but from my research and attempts to find a solution to this problem, I think it is safe to consider this design an anti-pattern. The best approach is to talk to your app designer and/or any other stakeholders and explain the limitations of this design and why it’s particularly hard for screen-reader users to navigate. I’ve done this, and the designer clearly understood the issue and graciously refactored the design to be more accessibility friendly by separating the links into distinct text blocks. Problem solved!

2: Absolutely Positioned Elements

Screen readers attempt to follow the flow of the elements on screens. Elements with position set to ‘absolute’ typically disrupt the pattern, and some, most notably Android’s TalkBack screen reader, simply cannot access such elements if they are outside of the space designated to their ‘relatively’ positioned ancestor. If your app is an iOS-only app, this isn’t as big of a concern.

There are a couple of strategies I’ve used to cope with this issue. The appropriate method will depend on the use case. Tooltips are often absolutely placed. Since tooltips typically don’t contain any elements with pressable content, not being able to access them with a screen reader should not be that big of a deal. We can use accessibilityLiveRegion on Android and use the announce method on iOS from accessibilityContext.

2.1: Tooltip Accessibility



useEffect(() => {
   if (IS_IOS && showTooltip) {
     announce({message: text, delay: 100});
   }
 }, [showTooltip, text, announce]);

When the showToolTip boolean is true, announce function will fire. This means when the tooltip opens, the text will be read by the screen reader. Since nothing needs to be pressed, the problems caused by the fact that the element cannot be focused on by the screen reader are moot.

Other times when developers are inclined to use ‘absolute’ positioned elements, accessing the inner content of the element is required. As stated above, on iOS, this is generally fairly straightforward since VoiceOver can still access elements with ‘absolute’ position. But with TalkBack, this generally cannot be done. As such, a bit of creativity with styling is needed to give the appearance of an element that is absolutely positioned.

Consider a dropdown menu. Typically a dropdown menu on a form slides down, covering other inputs, allowing a user to select a dropdown item. This is the perfect scenario for an element with position ’absolute’. But, that is not an option, since the dropdown item would not be able to be selected by TalkBack. Setting the bottom margin to a negative value will achieve the same effect, however, and it will still be accessible! Note, however, that component will still occupy the extra space if the parent container is set to flex: 1.

The idea of negative margins may make some devs' skin crawl, but it works well in such a scenario. An example can be found in the demo repo. The trick is to determine the height of the input bar and the dropdown menu. Then you can use the marginBottom styling value to offset the elements below into the position they would naturally occupy if the dropdown menu were set to ‘absolute’. Animation can then handle the sliding effect.

In brief, if the content of your element is interactive, try to avoid ‘absolute’ because it’s difficult for screen readers. There’s almost always a way to achieve the same UI and functionality in an accessible way.

3: Accessibility Delay

Unfortunately, React Native’s accessibility API has its limitations. The UI isn’t entirely in sync with accessibility, and sometimes, when creating an accessibility announcement or setting the accessibility focus, it can be overridden when React’s accessibility catches up with UI updates. This can be particularly confusing when Android and iOS handle these situations differently.

In lieu of an integrated, uniform way of managing some important accessibility features, creative problem-solving is essential, even if a bit unsatisfying. For example, while Android has the accessibilityLiveRegion, there is no equivalent prop in iOS. An initial thought is to have a useEffect that uses the AccessibilityInfo.announceForAccessibility method. This approach, however, fails because when accessibility registers that the UI has updated, it cuts off the announcement. There are a number of legitimate workarounds, including setting a timeout to delay the announcement so that it trumps the standard accessibility flow. Below is an example of another workaround that ensures that the appropriate message is read, though it comes at the cost of overriding the proper accessibility label of a component.

3.1: Announce Modal



useEffect(() => {
   const timer = setTimeout(() => {
     if (IS_IOS && visible) {
       setHasAnnounced(true);
     }
   }, announcementDuration);
   return () => {
     clearTimeout(timer);
     setHasAnnounced(false);
   };
 }, [announcementDuration, visible]);
…
<Icon
 size={50}
 source={exitIcon}
 onPress={handleClose}
 accessibilityRole="none"
 accessibilityLabel={
   hasAnnounced || !IS_IOS ? 'exit modal: button' : accessibilityAnnouncement
 }
/>

Icon is the component first selected by accessibility, so its accessibilityLabel is temporarily set to the desired announcement when the modal is open. After a certain duration, the hasAnnounced boolean is switched, and the regular accessibility label for Icon is set.
Another example comes from DropDownMenu in the example repo. The desired behavior is that when the DropDown is opened, accessibility focuses on the first option on that menu. When opening the dropdown, accessibility will only read the first option with a call to the AccessibilityInfo.setFocus method, but it won’t focus on it, and therefore it will not be selectable. Again, the solution isn’t ideal, but it’s functionally adequate to simply delay the focusing method.

3.2: Focus on first dropdown menu option



// handles opening and closing dropdown menu
const handlePress = (openStatus: boolean, option?: string) => {
…
   // Auto focus on the first menu item
   // Android requires a bit of time to properly focus
   if (!isOpen && firstOptionRef.current) {
     setFocus(firstOptionRef, IS_IOS ? 0 : 500);
   }
  …
 };



 // Create a setFocus function so you can simplify focus setting throughout the app
 const setFocus = ({ref, delay}: SetFocusOptions) => {
   const reactTag = findNodeHandle(ref.current);
   if (reactTag) {
     if (delay) {
       setTimeout(() => {
         AccessibilityInfo.setAccessibilityFocus(reactTag);
       }, delay);
     } else {
       AccessibilityInfo.setAccessibilityFocus(reactTag);
     }
   }
 };

iOS doesn’t need the timeout workaround, but Android does, so delaying the focus via this custom function from accessibilityContext.tsx achieves the desired effect and is unobtrusive from a UX perspective.

*Creating an accessible app can be difficult, but doing so opens up your business to a broader audience. Accessibility is like every other dimension of development–imperfect, but with some familiarity with the tools available and a little ingenuity, creating a friendly UX for all users is possible. *

Yeti is an IoT application development company. If you'd like to learn more about what we do, be sure to take a look at our extensive library of IoT software development content.

Iot Software Development: Building Scalable + Secure Solutions

Yeti — Fri, 26 Apr 2024 00:40:06 +0000

Crafting successful IoT applications requires more than technical expertise—it demands a nuanced understanding of the unique challenges and opportunities inherent in IoT development.

In this dynamic landscape, where devices communicate seamlessly and data flows incessantly, navigating the complexities of IoT software development is no small feat.

Whether you're a visionary entrepreneur with a groundbreaking idea or an established company seeking to harness the power of IoT, the journey to creating a successful application is filled with challenges. Join us as we explore the essential principles of designing, developing, and deploying scalable and secure IoT software solutions - from architectural considerations to data privacy measures, encryption techniques to compliance with industry standards and regulations, we'll uncover the foundational elements that drive innovation in the world of IoT.

Architectural Considerations:

Architectural considerations form the cornerstone of every successful IoT software solution. These decisions, made during the development phase, have profound impacts on the system's performance, scalability, and security. A well-designed architecture provides the foundation for a robust and resilient IoT application, capable of meeting the evolving needs of users and adapting to changing technological landscapes.

One key principle of architectural design is modularity. By breaking down the system into modular components, developers can achieve greater flexibility and adaptability. This modular approach allows for the independent development, testing, and deployment of individual components, streamlining the development process and facilitating easier maintenance and updates. Moreover, modular architectures enable seamless integration of new features and functionalities, ensuring that the IoT application remains agile and responsive to user needs.

Scalability is another critical consideration in IoT software development. As the number of connected devices and data volumes continues to grow, the architecture must be capable of scaling to accommodate increasing demands. Microservices-based architectures offer an elegant solution to scalability challenges by decomposing the application into small, independently deployable services. These services can be scaled horizontally to handle spikes in traffic and accommodate growing user bases, ensuring that the application remains responsive and performant even under heavy loads.

Containerization technologies such as Docker and Kubernetes further enhance scalability and deployment flexibility. By encapsulating applications and their dependencies into lightweight containers, developers can achieve consistent deployment across diverse environments, from development to production. Containers also facilitate resource isolation and efficient resource utilization, optimizing infrastructure costs and enhancing scalability.

Data Privacy Measures:

Given the substantial amounts of personal and sensitive information processed by IoT devices, ensuring data privacy is an absolutely crucial part of the development process. To safeguard user privacy and comply with stringent regulations, such as GDPR, CCPA, and HIPAA, implementing robust privacy measures is critical.

Encryption techniques serve as the fundamental safeguard for data privacy in IoT applications, ensure data confidentiality and integrity, mitigating the risk of data breaches and unauthorized access. These include:

Transport Layer Security (TLS) Encrypts data during transmission, ensuring that it remains confidential and secure as it traverses networks.
Advanced Encryption Standard (AES) Encrypts data at rest, protecting it from unauthorized access and tampering.

In addition to encryption, data anonymization techniques play a vital role in protecting user privacy. By removing personally identifiable information (PII) from datasets, anonymization techniques help mitigate privacy risks associated with data collection and processing. This anonymized data can still provide valuable insights for analysis and decision-making while preserving user anonymity and privacy.

Granular access controls further enhance data privacy by restricting access to sensitive information based on user roles and permissions. By implementing access control mechanisms, developers can ensure that only authorized individuals have access to specific data, reducing the risk of unauthorized disclosure or misuse. These access controls help organizations comply with regulatory requirements and demonstrate their commitment to protecting user privacy.

Encryption Techniques:

Encryption provides a critical layer of protection for the vast amounts of data transmitted and stored within IoT ecosystems. At every stage of it’s journey, data faces potential vulnerabilities that encryption helps to mitigate - from generation by sensors to transmission across networks and storage in databases, un-encrypted data can easily find its way into the wrong hands.

End-to-end encryption is particularly vital in IoT applications, as it ensures that data remains confidential and secure throughout its entire lifecycle. This means that data is encrypted at its source and remains encrypted as it traverses networks and storage systems, only being decrypted by authorized recipients. By employing end-to-end encryption, developers can safeguard sensitive information from interception and unauthorized access, preserving the integrity and confidentiality of the data.

To achieve robust encryption in IoT systems, developers also utilize a variety of cryptographic techniques. Public-key cryptography, for instance, enables secure communication between devices by utilizing pairs of public and private keys to encrypt and decrypt data. Symmetric encryption algorithms, on the other hand, use a single shared key for both encryption and decryption, offering fast and efficient data protection.

By implementing encryption mechanisms effectively, a good IoT software development company can fortify systems against a myriad of security threats, including unauthorized access, data interception, and tampering. This not only helps to protect sensitive information from malicious actors but also fosters trust among users, reassuring them that their data is being handled with the utmost care and security.

Compliance with Industry Standards and Regulations:

Compliance with industry standards and regulations is crucial in IoT software development - especially when it comes to ensuring security and privacy. Adhering to established standards and frameworks provides a solid foundation for building robust and trustworthy IoT solutions.

Standards such a*s ISO/IEC 27001 for information security management* and the NIST Cybersecurity Framework for risk management offer comprehensive guidelines and best practices for safeguarding sensitive information and mitigating cybersecurity risks.

Furthermore, compliance with regulations such as the General Data Protection Regulation (GDPR) and the California Consumer Privacy Act (CCPA) is essential for protecting user privacy and maintaining legal compliance.

GDPR, which applies to organizations processing personal data of EU citizens, mandates strict data protection measures and imposes significant penalties for non-compliance. Similarly, CCPA grants California residents rights over their personal information, including the right to access, delete, and opt-out of the sale of their data. Ensuring compliance with these regulations not only helps to build trust with users but also avoids costly legal consequences and reputational damage.

Staying abreast of evolving regulatory requirements and proactively addressing compliance concerns is a critical aspect of IoT software development. This requires continuous monitoring of regulatory changes and updates, as well as ongoing assessment and enhancement of security and privacy measures.

Building scalable and secure IoT software solutions requires a comprehensive approach, encompassing architectural considerations, data privacy measures, encryption techniques, and compliance with industry standards and regulations. By adhering to these essential principles and integrating security and scalability into every phase of the development lifecycle, developers can create robust, resilient, and future-ready IoT solutions that empower businesses and enhance user experiences in an increasingly connected world.

If you're looking for an experienced IoT Application Development Company or if you have any questions about a project you're currently working on, we'd love to chat! And, if you're interested in learning more about the process of creating an IoT app, be sure to check out our free library of IoT Software Development resources.

Navigating the Challenges of IoT Software Development: Strategies for Success

Yeti — Thu, 25 Apr 2024 23:35:46 +0000

Eager to propel your business into the age of connectivity? Ready to revolutionize your company's operations and enhance customer experience? If so, it sounds like you're poised to dive into the world of IoT software development!
‍
As exciting as those first steps on your journey to connectivity may be, it can also feel especially challenging. IoT software development demands a specialized skill set, making it a unique challenge for both tech-savvy project managers and non-technical executives alike. Diving headlong into the intricacies of IoT can indeed feel like venturing into uncharted waters.

But fear not! We've written this guide to help you understand and navigate the most common challenges you’ll face during the IoT software development process. From safeguarding your data against cyber threats to ensuring seamless integration across devices, this article delves into the top six hurdles you'll need to clear to create a successful IoT application - and the actionable strategies you'll need to overcome them.

**New to the world of IoT Software Development? Take a look at "The Internet of Things and IoT Software Development Explained".

6 IoT Software Development Challenges - and how to overcome them.

1. Security Vulnerabilities:

Given the interconnected nature of IoT and the looming threat of cyber attacks, ensuring security is of paramount concern during the IoT software development process. While the inherent interdependence and complexity of IoT systems make them incredibly valuable for many purposes, it also makes these systems lucrative targets for anyone seeking to exploit any vulnerabilities the system may have.

From unauthorized access to data breaches and device tampering, the risks of unsecured systems are manifold - and can have far-reaching consequences for businesses and individuals alike. For this reason, it’s crucial to ensure that your development team is adopting a proactive approach to mitigating security risks including robust authentication mechanisms, robust encryption protocols and secure coding practices, such as input validation and parameterized queries.

Investing in robust security measures from the get-go is one of the most important challenges to overcome while building your IoT software - so ensure that your development team is capable of fortifying your system from a wide range of security vulnerabilities

2. Interoperability Issues:

Given the diverse array of devices and protocols inherent in IoT software development, interoperability issues often pose a significant hurdle. Today, there are numerous manufacturers producing wide ranges of devices - each of which utilizing their own proprietary protocols and standards. This diversity makes achieving seamless interoperability a significant challenge, and can lead to devices struggling to communicate effectively, integration bottlenecks and compatibility issues.

To address these challenges, you’ll want to ensure that your development team is adopting open-source platforms that can provide a standardized foundation for IoT development. Open-source solutions offer flexibility and interoperability by providing a common framework that supports a wide range of devices and protocols.

To streamline data exchange between devices, we recommend leveraging standardized communication protocols such as MQTT (Message Queuing Telemetry Transport) or CoAP (Constrained Application Protocol) - which offer lightweight, efficient communication mechanisms tailored for IoT environments, enabling devices to communicate reliably and efficiently.

Middleware solutions can also play a vital role in facilitating interoperability, by acting as intermediaries between devices with disparate protocols. These middleware platforms provide translation services, protocol conversion, and message routing capabilities, allowing devices to communicate seamlessly despite their differences.

Overall, ensuring that your development team is addressing interoperability issues is essential for building robust and scalable IoT systems that can realize their full potential in today's interconnected world.

3. Scalability Concerns:

As IoT deployments expand in scale and complexity, scalability concerns loom large. Unfortunately, traditional software architectures often buckle under the weight of surging data volumes and device counts, leading to performance degradation and resource bottlenecks. To successfully navigate this challenge, it’s important that your development team has the ability to devise solutions that can seamlessly scale alongside the growing demands of IoT ecosystems.

To meet these scalability challenges, many teams are increasingly turning to cloud computing platforms as a solution, as cloud services offer the flexibility and elasticity needed to accommodate fluctuating workloads and scaling requirements. By leveraging cloud infrastructure, developers can dynamically allocate resources, scale computing power, and expand storage capacity as needed, without the constraints of on-premises hardware limitations.

Distributed architectures are another avenue for addressing scalability concerns in IoT software development. By decentralizing computing tasks across a network of interconnected devices or servers, distributed systems can efficiently handle growing workloads and distribute processing tasks to where they are needed most. This approach enhances fault tolerance, improves system reliability, and enables seamless scalability as IoT deployments evolve.

By embracing these scalable technologies and architectures, your team can future-proof your IoT solutions and ensure they can seamlessly adapt to the ever-expanding demands of the IoT landscape.

4. Device Management Complexities:

Managing a multitude of IoT devices dispersed across various locations presents a formidable logistical challenge, as the sheer scale and geographic distribution of these devices can make tasks such as provisioning, configuration, monitoring, and firmware updates incredibly complex. To navigate these challenges effectively, ensure that your IoT software development team implements streamlined processes and centralized control mechanisms to maintain oversight and ensure the smooth operation of IoT deployments.

One approach to simplifying device management is the adoption of IoT device management platforms. These platforms offer a centralized hub for managing and monitoring IoT devices, providing developers with tools and functionalities to streamline administrative tasks. Equipped with remote management capabilities, development teams can remotely configure devices, troubleshoot issues, and perform updates without the need for physical access. Additionally, over-the-air (OTA) firmware updates enable developers to deploy software updates and patches seamlessly, ensuring devices remain up-to-date with the latest features and security enhancements.

Device health monitoring tools also play a crucial role in maintaining optimal device performance and reliability, as they continuously monitor device metrics such as connectivity status, battery life, and sensor readings, allowing you to identify and address potential issues proactively - before they escalate into critical failures.

5. Data Privacy Regulations:

The recent surge of IoT devices collecting vast troves of sensitive data underscores the critical importance of complying with stringent data privacy regulations like GDPR, CCPA, and HIPAA. Non-compliance not only exposes organizations to hefty fines but also jeopardizes their reputation and erodes customer trust. For development teams navigating this regulatory landscape, ensuring adherence to data privacy standards is non-negotiable.

To safeguard sensitive data and maintain regulatory compliance, developers must implement robust data privacy measures throughout the IoT software development process. This includes employing encryption techniques to protect data both in transit and at rest, rendering it unreadable to unauthorized parties. Additionally, anonymization techniques can further enhance privacy by dissociating personal information from individual identities, minimizing the risk of data breaches and unauthorized access.

Granular access controls play a pivotal role in restricting access to sensitive data, ensuring that only authorized individuals can view or manipulate it. By implementing role-based access controls and authentication mechanisms, developers can enforce strict access policies tailored to different user roles and permissions. Furthermore, transparent privacy policies and user consent mechanisms are indispensable for fostering trust and compliance. Clear communication regarding data collection practices, purposes, and rights empowers users to make informed decisions about their data, fostering transparency and accountability within the organization.

6. Power Constraints and Energy Efficiency:

‍Many IoT devices operate in resource-constrained environments with limited power sources, making energy efficiency a crucial consideration. Excessive power consumption can shorten device lifespan and increase operational costs.

To address these power constraints effectively, be sure your development team is adopting a multifaceted approach that encompasses hardware optimization, communication protocols, and energy harvesting technologies. Employing low-power hardware components reduces energy consumption without compromising device performance, prolonging battery life and minimizing the need for frequent recharging or replacement.

Implementing efficient communication protocols further enhances energy efficiency by minimizing the amount of data transmitted and reducing power overhead. By prioritizing lightweight, energy-efficient protocols such as MQTT or CoAP, developers can optimize energy usage and extend device battery life.

Incorporating power-saving features such as sleep modes and scheduling algorithms can further optimize energy usage by minimizing idle power consumption during periods of inactivity. By dynamically adjusting power states based on usage patterns and environmental conditions, developers can maximize energy efficiency and prolong device autonomy.

With its promises of revolutionizing business operations and enhancing customer experiences, IoT technology is an exciting venture - though it comes with its fair share of challenge. To help ensure the success of your application, we recommend choosing an IoT software development company with a wide range of experience, and the ability to surmount the challenges specific to the IoT development process.

If you're looking for an experienced IoT Software Development Company or if you have any questions about a project you're currently working on, we'd love to chat! And, if you're interested in learning more about the process of creating an IoT app, be sure to check out our free library of free IoT Software Development resources!

Cross-Domain Product Analytics with PostHog

Yeti — Fri, 08 Mar 2024 00:14:53 +0000

The following is an excerpt from our recent blog article, "Cross-Domain Product Analytics with PostHog". If you'd like to read the comprehensive article, you can do so here

Product analytics play a vital role in gauging the effectiveness of marketing strategies.

They provide clear insights into the impact of marketing initiatives on user engagement and behavior within an app or website. By tracking and analyzing data related to user navigation patterns, interactions, and sign-ups, companies gain concrete, evidence-based understanding of their products. This allows stakeholders to accurately assess the success of their marketing efforts, identify which campaigns are fostering meaningful user actions and how the product is funneling users. Unfortunately there are also a larger number of challenges, including ad blockers, difficult UIs and, as is the focus of this article, cross-domain tracking.

Luckily there are a suite of tools available to help companies gain these insights and avoid the difficulties. At Yeti, we have recently been working with PostHog to provide a low-effort, cost-effective, and flexible service which can help with some unique difficulties, namely getting data when an experience or user-flow crosses over to platforms with a different domain.

Read the full article here

Yeti is an IoT application development company. If you'd like to learn more about what we do, be sure to take a look at our work page featuring insightful case studies showcasing our collaborations with renowned clients such as Google, Netflix, Westfield, and many others. For more insightful content, don't miss the Yeti blog and our extensive library of IoT software development content.

The Symbolicon: My Journey to an Ineffective 10-key Keyboard

Yeti — Thu, 07 Mar 2024 23:33:08 +0000

This article is a brief overview of a recent talk given by Jonny Shult. To learn more and take a deeper dive into the Symbolicon, be sure to check out the video below!

As a weekend project, I decided to delve into the intricacies of keyboard design - seeking to enhance the typing experience in ways that conventional keyboards had not explored.

The idea behind Symbolicon stemmed from a simple yet profound question: How can we reimagine the standard keyboard to enhance the typing experience? This exploration led me to consider unconventional inspirations, ultimately settling on the Braille alphabet.

While the Braille alphabet is designed for tactile reading, translating it into an efficient keyboard input posed a unique challenge. Despite my unfamiliarity with Braille, I embarked on the task of creating an ergonomic Braille alphabet specifically tailored for keyboard usage. The result was a thoughtful design that opened up new possibilities for accessibility and efficiency.

Crafting an ergonomic keyboard is a delicate blend of art and science. Through a process of trial and error, I developed a set of criteria to guide the design. From single key presses to mirroring fingers, each criterion aimed to enhance the user experience, resulting in a meticulously crafted keyboard that prioritizes both efficiency and user comfort.

The Symbolicon keyboard materialized through a Korn five-column keyboard kit. Assembling the 36 keys and a microcontroller unit required a bit of soldering, and the choice of ZMK firmware for programming, along with the Zephyr real-time operating system, ensured a deterministic environment crucial for optimal performance.

Symbolicon isn't just a keyboard; it's an entire universe of layers designed to cater to diverse typing needs. The alphabet layer, symbol layer, navigation layer, and numbers layer seamlessly integrate to offer a versatile typing experience. From efficient code typing to swift navigation, Symbolicon adapts to user demands with the switch of a layer.

Symbolicon transcends traditional setups, offering potential applications in the mobile realm. Envision handheld devices or finger rings equipped with technology capable of deciphering muscle contractions for typing. This opens up exciting possibilities for virtual workspaces and mobile applications.

As with any innovation, the Symbolicon keyboard comes with its set of challenges. Switching between layers demands a learning curve, and the firmware logic is a work in progress. Yet, the satisfaction derived from typing on this ergonomic marvel is unparalleled. While my typing speed may not have skyrocketed yet, the journey has just begun.

The Future of Symbolicon

While Symbolicon might not replace my daily driver just yet, its potential to revolutionize typing experiences is undeniable. As I aim to improve my typing speed and explore the intricacies of the keyboard, I invite fellow enthusiasts to join me on this journey of innovation and discovery.

In conclusion, the Symbolicon keyboard represents a fusion of creativity, ergonomic design, and technological ingenuity. As we navigate the evolving landscape of input devices, Symbolicon stands as a testament to the power of reimagining the familiar for a more efficient and enjoyable typing experience. Stay tuned for more updates, and let's continue to push the boundaries of what's possible in the world of keyboards!

Navigating Neural Networks

Yeti — Thu, 07 Mar 2024 23:05:53 +0000

James McNamara recently gave t[his insightful talk on navigating the intricate world of neural networks, deep learning, and artificial intelligence - which you can watch above, or at the link below

This discussion provides a comprehensive overview of neural networks and deep learning, exploring their evolution, fundamental concepts, and applications.

Throughout this talk, James, delves into various aspects of neural network architectures, discussing their relevance in image recognition, natural language processing (NLP), and coding assistance, and covers essential topics such as Convolutional Neural Networks (CNNs), Recurrent Neural Networks (RNNs), and the breakthroughs achieved with word embeddings, particularly through the example of Word2Vec.

Here's an outline of everything covered in the video:

Outline: An Introduction to Neural Networks

I. Introduction to Neural Networks and Deep Learning:

Brief introduction to neural networks and deep learning.
Overview of the history and evolution of neural networks.
Explanation of the fundamental building blocks of neural networks.

II. Basics of Neural Networks:

Overview of the structure and components of neural networks.
Introduction to neurons, layers, weights, biases, and activation functions.
Explanation of feedforward and back propagation processes in training neural networks.

III. Image Recognition and Convolutional Neural Networks (CNNs):

Introduction to image recognition as a neural network application.
Overview of Convolutional Neural Networks (CNNs) for image processing.
Explanation of convolutional layers and pooling layers in CNNs.

IV. Natural Language Processing (NLP) and Recurrent Neural Networks (RNNs):

Introduction to Natural Language Processing (NLP) and its challenges.
Overview of Recurrent Neural Networks (RNNs) for sequential data processing.
Explanation of the vanishing gradient problem in training RNNs.

V. Encoding Text as Numbers and Word Embeddings:

Addressing challenges in encoding text as numbers for neural networks.
Discussion on the locality of images vs. text.
Issues with one-hot encoding for representing text.
Introduction to Word2Vec and embeddings for efficient text representation.
Explanation of embeddings as semantic representations of words.
Demonstrating the breakthrough in learning meaningful semantics through embeddings.

VI. Transformers and Self-Attention Mechanism:

Introduction to transformers as an innovation for handling large text collections.
Overview of the self-attention mechanism in transformers.
Discussion on handling long-range dependencies in human language.

VII. Application of Generative AI in Coding:

Brief mention of OpenAI's Codex and Sourcegraph's use of generative AI for coding assistance.
Challenges in using generative AI for coding tasks, especially in large codebases.

VIII. Future Outlook and Optimism:

IX. Audience Questions and Clarifications:

Unlocking the Power of Chat GPT: A Developer's Guide to Streamlining Workflows and Boosting Productivity

Yeti — Wed, 14 Feb 2024 23:05:32 +0000

Hi all! We recently had software engineer James Feore give a talk on how he has improved his processes through AI, ChatGPT and Co-Pilot.

*Below you'll find a brief re-cap of the video. *

Greetings fellow developers! Today, we're excited to take you on a journey into the world of Chat GPT and its transformative impact on software development. Strap in, because we're about to explore the ins and outs of this incredible tool that's changing the way we approach coding and problem-solving.

Embracing the Power of Chat GPT

Imagine a tool that not only understands your coding challenges but also assists you in generating solutions swiftly. That's the promise of Chat GPT, an advanced language model that has become my go-to companion in the development process. Whether you're a seasoned coder or just dipping your toes into the programming pool, Chat GPT is here to simplify and supercharge your workflow.In James' Feore's talk, he dissects the transformative impact that ChatGPT has had on the software development process; highlighting the multitude of ways it can be used to streamline any developers workflows - from generating code snippets and providing insightful solutions, to helping answer complex queries with actionable responses. It's more than just a sidekick; it's a reliable partner for developers across a spectrum of projects.

Throughout his talk, James takes a comprehensive deep dive into how you can use ChatGPT for:

Debugging‍‍
Learning new libraries‍‍
Walking through new codebases‍‍
Architecture questions + decisions‍‍
Technical Writing‍‍
and much more!!

The integration of Chat GPT into software development marks a paradigm shift. As we embrace this AI-powered tool, we're on the cusp of increased efficiency, accelerated project timelines, and a redefined role for engineers. Don't miss this opportunity to streamline your workflows and boost productivity with the assistance of your new partner,ChatGPT!

Happy coding!

Yeti is an IoT application development company with over a decades worth of experience building meaningful digital products. If you're beginning your app development journey, and are looking for an experienced parter, we'd love to talk. Feel free to send a message our way and we'll get back to you ASAP!

Introducing Yurt: A CLI Tool for Rapid Codebase Setup

Yeti — Tue, 30 Jan 2024 02:07:23 +0000

Hi all! I wanted to share an internal tool that our team at Yeti ( an IoT software development company,) has developed, called Yurt. In a nutshell, Yurt is a command line application designed to streamline the process of setting up new code bases by incorporating our preferred preferences and patterns.

I put together a loom video walking through the tool that covers:

Initiating Yurt: Yurt is kicked off by calling the start command, leading you through a series of questions to configure your code base.

Configuration Options: Yurt allows you to specify details like the repository name, the location in your file system, and the type of application you're creating. There are options for standalone React and backend applications or a React and Apollo GraphQL integrated setup.

Automated Setup: Yurt automates the process of creating the directory, copying templates, installing dependencies, setting up a local Docker file with a Postgres database, generating GraphQL types and schema, and committing the changes to Git.

Front-end and Back-end Integration: The resulting code base includes a Git repository with front-end and back-end packages. You can easily run and test the React app and Apollo server locally.

Why Yurt?

Efficiency: Yurt is aimed at making developers more efficient by handling the initial 80% of setup, including essential configurations, libraries, and basic routing.
Open Source: Yurt is open source on GitHub, inviting
collaboration, feedback, and suggestions.
Value: The tool has already provided significant value at Yeti, enabling our developers to move quickly.

If you're interested in checking out Yurt, head over to GitHub. Feel free to explore, suggest changes, or even take it for a spin.

Watch the Video for a hands-on demonstration by Will.

Thanks for reading and happy coding!