Javascript

How to Contribute to Redux with Mark Erikson

Published Mar 10, 2022

Updated Feb 13, 2023

2 min read

This article was written over 18 months ago and may contain information that is out of date. Some content may be relevant but please refer to the relevant official documentation or available resources for the latest information.

We are kicking off a brand new series of videos in 2022 to help developers learn how they can contribute code to some of the world’s most popular JavaScript frameworks and technologies. Subscribe to This Dot Media’s Youtube Channel.

For those interested in React state management, I sat down with Mark Erikson, maintainer of Redux recently! If you would like to check out that interview, you can see it here.

What is Redux?

Redux is an open source JavaScript library that helps developers manage and centralize global state in their large-scale applications. By wrapping state in a store, you can alert all code that subscribes to the store of updates to the state.

Mark Erikson

Mark Erikson started contributing to Redux in 2016. After working with JavaScript and Backbone for years, Mark began learning React and Redux, which eventually led him to a chat channel called Reactiflux.

While hanging out on these channels, he noticed a ton of people asking the same questions, which inspired him to volunteer to write an FAQ page for the Redux project. Shortly after, Redux co-creator Dan Abramov gave Mark commit rights to the repository, allowing him to triage issues and answer questions.

This goes to show anyone can contribute to open source - you just need to get started!

What to Know Before You Get Started

Before jumping into contributing to Redux, it's important to know a few key things about the repository:

There are three primary repositories within the Redux org. These include redux-core, react-redux, and redux-toolkit.
Redux-toolkit is how the team wants people to use Redux today and where the bulk of the open source work is taking place.
Each repository is structured similarly, so once you understand one, it'll be easy to understand the other two!

First Steps for Contributing

Since most of the work is taking place in redux-toolkit, new developers will find that it is the most active. In fact, new contributors can learn more, and even help out by reading and responding to questions in the discussions tab located in redux-toolkit as a way to start contributing easily.

Redux-toolkit also has many open issues that developers can work on or triage! Developers can help by reproducing bugs or by editing and adding to documentation.

If you're interested in helping in redux-core, Mark is looking for TypeScript experts who are interested in reviewing types!

If you are interested in contributing but need a little additional guidance, Mark invites you to reach out to him with your questions and he will do his best to get back to you!

Good luck contributing, and we hope you have fun submitting your first PR to Redux!

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.

About the author(s)

Tracy Lee
Partner, This Dot Google Developer Expert (Angular, TC39, Web) RxJS Core Team & Lead for RxJS Learning Team Contributor to Angular, RxJS, EmberJS

Key Strengths:
- Teaching developer relations strategies
- Influencer marketing
- Developing brands
- Community strategies and maintenance
- Creating product launch strategies
- Leading marketing operations efforts & standards
- Effective conference presence & speaking strategies
@ladyleet @ladyleet

D1 SQLite: Writing queries with the D1 Client API

