Trackingplan

trackingplan

Startups of The Year 2023 Winners: Europe

Stef Olafsdottir, Avo’s CEO, speaks about developer productivity at DevRelCon Earth 2020. For those who don’t know, DevRelCon is an event series for developer relations and experience for developers by developers. Normally hosted in London, San Francisco and Tokyo, Covid-19 made 2020 a global affair with all events hosted online. We at Avo are on a mission making sure product teams aren’t constantly forced to choose between product delivery speed and data quality. We provide an easy-to-use interface to define and maintain your tracking plan (as in your taxonomy, data plan, event schema). You could say we’re in the business of efficiency, not just for developers but for product managers, data scientists, and everyone else working with developers on shipping products. Maura Church, Director of Data Science, Patreon “Instrumentation used to take 1-4 days for every feature release and now takes 30-120 minutes.” – It sure is heartwarming and wonderful to hear feedback like this, and we take their word for it, or we could do what’s in our DNA as data scientists and engineers: measure it. could Keep reading to learn about our journey in taking a gut feeling, to qualitative customer testimonials, to learning how we now measure developer productivity through their own product measurements. Measuring Developer Productivity Through Avo's Own Product Measurements Stef Olafsdottir, CEO and Co-Founder of Avo, is a mathematician and philosopher, turned genetics researcher, turned data scientist, turned founder. She was the 1st data person and Head of Data Science at QuizUp, a mobile game with 100m users, where she built and led the data science division and culture. This included pioneering company-wide ways to prioritize product innovation. At QuizUp they built a culture where people had the tools, data literacy, and data reliability to ask and answer the right questions. After QuizUp, she and a couple of friends started a company. Only 5 months in, they shipped a product update based on incorrect data. It was a frustrating misstep that helped her realize the importance of the tools and infrastructure they built at QuizUp to keep up data reliability. Furthermore, they wouldn’t afford taking the time to build the tools internally again. They would have to choose between data quality and velocity - for every single product release. Before Avo, teams have been constantly forced to choose between and product delivery speed reliable insights. After a conversation with several of their colleagues at companies like Twitch and Spotify, they learned that many had built the same internal tools to address this problem of inconsistent event analytics. Look familiar? Yes, we can’t stand it either. ‍ So they decided to build Avo to solve this problem once and for all. Using Avo to ensure the schema is always correct, means graphs displayed in tools like Amplitude and Mixpanel are accurate. This means product managers and data scientists can trust the data accuracy and provides immense value in how quickly product teams are able to ship analytics code, without bugs. This increased efficiency is what allows product teams using Avo to ship quickly without sacrificing data quality. Qualitative Learning: Why Our Customers Like Using Avo Looking at this qualitative feedback from our users reveals a clear theme. Everything is just a lot quicker. We’re not talking shaving off a few minutes. It’s an order of magnitude in company cost. Not only is implementing event analytics taking a lot less time, the quality is also vastly improved. Even companies like Rappi, who highly value analytics, and already have great insights in place, are spotting missing properties and other data issues that Avo is able to highlight, making it a lot easier to scope out what needs to happen next. Two themes are clear: 1. Operational efficiency 2. Increased data quality and reliability The question is then, how do we take this incredible feedback and have it tell this story of efficiency not just in semantics, but in cold hard data? In other words how do we measure reliable operational efficiency, quantitatively? How does Avo measure “Operational Efficiency” quantitatively? We looked at one of our most loved features: a branched workflow for your tracking plan. It’s like GitHub’s branched workflow for code. As we care about operational efficiency, the time to completion matters. That’s why we started measuring the turnaround time of completing the implementation of a tracking plan change, defined as branches being opened and merged within one day. “Branch Opened” -> “Branch Merged” After conversations with our customers we soon realized that one of our opportunities to increase the turnaround speed of a branch was making collaboration even smoother.They were desire-pathing the process by creating internal Slack channels and assigning collaborators there (this even included our own team!). We shipped and updated our notifications based on what we heard our customers were using Slack for. The collaborative work ensures data quality and reliability as any relevant stakeholder: a data scientist, a product manager, a developer can be brought into the right branch with a single comment, for a peer review. Branch Collaborators To measure the success of the feature release, we looked at the turnaround time of collaborative branches, where at least least one comment was made. “Branch Opened” -> “Branch Merged” with > 0 comments We already saw a 70% increase in this metric in the first week after release. And that’s how we measure developer productivity of our customers. Watch Stef's talk in full . here To Ship Tracking Faster Than Ever Our mission is to enable product teams to ship quickly without sacrificing data quality. It’s critical we can measure developer productivity through our own product measurements, not just based on our guts or a nice comment from a customer, but to have that qualitative data inform a measurable impact in data. Previously published at https://www.avo.app/blog/avo-ceo-talks-developer-productivity

Avo CEO At DevRelCon Earth 2020: How To Improve Developer Productivity With These Cool Tools

