General

Hype Cycles and How Teams Should Be Organized with Jimmy Jacobson, CTO at Codingscape

Published Jul 15, 2024

Updated Dec 11, 2024

1 min read

Jimmy Jacobson, CTO at Codingscape, sits down with Tracy Lee to discuss engineering consultancy management and team organization. They talk about professional development, hype cycles, and the benefit of investing in social media and marketing both as an organization and as an individual.

Both Jimmy and Tracy stress the importance of a flat team structure, which fosters professional development and encourages collaboration among team members. As technology continues to evolve, so do business practices. It is crucial for engineering leaders to adapt and embrace new technologies and methodologies.

Tracy Lee and Jimmy Jacobson's podcast provides valuable insights into the world of engineering leadership, technology, and business. From the importance of hiring experienced engineers and product managers to the evolution of business practices, their discussions shed light on the strategies and approaches that drive success.

Download this episode here.

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.

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

9 Essential Mental Models in Developer Relations

Developer Relations (DevRel) is the glue that bonds developers and organizations. Successful DevRel professionals become experts in fostering community, which benefits both developers and organizations, and drives positive outcomes for all stakeholders involved. Below is a list of mental models often employed by DevRel experts. Which one speaks most to how would you approach developer relations? 1. The Empathy Circle Empathy is a cornerstone of DevRel. Understanding and sharing the feelings, thoughts, and perspectives of developers is crucial to building trust and strong relationships. The Empathy Circle is a mental model that reminds DevRel professionals to actively listen, ask open-ended questions, and practice radical empathy to gain deep insights into developers' experiences. 2. The Pareto Principle (80/20 Rule) The Pareto Principle, often called the 80/20 rule, suggests that roughly 80% of results come from 20% of the causes. In DevRel, this can be used to identify which developers or communities have the most significant impact on your products. By focusing efforts on the most influential groups, DevRel professionals can maximize their effectiveness. 3. Inversion Inversion is a mental model that encourages thinking in reverse. Instead of asking, "How can we get more developers to use our product?" DevRel professionals might ask, "What could make developers NOT use our product?" This approach helps identify potential roadblocks, allowing DevRel teams to proactively address issues and improve the developer experience. 4. The Ladder of Abstraction The Ladder of Abstraction, introduced by Bret Victor, is a mental model that helps DevRel professionals communicate effectively. It suggests that information can be presented at various levels of abstraction, from concrete to abstract. Understanding where a developer is on this ladder can help you tailor your messaging to their specific needs and expertise level. 5. The Innovation Adoption Curve (Rogers Adoption Curve) The Innovation Adoption Curve, also known as the Rogers Adoption Curve, classifies users into categories like innovators, early adopters, early majority, late majority, and laggards. DevRel professionals can use this model to identify where different developers fall on the adoption spectrum and tailor their strategies to meet the unique needs and concerns of each group. 6. The Hype Cycle The Hype Cycle, developed by Gartner, describes the stages that new technologies go through, from the "Innovation Trigger" to the "Plateau of Productivity." DevRel professionals can use this model to understand where their products or technologies are on the curve, and adjust their messaging and strategies accordingly. 7. The Feedback Loop Feedback is crucial for improvement. DevRel professionals should view feedback as a gift and a source of valuable information. The Feedback Loop mental model reminds them to actively seek, process, and act on feedback from developers, whether it's positive or constructive criticism. 8. The 10x Developer Myth The 10x Developer Myth is a cautionary mental model that encourages DevRel professionals to recognize that not all developers are equally productive. Treating all developers as if they're the same can lead to misunderstandings and frustration. Instead, acknowledge the diverse range of skills and experiences within the developer community. 9. The Trojan Horse Model The Trojan Horse Model encourages DevRel professionals to find creative ways to introduce their products and ideas to developers without making it feel like a sales pitch. By creating value and solving real problems for developers, you can gain their trust and loyalty over time. Conclusion DevRel professionals play a crucial role in bridging the gap between developers and the products they use. To excel in this field, adopting these mental models can be transformative. By fostering empathy, leveraging the Pareto Principle, and using other models, DevRel professionals can navigate the complexities of their roles and make a lasting impact on the developer community and their organizations. Remember, the mental models are tools, and how they are applied makes all the difference in creating meaningful connections and driving success in Developer Relations! Best of luck to you, and please do not hesitate to contact me if you have any questions about introducing a successful DevRel program in your organization....

