Javascript

How to Contribute to Redwood.JS

Published Feb 1, 2022

Updated Jan 30, 2023

3 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.

This Dot Media is 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.

In our first episode, I sat down with David Price one of the creators and maintainers of RedwoodJS! If you would like to watch this interview, you can find it here!

What is RedwoodJS?

RedwoodJS is an app framework built on React, Prisma, and GraphQL that is especially useful for startups interested in prototyping since it integrates everything someone would need to carry out fullstack development out of the box. These integrations include Storybook, Webpack/Babel, and more with zero configurations.

The goal of RedwoodJS is, in part, to allow developers to focus on what makes their applications unique and interesting by handling a lot of the configuration logic inherent to deploying fullstack applications.

David Price

David Price is the Founder of human(Ethos), a San Francisco-based consulting firm that helps product teams build cultures of performance, and currently works as a Developer in Residence at Preston-Warner Ventures. Beyond this, David is one of the Creators of Redwood.JS, and serves as a Maintainer.

Important Resources to Check Out Before Contributing

If you would like to learn more about the specific features offered by RedwoodJS, you can read up on the official documentation here.

You can check out the RedwoodJS repository here. David suggests that new users spend time in the packages folder since these are all the packages that will get published to npm.

And finally, if you would like to become engaged with other developers interested in RedwoodJS, you can join the official community server and/or the official discord server.

The Best Way to Get Started

Before contributing any code to RedwoodJS’ open-source repository, David Price suggests introducing yourself to and getting support from the larger RedwoodJS community using some of the resources above:

“The way to get started is to get the moral support in the community, and say you are interested in helping out! And they can direct you!”

Not only will that give new contributors an idea of what current projects are in the works and where they can help, but it can help them connect with other developers who will direct them to the most ability-appropriate tasks.

PRO-TIP from David: There is a file in the repo itself, called contributing.md, that shows you how to get started on actual contributions!

New contributors can also click on the “help wanted” tab in Github issues to see what work is needed, and available! There are also tags called “good first issue”, which are great entry points to the project. Another tag is “bug/confirmed”, which allows contributors to help with bugs!

Great at reviewing code? Code reviews support functional testing in the PRs! Inside of the CI checks, there is a link to Gitpod which will pull up a VScode virtual editor that creates a test project. You can use this to help run tests! Anyone can come into a PR, run a test, and go through the process to report back what worked and didn't work.

Attending RedwoodJS Contributor Meetups

Visit the community forums for RedwoodJS to learn more about how the community is structured. As mentioned above, there are a number of useful discussion boards where you can find information about announcements, docs, and opportunities to contribute. Once you are active on the forums, you will be eligible to receive invitations to private contributor meetups, but be sure to ask for one, since there may not be Core Contributors who are actively searching for folks to invite!

Contributor Success Stories

Peter Colapietro started opening and contributing to PRs for Hacktoberfest. Because of his consistent, high quality work since October, he now helps with the Storybook team, working on a really important PR!
There are collaborators working with diversity outreach for Redwood.JS, and they have been brainstorming a lot of ideas on how to get people involved! Multiple contributors have landed jobs after working with RedwoodJS. The community has been growing and evolving. Jobs are being created within the community.

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

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

Why is It so HARD to Break Into Tech with Jason Torres

Tracy Lee and Rob Ocel chat with Jason Torres about the challenges of breaking into tech, especially for self-taught and underrepresented developers. Jason shares his journey from a 15-year career in the film industry to pursuing software development, discussing the emotional and financial hurdles involved. They also discuss the importance of networking, finding a niche rather than mastering everything, and the impact of the tech downturn on junior developers. Chapters 1. Introduction and Tech Career Journeys (00:00 - 02:30) 2. The Struggles of Breaking Into Tech (02:31 - 06:00) 3. Jason’s Career Pivot from Film to Tech (06:01 - 10:30) 4. The Importance of Networking and Community (10:31 - 15:00) 5. Specializing vs. Being a Generalist in Tech (15:01 - 20:00) 6. Finding Your Path in Tech (20:01 - 25:30) 7. Dealing with Imposter Syndrome and Belonging (25:31 - 30:00) 8. Final Thoughts and Tips for Breaking Into Tech (30:01 - 33:00) 9. Closing Remarks and Tech Talk Humor (33:01 - End) Follow Jason Torres on Social Media Twitter: https://x.com/TasonJorres Linkeidn: https://www.linkedin.com/in/thejasontorres/ Sponsored by Wix Studio: https://www.wix.com/studio...

Oct 8, 2024

1 min

Software EngineerOpen Source

This is the Worst Thing a DevRel Team Could Do

