# Bleeding Edge - Medium We make Clue. - Medium This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Introducing OkSSE -- Kotlin Multiplatform SSE library DevFeed: [Introducing OkSSE -- Kotlin Multiplatform SSE library]() Original publisher: [Read original article]() Author: Akshay Chordiya Published: 2020-08-31T11:08:59Z Content type: tutorial Language: en Sources: [Bleeding Edge - Medium]() Topics: [Kotlin Multiplatform](), [Library](), [Kotlin](), [HTTP]() Tags: [android](), [kotlin](), [kotlin-multiplatform](), [library](), [multiplatform](), [server-sent-events](), [sse]() ### AI overview OkSSE is an open-source Kotlin Multiplatform client library for Server-Sent Events (SSE). The article explains why Clue built it for a backend-driven UI, describes SSE's unidirectional HTTP data stream, and outlines the library's intended use. ### Source excerpt Introducing OkSSE -- Kotlin Multiplatform SSE librarySharing is caring -- Illustration by Marta Pucci At Clue, we always want to keep finding new solutions as challenges arise. Recently, we needed to build a dynamic UI driven via backend which motivated the entire team πŸ’ͺ🏻 and eventually led to the development of OkSSE library. And today, I'm super excited πŸŽ‰ to share OkSSE -- an open source Server sent events client library made with Kotlin multiplatform and Coroutine for the tech community to use and build their amazing use-cases. OkSSE is a client for Server Sent events protocol written in Kotlin Multiplatform. The implementation is written according to W3C Recommendation 03 February 2015 specification πŸ“ OkSSE is an SSE client that's modern, efficient and provides an easy-to-use API. The aim of this article is to: walk you through our journey πŸ›£ of why we set out to use SSE protocol, explain why we decided to build our own library, and share how you can use the library for your use-cases Backstory We started with an idea πŸ’‘to have a backend driven UI and build an infrastructure for it. That's where we decided to use SSE [Server Sent Events] protocol to talk with the mobile clients [Android & iOS] in order to continuously stream 🌊 the data from the backend to render the UI on clients. Check out the talk below if you are interested in learning more about how we used SSE for Backend Driven UI: https://medium.com/media/3fb46f5e9db8ea9e4fc9a834c19e2d03/hrefWhat's SSE?Server-sent events (SSE) is a server push technology enabling a browser to receive automatic updates from a server via HTTP connection -- Wikipedia In a nutshell πŸ₯œ, SSE is built on top of well known HTTP and establishes a unidirectional connection from server -> client. The server continuously pushes data downstream ⬇, which clients can stream until the app or tab [for web] is closed. Reinvent the wheel 🎑 With backend driven UI in mind, both of our client teams (i.e Android and iOS) started searching for the bes ## Build complex screens faster on Android with Epoxy DevFeed: [Build complex screens faster on Android with Epoxy]() Original publisher: [Read original article]() Author: Akshay Chordiya Published: 2019-12-30T13:31:50Z Content type: tutorial Language: en Sources: [Bleeding Edge - Medium]() Topics: [Android](), [Library](), [ui](), [implementation]() Tags: [android](), [architecture](), [class](), [component](), [components](), [declarative](), [epoxy](), [how-to](), [kotlin](), [layout](), [library](), [mvi](), [mvvm](), [performance](), [recyclerview](), [ui](), [view]() ### AI overview This tutorial explains how Clue adopted Airbnb's Epoxy library with RecyclerView to build complex Android screens. It covers Epoxy models, adapters and controllers, declarative layouts, and a unidirectional data-flow pattern related to MVVM and MVI. ### Source excerpt Rowing the boat -- Illustration by Marta PucciBuild complex screens faster on Android⚑ -- Our journey with Epoxy RecyclerView is such an important UI component on Android. But using it can get complex and error prone--especially when dealing with different view types and pagination. Moreover, it's hard when working on the same screen within the team. In this article, I'm going to share basics of Epoxy and an overview of the problems it helped us solve. Here's our journey of how we adopted Epoxy at Clue to build our UIs faster in parallel within the team.⚑ Backstory It all started with our users, who wanted a more understandable and interactive view of their historical tracking data. ✨(For Clue users, this is generally their menstrual cycles & symptoms.) So our awesome design team came up with this beautiful intuitive design 😍: Enhanced Analysis screen in Clue app I know what you're thinking already: that's a lot of view types. And we were definitely concerned about the performance and responsiveness of the screen. That's when we decided to see if we could use any third-party library to help us with our goal. Epoxy Epoxy is a library from Airbnb which takes a declarative / composable approach to build the UI--typically, a list. It uses RecyclerView under the hood It simplifies creation of static and dynamic layouts Each item in the list is associated to an epoxy model which defines the item's layout and manages binding the data and releasing the view's resources when it's recycled. Item <-> Epoxy Model <-> Layout resource The order of the items shown on the UI is based on how you add the model to the adapter or controller. Philosophy Epoxy encourages a usage pattern similar to the popular MVVM and MVI architecture where the data flows in one direction (UDF - uni-directional data flow). Flow with Epoxy The data forms the state of the UI then goes to EpoxyModel and to the views on the RecyclerView . The Epoxy Model behaves like a ViewModel and provides the interface betwe ## Creating interactive article content with React and Contentful DevFeed: [Creating interactive article content with React and Contentful]() Original publisher: [Read original article]() Author: Jesse Pinho Published: 2019-06-26T09:37:42Z Content type: tutorial Language: en Sources: [Bleeding Edge - Medium]() Topics: [Contentful](), [React](), [Markdown](), [HTML]() Tags: [contentful](), [creative-coding](), [html](), [interactive-content](), [markdown](), [online-publishing](), [react]() ### AI overview Clue describes adding interactive content to Markdown-based articles in Contentful with custom React components. It discusses an initial shortcode approach using HTML comments and identifies its brittleness and hard-coded text as limitations. ### Source excerpt Coding for the future of online publishingIllustration by Marta Pucci Note: this article was a joint effort between Clue and Contentful. You can find the original version on Contentful's blog here. You can also watch Jesse's talk that inspired this post. A year ago, we relaunched the Clue website as an encyclopedia for women and people with cycles. Clue's first product is a period tracker app, which is used by over 10 million people to track their symptoms and learn about patterns in their reproductive health. With the website relaunch, we put all of our content together in one organized place where people could more easily get the information they want. Here's an example of some of our encyclopedic content. This is one of our most popular articles, which explains what the significance of period blood color is. (Spoiler alert: it's not that significant.) We have a ton of articles like these. Lately, we've been thinking that our readers might be better served by interactive content that does more showing and less telling. Another of our top 10 most popular articles is titled, "What is the clitoris?". The article goes into detail about the anatomical structure of the clitoris, but the entire article was just text. We thought we could do better and asked ourselves: what if, as you scroll through and read about the different parts of the clitoris, an illustration would highlight the parts being discussed so you could really get what you're reading about? In our Contentful setup, we have a content type called "Article" with a Markdown body field. This field contains a bunch of text in the clitoris article, but we wanted to figure out how to get a plain text field to also include interactivity. Our first attempt at this was to extend Markdown's syntax using the concept of "shortcodes." Basically, this means inserting an HTML comment in the middle of the article body, with special syntax inside of it that refers to an interactive piece. Our Markdown renderer would pick up ## Clue's Erasmus Exchange DevFeed: [Clue's Erasmus Exchange]() Original publisher: [Read original article]() Author: Melissa Yung Published: 2019-05-13T14:51:39Z Content type: opinion Language: en Sources: [Bleeding Edge - Medium]() Topics: [Development](), [Back end](), [Front end](), [Mobile](), [Web]() Tags: [collaboration](), [creativity](), [cross-functional-teams](), [decision-making](), [dev](), [engineering](), [engineering-culture](), [knowledge-sharing](), [startup](), [team](), [teams]() ### AI overview Clue describes an Erasmus Exchange program that lets engineers temporarily work with different engineering chapters to learn technologies and understand other teams. Participants join the host chapter's syncs, assist with planning and design, and contribute code when applicable, spending about two days per month there for two months. ### Source excerpt We set up a "study abroad" program for our engineers. Here's how it went.Illustration by Marta Pucci Our Erasmus Exchange at Clue was inspired from the European Union's Erasmus Program. You might have heard about it or been lucky to have taken part in it. It is a program that allows students to study in different countries across Europe to learn about their host country, and encourages cultural exchange. Our Erasmus Exchange, in a similar spirit, lets engineers cross their regular chapter borders to learn about different technologies and better understand other chapters. This is in line with our values of sharing, learning and collaborating. Chapters and Cross-Functional Teams At Clue, we work in engineering chapters and cross-functional feature teams. Last year, we concentrated on developing our chapters. We are now focused on improving our cross-functional teams. Chapters: Specific domain teams, such as the Android chapter, backend chapter, iOS chapter, QA chapter, and web chapter. Cross-Functional Teams: Feature teams made up of engineers from multiple chapters, as well as a designer and a product owner. As part of the Erasmus Exchange, a mobile engineer might choose to visit the backend chapter. A dev ops might be curious about QA and make a visit. Or a front end engineer might decide to experience the Android world. The idea is that the Erasmus visitor: Takes part in the host chapter's weekly syncs Assists in feature planning and design Contributes to the code base if applicable The Erasmus Exchange takes the engineer away from their regular chapter for about two days per month for a total of two months. The benefits of an engineer exchange program For one, the Erasmus Exchange fosters collaboration and encourages knowledge sharing to improve the decision making process. Adding a fresh point of view can challenge assumptions and spark creativity when it comes to finding new approaches to technical problems. All this creates a more cohesive cross-functional team ## Architecting an iOS networking layer: Part 2 DevFeed: [Architecting an iOS networking layer: Part 2]() Original publisher: [Read original article]() Author: Melissa Yung Published: 2019-04-01T10:05:31Z Content type: tutorial Language: en Sources: [Bleeding Edge - Medium]() Topics: [iOS](), [networking](), [REST API](), [unit test]() Tags: [clean-code](), [ios](), [networking](), [rest-api](), [software-development](), [swift](), [unit-tests]() ### AI overview Part 2 demonstrates an iOS networking layer in a sample app. It shows how a view uses request configuration, an HTTP client, a request object, and event listeners to fetch forum posts through a REST API, and explains unit testing with mocks. ### Source excerpt A sample project including unit tests to demo our clean architectureIllustration by Marta Pucci Welcome to Part 2 of this two part series, where we go through the networking layer we use in our iOS app at Clue. As a follow-up to Part 1, where we went through the main building blocks of our networking architecture, we would like to now show it in action in our demo app. This demo app consists of a simple view with a button that is used to fetch forum posts. Based on the success of the request, the UI is updated to reflect the number of fetched posts. We will use a fake online REST API https://jsonplaceholder.typicode.com/ to achieve this. The View For simplicity's sake, we will only focus on the bit that performs the network request i.e. fetchPosts. https://medium.com/media/62e814391f03e564236862388fcef9c2/href A. The view needs to keep a reference to the fetchPostsRequest instance to ensure that it doesn't get deallocated prematurely. B. The view puts together the required building blocks to make the service call i.e RequestConfiguration, HTTPClient, Request and RequestEventListenerFactory The Request Objecthttps://medium.com/media/11bdd42c97a15f6245aa97fe9ed64bd5/href A.1 and A.3 The request conforms to the HTTPClientDelegate protocol as we want to make a service call and handle its success or failure. A.1 and A.2 The request conforms to the RequestObserving protocol as we have interested listeners that want to be notified of the results once the service call is complete. This means that it has an eventListenerFactory which will provide a list of listeners. B. Both the required HTTPClient and the RequestEventListenerFactory are injected to the constructor to ensure testability. C. We need to set the request to be the delegate of the HTTPClient so that we can be notified when the service call returns. D. The only public interface is the actual call to perform the service call. It is public since this class lives in the networking layer module which is separate from ## Architecting an iOS networking layer: Part 1 DevFeed: [Architecting an iOS networking layer: Part 1]() Original publisher: [Read original article]() Author: Martin HΓΆller Published: 2019-04-01T10:01:29Z Content type: tutorial Language: en Sources: [Bleeding Edge - Medium]() Topics: [iOS](), [networking](), [Mocking](), [implementation](), [App](), [Protocol (disambiguation)]() Tags: [architecture](), [backend](), [clean-code](), [decoupling](), [interface](), [ios](), [mocking](), [networking](), [protocol](), [software-development](), [swift](), [test]() ### AI overview This tutorial explains how Clue redesigned its iOS app's networking layer from a singleton-based implementation into a more modular architecture. It describes the limitations of the old design and introduces HTTPClient, protocols, request classes, separation of concerns, and improved testability. ### Source excerpt Cleaner and more modular building blocksIllustration by Marta Pucci In this two part series, we will go through the networking layer we use in our iOS app at Clue. Part 1 covers how we moved our networking layer to a cleaner more modular architecture πŸ€“ Part 2 includes a demo project on how we use it to make our network requests πŸ₯³ Let's get started! Our iOS app makes use of a third-party library to handle the finer details of the networking requests to our server. Our interface to this library used to be a singleton class, through which all our service calls would be executed and handled. Whilst this worked and was "okay" for one or two service calls, it very quickly got out of control as our app grew and we needed something better! Let's see why this old implementation was so limiting and what we wanted to achieve with the new architecture. Limitations of the old implementation The singleton class had too many responsibilities. It needed to construct each service call with the endpoint, body and parameters as well as handle the success and failure of each call. It lacked separation of concerns between the networking and the business logic layer. It lacked testability as it required mocking of the backend and extensive test case setups. It was tightly coupled with a third party library, making it harder to replace if needed. Goals of the new architecture Move away from the singleton class anti-pattern. Instead of having a singleton class for all the requests, each request is a class of its own and builds up its networking stack. Improved testability. Increased decoupling between the networking and the business layer by separating the response handling from the network requests implementation. Easy to use interface to create a network request. Let's now go through the main building blocks of the new architecture. HTTPClient The HTTPClient class is responsible for performing the actual network request and conforms to the HTTPClientProviding protocol. We abstract this i ## How to Enforce a Responsive Aspect Ratio on HTML Elements with React and CSS DevFeed: [How to Enforce a Responsive Aspect Ratio on HTML Elements with React and CSS]() Original publisher: [Read original article]() Author: Jesse Pinho Published: 2018-11-15T16:15:40Z Content type: tutorial Language: en Sources: [Bleeding Edge - Medium]() Topics: [CSS](), [React](), [HTML](), [Web Development]() Tags: [css](), [html](), [react]() ### AI overview This tutorial explains how to create responsive aspect-ratio containers using CSS padding percentages, including a 16:9 example. It also addresses fitting embedded content such as YouTube iframes by using an inner wrapper and absolute positioning, with a React implementation discussed. ### Source excerpt Enforcing an aspect ratio on an HTML element in React and CSSIllustration by Marta Pucci Frequently, it's necessary to set an aspect ratio on an element (like a
element), so that it will maintain its shape while scaling to any size. For example, you may be displaying a YouTube video in an iframe, and you want to make sure it shows up in 16:9. This is relatively simple to accomplish due to a CSS quirk. Per w3.org, when you set the CSS padding for a box: The percentage is calculated with respect to the width of the generated box's containing block, even for 'padding-top' and 'padding-bottom'. That is, if you have a 200 pixel-wide element and you set its padding-bottom to 50%, the bottom padding will be 100 pixels--regardless of the element's height!ΒΉ We can take advantage of this fact to set an aspect ratio for an element, even as the window scales to any size. All we have to do is divide the height of our aspect ratio by its width, and then use that as the percentage for padding-bottom. For example, to enforce a 16:9 aspect ratio for an element, divide 9 by 16, which is 0.5625. Then, set the padding-bottom to 56.25%. Note that you also have to set the height to 0 to ensure that the padding constitutes the entirety of the element. Here's a full CSS class for a 16:9 container: .aspect-ratio--16x9 { width: 100%; height: 0; padding-bottom: 56.25%; }Working out the quirks One issue you might face here is that, while the 16:9 container takes up the right amount of space on the page, its height is set to 0. While this will work fine for displaying a background image cropped to a specific aspect ratio, it doesn't handle actual content well. Take the YouTube iframe from earlier: if you put an iframe into this container, it won't actually fit into the aspect ratio you've specified. By default, YouTube's embed code includes width and height attributes on the video player iframe, so it will stick out of your container element if it's too big. Meanwhile, if you style it with ## How we conduct user interviews and user tests at Clue: Part Two DevFeed: [How we conduct user interviews and user tests at Clue: Part Two]() Original publisher: [Read original article]() Author: Caro Hardy Published: 2018-05-11T13:26:29Z Content type: article Language: en Sources: [Bleeding Edge - Medium]() Topics: [App](), [data]() Tags: [insights](), [interviews](), [product-design](), [software-development](), [user-interviews](), [user-research](), [user-testing](), [ux]() ### AI overview This article explains how Clue conducts user interviews, including introductory questions, baseline questions about app usage, questions about competing alternatives, and project-specific research questions. ### Source excerpt To learn about our process, read Part One. Illustration by Marta PucciInterview sessions Once we have someone in the office, on the phone or on Google Hangouts, how do we carry out user interviews? Ideally, an interview will teach us one or more of the following things: Teach me something about people. Who are they? What's important to them? What's their story? Teach me something about how and why people use Clue. When do they starting thinking about it? What motivates them to look for something like it? Do they do research? Who do they ask? Teach me something about competing alternatives. What does Clue replace? How is it perceived against what they were doing before? How do people weigh up different options? The typical questions we ask I break the interview questions down into three categories. Introductory questions I'll start off with some super basic questions to get people warmed up. Some people find the experience a little weird at first, so this is an opportunity to get them used to the process. Questions: Tell me about yourself? What do you do for a living? How long have you lived in Berlin? The standards questions After the breaking the ice, I'll move onto some questions to get baseline insights from them. To give examples, they include questions such as: Which device do you use? How long are you using Clue? What do you use Clue for? What categories do you track in Clue? How often do you track? I'll ask questions about how they searched for such solutions: How did you hear about Clue? Do you currently use other female health apps? What for and why? Did you switch from another app to Clue? Which one? Why did you switch? And I'll ask questions about usage: Beside your period, do you track any other options? Which ones? Why? Have you entered anything into Clue today? When do you usually do it? At what time of the day? Where? (I want to know if they mostly do instant data entry or a posteriori tracking) Can you show me how you do it? (and I would about look w ## How we conduct user interviews and user tests at Clue: Part One DevFeed: [How we conduct user interviews and user tests at Clue: Part One]() Original publisher: [Read original article]() Author: Caro Hardy Published: 2018-05-11T13:25:25Z Content type: article Language: en Sources: [Bleeding Edge - Medium]() Topics: [User interface design](), [Testing](), [Usability](), [App]() Tags: [app](), [design](), [interviews](), [product-design](), [prototype](), [testing](), [tests](), [usability](), [user-interviews](), [user-research](), [user-testing](), [ux]() ### AI overview Clue explains its practical process for conducting user interviews and prototype tests throughout product design. The article describes blank-page interviews, feature research interviews, and prototype testing, with the approach shaped by the organization's stage and research goals. ### Source excerpt Illustration by Marta Pucci I find it fun to see exactly how other organizations handle certain design processes. It's the small the little details that I find interesting. So, I thought I'd lay out exactly how we do work with users for research and testing purposes at Clue. Clue is a female health tracking app based in Berlin. We're now at the stage of about 50 employees, and we've raised over $30 million from VC firms such as Union Square Ventures. More than 10 million people use Clue. The reason I give these details is that I think your organization's stage will have a big impact on your approach to user research and user testing. To give a quick example, we're not at the stage where we test a single flow with hundreds of users to get quantitative data on the usability. But we are well beyond the stage where offering free coffee in Starbucks in return for chatting to us for 10 minutes is enough for our research and testing processes. In this two-part article, I'm going to focus on the practical, step-by-step process we use for talking to users, week-in, week out. The design process Our design process at Clue focuses both on designing a product that is scientifically-valid -- our app lets people know when they can expect their period and other menstrual cycle symptoms and stages -- and responds to the needs of the people using it. That means that the two product designers at Clue work closely with scientific researchers and data scientists. This is how we make sure that the product meets rigorous scientific standards. We also talk to the users at pretty much every point across the design process. Here's how I'd break up the stages of talking to users: Blank page interviews Even when we don't have a particular feature idea in mind, we'll carry out some user interviews. At this point we're just looking for interesting problems to dig into that could be the basis of future feature ideas. Feature research interviews When we have a feature idea, we'll kick off a round of ## Screenshot testing with React and Storybook DevFeed: [Screenshot testing with React and Storybook]() Original publisher: [Read original article]() Author: Jesse Pinho Published: 2018-03-19T09:18:02Z Content type: tutorial Language: en Sources: [Bleeding Edge - Medium]() Topics: [screenshot-testing](), [Storybook](), [React](), [Testing](), [styled-components](), [Selenium]() Tags: [continuous-integration](), [react](), [screenshot-testing](), [selenium](), [storybook](), [styled-components](), [testing](), [visual-regression-testing]() ### AI overview The article explains why end-to-end UI tests can miss visual regressions and explores screenshot testing with React and Storybook to check component appearance across different states. ### Source excerpt Visual regression testing for fun, profit, and peace of mind Illustration by Marta Pucci A friend of mine recently related a scary story about the lack of automated visual regression testing where he works--a huge international tech firm that you've heard of and probably use. He'd added a CSS class to an element to hide it from the user. Unbeknownst to him, and despite using BEM-style naming for CSS classes, this class name was already being used for an important checkbox in the user settings screen of his company's web app. The result? Users could no longer change the setting represented by the checkbox, because it was invisible! I asked him why that hadn't been caught by automated tests. He explained that, although they did have end-to-end tests in place that went through the UI and tested its functionality, the tests didn't catch the bug. Selenium was still able to check the original checkbox via its selector, so its visibility had no effect on the outcome of the test. The only way this could have been caught is via visual regression testing -- or, as it is sometimes called, screenshot testing. πŸ’… Switching to styled-components I recalled this story recently while working on a sizable project at Clue: converting all of our "native" CSS to use styled-components. The new helloclue.com website consists of dozens of components. An article page, for example, contains at least ten different React components, all of which have accompanying CSS files. Converting all of this CSS to styled-components means there's an enormous risk of bugs exactly like the one my friend experienced. So before the project began, I investigated setting up screenshot testing for the site. πŸ“• Enter Storybook (Note: if you're already familiar with Storybook and @storybook/react, feel free to skip to the next section.) We use Storybook when developing simple presentational components. This way, we can test them in every possible state, without having to reproduce all the logic and so forth required t