Top 5 Time Tracking Tools for Remote Workers: 2020 Edition

HIRE WEB DEVELOPERS [FOR DESIGN AGENCIES]

For those just started with Deno, and those who work in the frontend, you might be having the thought, "Can I build something as complex as a NextJS or Create-React-App (CRA) application using Deno?" If you need help with anything JS, feel free to reach out through (a video-chat platform) or Superpeer Twitter. I was thinking the same as I wanted to try Deno because of its better shareability  resulting from the ability of running an application directly from a URL (The Deno compiler supports running JS/TS files from a URL and it also supports imports from a URL, resulting in extreme portability.) I looked if any existing solutions, articles were there online, but only found , which built an SSR'ed React application using some complex techniques, nothing simple like getting started with NextJS or CRA. this article So, through my searches online, I ended up at , which has one of the coolest landing page animations ever. AlephJS Aleph is a Zero-Config, Typescript driven React framework, just like NextJS, the only drawback being that Aleph is still very much in Alpha. So to get a true Next-like React experience inside of Deno, let's get started with AlephJS. It has much of the same conventions, such as: A directory for creating URL routes /pages Direct support in pages .js, .jsx, .ts, .tsx A directory for serving static assets like video, audio, or image files /public A folder for serving Javascript or Typescript files as serverless APIS. /pages/api Getting Started To be able to use AlephJS, you need Deno installed as a pre-requisite. You can see how to install and get started with Deno in my . previous article here For getting started with Aleph, you need to first install the Aleph CLI by running deno install -A -f -n aleph https://deno.land/x/aleph@v0.3.0-alpha.1/cli.ts After installation, you can run aleph -h to check whether it got installed correctly. Because of the portability of Deno, you can replace aleph with deno run -A [<https://deno.land/x/aleph@v0.3.0-alpha.1/cli.ts>](<https://deno.land/x/aleph@v0.3.0-alpha.1/cli.ts>) start $app_URI for any command and it will be able to run the Aleph program without having the CLI locally installed. To create a starter app, run: aleph init hello hello cd And start the app in development mode using aleph dev to start a server at port 8080. To start the app in production mode, you have to first build the app and then run the built app. This is done through the commands: aleph build aleph start # build your app # runs built app After you initialise your Aleph app, you will find the root component being defined at pages/index.tsx. It's a normal React component. Experiment with it to see how Aleph works. You can add more routes to your application by creating more .jsx or .tsx files inside the pages folder. Read more on routing . here Importing Libraries I've written about Deno previously on , where I demoed Deno basics, including URL imports. Since Aleph is a Deno framework, all imports happen in the "Deno way". freeCodeCamp There are 2 kinds of libraries which you can import in a Deno application. Importing Deno-Native Libraries: These libraries were either built for Deno, or ported over from npm to support Deno usage. Importing from NPM: Any dev who has worked with JS recently knows about npm. If you don't, npm (which used to stand for node package manager) is the standard repository for all Javascript libraries. Luckily, Deno has limited support for npm libraries. Using tools like or skypack.dev, users can import npm libraries into Deno. esm.sh 1. Importing Deno-Native Libraries The way to import Deno-Native libraries in your application is by importing their URL directly. You can find a list of Deno libraries here: deno.land/x To test this out, let’s import this , and calling a date format function in a React page. Create a file date-import.tsx in the pages folder of your app. Inside the file, write the following code: standard Deno date formatting library React ; { format } ; { ;
} // react is a compulsoy import in Aleph import from "react" // import the format function from its URL import from "https://deno.land/std@0.88.0/datetime/mod.ts" // capitalize the function name so it's recognized as a React component export default ( ) function DateImport // Here, directly calling the format function works as expected. return Hello all! Today is: {format(new Date(), "dd-MM-yyyy")} < > section </ > section To see the output of this file, go to , or its equivalent for your server. You should see the page displaying the day's date. localhost:8080/date-import 2. Importing from NPM To import an npm library, you can also import directly from a URL, but in this case there's a slight change. Since we talked about and skypack.dev, let's try to use them in action. In this case, let's try to use the library in our project. esm.sh dayjs Note: Not all npm libraries work correctly in Deno because they may be relying on Node-specific functions. To import a library in , you post-pend the library's package name to the URL. In this case to import dayjs, we would be importing . This also works for any CSS files you might want to import from a library. esm.sh https://esm.sh/dayjs Now, let's create a file in pages called dayjs-import.tsx. So, the code in our page will look like: React ; dayjs ; { ;
} // react is a compulsoy import in Aleph import from "react" // import the dayjs npm library using esm.sh import from "https://esm.sh/dayjs" // capitalize the function name so it's recognized as a React component export default ( ) function DateImport // call the dayjs function directly to display today's date return Hello all! Today is: {dayjs().format("DD-MM-YYYY")} < > section </ > section To see the output of this file, go to , or its equivalent for your server. You should see the page displaying the day's date. localhost:8080/dayjs-import There's one important thing before we go ahead though, how do you handle like importing useState, useEffect, etc? Luckily, the devs of aleph have already written an example for us. Go into ./lib/useCounter.ts and you'll find the code for the custom hook being used for the counter in the home page. React imports Since I want to focus the article on Aleph and React itself, to check out all the different ways you can import a CSS file in Aleph, check out . this page from the official documentation Building a Sample App Now, let's get into the nitty gritty and try to build a React app in Aleph ourselves. We're going to be building "Is It Down?", a sample app I had made using an existing website checking API. This app will allow us to check whether a website is currently up or down. Codesandbox link: https://codesandbox.io/s/awesome-firefly-5dofg Building this application will show how to use the State hook, the Effect hook and making API calls inside of Aleph. Create a new file called web-checker.tsx in your pages folder. Let's start by just adding the UI elements first. We'll display an h1 element with the title, an h2 element linking to the API and a form element to take user input. This is a non-interactive page just displaying the elements. React ; { ( <h1>Is it Down?</h1> <h2>
        Go{" "}
        <a
          href="https://rapidapi.com/jakash1997/api/website-data-gathering-and-update-tracking"
          target="_blank"
        >
          here
        </a>{" "}
        to get an API key
      </h2> <form
        onSubmit={(e) => {
          e.preventDefault();
        }}
      >
        <input
          type="text"
        />
        <button type="submit">Submit</button>
      </form>
    </div> import from "react" export default ( ) function App return < = " ", " " }}> div style {{ fontFamily: sans-serif textAlign: center );
} Next, to capture the state of the input field, and to also capture the response of the API call we will have to make, let's introduce state. React, { useState } ; { [siteURL, setUrl] = useState( ); [response, setResponse] = useState( );
... // import useState from react import from "react" export default ( ) function App // define both state variables const "" const undefined Now, we'll use this state inside our input element, so it can react to it. ...
<input
  value={siteURL}
  onChange={(e) => setUrl(e.target.value)}
  type= />