At its core, a successful Developer Relations (DevRel) program focuses on forming strong connections within its target audience to ensure that developers can easily connect with the company or organization behind the product they’re using. Great teams in DevRel build genuine relationships, earn trust, and actively engage with developers. DevRel takes a different approach from traditional marketing strategies. Instead of just chasing numbers and leads for sales, it puts emphasis on making developers happy and retention. This creates a cycle of feedback between users and a company, helping to better understand their needs and fostering a sense of community among users. There have been organizations that consider DevRel a revenue-driving function, but this is where challenges arise, since DevRel teams cannot consistently show value in this area and meet the expectations of stakeholders expecting this based on where their focus and the profession lies. When DevRel professionals are forced to be revenue drivers, the breakdown between developers and that company is inevitable. Developers can smell hidden agendas from a mile away. They realize when their needs are being overlooked in favor of sales initiatives. *“Companies fail at DevRel when they try to turn them into sales teams. This hurts customer trust.” - Michael Liendo, Senior Developer Advocate at AWS. * Developers care about education, resources, opportunities, and the overall experience of a product or platform. When they are a target for sales pitches, they leave or shut down. Their focus is getting the job done, and they talk to companies to solve problems in their development lifecycle, not to be on the receiving end of a pitch. Furthermore, since all successful DevRel teams are focused on building authentic relationships with developers, strategic partnerships with other organizations will be hard to come by or have dismal retention numbers since no one wants to be associated with trying to sell to developers. Good DevRel teams are focused on helping developers and understand that being helpful goes a long way to help the sales cycle. Many DevRel efforts also focus on providing value to a community before asking for something in return. The trust and authenticity of brand building in this area and those initiatives - the loyalty a DevRel team is trying to generate - many times does not make direct corollary sense from a monetary perspective, and sales organizations often overlook the non-monetary value and impact these efforts generate and how they correlate to long-term growth for an organization. In DevRel, genuine connections matter more than immediate revenue. When teams prioritize developers' needs over sales, trust grows, fostering lasting relationships that drive long-term success. Treating DevRel as solely a sales function erodes trust and misses the true value of building authentic partnerships and community loyalty. Interested in learning more about launching your own DevRel program, feel free to reach out!...

Mar 6, 2024

2 mins

DevRel

Learning Paths for Next.JS Developers with Ankita Kulkarni

In this video, Rob Ocel and co-hosts Tracy Lee, Adam Rackis, and Danny Thompson talk with tech educator Ankita Kulkarni about her journey from engineering leader to full-time educator. Ankita shares insights on teaching Next.js, bridging practical knowledge gaps, and helping developers tackle real-world challenges. They discuss Next.js as a React-based framework, its benefits, and the challenges it presents for beginners. Chapters - Introduction to the Podcast and Guests 00:01 - Meet Ankita Kulkarni, Tech Educator 00:26 - Ankita's Transition to Full-Time Education 01:41 - Teaching Practical Knowledge in Next.js 03:19 - Effective Methods for Teaching Next.js 05:27 - Challenges of Being a Full-Time Educator 07:48 - Balancing Broad and Specific Examples 09:54 - Embracing Mistakes as a Teaching Tool 12:13 - Pair Programming and Mentorship 14:00 - Discussion on Next.js and Framework Adoption 16:48 - Advantages and Challenges of Next.js 18:12 - Choosing the Right Framework for Your Needs 20:35 - Impact of Next.js in React Documentation 22:26 - Learning Paths for New Developers 23:24 - The Rise of Full-Stack Web Development 25:09 - Benefits of Frameworks Abstracting Complexity 26:27 - OpenNext and Deployment Flexibility 28:06 - Ankita's Excitement for New Next.js Features 30:35 - The Future of Next.js Without Vercel 32:16 - Final Thoughts and Where to Find Everyone Online 34:21 Follow Ankita Kulkarni on Social Media Twitter: https://x.com/kulkarniankita9 YouTube: https://www.youtube.com/@kulkarniankita Sponsored by This Dot: thisdot.co...

Nov 12, 2024

2 mins

NextJSJavaScript

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 Redwood.JS

Tracy Lee

You might also like

The HTML Dialog Element: Enhancing Accessibility and Ease of Use

Why is It so HARD to Break Into Tech with Jason Torres

This is the Worst Thing a DevRel Team Could Do

Learning Paths for Next.JS Developers with Ankita Kulkarni

Let's innovate together!

You might also like

The HTML Dialog Element: Enhancing Accessibility and Ease of Use

Why is It so HARD to Break Into Tech with Jason Torres

This is the Worst Thing a DevRel Team Could Do

Learning Paths for Next.JS Developers with Ankita Kulkarni