Skip to content

Giving Thanks for Diversity in Tech: Michelle Sandford

Giving Thanks for Diversity in Tech - 15 Part Series

MichelleSpeaker

Michelle Sandford is a passionate tech community organizer and prolific speaker based out of Perth, Western Australia. As an employee of Microsoft, she hosts a number of events through the company and is a key supporter of Fenders, JuniorDev, Pyladies, and Australian Computer Society.

She is the recipient of numerous awards, including Women in Technology WA (WiTWA) ’20 in 20’ Award Winner 2018, The 2018 MCV 50 Most Influential Women in Games, The 2017 MCV Pacific Women In Games List, The Game Changers Diversity and Inclusion Community Award - Microsoft 2016, and was included in the 2016 MCV Pacific 100 Most Influential Women In Games list. She has also recently delivered talks on community building in tech at GDG Melbourne, where she delivered a keynote, and at DDDPerth.

Though proud of her own accomplishments, she is equally interested in helping other women and young people enjoy the sort of career that she has. She is a mentor for SheCodes, an organization that enables women to learn Python and Djanjo through receiving mentorship from, and later providing mentorship to, peers in the program.

Michelle also just ran a diversity dinner where she asked organizations to buy a table, and give half of the seats back for women who cannot afford a seat at the table. “In this way we had a wonderful event, paid for by industry and seated with them will be students, junior devs, and role models who might want to work with those companies in the future. A very real way for organizations to put their money where their mouths are as far as diversity is concerned and for women to see who they really should work for,” she said.

She added to this sentiment, sharing, “Inclusion is about seeing people who are less privileged and using my privilege to raise them up or enable them. There is always someone who is less powerful than us, which means there is always someone each of us can do something for. Turning slightly so that you can see them and then inviting them in is what each of us can do.”

If you don’t catch Michelle at one of the many tech events she supports, you might find her at the beach with her surf board, or taking her pups for a walk!

If you would like to keep up with Michelle, you can follower her on Twitter at @msandfor.

This Dot Labs is a development consultancy that is trusted by top industry companies, including Stripe, Xero, Wikimedia, Docusign, and Twilio. This Dot takes a hands-on approach by providing tailored development strategies to help you approach your most pressing challenges with clarity and confidence. Whether it's bridging the gap between business and technology or modernizing legacy systems, you’ll find a breadth of experience and knowledge you need. Check out how This Dot Labs can empower your tech journey.

You might also like

The Open Source for All Initiative: Investing in Underrepresented Minorities in Tech -  How 2 Companies are Kicking Off 2020 with $20,000 cover image

The Open Source for All Initiative: Investing in Underrepresented Minorities in Tech - How 2 Companies are Kicking Off 2020 with $20,000

Here at This Dot Labs we are a development consultancy that is known for its work in providing opportunities to underrepresented minorities in tech. We are very excited to be partnering with StackBlitz, a company that is an online IDE used by millions of developers every month & adopted by open source projects such as Angular (Google), RxJS (Microsoft), and many others. We have teamed up this January to announce the Open Source for All Initiative to provide $20,000 of opportunities to those who need their first foot in the door. With only 50% of boot camp students able to find employment within 3 months of graduation (Dice), we both feel passionate about trying to help bridge the divide between graduating boot camp and someone's first development job. The $20,000 investment from StackBlitz and the supply of mentors (senior software engineers) from us will give paid apprenticeship opportunities for boot camp graduates to contribute to prominent open source projects. We have over 20 bootcamp partners including Fullstack Academy, Coding Dojo, Prime Academy, Vets Who Code and The Last Mile. “It’s tough to go from a bootcamp to an entry level developer role,” says Co-founder and CEO Tracy Lee, “and that challenge is compounded if you are a minority. Our apprentice program makes it easier for folks to transition to a full time job smoothly.” StackBlitz is already used by open source projects such as Angular (Google) and RxJS (Microsoft) in their documentation. "We have been very happy to work with the StackBlitz team and hosting the Angular documentation code samples on StackBlitz has been great for developers." said core team member Stephen Fluin. “StackBlitz has been a great partner at helping provide code samples in our documentation, and I admire Tracy's work with under-represented groups in tech,” says Ben Lesh of the RxJS core team, “The pairing for this initiative is great and I expect good things to come out of it.” Those interested in participating in the program as apprentices can apply here. If you’re an open source project who wishes to provide opportunities to underrepresented minorities and have great code examples in your documentation enhanced for free, sign up here. We can’t wait to work with everyone and make a difference in the tech world!...

