General

#StateOfAutomation - Simple Solutions for Complex Problems

Jun 28, 2021

3 min read

🤔 What in the world is Automation?

😱 How can we utilize automation to improve our developer experience and productivity?

🤯 Is it possible to over-engineer automation?

If you or your team have ever asked these questions, come dive into some of the talking points discussed at Modern Web's State of Automation event.

In this article, I will review some of the major points brought up during this conversation, hosted by Tracy Lee (@ladyleet) and Matthew Pagan (@mastapegs) of This Dot Labs.

Let's meet our panelists, and hear about what their teams have been working on!

👩‍💻 Alison Dowdney (@alisondowdney)

Developer Advocate from Weaveworks

Weaveworks dropped an early release of Weave Gitops Core, a tool that’s backed by Flux, an open-source tool backed by CNCF (Cloud Native Computing Foundation).

🧑‍💻 Taylor Dolezal (@onlydole)

Senior Developer Advocate from HashiCorp

Terraform, an open-source code software tool that enables you to safely create, change, and improve infrastructure, just hit 1.0 earlier this month!
Waypoint went to 0.4, which includes mutable deployments and makes it easier to work with Kubernetes.

🧑‍💻 Zan Markan (@zmarkan)

Developer Advocate from CircleCI

CircleCI has acquired Vamp, a release orchestration tool.
They’ve also released new features like enhanced ARM support, as well as Dynamic Config, which allows users to use jobs and workflows to not only execute the work, but determine the work they want to run.

👩‍💻 Tracy Miranda (@tracymiranda)

Executive Director from Continuous Delivery Foundation

Continuous Delivery Foundation hosted cdCon, which supports the tech community by helping organizations focused on tackling the diversity and inclusion gap.

🔑 Key Takeaway Points

As we work through the pandemic, and see all the workplace and cultural changes happening, we see that people are really prioritizing automation to help with distributed work and burnout. 🔥
Concepts and platforms such as GitOps and Kubernetes Projects have helped us expand automation outside of the coding realm for tasks such as simplifying the interaction between communities.
Automation helps with the technical aspect of our workflows, but it might not necessarily solve human or process problems in an organization.
It is possible to over-engineer automation! Maintainability is so important to keep in mind to make sure we've created a sustainable workflow for our future teams.
And no, Jenkins is not dead. Far from it. 😉

🧠 Resource Recommendations

📚 Accelerate by Nicole Forsgren, PhD, Jez Humble, and Gene Kim
📚 Working in Public: The Making and Maintenance of Open Source Software by Nadia Eghbal
💻 Perspective API: Free API that uses machine learning to help mitigate toxicity and ensure healthy dialogue online.
💻 kind: Tool for running local Kubernetes clusters using Docker container “nodes”.

🙋‍♀️ Have any questions or points to share? Use #StateOfAutomation on Twitter and talk with us!

📺 View the replay here for fun stories, great tips, and faces to names! 🤝

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

Susan Ma

@sukisupremo

State Management with Apollo Client and Vue using Reactive Variable