Writing queries with the D1 Client API In the previous post we defined our database schema, got up and running with migrations, and loaded some seed data into our database. In this post we will be working with our new database and seed data. If you want to participate, make sure to follow the steps in the first post. We’ve been taking a minimal approach so far by using only wrangler and sql scripts for our workflow. The D1 Client API has a small surface area. Thanks to the power of SQL, we will have everything we need to construct all types of queries. Before we start writing our queries, let's touch on some important concepts. Prepared statements and parameter binding This is the first section of the docs and it highlights two different ways to write our SQL statements using the client API: prepared and static statements. Best practice is to use prepared statements because they are more performant and prevent SQL injection attacks. So we will write our queries using prepared statements. We need to use parameter binding to build our queries with prepared statements. This is pretty straightforward and there are two variations. By default we add ? ’s to our statement to represent a value to be filled in. The bind method will bind the parameters to each question mark by their index. The first ? is tied to the first parameter in bind, 2nd, etc. I would stick with this most of the time to avoid any confusion. ` I like this second method less as it feels like something I can imagine messing up very innocently. You can add a number directly after a question mark to indicate which number parameter it should be bound to. In this exampl, we reverse the previous binding. ` Reusing prepared statements If we take the first example above and not bind any values we have a statement that can be reused: ` Querying For the purposes of this post we will just build example queries by writing them out directly in our Worker fetch handler. If you are building an app I would recommend building functions or some other abstraction around your queries. select queries Let's write our first query against our data set to get our feet wet. Here’s the initial worker code and a query for all authors: ` We pass our SQL statement into prepare and use the all method to get all the rows. Notice that we are able to pass our types to a generic parameter in all. This allows us to get a fully typed response from our query. We can run our worker with npm run dev and access it at http://localhost:8787 by default. We’ll keep this simple workflow of writing queries and passing them as a json response for inspection in the browser. Opening the page we get our author results. joins Not using an ORM means we have full control over our own destiny. Like anything else though, this has tradeoffs. Let’s look at a query to fetch the list of posts that includes author and tags information. ` Let’s walk through each part of the query and highlight some pros and cons. ` * The query selects all columns from the posts table. * It also selects the name column from the authors table and renames it to author_name. * It aggregates the name column from the tags table into a JSON array. If there are no tags, it returns an empty JSON array. This aggregated result is renamed to tags. ` * The query starts by selecting data from the posts table. * It then joins the authors table to include author information for each post, matching posts to authors using the author_id column in posts and the id column in authors. * Next, it left joins the posts_tags table to include tag associations for each post, ensuring that all posts are included even if they have no tags. * Next, it left joins the tags table to include tag names, matching tags to posts using the tag_id column in posts_tags and the id column in tags. * Finally, group the results by the post id so that all rows with the same post id are combined in a single row SQL provides a lot of power to query our data in interesting ways. JOIN ’s will typically be more performant than performing additional queries.You could just as easily write a simpler version of this query that uses subqueries to fetch post tags and join all the data by hand with JavaScript. This is the nice thing about writing SQL, you’re free to fetch and handle your data how you please. Our results should look similar to this: ` This brings us to our next topic. Marshaling / coercing result data A couple of things we notice about the format of the result data our query provides: Rows are flat. We join the author directly onto the post and prefix its column names with author. ` Using an ORM we might get the data back as a child object: ` Another thing is that our tags data is a JSON string and not a JavaScript array. This means that we will need to parse it ourselves. ` This isn’t the end of the world but it is some more work on our end to coerce the result data into the format that we actually want. This problem is handled in most ORM’s and is their main selling point in my opinion. insert / update / delete Next, let’s write a function that will add a new post to our database. ` There’s a few queries involved in our create post function: * first we create the new post * next we run through the tags and either create or return an existing tag * finally, we add entries to our post_tags join table to associate our new post with the tags assigned We can test our new function by providing post content in query params on our index page and formatting them for our function. ` I gave it a run like this: http://localhost:8787authorId=1&tags=Food%2CReview&title=A+review+of+my+favorite+Italian+restaurant&content=I+got+the+sausage+orchette+and+it+was+amazing.+I+wish+that+instead+of+baby+broccoli+they+used+rapini.+Otherwise+it+was+a+perfect+dish+and+the+vibes+were+great And got a new post with the id 11. UPDATE and DELETE operations are pretty similar to what we’ve seen so far. Most complexity in your queries will be similar to what we’ve seen in the posts query where we want to JOIN or GROUP BY data in various ways. To update the post we can write a query that looks like this: ` COALESCE acts similarly to if we had written a ?? b in JavaScript. If the binded value that we provide is null it will fall back to the default. We can delete our new post with a simple DELETE query: ` Transactions / Batching One thing to note with D1 is that I don’t think the traditional style of SQLite transactions are supported. You can use the db.batch API to achieve similar functionality though. According to the docs: Batched statements are SQL transactions ↗. If a statement in the sequence fails, then an error is returned for that specific statement, and it aborts or rolls back the entire sequence. ` Summary In this post, we've taken a hands-on approach to exploring the D1 Client API, starting with defining our database schema and loading seed data. We then dove into writing queries, covering the basics of prepared statements and parameter binding, before moving on to more complex topics like joins and transactions. We saw how to construct and execute queries to fetch data from our database, including how to handle relationships between tables and marshal result data into a usable format. We also touched on inserting, updating, and deleting data, and how to use transactions to ensure data consistency. By working through these examples, we've gained a solid understanding of how to use the D1 Client API to interact with our database and build robust, data-driven applications....

Dec 23, 2024

6 mins

JavaScript

The HTML Dialog Element: Enhancing Accessibility and Ease of Use

