Tools

This tools list is by no means a best practices guide as it is highly opinionated based on what our team uses internally to develop Yack Connectors. We’re sharing these tools in the spirit of fostering more meaningful development collaboration. This list is expected to grow and be refined overtime from the feedback we garner from the Yack Developer Community.

“Technology is nothing. What’s important is that you have a faith in people, that they’re basically good and smart, and if you give them tools, they’ll do wonderful things with them.” - Steve Jobs

Handling Large JSON Objects

It’s very common when developing Yack Connectors to be dealing with very large, sometimes deeply nested, JSON objects returned from Axios request responses. Combing through this data to find the correct combination of object properties is tedious without the right tools. There are lots of JSON viewer and beautifier tools available on the web, but switching context between your code editor to a stark webpage can be cumbersome. CodeBeautify is our go-to website based beautifier as it allows for multiple ways to view and search deeply nested data. However, CodeBeautify is not the best for copying deeply nested data paths - a major component in the Yack Connector development workflow. This led us to search for a VSCode extension, but found that we needed three separate extensions to achieve everything we were looking for - fine with us.

Json Editor
This extension enables viewing JSON data in a collapsible tree interface and allows for complex sorting as well as the ability to query the data using JMESPath queries that make it effortless to test to ensure you’re selecting the proper data.
JSON Helper
Finding a property’s path, quickly determining all of the property’s children values data types, and copying the path is as simple as mousing over the property. The only downside is you can only copy the path using bracket notation which is why we’ve added the next extension to this list.
copy-json-path simply copies the dot notation json path of wherever your cursor is to the clipboard.

Proxy Request Debugging

As you’re building out your integrations proxying the requests being made is useful to debugging issues with endpoints, cookies, headers, and returned response data. Allowing the app to proxy requests is available via Yack Settings -> Plugin Proxy Configuration.

Enable Proxy

Our recommended proxy provider is Portswigger Burp Suite Community edition. Burp will allow easy intercepting, replay, comparing, and debugging of any requests made to external sources. Burp is ideal for debugging issues related to cookies, authentication, endpoints, and returned response data.

Getting Started With Burp Proxy

ℹ Ensure that the Host and Port matches the proxy you’ve created in Burp.

ℹ Note: Intercept will be enabled by default which stops requests midway. You’ll need to disable it for the response data to be populated in app.

Saving Request Libraries

At some point you may want to store a set of the request endpoints you’re using for your Yack Connector so that you can share and collaborate with other developers on them. Postman is an excellent tool for collaborating around APIs and provides a more user-friendly interface for viewing response data than Burp. Both tools have the ability to proxy requests but each is better than the other at certain things so we recommend having both on hand.

Code Formatting

Prettier Auto-formats code upon saving and adds missing ; to end of line which saves time and ensures consistency.

Cherrio Playground

DO THIS https://cheerio-playground.herokuapp.com/