State Management is an integral part of Software development with tools like VueX, Pinia which is like VueX 5, Redux, Context API, and others. In our example, we will be using Vue3 composition API, a bit of TypeScript. This article will assume that you already have a project setup with Apollo. State Managemnet Before we dive into what state management is and what it offers, lets understand few thing which are integral to it. What is State? State is a part of an application, such as user details, usernames, login information, and website themes(dark or light). In simple terms, state is like a warehouse that's contents you can access when you need to from wherever you are. What is State Management? State Management is just simply a design pattern to help synchronize the state of the application throughout all of the components in the application. This also prevents us from passing too many props accross the application. When to implement State Management: - When the application contains large number of components. - To prevent redundant data, knowing well some other components might need that data. - Prevent passing props across the application, making it messy. For more explainations, you can check the links below: - What does state-management even mean and why does it matter in Front End Web Development with frameworks like React or Vue? by Sean Grogg - What does state-management even mean and why does it matter in Front End Web Development with frameworks like React or Vue? by Robert Polevoi - State management by Tom Nolle How to implement State management? There are so many ways to do it. But in this discussion, we will be implementing it with Vue Apollo. Apollo Client It is the client for Vue Apollo. It helps to easily integrate GraphQL queries and mutation in your application which, in our case, is Vue. Reactive Variables This is a new feature from Apollo Client 3. > Reactive variables are a useful mechanism for representing local state outside of the Apollo Client cache. How to create a Reactive variable in Apollo? This is quite simple since Apollo client provides us with makeVar. ` What the above code means is we make use of makeVar to create a variable of any type be it boolean, number, array, or object. Also, by calling the variable that makeVar is assigned to without passing a parameter will only output its current value, but passing a parameter will update its value. You can learn more about makeVar here. Setup of the Project We will be creating a state for a counter that does increment, decrement, or reset. But first, let's set up our enviroment. Setting up the Reactive variable Lets create our reactive variable in ./variables/counts.js: ` Configuring the cache Lets also update our cache config to something like this: ` Creating a component Let's create ./components/Counter.vue component: ` Please note that you can always get the counts value even without the GraphQL query. All you need to do is call count() like the example about _Reactive variables_, and force a re-render using loading as a ref. Like this: ` loading ref to help re-render when there is a change so as to get the latest value of counts. The manner you will prefer depends on what you want to achieve. But I will go with the example with the query as it still preserves the GraphQL feel. Conclusion State Management with Apollo Client saves you the stress of installing VueX, or Redux (for the React users), as long as the application makes use of Apollo. In this quick training, we learned about state and why state management is important to building and maintaining applications. Further, we learned how to manage state by using a reactive variable in Apollo. If you need any help understanding how to use this training, or additional clarification, please feel free to reach out to me....

Jul 27, 2022

3 mins

Web DevelopmentVue

I Broke My Hand So You Don't Have To (First-Hand Accessibility Insights)

