Cord's Product and Engineering Blog

  1. Blog cover graphic showing a chat interface powered by React components

    Cord SDK
    React Chat Library

    In a world of AI agents and real-time collaborative software like Figma and Notion, there's never been more reason to get live chat and commenting experiences into your application. The Cord SDK is an excellent choice for building from nothing to a 10/10 chat experience.

    • Engineering
    Jackson Gabbard, Senior Frontend Engineer and Co-founder of CordJackson Gabbard
  2. A gathering of quizzers at Cord's office

    Cord Tech Pub Quiz #5

    Our 5th event in the tech pub quiz series. This post documents the event and includes all the questions and answers. It was a wonderful evening of "Aha!" and "Oh... no...". Thanks to everyone who joined us!

    • Engineering
    Jackson Gabbard, CTO and Co-founder of Cord.comJackson Gabbard
  3. Na-na na-na na-na na-na Chat Man!

    What is Cord?
    An SDK for Chat

    Ah, the classic tale of "let's build a chat feature, it'll be easy," said every tech team ever. Spoiler: it's not. This post navigates the labyrinth that is the creation of a chat feature for SaaS applications, emphasizing that while chat may seem like a frivolous addition, it's actually the lifeblood of online collaboration. TL;DR: For most teams, building with a chat SDK or chat NPM package is a much more efficient way to get to a great chat feature.

    • Engineering
    • Product
    A picture of Jackson Gabbard, software engineer for chat, commenting, and other communication featuresJackson Gabbard
  4. Image of Doug Li in a presence facepile next to the title "Building Collaboration"

    Podcast Transcript
    OpenAI Engineer Doug Li: Yes, We Also Use ChatGPT

    Engineering expert, Doug Li, talks about his experience working at OpenAI, and how it compares to his time at early-Facebook. Listen now to learn how he uses AI in his workflows, what his favorite developer tools are, the last thing he committed to the codebase, and how he predicts AI will evolve over the next decade.

    • Engineering
  5. Web Developers, CSS-in-JS is Ruining Your Product

    Launch Notes
    Migrating from CSS-in-JS to Vanilla Extract

    Developer experience matters. A lot. Unfortunately, CSS-in-JS just doesn't give folks using Cord's SDK the flexibility and speed they need. So we tried something new: Vanilla Extract.

    • Engineering
    A picture of Alberto from EngineeringAlberto Morabito
    A picture of Alberto from EngineeringLudo Fardel
  6. an image

    In Depth
    Building an AI Chatbot with Cord

    In this post, we'll walk through the steps required to craft your own AI-powered chatbot. By the end of this post, you'll have all the core concepts required to understand how to turn your content into a knowledgeable and helpful chatbot.

    • Engineering
    Jackson Gabbard, Cord's CTO and Co-founderJackson Gabbard
  7. an image

    Launch Notes
    Connect Your Own Slack App With Cord

    Now, with Cord’s APIs and webhooks, you can connect your own Slack app to Cord, and bi-directionally sync comments, shared files, and other changes happening in your product.

    • Engineering
    A picture of Gillian from EngineeringGillian Yeomans
  8. An image of a bright white arrow crashing into an exploding maroon star

    Launch Notes
    Not Today, ShadowDOM. Not Today.

    Cord initially embraced the ShadowDOM for its WebComponents, aiming to prevent CSS interference between components and the host page. However, we quickly discovered its restrictive nature, which hindered customization and introduced a steep learning curve for developers. After experimenting with alternatives like CSS variables and CSS Parts, we've reverted to vanilla CSS classnames and open WebComponents, prioritizing developer experience and flexibility over strict encapsulation.

    • Engineering
  9. an image

    Expert Insights
    Cord vs. Automerge

    Want to add collaborative features to your product? In this article, we explore the difference between Cord's SDK and Automerge and explain how to determine which is right for you.

    • Engineering
    A picture of Jackson GabbardJackson Gabbard
  10. an image

    Launch Notes
    Introducing Cord's Notification Components

    Introducing Cord's new components: Notification List and Notification List Launcher. Learn how to use and customise these new features, and why your customers and your developers will love them.

    • Engineering
    Josh Watzman
    Terrence Chung
  11. an image

    Stacked Diffs on GitHub with SPR!

    Until now, the Stacked Diff Workflow was something you could only dream about if your team uses GitHub for code review. Sven Over, a senior engineer Cord, decided it was time for that to change.

    • Engineering
    an imageJackson Gabbard
  12. an image

    Tech Pub Quiz #3

    Behold! The questions (and answers!) to our 3rd edition of the Cord Tech Pub Quiz. Our largest turn out so far, we had four teams duking it out for the crown.

    • Engineering
    an imageJackson Gabbard
  13. an image

    Tech Pub Quiz #2

    Listed below are the questions to our virtual Tech Pub Quiz #2 event. We'll continue hosting regular tech quizzes starting in January. For 2021 though, this is our final quiz. Big thanks to everyone who participated! Congratulations again to Josh, Alberto, and Tom for their strong team performance.

    • Engineering
    an imageJackson Gabbard
  14. an image

    Let's kill the coding interview
    Coding Interviews

    Whiteboard coding interviews are fantastic if you want to see a trustworthy, extemporaneous performance of technical problem solving and have a candidate who can show their skills this way. But what about when a great candidate can’t show their skills this way?

    • Engineering
    an imageJackson Gabbard
  15. an image

    Tech Pub Quiz #1

    Yesterday, we did our first ever tech focused pub quiz. For folks who are curious, here are the questions from our first run! To join future quizzes, shoot me an email jack [ at ] cord [dot] com.

    • Engineering
    an imageJackson Gabbard
  16. an image

    Multiplexing Websockets with Apollo

    Real-time collaboration demands real-time infrastructure. Doing web-based, real-time interactions efficiently is a hard problem, but we've found a solution that reduces the number of open connections by a factor of 10 or more. TL;DR: We're multiplexing many tabs' network interactions via a single persist websocket.

    • Engineering
    Andrei Gheorghe
  17. an image

    Enabling developer velocity

    Our philosophy is simple: hire smart people, help them move very fast, and good things come as a result.

    • Engineering
    an imageJackson Gabbard
  18. an image

    Part 2
    Server side tech picks

    This is the second part of a three part series about choosing a technology stack for a startup in the modern (at least as of the time of this writing) world.

    • Engineering
    an imageJackson Gabbard
  19. an image

    Part 1
    Client side tech picks

    We started Cord in 2020 in the middle of a pandemic. Our mission is building absolutely killer real-time and asynchronous collaboration features that work with any existing SaaS tools. This idea sounds simple enough, but when you dig into what’s required to deliver this, you start to see a lot of unique constraints starting to emerge, which lead us to some very specific technical choices. This post breaks down our choices for the client side of our tech stack. TL;DR: If you just want to know what tech stack we’re running here’s a quick run down. For more detail, see below. We’ve chosen TypeScript for both server and client; modern React with Hooks for the client UIs; GraphQL for the client-server interaction; Apollo on the client and server using WebSockets; React-JSS for managing styles; Webpack + Babel for transpilation.

    • Engineering
    an imageJackson Gabbard