Giving Thanks for Diversity in Tech: Maria Lamardo cover image

Giving Thanks for Diversity in Tech: Maria Lamardo

Maria Lamardo is a Front End Engineer at Pendo, who works with Vue.js and has a particular passion for web accessibility. She is a very active community organizer in the RTP area of North Carolina and beyond, serving as the founder of Devs@RTP, the NC Chapter leader for Vue Vixens, and the Co-Founder of A11y Devs. Maria has had an amazing year on the conference circuit, having spoken at VueConf US, DevFest, Vue London, All Things Open, and Vue Toronto about various topics on Vue as well as Web Accessibility. When asked about Diversity and Inclusion, Maria shared that, “Inclusion means that everyone is treated fairly and with respect; everyone should feel welcome and have their ideas heard”, adding that she feels that having more diverse hiring panels is a great first step to creating more inclusive workspaces. Maria is able to do her part to contribute to tech diversification with her work in Vue Vixens, which runs free workshops for women in tech. “ It is very important for us to be the change we want to see in the world and putting myself out there is it for me,” says, Lamardo, “I love my community and helping people grow and succeed.” She is also very excited to be launching, “Devs@RTP Teens” an offshoot of the original organization built specifically for young people. If you would like to see Maria speak, you can catch her in 2020 at Vue Amsterdam, Vue Vixens Day, as well as VueConf US! And if you are in the RTP area, she invites you to attend a Vue Vixens workshop, the A11y Devs Meetup, an event hosted by Devs@RTP! Want to keep up with everything Maria is doing in this next year? You can follow her at @MariaLamardo!...

Understanding Vue's Reactive Data cover image

Understanding Vue's Reactive Data