We take accessibility quite seriously here at This Dot because we know it's important. Still, throughout my career, I've seen many projects where accessibility was brushed aside for reasons like "our users don't really use keyboard shortcuts" or "we need to ship fast; we can add accessibility later." The truth is, that "later" often means "never." And it turns out, anyone could break their hand, like I did. I broke my dominant hand and spent four weeks in a cast, effectively rendering it useless and forcing me to work left-handed. I must thus apologize for the misleading title; this post should more accurately be dubbed "second-hand" accessibility insights. The Perspective of a Developer Firstly, it's not the end of the world. I adapted quickly to my temporary disability, which was, for the most part, a minor inconvenience. I had to type with one hand, obviously slower than my usual pace, but isn't a significant part of a software engineer's work focused on thinking? Here's what I did and learned: - I moved my mouse to the left and started using it with my left hand. I adapted quickly, but the experience wasn't as smooth as using my right hand. I could perform most tasks, but I needed to be more careful and precise. - Many actions require holding a key while pressing a mouse button (e.g., visiting links from the IDE), which is hard to do with one hand. - This led me to explore trackpad options. Apart from the Apple Magic Trackpad, choices were limited. As a Windows user (I know, sorry), that wasn't an option for me. I settled for a cheap trackpad from Amazon. A lot of tasks became easier; however, the trackpad eventually malfunctioned, sending me back to the mouse. - I don't know a lot of IDE shortcuts. I realized how much I've been relying on a mouse for my work, subconsciously refusing to learn new keyboard shortcuts (I'll be returning my senior engineer license shortly). So I learned a few new ones, which is good, I guess. - Some keyboard shortcuts are hard to press with one hand. If you find yourself in a similar situation, you may need to remap some of them. - Copilot became my best friend, saving me from a lot of slow typing, although I did have to correct and rewrite many of its suggestions. The Perspective of a User As a developer, I was able to get by and figure things out to be able to work effectively. As a user, however, I got to experience the other side of the coin and really feel the accessibility (or lack thereof) on the web. Here are a few insights I gained: - A lot of websites apparently _tried_ to implement keyboard navigation, but failed miserably. For example, a big e-commerce website I tried to use to shop for the aforementioned trackpad seemed to work fine with keyboard navigation at first, but once I focused on the search field, I found myself unable to tab out from it. When you make the effort to implement keyboard navigation, please make sure it works properly and it doesn't get broken with new changes. I wholeheartedly recommend having e2e tests (e.g. with Playwright) that verify the keyboard navigation works as expected. - A few websites and web apps I tried to use were completely unusable with the keyboard and were designed to be used with a mouse only. - Some sites had elaborate keyboard navigation, with custom keyboard shortcuts for different functionality. That took some time to figure out, and I reckon it's not as intuitive as the designers thought it would be. Once a user learns the shortcuts, however, it could make their life easier, I suppose. - A lot of interactive elements are much smaller than they should be, making it hard to accurately click on them with your weaker hand. Designers, I beg you, please make your buttons bigger. I once worked on an application that had a "gloves mode" for environments where the operators would be using gloves, and I feel like maybe the size we went with for the "gloves mode" should be the standard everywhere, especially as screens get bigger and bigger. - Misclicking is easy, especially using your weaker hand. Be it a mouse click or just hitting an Enter key on accident. Kudos to all the developers who thought about this and implemented a confirmation dialog or other safety measures to prevent users from accidentally deleting or posting something. I've however encountered a few apps that didn't have any of these, and those made me a bit anxious, to be honest. If this is something you haven't thought about when developing an app, please start doing so, you might save someone a lot of trouble. Some Second-Hand Insights I was only a little bit impaired by being temporarily one-handed and it was honestly a big pain. In this post, I've focused on my anecdotal experience as a developer and a user, covering mostly keyboard navigation and mouse usage. I can only imagine how frustrating it must be for visually impaired users, or users with other disabilities, to use the web. I must confess I haven't always been treating accessibility as a priority, but I've certainly learned my lesson. I will try to make sure all the apps I work on are accessible and inclusive, and I will try to test not only the keyboard navigation, ARIA attributes, and other accessibility features, but also the overall experience of using the app with a screen reader. I hope this post will at least plant a little seed in your head that makes you think about what it feels like to be disabled and what would the experience of a disabled person be like using the app you're working on. Conclusion: The Humbling Realities of Accessibility The past few weeks have been an eye-opening journey for me into the world of accessibility, exposing its importance not just in theory but in palpable, daily experiences. My short-term impairment allowed me to peek into a life where simple tasks aren't so simple, and convenient shortcuts are a maze of complications. It has been a humbling experience, but also an illuminating one. As developers and designers, we often get caught in the rush to innovate and to ship, leaving behind essential elements that make technology inclusive and humane. While my temporary disability was an inconvenience, it's permanent for many others. A broken hand made me realize how broken our approach towards accessibility often is. The key takeaway here isn't just a list of accessibility tips; it's an earnest appeal to empathize with your end-users. "Designing for all" is not a checkbox to tick off before a product launch; it's an ongoing commitment to the understanding that everyone interacts with technology differently. When being empathetic and sincerely thinking about accessibility, you never know whose life you could be making easier. After all, disability isn't a special condition; it's a part of the human condition. And if you still think "Our users don't really use keyboard shortcuts" or "We can add accessibility later," remember that you're not just failing a compliance checklist, you're failing real people....

Dec 6, 2023

5 mins

AccessibilityA11yWeb DevelopmentHTML

From Coding Lonely to DevRel Ceremony - My Apprenticeship Journey

👎  Nervous, confused, belittled, defeated. These words describe the beginning of my professional coding journey. 👍  Empowered, excited, determined, appreciated. These words describe how I feel now, at the end of my apprenticeship. This sounds like an impossible 180, doesn't it? Let me tell you about this wild journey, and the things I learned along the way. 🐣  Where it all began.. At some point in our careers, we've been on that rollercoaster of excitement that quickly mixes with fear and doubt. Maybe you just started a new job, transitioned careers, or perhaps you're on that rollercoaster _RIGHT NOW_. 🎢  I felt this intensely when I was in my first dev job - I just moved to a new city, graduated from coding boot camp, and immediately started in the tech field within four months. Talk about moving fast! 💨 Fast forward seven months into my first dev job, and I found myself terrified of asking for help, staring at bugs with no support or solutions, and crying every night from the frustration. 😪  Although there were people who were sympathetic to my situation, I didn't feel good about myself or my job. I think we've all worked at places where we didn't feel supported, so I'll spare you the details. Bottom line - I realized that this environment was not conducive to my learning, and my confidence had broken down into rubble. 🤷‍♀️  Where was this person who was so eager and excited to learn? 🤔  Where was this person who was determined to find solutions, and contribute to the team? These were questions with answers that I didn't like, and didn't want to accept. So, I finally scrounged up the courage to quit. I FELT SO MUCH RELIEF! 😮‍💨  I didn't realize this at the time, but this was my form of self-care. To prioritize my health, and to *stop* the abuse. This new feeling of freedom felt so foreign to me. It was almost scary. But, I knew I broke the cycle, and I felt like I could breathe again. 🫁 _My Stress_ by NF speaks to the internal turmoil I felt during this time. _(".. Internal turmoil?" I know it sounds dramatic, but this period of my life was.. Rough.)_ .... So, what now? 🦗 🤷‍♀️  Why an apprenticeship? I wanted to code professionally, and stumbled upon This Dot's apprentice program, which was geared towards women in tech. This felt like a good mix of getting support as a junior dev, but also exploring opportunities to help others in underrepresented groups. I felt hesitant about an apprenticeship at first. 😰  I felt embarrassed to go from a junior dev position to being an apprentice. Of course, the clouds of doubt started reigning over. What if I can't fulfill the job? What if I look stupid? But when I started at This Dot, that attitude changed _REAL_ quick. I was welcomed with open arms by people who didn't even know me yet. In the back of my mind, I felt... suspicious. Why are they being so nice? _What are they buttering me up for?_ 🧈  My past experience wouldn't let me trust the positivity that I witnessed in this workspace. But in this new position, I had access to a whole new team, including senior engineers who had been through what I've been through and more. Not only was I able to work on coding projects with various clients - I was able to experience a whole new role in tech called DevRel (aka developer relations). And when I tell you that the work took off, _IT_ 👏  _TOOK_ 👏  _OFF_. As an apprentice, I had the flexibility to try out different projects. Within DevRel, I was able to write blogs, create Twitter content, and host This Dot events. But most importantly, I worked with a team that treated me with respect. I was afraid to veer away from 100% coding because it was all I knew, but I gained so much fulfillment from writing technical content, and engaging with the dev community. I was openly curious about how to write better content, and asked ALL the questions! I felt like I was learning, contributing, and engaging with the dev community in some manner, and it felt like I won the jackpot. 🥳 There was no longer any doubt. There was no question that this is where I was meant to be. I knew what it felt like to be respected at my job. I knew what it felt like to contribute something meaningful to my projects. (Side note: _From the bottom of my heart, I hope you've celebrated your wins, and experienced this type of enthusiasm and growth in your career. If you haven't yet, don't worry - it'll come._ ❤️ ) 🗺  Where am I now? After eight months in the apprentice program, I'm happy to write that I'll be starting my permanent full-time role as a Community Engineer 💻  at StackBlitz. This role will allow me to continue engaging with the community, and leading internal and external projects to improve the community's experience. This role encompasses tasks along the DevRel side that make me even more excited to be a part of this community. Like This Dot, StackBlitz has welcomed me with open arms, and I'm so excited to work with a great team. 🏅 📝  Tips I learned 1. Be Explicit 🗣 Nothing can harm a project or team more than ambiguity. Ambiguity can cause misunderstandings in objectives, delays in progress, and miscommunication in your team. Especially when you're starting out, be explicit in the support you need. Be explicit when you're outlining the work you're doing. When you're talking to your manager or mentor about professional goals, be explicit about what you want! Remember, we are not mind readers. 😊 2. Find Your A-Team 📣 There's no cookie-cutter outline in what this looks like. It all depends on what YOU need! Find a group of people who truly support you, whether it's your manager, a coworker, or a mentor outside of your company. Find the people who will celebrate your wins as their own. Find the people who won't be afraid to call you out when you're in the wrong. Find people who are invested in your growth just as much as you are. 🌱 3. Get Out of Your Head 🧠 When we're too inside of our heads, we may unintentionally inflate situations that make it harder to construct realistic resolutions. I find it so helpful (and therapeutic 💆🏻‍♀️  ) to write things out. Whether it's in my physical bullet journal, Notion, a sticky note, or just talking to someone - Getting the thoughts out of my head allowed me to understand the situation at hand, and outline what I needed to do next. Our minds are prime real estate 🏠  so choose wisely what you allow to live rent-free. 😉 (Admittedly, I allow this dog to live rent-free because he's so stinking adorable. 🐶  ) 4. Show Empathy & Be Compassionate 🤗 These can be shown in big or small ways, and every bit matters. Sometimes that can be adding resilient tests, and writing code that other developers can easily understand and maintain. Sometimes, that can be contributing well-written documentation that's accessible to your user community. And sometimes it can look like asking someone how their day has been. My favorite way of doing this is celebrating wins, and giving kudos to others because when one of us wins, we all win. 🎉  We're humans, not machines! 🤖  So let's treat each other as such. 💜 🎬  Conclusion I know this was a lengthy read, and I appreciate you taking the time to read about my journey! I'm very fortunate to have found people who support me and to be in a position to acknowledge my growth. I encourage "Code Newbies" to consider an apprenticeship as part of their developer journey. Kudos to This Dot for their evolving apprentice program, and a big "thank you" to StackBlitz for allowing me to continue my tech journey with them! 🚙...