Jan 31, 2024

3 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

Understanding the Difference Between `:focus` and `:focus-visible` in CSS

Understanding the Difference Between :focus and :focus-visible in CSS I have learned my fair share about the importance of keyboard accessibility, so I know that visual indication of the focused element is very important. But the well-known :focus pseudo-class is not always the best fit for this job. That's where :focus-visible comes in. Let's look at the differences between these two pseudo-classes and explore the best practices for using them effectively. What is the :focus Pseudo-Class? The :focus pseudo-class is a CSS selector that applies styles to any element that receives focus, regardless of how that focus was triggered. This includes focus events from keyboard navigation, mouse clicks, and touch interactions. Example Usage of :focus ` In this example, the button will display a blue outline whenever it is focused, whether the user clicks on it with a mouse, taps it on a touchscreen, or navigates to it using the keyboard. What is the :focus-visible Pseudo-Class? The :focus-visible pseudo-class is more specialized. It only applies styles to an element when the browser determines that the focus should be visible. This typically occurs when the user navigates via the keyboard or assistive technologies rather than through mouse or touch input. Example Usage of :focus-visible ` Here, the button will only show a blue outline when focused through keyboard navigation or another input method that usually requires visible focus indicators. Key Differences Between :focus and :focus-visible :focus - Behavior: Applies to any element that receives focus, regardless of the input method. - Use Cases: Ensures that all interactions with the element are visually indicated, whether by mouse, keyboard, or touch. :focus-visible - Behavior: Applies styles only when the focus should be visible, such as using a keyboard or assistive technology. - Use Cases: Ideal for scenarios where you want to provide focus indicators only to keyboard and assistive technology users while avoiding unnecessary outlines for mouse and touch users, typically required by design. Accessibility Implications :focus - Pros: - Guarantees that all users can see when an element is focused, which is critical for accessibility. - Cons: - Can lead to a suboptimal experience for mouse users, as focus styles may appear unnecessarily during mouse interactions. :focus-visible - Pros: - Enhances user experience by showing focus indicators only when necessary, thus keeping the interface clean for mouse and touch users. - Tailors the experience for keyboard and assistive technology users, providing them with clear visual cues. - Cons: - Additional considerations may be required to ensure that focus indicators are not accidentally omitted, especially in older browsers that do not support :focus-visible. - There may be cases where you want to show focus indicators for all users, regardless of input method. Best Practices for Using :focus and :focus-visible To achieve the best accessibility and user experience, combining both :focus and :focus-visible in your CSS is often a good idea. Combining :focus and :focus-visible ` Here is a Stackblitz example of what such styling could look like for you to try out and play with. Additional Tips - Test with Keyboard and Assistive Technology: Ensure that your web application is navigable using a keyboard (Tab, Shift + Tab, etc.) and that focus indicators are visible for those who rely on them. It's never a bad idea to include accessibility testing in your e2e testing suite. - Provide Clear Focus Indicators: Make sure that focus indicators are prominent and easy to see. A subtle or hard-to-spot focus indicator can severely impact accessibility for users who rely on keyboard navigation. Conclusion The :focus-visible pseudo-class offers a more refined way to manage focus indicators, improving accessibility and user experience, particularly for keyboard and assistive technology users. By understanding the differences between :focus and :focus-visible, and applying best practices in your CSS, you can create more accessible and user-friendly web applications. Remember, accessibility should never be an afterthought. By thoughtfully applying focus styles, you ensure that all users, regardless of how they interact with your site, can easily navigate and interact....

Nov 8, 2024

3 mins

AccessibilityCSSPlaywright

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.

Hype Cycles and How Teams Should Be Organized with Jimmy Jacobson, CTO at Codingscape

You might also like

This is the Worst Thing a DevRel Team Could Do

9 Essential Mental Models in Developer Relations

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

Understanding the Difference Between `:focus` and `:focus-visible` in CSS

Let's innovate together!

You might also like

This is the Worst Thing a DevRel Team Could Do

9 Essential Mental Models in Developer Relations

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

Understanding the Difference Between `:focus` and `:focus-visible` in CSS