Introduction Web development has always been about creating dynamic experiences. One of the biggest challenges developers face is managing how data changes over time and reflecting these changes in the UI promptly and accurately. This is where Vue.js, one of the most popular JavaScript frameworks, excels with its powerful reactive data system. In this article, we dig into the heart of Vue's reactivity system. We unravel how it perfectly syncs your application UI with the underlying data state, allowing for a seamless user experience. Whether new to Vue or looking to deepen your understanding, this guide will provide a clear and concise overview of Vue's reactivity, empowering you to build more efficient and responsive Vue 3 applications. So, let’s kick off and embark on this journey to decode Vue's reactive data system. What is Vue's Reactive Data? What does it mean for data to be ”'reactive”? In essence, when data is reactive, it means that every time the data changes, all parts of the UI that rely on this data automatically update to reflect these changes. This ensures that the user is always looking at the most current state of the application. At its core, Vue's Reactive Data is like a superpower for your application data. Think of it like a mirror - whatever changes you make in your data, the user interface (UI) reflects these changes instantly, like a mirror reflecting your image. This automatic update feature is what we refer to as “reactivity”. To visualize this concept, let's use an example of a simple Vue application displaying a message on the screen: `javascript import { createApp, reactive } from 'vue'; const app = createApp({ setup() { const state = reactive({ message: 'Hello Vue!' }); return { state }; } }); app.mount('#app'); ` In this application, 'message' is a piece of data that says 'Hello Vue!'. Let's say you change this message to 'Goodbye Vue!' later in your code, like when a button is clicked. `javascript state.message = 'Goodbye Vue!'; ` With Vue's reactivity, when you change your data, the UI automatically updates to 'Goodbye Vue!' instead of 'Hello Vue!'. You don't have to write extra code to make this update happen - Vue's Reactive Data system takes care of it. How does it work? Let's keep the mirror example going. Vue's Reactive Data is the mirror that reflects your data changes in the UI. But how does this mirror know when and what to reflect? That's where Vue's underlying mechanism comes into play. Vue has a behind-the-scenes mechanism that helps it stay alerted to any changes in your data. When you create a reactive data object, Vue doesn't just leave it as it is. Instead, it sends this data object through a transformation process and wraps it up in a Proxy. Proxy objects are powerful and can detect when a property is changed, updated, or deleted. Let's use our previous example: `javascript import { createApp, reactive } from 'vue'; const app = createApp({ setup() { const state = reactive({ message: 'Hello Vue!' }); return { state }; } }); app.mount('#app'); ` Consider our “message” data as a book in a library. Vue places this book (our data) within a special book cover (the Proxy). This book cover is unique - it's embedded with a tracking device that notifies Vue every time someone reads the book (accesses the data) or annotates a page (changes the data). In our example, the reactive function creates a Proxy object that wraps around our state object. When you change the 'message': `javascript state.message = 'Goodbye Vue!'; ` The Proxy notices this (like a built-in alarm going off) and alerts Vue that something has changed. Vue then updates the UI to reflect this change. Let’s look deeper into what Vue is doing for us and how it transforms our object into a Proxy object. You don't have to worry about creating or managing the Proxy; Vue handles everything. `javascript const state = reactive({ message: 'Hello Vue!' }); // What vue is doing behind the scenes: function reactive(obj) { return new Proxy(obj, { // target = state and key = message get(target, key) { track(target, key) return target[key] }, set(target, key, value) { target[key] = value // Here Vue will trigger its reactivity system to update the DOM. trigger(target, key) } }) } ` In the example above, we encapsulate our object, in this case, “state”, converting it into a Proxy object. Note that within the second argument of the Proxy, we have two methods: a getter and a setter. The getter method is straightforward: it merely returns the value, which in this instance is “state.message” equating to 'Hello Vue!' Meanwhile, the setter method comes into play when a new value is assigned, as in the case of “state.message = ‘Hey young padawan!’”. Here, “value” becomes our new 'Hey young padawan!', prompting the property to update. This action, in turn, triggers the reactivity system, which subsequently updates the DOM. Venturing Further into the Depths If you have been paying attention to our examples above, you might have noticed that inside the Proxy` method, we call the functions `track` and `trigger` to run our reactivity. Let’s try to understand a bit more about them. You see, Vue 3 reactivity data is more about Proxy objects. Let’s create a new example: `vue import { reactive, watch, computed, effect } from "vue"; const state = reactive({ showSword: false, message: "Hey young padawn!", }); function changeMessage() { state.message = "It's dangerous to go alone! Take this."; } effect(() => { if (state.message === "It's dangerous to go alone! Take this.") { state.showSword = true; } }); {{ state.message }} Click! ` In this example, when you click on the button, the message's value changes. This change triggers the effect function to run, as it's actively listening for any changes in its dependencies__. How does the effect` property know when to be called? Vue 3 has three main functions to run our reactivity: effect`, `track`, and `trigger`. The effect` function is like our supervisor. It steps in and takes action when our data changes – similar to our effect method, we will dive in more later. Next, we have the track` function. It notes down all the important data we need to keep an eye on. In our case, this data would be `state.message`. Lastly, we've got the trigger` function. This one is like our alarm bell. It alerts the `effect` function whenever our important data (the stuff `track` is keeping an eye on) changes. In this way, trigger`, `track`, and `effect` work together to keep our Vue application reacting smoothly to changes in data. Let’s go back to them: `javascript function reactive(obj) { return new Proxy(obj, { get(target, key) { // target = state & key = message track(target, key) // keep an eye for this return target[key] }, set(target, key, value) { target[key] = value trigger(target, key) // trigger the effects! } }) } ` Tracking (Dependency Collection) Tracking is the process of registering dependencies between reactive objects and the effects that depend on them. When a reactive property is read, it's "tracked" as a dependency of the current running effect. When we execute track()`, we essentially store our effects in a Set object. But what exactly is an "effect"? If we revisit our previous example, we see that the effect method must be run whenever any property changes. This action — running the effect method in response to property changes — is what we refer to as an "Effect"! (computed property, watcher, etc.) > Note: We'll outline a basic, high-level overview of what might happen under the hood. Please note that the actual implementation is more complex and optimized, but this should give you an idea of how it works. Let’s see how it works! In our example, we have the following reactive object: `javascript const state = reactive({ showSword: false, message: "Hey young padawn!", }); // which is transformed under the hood to: function reactive(obj) { return new Proxy(obj, { get(target, key) { // target = state | key = message track(target, key) // keep an eye for this return target[key] }, set(target, key, value) { target[key] = value trigger(target, key) // trigger the effects! } }) } ` We need a way to reference the reactive object with its effects. For that, we use a WeakMap. Which type is going to look something like this: `typescript WeakMap>> ` We are using a WeakMap to set our object state as the target (or key). In the Vue code, they call this object `targetMap`. Within this targetMap` object, our value is an object named `depMap` of Map type. Here, the keys represent our properties (in our case, that would be `message` and `showSword`), and the values correspond to their effects – remember, they are stored in a Set that in Vue 3 we refer to as `dep`. Huh… It might seem a bit complex, right? Let's make it more straightforward with a visual example: With the above explained, let’s see what this Track` method kind of looks like and how it uses this `targetMap`. This method essentially is doing something like this: `javascript let activeEffect; // we will see more of this later function track(target, key) { if (activeEffect) { // depsMap` maps targets to their keys and dependent effects let depsMap = targetMap.get(target); // If we don't have a depsMap for this target in our targetMap`, create one. if (!depsMap) { depsMap = new Map(); targetMap.set(target, depsMap); } let dep = depsMap.get(key); if (!dep) { // If we don't have a set of effects for this key in our depsMap`, create one. dep = new Set(); depsMap.set(key, dep); } // Add the current effect as a dependency dep.add(activeEffect); } } ` At this point, you have to be wondering, how does Vue 3 know what activeEffect` should run? Vue 3 keeps track of the currently running effect by using a global variable. When an effect is executed, Vue temporarily stores a reference to it in this global variable, allowing the track` function to access the currently running effect and associate it with the accessed reactive property. This global variable is called inside Vue as `activeEffect`. Vue 3 knows which effect is assigned to this global variable by wrapping the effects functions in a method that invokes the effect whenever a dependency changes. And yes, you guessed, that method is our effect` method. `javascript effect(() => { if (state.message === "It's dangerous to go alone! Take this.") { state.showSword = true; } }); ` This method behind the scenes is doing something similar to this: `javascript function effect(update) { //the function we are passing in const effectMethod = () => { // Assign the effect as our activeEffect` activeEffect = effectMethod // Runs the actual method, also triggering the get` trap inside our proxy update(); // Clean the activeEffect after our Effect has finished activeEffect = null } effectMethod() } ` The handling of activeEffect` within Vue's reactivity system is a dance of careful timing, scoping, and context preservation. Let’s go step by step on how this is working all together. When we run our `Effect` method for the first time, we call the `get` trap of the Proxy. `javascript function effect(update) const effectMethod = () => { // Storing our active effect activeEffect = effectMethod // Running the effect update() ... } ... } effect(() => { // we call the the get` trap when getting our `state.message` if (state.message === "It's dangerous to go alone! Take this.") { state.showSword = true; } }); ` When running the get` trap, we have our `activeEffect` so we can store it as a dependency. `javascript function reactive(obj) { return new Proxy(obj, { // Gets called when our effect runs get(target, key) { track(target, key) // Saves the effect return target[key] }, // ... (other handlers) }) } function track(target, key) { if (activeEffect) { //... rest of the code // Add the current effect as a dependency dep.add(activeEffect); } } ` This coordination ensures that when a reactive property is accessed within an effect, the track function knows which effect is responsible for that access. Trigger Method Our last method makes this Reactive system to be complete. The trigger` method looks up the dependencies for the given target and key and re-runs all dependent effects. `javascript function trigger(target, key) { const depsMap = targetMap.get(target); if (!depsMap) return; // no dependencies, no effects, no need to do anything const dep = depsMap.get(key); if (!dep) return; // no dependencies for this key, no need to do anything // all dependent effects to be re-run dep.forEach(effect => { effect() }); } ` Conclusion Diving into Vue 3's reactivity system has been like unlocking a hidden superpower in my web development toolkit, and honestly, I've had a blast learning about it. From the rudimentary elements of reactive data and instantaneous UI updates to the intricate details involving Proxies, track and trigger functions, and effects, Vue 3's reactivity is an impressively robust framework for building dynamic and responsive applications. In our journey through Vue 3's reactivity, we've uncovered how this framework ensures real-time and precise updates to the UI. We've delved into the use of Proxies to intercept and monitor variable changes and dissected the roles of track and trigger functions, along with the 'effect' method, in facilitating seamless UI updates. Along the way, we've also discovered how Vue ingeniously manages data dependencies through sophisticated data structures like WeakMaps and Sets, offering us a glimpse into its efficient approach to change detection and UI rendering. Whether you're just starting with Vue 3 or an experienced developer looking to level up, understanding this reactivity system is a game-changer. It doesn't just streamline the development process; it enables you to create more interactive, scalable, and maintainable applications. I love Vue 3, and mastering its reactivity system has been enlightening and fun. Thanks for reading, and as always, happy coding!...