Jul 20, 2021

7 mins

General

Understanding Vue.js's <Suspense> and Async Components

In this blog post, we will delve into how and async components work, their benefits, and practical implementation strategies to make your Vue.js applications more efficient and user-friendly. Without further ado, let’s get started! Suspense Let's kick off by explaining what Suspense components are. They are a new component that helps manage how your application handles components that need to await for some async resource to resolve, like fetching data from a server, waiting for images to load, or any other task that might take some time to complete before they can be properly rendered. Imagine you're building a web page that needs to load data from a server, and you have 2 components that fetch the data you need as they will show different things. Typically, you might see a loading spinner or a skeleton while the data is being fetched. Suspense components make it easier to handle these scenarios. Instead of manually managing loading states and error messages for each component that needs to fetch data, Suspense components let you wrap all these components together. Inside this wrapper, you can define: 1. What to show while the data is loading (like a loading spinner). 2. The actual content that should be displayed once the data is successfully fetched. This way, Vue Suspense simplifies the process of handling asynchronous operations (like data fetching) and improves the user (and the developer) experience by providing a more seamless and integrated way to show loading states and handle errors. There are two types of async dependencies that can wait on: - Components with an async setup() hook. This includes components using with top-level await expressions. *Note: These can only be used within a component.* - Async Components. Async components Vue's asynchronous components are like a smart loading system for your web app. Imagine your app as a big puzzle. Normally, you'd put together all the pieces at once, which can take time. But what if some pieces aren't needed right away? Asynchronous components help with this. Here's how they work: - Load Only What's Needed: Just like only picking up puzzle pieces you need right now, asynchronous components let your app load only the parts that are immediately necessary. Other parts can be loaded later, as needed. - Faster Start: Your app starts up faster because it doesn't have to load everything at once. It's like quickly starting with the border of a puzzle and filling in the rest later. - Save Resources: It uses your web resources (like internet data) more wisely, only grabbing what’s essential when it's essential. In short, asynchronous components make your app quicker to start and more efficient, improving the overall experience for your users. Example: ` Combining Async Components and Suspense Let's explore how combining asynchronous components with Vue's Suspense feature can enhance your application. When asynchronous components are used with Vue's Suspense, they form a powerful combination. The key point is that async components are "suspensable" by default. This means they can be easily integrated with Suspense to improve how your app handles loading and rendering components. When used together, you can do the following things: - Centralized Loading and Error Handling: With Suspense, you don't have to handle loading and error states individually for each async component. Instead, you can define a single loading indicator or error message within the Suspense component. This unified approach simplifies your code and ensures consistency across different parts of your app. - Flexible and Clean Code Structure: By combining async components with Suspense, your code becomes more organized and easier to maintain. An asynchronous component has the flexibility to operate independently of Suspense's oversight. By setting suspensible: false in its options, the component takes charge of its own loading behavior. This means that instead of relying on Suspense to manage when it appears, the component itself dictates its loading state and presentation. This option is particularly useful for components that have specific loading logic or visuals they need to maintain, separate from the broader Suspense-driven loading strategy in the application. In practice, this combo allows you to create a user interface that feels responsive and cohesive. Users see a well-timed loading indicator while the necessary components are being fetched, and if something goes wrong, a single, well-crafted error message is displayed. It's like ensuring that the entire puzzle is either revealed in its completed form or not at all rather than showing disjointed parts at different times. How it works When a component inside the boundary is waiting for something asynchronous, shows fallback content. This fallback content can be anything you choose, such as a loading spinner or a message indicating that data is being loaded. Example Usage Let’s use a simple example: In the visual example provided, imagine we have two Vue components: one showcasing a selected Pokémon, Eevee, and a carousel showcasing a variety of other Pokémon. Both components are designed to fetch data asynchronously. Without , while the data is being fetched, we would typically see two separate loading indicators: one for the Eevee Pokemon that is selected and another for the carousel. This can make the page look disjointed and be a less-than-ideal user experience. We could display a single, cohesive loading indicator by wrapping both components inside a boundary. This unified loading state would persist until all the data for both components—the single Pokémon display and the carousel—has been fetched and is ready to be rendered. Here's how you might structure the code for such a scenario: ` Here, is the component that's performing asynchronous operations. While loading, the text 'Loading...' is displayed to the user. Great! But what about when things don't go as planned and an error occurs? Currently, Vue's doesn't directly handle errors within its boundary. However, there's a neat workaround. You can use the onErrorCaptured() hook in the parent component of to catch and manage errors. Here's how it works: ` If we run this code, and let’s say that we had an error selecting our Pokemon, this is how it is going to display to the user: The error message is specifically tied to the component where the issue occurred, ensuring that it's the only part of your application that shows an error notification. Meanwhile, the rest of your components will continue to operate and display as intended, maintaining the overall user experience without widespread disruption. This targeted error handling keeps the application's functionality intact while indicating where the problem lies. Conclusion stands out as a formidable feature in Vue.js, transforming the management of asynchronous operations into a more streamlined and user-centric process. It not only elevates the user experience by ensuring smoother interactions during data loading phases but also enhances code maintainability and application performance. I hope you found this blog post enlightening and that it adds value to your Vue.js projects. As always, happy coding and continue to explore the vast possibilities Vue.js offers to make your applications more efficient and engaging!...

Apr 24, 2024

6 mins

VueWeb PerformanceUXJavaScript

#StateOfAutomation - Simple Solutions for Complex Problems

👩‍💻 Alison Dowdney (@alisondowdney)

Developer Advocate from Weaveworks

🧑‍💻 Taylor Dolezal (@onlydole)

Senior Developer Advocate from HashiCorp

🧑‍💻 Zan Markan (@zmarkan)

Developer Advocate from CircleCI

👩‍💻 Tracy Miranda (@tracymiranda)

Executive Director from Continuous Delivery Foundation

🔑 Key Takeaway Points

🧠 Resource Recommendations

Susan Ma

You might also like

State Management with Apollo Client and Vue using Reactive Variable

I Broke My Hand So You Don't Have To (First-Hand Accessibility Insights)

From Coding Lonely to DevRel Ceremony - My Apprenticeship Journey

Understanding Vue.js's <Suspense> and Async Components

You might also like

State Management with Apollo Client and Vue using Reactive Variable

I Broke My Hand So You Don't Have To (First-Hand Accessibility Insights)

From Coding Lonely to DevRel Ceremony - My Apprenticeship Journey

Understanding Vue.js's <Suspense> and Async Components