The HTML Dialog Element: Enhancing Accessibility and Ease of Use Dialogs are a common component added to applications, whether on the web or in native applications. Traditionally there has not been a standard way of implementing these on the web, resulting in many ad-hoc implementations that don’t act consistently across different web applications. Often, commonly expected features are missing from dialogs due to the complexity of implementing them. However, web browsers now offer a standard dialog element. Why use the dialog element? The native dialog element streamlines the implementation of dialogs, modals, and other kinds of non-modal dialogs. It does this by implementing many of the features needed by dialogs for you that are already baked into the browser. This is helpful as it reduces the burden on the developer when making their applications accessible by ensuring that user expectations concerning interaction are met, and it can also potentially simplify the implementation of dialogs in general. Basic usage Adding a dialog using the new tag can be achieved with just a few lines of code. ` However, adding the dialog alone won’t do anything to the page. It will show up only once you call the .showModal() method against it. ` Then if you want to close it you can call the .close() method on the dialog, or press the escape key to close it, just like most other modals work. Also, note how a backdrop appears that darkens the rest of the page and prevents you from interacting with it. Neat! Accessibility and focus management Correctly handling focus is important when making your web applications accessible to all users. Typically you have to move the current focus to the active dialog when showing them, but with the dialog element that’s done for you. By default, the focus will be set on the first focusable element in the dialog. You can optionally change which element receives focus first by setting the autofocus attribute on the element you want the focus to start on, as seen in the previous example where that attribute was added to the close element. Using the .showModal() method to open the dialog also implicitly adds the dialog ARIA role to the dialog element. This helps screen readers understand that a modal has appeared and the screen so it can act accordingly. Adding forms to dialogs Forms can also be added to dialogs, and there’s even a special method value for them. If you add a element with the method set to dialog then the form will have some different behaviors that differ from the standard get and post form methods. First off, no external HTTP request will be made with this new method. What will happen instead is that when the form gets submitted, the returnValue property on the form element will be set to the value of the submit button in the form. So given this example form: ` The form element with the example-form id will have its returnValue set to Submit. In addition to that, the dialog will close immediately after the submit event is done being handled, though not before automatic form validation is done. If this fails then the invalid event will be emitted. You may have already noticed one caveat to all of this. You might not want the form to close automatically when the submit handler is done running. If you perform an asynchronous request with an API or server you may want to wait for a response and show any errors that occur before dismissing the dialog. In this case, you can call event.preventDefault() in the submit event listener like so: ` Once your desired response comes back from the server, you can close it manually by using the .close() method on the dialog. Enhancing the backdrop The backdrop behind the dialog is a mostly translucent gray background by default. However, that backdrop is fully customizable using the ::backdrop pseudo-element. With it, you can set a background-color to any value you want, including gradients, images, etc. You may also want to make clicking the backdrop dismiss the modal, as this is a commonly implemented feature of them. By default, the <dialog> element doesn’t do this for us. There are a couple of changes that we can make to the dialog to get this working. First, an event listener is needed so that we know when the user clicks away from the dialog. ` Alone this event listener looks strange. It appears to dismiss the dialog whenever the dialog is clicked, not the backdrop. That’s the opposite of what we want to do. Unfortunately, you cannot listen for a click event on the backdrop as it is considered to be part of the dialog itself. Adding this event listener by itself will effectively make clicking anywhere on the page dismiss the dialog. To correct for this we need to wrap the contents of the dialog content with another element that will effectively mask the dialog and receive the click instead. A simple element can do! ` Even this isn’t perfect though as the contents of the div may have elements with margins in them that will push the div down, resulting in clicks close to the edges of the dialog to dismiss it. This can be resolved by adding a couple of styles the the wrapping div that will make the margin stay contained within the wrapper element. The dialog element itself also has some default padding that will exacerbate this issue. ` The wrapping div can be made into an inline-block element to contain the margin, and by moving the padding from the parent dialog to the wrapper, clicks made in the padded portions of the dialog will now interact with the wrapper element instead ensuring it won’t be dismissed. Conclusion Using the dialog element offers significant advantages for creating dialogs and modals by simplifying implementation with reasonable default behavior, enhancing accessibility for users that need assistive technologies such as screen readers by using automatic ARIA role assignment, tailored support for form elements, and flexible styling options....

Oct 25, 2024

4 mins

HTMLJavaScript

How to Provide Value to Your Organization in a Developer Relations Role

A few years ago, a multi-billion dollar corporation we all know and love hired what could be perceived as every developer with Twitter influence on the market into a Developer Relations role. Suddenly, everyone you spoke to worked at the said corporation. While many of us were excited to see the value of Developer Relations recognized by a prominent tech organization, many were also left scratching their heads at the alignment, or lack thereof, between what those hired Developer Relations professionals did to “evangelize or build” and how it related to their employer. A majority of those DevRel professionals were not even creating value in communities related to that organization’s products. An insider look will tell you that the reason is that those hired were just told to “keep doing what they were doing” and not given any additional direction or focus outside of that. Without clearly defined expectations, DevRel professionals cannot provide value to your organization. This is not sustainable and no one wants this. Below is a list of four ways that those in developer relations can deliver value to their organizations. Aligning with your Organization's Goals and Objectives DevRel professionals recognize that all activities should be tangentially related to providing value to the organization and ensure that these activities contribute to the organization's goals and objectives. The best way to align DevRel efforts with organizational goals is to make sure you understand what the strategic objectives of your organization are. Is it product awareness? Is it customer satisfaction? Is it revenue growth? Is it pushing new concepts in a market? Is it fostering innovation? Depending on the objective, you will be able to better tailor your DevRel efforts to the organization. Product Awareness as a Goal For example, if the current goal of the company is product awareness, Developer Evangelism is the best way to provide value. Twilio is still the canonical example of evangelism done right. In the beginning, Twilio needed to spread awareness of their product, and show developers how easy it was to use. They did this by showing up at events with developer-centric swag, creating the best tutorials for developers to follow, giving workshops on how to use Twilio APIs, giving talks about how to use Twilio, and creating a strong community of Twilio adopters that shared their use cases around the internet. Through this, the perception was that Twilio was the best solution, and considered the easiest, most obvious tool choice to use when developers were trying to build unique communication features and capabilities like voice, text, chat, video, and email into their applications. Customer Satisfaction as a Goal If the organizational goal is customer satisfaction, then Developer Community and Developer Experience are the two areas a DevRel professional should key in on. By building a community and creating customer feedback loops where developers can share struggles, and their issues can be heard and resolved directly by engineers and product in a quick manner, customer satisfaction will increase because you are helping solve the pain points of using the product. Creating a community allows other developers adopting the product to bond and share solutions in an open forum. Currently, most organizations choose Discord as a way to engage developers and build community. As a DevRel professional, you are in a unique position to help with the Developer Experience in a way that engineers may not be able to. For example, the customer satisfaction metrics may be affected by a lack of documentation, which can easily be solved by improving the documentation where you see the pain points. This does not require engineering or product to get involved and can often solve developer problems overnight. There may be an issue with the migration of one technology to another. Many Developer Relations professionals have built excellent migration tools to help developers ease this pain. Having the flexibility to work outside of the product roadmap and engineering sprints can serve as an invaluable resource for organizations and serving their needs, and the needs of their users. Revenue Growth as a Goal If the goal for your organization is revenue growth, then helping get developers into the top of the sales funnel is key to providing value to your organization. This does not have to be done in a way that compromises the other principle of DevRel or the core value either. One example I’ll bring up again is Test Automation University by Applitools. By providing a free resource that was able to garner the interest of over 150,000 developers through a DevRel initiative (shout out to Angie Jones for leading this initiative), Applitools was able to collect the email addresses of all these individuals and engage them. Since our focus is DevRel and contributing to the top of the funnel, I won’t speak to the “right way” sales or marketing should engage these developers, but I will say it is critical for DevRel to educate and advocate for marketing and sales to engage with these developers the right way that does not erode brand trust. Delivering Value to Your Organization Delivering value to an organization while upholding the core value of authenticity is not difficult. The hardest part is advocating internally to stakeholders within the organization on the approach to developers and helping them understand the “why” behind the DevRel strategy you are employing. Balancing authenticity and providing value to both the community and to organizations allows DevRel professionals to thrive and achieve mutual success for both developers and the organizations they support. Through living these core values and principles, Developer Relations is the way to forge a path of innovation, collaboration, and long-term success in the technology....

Mar 8, 2024

4 mins

DevRel

Building a Stripe App: A Step-by-Step Guide to QR Code Generation

Building a Stripe App: A Step-by-Step Guide to QR Code Generation Why Build a Stripe App? I recently participated in an audio space with the Stripe team, and something they said really stuck with me: the Stripe app store is a growing area that isn't overly saturated yet. There's a lot of potential for new apps, and companies can use this opportunity to grow. I work at a company called This Dot Labs, and we've created several Stripe apps and even own one. After looking at the data, I can confirm that the Stripe team was right! Creating a QR Code Generator App For this tutorial, we'll build a QR code app that can take a URL and generate a code for it. This is a good use case to help you understand the ins and outs of Stripe's developer tools. Why QR Codes? QR codes are useful tools that have become common in e-commerce, restaurants, and other industries. While Stripe already has a QR code tool, we'll make our own to familiarize ourselves with their syntax and problem-solving approaches. Project Structure Before we dive into the implementation, let's look at the structure of our Stripe App QR Code project: * .vscode: Contains settings for Visual Studio Code * source/views: Holds the main application views * .gitignore: Specifies files to ignore in version control * stripe-app.json: Defines the Stripe app configuration * ui-extensions.d.ts: TypeScript declaration file for UI extensions * .build: this is where the built Stripe app gets placed. Step-by-Step Implementation 1\. Install Stripe Locally First, you need to install Stripe on your local machine. The documentation provides great instructions for this: * For Mac users: Use Brew to install * For Windows users: Download the package and add it to your environment variables You can find the details here in the stripe docs to install the Stripe CLI https://docs.stripe.com/stripe-cli When using Windows, you must do stripe login from Powershell, NOT from Git bash or any other tool. After the server is up, then you can continue using git bash for everything else. After stripe login, you need to enter stripe apps start. Once you do that, the server is up and running and you can go back to using git bash or any other tool. 2\. Install Dependencies We'll be using an extra package for QR code generation. Install it using npm: ` 3\. Set Up the Main Component Let's look at the home.tsx file, where we'll use Stripe's UI components: ` These components are similar to other UI libraries like Bootstrap or Tailwind CSS. 4\. Create the UI Structure Our app will have: * An input field for the URL * Validation using a regex pattern * Error handling for invalid URLs * QR code generation and display Here is the Home.tsx file that is located in the src/views folder ` * ContextView` is at the top level of the app where we see the Title and the link to the Stripe Docs that we placed in our Context View. * Box is how you use Divs. * Banners can be used to show notification errors or any other item you wish to display. * Textfields are input fields. * Everything else is pretty self-explanatory. 5\. Handle Content Security Policy One problem I personally ran into was when I tried to redirect users, the Stripe policies would block it since I did not express that I knew what it was doing. I had to go into the stripe-app.json file and mention the specific security policies. For this particular exercise, I kept these as null. This is my stripe-app.json file. ` 6\. Configure App Views As you can see here, the stripe-app.json file shows the views for each file I have. The Home.tsx file and the Invoice.tsx are also included This is our way of saying that for each view we have, show the app functionality on that page. Our stripe-app.json file will show it but also, the manifest.js file in our .build folder will also show the same. Any view that doesn't have a file will not show the application's functionality. So, if I were to go to transactions, the app would not show the same logic as the home or invoices page. By following these steps, you'll have a fully functional QR code generator app for Stripe. This is just a simple example, but the potential for Stripe apps is massive, especially for businesses serving e-commerce customers. If you need help or get stuck, don't hesitate to reach out, danny.thompson@thisdot.co. The Stripe team is also very active in answering questions, so leverage them as a resource. Happy coding!...

Dec 18, 2024

4 mins

stripe

Let's innovate together!

We're ready to be your trusted technical partners in your digital innovation journey.

Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.

How to Contribute to Redux with Mark Erikson

Tracy Lee

You might also like

D1 SQLite: Writing queries with the D1 Client API

The HTML Dialog Element: Enhancing Accessibility and Ease of Use

How to Provide Value to Your Organization in a Developer Relations Role

Building a Stripe App: A Step-by-Step Guide to QR Code Generation

Let's innovate together!

You might also like

D1 SQLite: Writing queries with the D1 Client API

The HTML Dialog Element: Enhancing Accessibility and Ease of Use

How to Provide Value to Your Organization in a Developer Relations Role

Building a Stripe App: A Step-by-Step Guide to QR Code Generation