... "text" We'll also add some code to display a response, when it's returned from the API response ...
	< > < /form>
	
	<br / {JSON.stringify(response, null, 2)} < > code </ > code /div>
... Now, to get started with integrating the API, let's try to form the request correctly. In this case, the API is a simple GET call, so we only need to pass a param and an API key. Firstly, go here, and generate an API key: . Find the API key like shown in the screenshot and keep it somewhere safe. https://rapidapi.com/jakash1997/api/website-data-gathering-and-update-tracking Next, let's create a seperate function submitData which will generate the required request data. We will be using the axios library to make our GET call, so we will be forming its options object. ...
const [response, setResponse] = useState( ); submitData = {
  setResponse( ); options = { params: { siteURL }, headers: { : , : ,
    },
  }; .log( , options);
}; (
... undefined const ( ) => siteURL "Loading..." const // passing siteURL here through object shorthand // passing the required headers here "x-rapidapi-key" "YOUR_API_KEY" "x-rapidapi-host" "website-data-gathering-and-update-tracking.p.rapidapi.com" // print options here console "options" return And we add this to the onSubmit function in our form. onSubmit={(e) => {
  e.preventDefault();
  submitData(siteURL);
}} Now, whenever you press the Submit button, you will see the options we generated in the console. If you see the options object in the console, you're doing good so far! Next we just have a simple step of importing the axios library using http://esm.sh and using it to make an API call. Import axios after the react import like: React, { useState } ; axios ;

... import from "react" import from "https://esm.sh/axios" And use it in the submitData function as: ...
	axios
    .get( ,
      options
    )
    .then( {
      setResponse(response.data); .log(response.data);
    })
    .catch( { .error(error);
    });
};
... "https://website-data-gathering-and-update-tracking.p.rapidapi.com/sitecheck" ( ) function response console ( ) function error console And that's it! Try submitting the form again and this time, you'll see the result both on screen, and also in the console. So that has been Aleph, a really interesting tool which allows you to bring your existing React knowledge, and mix it with the forward-looking nature and security of . deno.land If you liked this tutorial, you can follow me on Twitter . Feel free to reach out through (a video-chat platform) . @thewritingdev Superpeer Important Links https://dev.to/adriantwarog/react-deno-server-side-rendering-with-deno-ssr-4438 https://alephjs.org/ https://www.freecodecamp.org/news/build-a-url-shortener-in-deno/ https://alephjs.org/docs/basic-features/routing https://alephjs.org/docs/basic-features/built-in-css-support http://deno.land/x https://esm.sh https://codesandbox.io/s/awesome-firefly-5dofg https://rapidapi.com/jakash1997/api/website-data-gathering-and-update-tracking

Stories, News & Mentions about TRACKINGPLAN

Trackingplan’s Stories on HackerNoon